JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Data Grid Change cell value based on other cell value

Viewing 14 posts - 16 through 29 (of 29 total)
  • Author
    Posts
  • #104580

    Hi,

    Can you please see the following example: https://codepen.io/svetoslavjqwidgets/pen/MWqqpKR

    In it, if there isn’t a template, a new one is set.
    If there is already a template, only the element is being modified.
    May you do the same thing without render or refresh?

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    #104586
    Peter
    Participant

    I will try to do the same thing, as it does what I need.

    About the multiple renderings, I’ll have to see if the poses an actual problem once I get some real data into the grid.

    #104587

    Hi,

    Sure, if you face any further difficulties, do not hesitate to contact us!

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    #104589
    Peter
    Participant

    I’m still having difficulties making this work.

    If I use the approach with creating a template (if it doesn’t exist) with DIVs and then setting textContent, then I get the font-awesome icon markup (<i>…</i>) as text in the field, which is not the desired result.

    If I use empty string ” as template (if no icon should be shown) and font-awesome icon markup if a icon should be shown, then it works the first time at least, going from no icon to an icon.
    But when the value is changed so there should be no icon again, then it doesn’t work – the icon stays.

    In the sample below ImageAvailable == false should show no icon in File, while ImageAvailable == true should show an icon in File.
    So what I’m trying to switch between is either ” or ‘<i class=”some-font-awesome-font”></i>’.

    `{
    label: ”, dataField: ‘File’, cellsVerticalAlign: ‘middle’, verticalAlign: ‘middle’, align: ‘center’, cellsAlign: ‘center’, width: 120, freeze: ‘far’,
    allowEdit: false, template: function (formatObject)
    {
    const data = formatObject.row.data;

    console.log(‘data.ImageAvailable: ‘ + data.ImageAvailable);

    if (!formatObject.template)
    {
    console.log(‘formatObject.template == null’);
    formatObject.template = ”;
    }

    if (data.ImageAvailable == false)
    {
    formatObject.template = ”;
    }
    else if (data.ImageAvailable == true)
    {
    formatObject.template = ‘<i class=”some-font-awesome-icon”></i>’;
    }
    }
    },
    {
    label: ”, dataField: ‘ImageAvailable’, width: 70, allowEdit: true, visible: true
    }`

    screenshot

    • This reply was modified 1 year, 4 months ago by Peter.
    • This reply was modified 1 year, 4 months ago by Peter.
    • This reply was modified 1 year, 4 months ago by Peter.
    • This reply was modified 1 year, 4 months ago by Peter.
    #104594

    Hi,

    If you are setting the icon with the <i> tag. You shouldn’t change the textContent property, but the innerHTML.
    The difference is that the textContent does not parse the HTML tags to elements.
    With the textContent you are setting the text of the element, but with the innerHTML you are setting the HTML content.

    Please see the demo below:

    Here is the modified example: https://codepen.io/svetoslavjqwidgets/pen/MWqqpKR

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    #104595
    Peter
    Participant

    Thank you! that fixed that issue.

    Then I have another grid where I’m trying to do the same (example from earlier) where the value to act on is either 0, 1 or > 1.

    The issue here though is, that at first when the grid is loaded the icons don’t show – but when any cell value is changed or even the grid is scrolled, all the icons appear, as if the column with the icons isn’t rendered initially.

    I even tried calling grid.render(); but it doesn’t help. The grid is loaded the same way at the previous described one.

    Actually, since all cells in the previous grid starts with ImageAvailable == false, the issue might be the same here – I wounld’t know because showing no icon is the default in this grid.

    • This reply was modified 1 year, 4 months ago by Peter.
    • This reply was modified 1 year, 4 months ago by Peter.
    #104600

    Hi,

    What is your code for the template function?

    Can you share it with us?

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    #104602
    Peter
    Participant

    Yes. This almost “works” – but the cells that should have icons from the start, don’t show their icon until I either scroll the grid, change window size or change the value of a cell – or similar change – then the icon appear right away as were they always there.

    {
    label: '', dataField: 'Attachments', cellsVerticalAlign: 'middle', cellsAlign: 'center', width: 50, freeze: 'far',
    allowEdit: false, template: function (formatObject)
    {
    const data = formatObject.row.data;
    
    if (!formatObject.template)
    {
    formatObject.template = '<div></div>';
    }
    
    if (data.attachment_count != null)
    {
    if (data.attachment_count < 1)
    {
    formatObject.template.innerHTML = '';
    }
    else if (data.attachment_count == 1)
    {
    formatObject.template.innerHTML = '<some fa icon A>';
    }
    else if (data.attachment_count > 1)
    {
    formatObject.template.innerHTML = '<some fa icon B>';
    }
    }
    else
    {
    formatObject.template.innerHTML = '';
    }
    }
    }
    • This reply was modified 1 year, 4 months ago by Peter.
    #104604

    Hi,

    This is happening because you initially set the template to an empty div element.
    You should have your conditionals initially also.
    The correct code is this below:

    const data = formatObject.row.data;
    if (!formatObject.template) {
        if (data.attachment_count != null) {
            if (data.attachment_count < 1) {
                formatObject.template = ‘<div></div>’;
            }
            else if (data.attachment_count == 1) {
                formatObject.template = ‘<div><some fa icon A></div>’;
          }
            else if (data.attachment_count > 1) {
                formatObject.template = ‘<div><some fa icon B></div>’;
            }
        }
        else {
            formatObject.template = ‘<div></div>’;
        }
    } else {
        if (data.attachment_count != null) {
            if (data.attachment_count < 1) {
                formatObject.template.innerHTML = ”;
            }
            else if (data.attachment_count == 1) {
                formatObject.template.innerHTML = ‘<some fa icon A>’;
            }
            else if (data.attachment_count > 1) {
                formatObject.template.innerHTML = ‘<some fa icon B>’;
            }
        }
        else {
            formatObject.template.innerHTML = ”;
        }
    }

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    #104607
    Peter
    Participant

    I’m only setting an empty div if there is no template object, just like your online demo showed.

    The conditions are checked just after this to determine what the content (innerHTML) of the div should be if any.

    There are no occasion where the conditions are not checked. In all and any case, the innerHTML is being set to either: ”, ‘<some fa icon A>’ or ‘<some fa icon B>’.

    The lines:

    if (!formatObject.template)
    {
        formatObject.template = '<div></div>';
    }

    Are not part of the conditions checks, they are standalone before any conditions are checked.

    As far as I can tell, the code does the exact same thing, with half the lines of code more or less, or am I missing something?

    • This reply was modified 1 year, 4 months ago by Peter.
    • This reply was modified 1 year, 4 months ago by Peter.
    • This reply was modified 1 year, 4 months ago by Peter.
    #104611

    Hi,

    You are setting only a string. The string is internally parsed to an element. The correct way is as my previous reply.
    You may see in this demo also: https://www.htmlelements.com/demos/grid/column-dynamic-template-with-components/

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    #104612
    Peter
    Participant

    There is something I’m missing I think. I have now added what I see to be redundant code lines to make it look like the sample, but it still doesn’t work.

    Isn’t the idea to do the following:

    Check if there is a template (a div) and if there isn’t one, then add it and set it’s content (innerHTML) to something: ”, ‘<_A_>’ or ‘<_B_>’.
    Or if there is one, just set it’s content (innerHTML) to something: ”, ‘<_A_>’ or ‘<_B_>’.

    This not understood correctly?

    • This reply was modified 1 year, 4 months ago by Peter.
    • This reply was modified 1 year, 4 months ago by Peter.
    #104615
    Peter
    Participant

    Hmm now it’s working it seems – I guess I need to take another close look at what I was doing, because I really couldn’t see why that code should produce a different result.

    • This reply was modified 1 year, 4 months ago by Peter.
    • This reply was modified 1 year, 4 months ago by Peter.
    #104618

    Hi,

    Your code did not work because when you assign a string to the template, the string is parsed to an element after the function.
    In other words, you were trying to set the innerHTML of a string.

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

Viewing 14 posts - 16 through 29 (of 29 total)
  • You must be logged in to reply to this topic.