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.
Unfortunately, activation email could not send to your email. Please try again.

Tree grid with dynamic background for the Row

Thread ID:

Created:

Updated:

Platform:

Replies:

123309 Mar 6,2016 01:12 PM Mar 7,2016 07:35 AM ASP.NET Web Forms 1
loading
Tags: TreeGrid
Jagadesh
Asked On March 6, 2016 01:12 PM


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 [Syncfusion]
Replied On March 7, 2016 07:35 AM

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: http://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.


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;