Template Expression used in CSS

[Ignacio Cobian]

Hi!

Im trying to use expressions ${...} inside column template to define some item background color dinamically but i don't know how i can achieve this.

Example:

<ejs-grid id="Grid" dataSource="Model" allowPaging="true" allowTextWrap="true">

    <e-grid-pagesettings pageSize="5"></e-grid-pagesettings>

    <e-grid-columns>

        <e-grid-column field="Code" headerText="Code" width="100"></e-grid-column>

        <e-grid-column field="Name" headerText="Name"></e-grid-column>

        <e-grid-column headerText="Status" template="#template" width="120"></e-grid-column>

    </e-grid-columns>

</ejs-grid>

<script id="template" type="text/x-template">

    <div class="badge" style="background-color:${BadgeColor}">${BadgeName}</div>

</script>

I can't use the expression with the style attribute. Maybe i am missing a escape character? Or it cannot be done this way?

Thank you so much!

[Shalini Maragathavel]

Hi Ignacio, 

Thanks for contacting Syncfusion support. 

Based on your query we suspect that you want to set the background color to the template column according to the cell value in the Grid. You can achieve your requirement using style property as demonstrated in the below code snippet,

index.cshtml 

 

<script id="template" type="text/x-template"> 

   

 

    <div class="template_checkbox"> 

        

        <div class="image" style="background-color: ${CustomerID}"> 

            ${CustomerID} 

        </div> 

    </div> 

 

</script> 

Screenshot




Please refer the below sample for your reference, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/filter_core-1300079692.zip 

In your code example we found that you have defined BadgeColor in the template, so please confirm the BadgeColor is a field which you have defined in the dataSource 

Please get back to us if you require any further assistance. 

   

Regards,   

Shalin M. 

[Ignacio Cobian]

Hi!

Yes, {BadgeColor} is a field defined in the dataSource.

I followed the sample as reference and everything is working now, i don't really know what was the problem at all but anyways..

Thank you so much for the help!

[Shalini Maragathavel]

Hi Ignacio, 

Thanks for your update.  

We are happy to hear that your issue has been resolved.  

Please get back to us if you need further assistance.  

Regards,  

Shalini M