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.

set different text color for different rows in treegrid

Thread ID:

Created:

Updated:

Platform:

Replies:

119919 Aug 13,2015 02:11 PM Aug 18,2015 12:43 AM ASP.NET MVC 5
loading
Tags: TreeGrid
Harry Zheng
Asked On August 13, 2015 02:11 PM

Hi, I have a treegrid to display hierarchical data. I'd like to set different text color for different level of data. For example, I have 3 level of data, I want to set text color for parent rows to red, children's text color to green and grandchildren's text color to blue.
How could I achieve that in treegrid with ASP.NET MVC?

Another question: Also in this grid, I have some cells are editable, how can I set different text color for those cells?
 
Thank you,

Harry

Mahalakshmi Karthikeyan [Syncfusion]
Replied On August 14, 2015 08:31 AM

Hi Harry,

Please refer the response below,

Query 1: I have a treegrid to display hierarchical data. I'd like to set different text color for different level of data. For example, I have 3 level of data, I want to set text color for parent rows to red, children's text color to green and grandchildren's text color to blue.

Solution: For your kind information, we can highlight the text of parent rows and children’s row using QueryCellInfo’ client side event with the ‘cellElement’ event argument . Please find the below code snippet for your reference

@(Html.EJ().TreeGrid("TreeGridContainer").

    //...

    .ClientSideEvents(eve => {

        //…

        eve.QueryCellInfo("querycellinfo");

        eve.BeginEdit("beginedit");

    })

    ) 

<script type = "text/javascript">

    function querycellinfo(args) {

        if (args.data.level == 0)

                $(args.cellElement).css({ "color": "red" });

            else if (args.data.level == 1)

                $(args.cellElement).css({ "color": "green" });

            else if (args.data.level == 2)

                $(args.cellElement).css({ "color": "blue" });

        }

    }

    </script>

Query 2: Another question: Also in this grid, I have some cells are editable, how can I set different text color for those cells?

Solution: For your kind information, we can make the non-editable cells as well we can highlight the editable cell to differentiate from others using the same “QueryCellInfo” client side event. Please refer the below code snippet for details,

@(Html.EJ().TreeGrid("TreeGridContainer").

    //…

    .ClientSideEvents(eve => {

        //…

        eve.QueryCellInfo("querycellinfo");

        eve.BeginEdit("beginedit");

    })

    ) 

<script type="text/javascript">

        function querycellinfo(args) {

            //High lighted the editable cell with gray color background.

            if (args.data.Name == "Child Task 1" && args.column.field == "Name")

                $(args.cellElement).css({

                    "background-color": "gray"

                });

        }

        //disable the editing permission for the cells which contains the text as “Child Task 1”

        function beginedit(args) {

            args.cancel = true;

            if (args.data.Name == "Child Task 1" && args.columnIndex == 1)

                args.cancel = false;

        }

    </script>

Here we have enabled the editing permission for the cells which contains the Task Name as “Child Task 1” using “BeginEdit ” client side event and cancelled for all other cells. And changed the color of that particular cells background to “gray” with the help of “QueryCellInfo” event.

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/forum/119919/ze/TreeGridSample-1014875566

lease let us know if you need further assistance on this.

Regards,

Mahalakshmi K.


Harry Zheng
Replied On August 14, 2015 10:56 AM

Hi Mahalakshmi,

Thank you for your solutions, which work well.

I have another related minor question. In my project, I have two buttons to control whether those cells are editable or not.  When I click button "Lock", those cells will not be editable, when I click button "Unlock", those cells become editable, and the text color is different between these two status.
All these are working fine, the only problem is after clicking the button ("Lock" or "Unlock"), the text color will not be changed automatically until I click expand/collapse button or reload whole page.
Is there any way to make the color update automatically? I tried treegrid refreshRow method, it certainly works. But all my editable cells are in two columns, so I wonder if there is a similar method to refresh entire columns.

Thank you,

Harry

Mahalakshmi Karthikeyan [Syncfusion]
Replied On August 17, 2015 08:26 AM

Hi Harry,

For your kind information, we can change the text color of the particular cells depends on its editable state using “QueryCellInfo” and “BeginEdit” client side events. Please refer the below code for details.

<button id="lock">Lock</button>

<button id="unlock">Unlock</button>

@(Html.EJ().TreeGrid("TreeGridContainer").

    //…

    ClientSideEvents(eve => {

    eve.Create("create");

    eve.QueryCellInfo("querycellinfo");

    eve.BeginEdit("beginedit");

  }).

)

<script type="text/javascript">

    var flag = null;


    function beginedit(args) {

        if (flag == true) {

            if (args.columnIndex == 2 || args.columnIndex == 3)

                args.cancel = true;

        }

    }


    function querycellinfo(args) {

        if (flag == true) {

            if (args.column.field == "StartDate" || args.column.field == "Duration")

                $(args.cellElement).css({

                    "color": "red"

                });

        } else if (flag == false) {

            if (args.column.field == "StartDate" || args.column.field == "Duration")

                $(args.cellElement).css({

                    "color": "black"

                });

        }

    }

    $("#lock").click(function () {

        flag = true;

        var treeObj = $("#TreeGridContainer").data("ejTreeGrid");

        treeObj.renderRecords();

    });

    $("#unlock").click(function () {

        flag = false;

        var treeObj = $("#TreeGridContainer").data("ejTreeGrid");

        treeObj.renderRecords();

    });

</script>

As we mentioned in the above code snippet we have enabled and disabled the editing permission for the columns “StartDate” and “EndDate” in the external button click event and changed the text color in the event “QueryCellInfo”. When lock button is clicked then text will transform into red color that denotes, editing was disabled. Then if we press unlock button, text will back to its form.

Also here renderRecords() method is used to re render the TreeGrid to made the changes to the content.

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

Sample: http://www.syncfusion.com/downloads/support/forum/119919/ze/EditableColumn1477962524

Please let us know if you need further assistance on this.

Regards,

Mahalakshmi K.


Harry Zheng
Replied On August 17, 2015 08:49 AM

Hi Mahalakshmi,

Thank you for your solution. It works very well!
Regards,

Harry

Mahalakshmi Karthikeyan [Syncfusion]
Replied On August 18, 2015 12:43 AM

Hi Harry,

Thanks for the update.

Please let us know if you need further assistance on this.

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.

;