Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #102224
    xyzzy
    Member

    I am looking to set the background-color of a cell on a row-by row basis.  I have the colour as #XXXXXX as the text value in the cell, what I want to do is set the background colour of the cell to this value.
    I have looked at templates and div smart-if (that together gives me cell level control) but I cannot seem to set the div background-color to the value.  I need something like below:
    <template id=”colourTemplate”>
    <div style=”width: 100%; height:100%;”>
    <div smart-if=”1 >= 1″>
    <div style=”padding: 4px; background-color: {{value}}; “></div>
    </div>
    </div>
    </template>
    If this cannot be resolved with a div is there something else I can inject in instead that will allow me to set the colour?

    #102226
    admin
    Keymaster

    Hi,
    That can be achieved by using templates for all columns. We do not have a row template in the Grid component.
    Best regards,
    Peter Stoev
    Smart UI Team
    https://www.htmlelements.com/

    #102227
    xyzzy
    Member

    Don’t need row templates.  I have tried using a column template but there doesn’t appear to be anyway to inject the {{value}} into the background-color attribute of the div – and that is what I need.  value has the format #FFFFFF
    This is fine if the background-color is fixed at compile time as per all of the examples:
    <div style=”padding: 4px; background-color: #AABBCC; “>{{value}}</div>
    I need to inject the {{value}} into the background-color (replacing the hard-coded #AABBCC).  This throws a compile error:
    <div style=”padding: 4px; background-color: {{value}}; “></div>
    If you believe this is possible then please post the code.
    I have tried attribute splatting but this only moves the problem into how do I inject the {{value}} into the function parameter.

    #102230
    admin
    Keymaster

    Hi,
    Unfortunately, your requirement is not supported with the current API of our DataGrid component. We will create a work item to add support for it in future versions.
    Best regards,
    Peter Stoev
    Smart UI Team
    https://www.htmlelements.com/

    #102240
    xyzzy
    Member

    Peter,
    Thanks for all your efforts resolving this, especially as this was all done over the weekend.
    <template id=”colourTemplate”>
    <div style=”width: 100%; height:100%;”>
    <!– Note: this shows a few designer errors but works–>
    <div style=”background:{{value}};“>&nbsp;</div>
    </div>
    </template>

    1. Set the background not the background-color;
    2. Set the div content to be &nbsp; as an empty div content doesn’t display anything.

    Again, thanks for the excellent support.
     

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.