We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Tree grid with dynamic background for the Row


i am using Tree grid  RowTemplateId="rowTemplateScript", where for one of the column. I need to set the dynamic background color.  Trying out the following, which is not working 
can guys please help to solve this. 

  <script id="rowTemplateScript" type="text/x-jsrender">
        <td class="border" style='height: 30px; background-color:{{:#data['StatusColor']}};;'>
                                <div style="font-size: 14px;"">


1 Reply

MK Mahalakshmi Karthikeyan Syncfusion Team March 7, 2016 12:35 PM UTC

Hi Jagadesh,

Thanks for contacting Syncfusion support.

We can achieve your requirement of coloring the cell background depends on the other column value with the help of “QueryCellInfo” client side event. There is no need of RowTemplate for this. Please refer the below code example for details.

<ej:TreeGrid ID="Treegrid" runat="server" QueryCellInfo="querycellinfo"




        <ej:TreeGridColumn HeaderText="StatusColor" Field="statusColor"/>

        <ej:TreeGridColumn HeaderText="Status" Field="status"/>               





       function querycellinfo(args) {

             if (args.column.field == "status")

                  $(args.cellElement).css({ "background": args.data.statusColor });



We have also prepared a sample based on this and you can find the sample under the following location.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeGridSample514764365

Note: We have removed bin and obj folder in the given sample for some security reasons, we must include Syncfusion.EJ and Syncfusion.EJ.Web dlls to render the TreeGrid control which is available in Essential studio installed location


Mahalakshmi K.

Live Chat Icon For mobile
Up arrow icon