set different text color for different rows in treegrid

[Harry Zheng]

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]

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]

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]

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]

Hi Mahalakshmi,

Thank you for your solution. It works very well!

Regards,

Harry

[Mahalakshmi Karthikeyan]

Hi Harry,

Thanks for the update.

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

Regards,

Mahalakshmi K.