Tree grid with dynamic background for the Row

[Jagadesh]

Hi,

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">

    <tr>

        <td class="border" style='height: 30px; background-color:{{:#data['StatusColor']}};;'>

                                <div style="font-size: 14px;"">

                                  {{:#data['Status']}}

                                </div>

                            </td>

</tr>

</script

Thanks 

Jagadesh 

[Mahalakshmi Karthikeyan]

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"

       //…

>

<Columns>     

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

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

</Columns>

//…

</ej:TreeGrid>

<script>

       function querycellinfo(args) {

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

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

             }

</script>

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

Regards,

Mahalakshmi K.