TreeGrid : get level of row

[Loic Roger]

Hello,

I am using the ASP.NET Core TreeGrid control. 

I would like to get the level of a row (i.e "0" for top parent level row, "1" for child, "2" for grandchild, etc..) captured in a hidden column (this will be used later for processing on server side). Since the TreeGrid will allow user edits, I need the field with the level value to be updated when the user "Indent" or "outdent" the selected row.

The documentation does refer to a "level" keyword that "specifies the hierarchy level of record" but it's not clear what object this is a property for. I could not find details in the API reference either.

Could you provide explanation or a code sample to achieve the above requirement ?

Thank you.

[Farveen Sulthana Thameeztheen Basha]

Hi Loic Roger,

Query#:- The documentation does refer to a "level" keyword that "specifies the hierarchy level of record" but it's not clear what object this is a property for. I could not find details in the API reference either.

As it was the reserved properties of the Data(not direct property of TreeGrid definition), we have not documented in the API reference.

Query#:- Since the TreeGrid will allow user edits, I need the field with the level value to be updated when the user "Indent" or "outdent" the selected row.

While performing Indent/Outdent action, ActionBegin(when args.requestType as indenting/outdenting) and ActionComplete event(requestType as indented/outdented) get triggers. In this event, you can get the level of the Indented data on args.data[0].level

Refer to the code below:-

 

@Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>

{

    col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

 

}).IdMapping("TaskId").ParentIdMapping("ParentId

.ActionBegin("begin").ActionComplete("complete").RowDataBound("rowDataBound").DataBound("dataBound").QueryCellInfo("queryCellInfo").PageSettings(p => p.PageSize(7)).TreeColumnIndex(1).AutoCheckHierarchy(true).Toolbar(new List<string>

    () { "Search","Indent","Outdent" }).SearchSettings(search =>

    {

        search.Fields(new string[] { "TaskName" });

 

    }).PageSettings(page => page.PageSize(2).PageSizeMode(Syncfusion.EJ2.TreeGrid.PageSizeMode.All)).Render()

 

 

<script>

    function queryCellInfo(args) {

               //get the level here of data here from args.data

    }

   

   

    function begin(args) {

        if (args.requestType == "indenting") {

                 var level = args.data[0].level       //get the level here of data here from args.data

        }

    }

    function complete(args) {

        if (args.requestType == "indented") {

                             //get the level here of data here from args.data

        }

    }

  </script>

API link:- https://ej2.syncfusion.com/documentation/api/treegrid/#actionbegin

https://ej2.syncfusion.com/documentation/api/treegrid/#actioncomplete

https://ej2.syncfusion.com/documentation/api/treegrid/#rowdatabound

Also you can determine the level of records on Initial rendering using RowDataBound or QueryCellInfo event of the TreeGrid.

Please get back to us if you need any further assistance.

Regards,

Farveen sulthana T

[Loic Roger]

Thanks Farveen for the quick and detailed answer !

That's exactly what I needed.

Your help is very much appreciated.

Thank you !

LR

[Farveen Sulthana Thameeztheen Basha]

Hi Loic Roger,

Thanks for your update. Please get back to us if you need any further assistance. We are happy to assist you.

Note:- If the above provided solution is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Farveen sulthana T

[Loic Roger]

Hello,

some feedback on your suggested answer:

1-  the following does not work since args.requestType is not a valid property when the action is "Indent" or "

"Outdent" :

   function begin(args) {
        if (args.requestType == "indenting") {
                 var level = args.data[0].level       //get the level here of data here from args.data
        }
    }
    function complete(args) {
        if (args.requestType == "indented") {
                             //get the level here of data here from args.data
        }
    }
​

I managed to get the Level column populated for Indent" or "Outdent" actions using the args.action ​​property instead:

  function actionBegin(args) {
        if (args.action == "indenting") {
            debugger;
            args.data[0].Level = args.data[0].level + 1;
        }
        if (args.action == "outdenting") {
            args.data[0].Level = args.data[0].level - 1;
        }
    }

2- When a new row is inserted in the treegrid, I could use the defaultValue parameter to set the Level column to 0 - but this does not cover the case when a new row is inserted below an existing child : in this case, the newly inserted row is automatically added as a child also and Level should be set to 1, not 0. 

How can I ensure the Level column is always populated with the correct hierarchical level for all cases ?

3- I send the treegrid data to a controller via Ajax. When I look at the data through the debugger (before transforming the data to JSON via JSON.stringify()), all columns for all rows have valid values, except for the column "Level" which is null for all rows (although some values are showing in the UI). What would be a possible explanation for this behavior ? Below is the code for this :

<script type="text/javascript">
        document.getElementById("submitBtn").addEventListener("click", function (args) {
            var grid = document.getElementById('TreeGrid').ej2_instances[0];
            var rowsDetails = grid.dataSource;
            debugger; // column "Level" is null
            ...
</script>

Below is code for column Level in treegrid:

<e-treegrid-column field="Level" type="number" visible="true"></e-treegrid-column>

[Farveen Sulthana Thameeztheen Basha]

Hi Loic Roger,

We are working on this reported query with high priority and get back to you by 12^th September 2022.

Regards,
Farveen sulthana T

[Farveen Sulthana Thameeztheen Basha]

Hi Loic Roger,

Sorry for the inconvenience.

We will provide you solution by 14^th September 2022. Until then we appreciate your patience.

Regards,
Farveen sulthana T

[Farveen Sulthana Thameeztheen Basha]

Hi Loic Roger,

Query#1:- I managed to get the Level column populated for Indent" or "Outdent" actions using the args.action ​​property instead:

We regret for the inconvenience caused.

As you said, you can get the Level of the column on ActionBegin event with args.action as “Indenting/Outdenting” and in ActionComplete event, you can get using args.requestType as Indented/Outdented.

Query#2:- I could use the defaultValue parameter to set the Level column to 0 - but this does not cover the case when a new row is inserted below an existing child. How can I ensure the Level column is always populated with the correct hierarchical level for all cases ?

By default, Level of the column will be automatically set when new row is Inserted based on the Hierarchy. You can get the level of the newly Inserted row using RowDataBound or QueryCellInfo event of the TreeGrid.

Screenshot:-

Screenshot:-

API link:- https://ej2.syncfusion.com/documentation/api/treegrid/#rowdatabound

You can check the level using the RowDataBound event with args.data.level.

Query#3:- What would be a possible explanation for this behavior ?

We couldn’t get the level of the records using dataSource property. You can get the level and other information of the record using getCurrentViewRecords method of the TreeGrid.

Refer to the API link:-

https://ej2.syncfusion.com/documentation/api/treegrid/#getcurrentviewrecords

Please get back to us if you need any further assistance.

Regards,
Farveen sulthana T

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.