BoldSignA modern eSignature application with affordable pricing. Sign up today for unlimited document usage!
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.
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.
Hi Harry,
Thanks for the update.
Please let us know if you need further assistance on this.
Regards,
Mahalakshmi K.