use treegrid to show hierarchical data

[Harry Zheng]

Hi, I am using treegrid to show hierarchical data. I have three levels of data. The first two level data show up correctly, but the third level(inner level) data do not show up in the grid at all. I check to make sure the data are populated in my model, since I can display all the data on web page using nested foreach loop.

Do you have any idea about this problem?

Thanks,

Harry

[Mahalakshmi Karthikeyan]

Hi Harry,

For your kind information, It is possible to render TreeGrid with any number of hierarchy levels , the below screen shot depicts a TreeGrid widget with multilevel hierarchy ,

We have also prepared a sample with multilevel hierarchies using nested ‘foreach’ loops and you can find the sample under the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/119567/ze/GridHierarchy-755707407

If you still facing any issues please revert back to us by modifying this sample along replication procedure to reproduce it.

Regards,

Mahalakshmi K.

[Harry Zheng]

Hi Mahalakshmi,

Thank you for your solution. It works!

I have another related question. I have three levels data (customer, category, part#) in treegrid, which will display in 3 different columns. I'd like to hide the cagetory' and part# column when I collapse all rows. When I expand any customer row, the category column will show up. Similarly, when I expand any category row, the part# column will show up.

I wonder if the treegrid could achieve this goal.

Thank you,

Harry

[Mahalakshmi Karthikeyan]

Hi Harry,

For your kind information, we can achieve the 2 columns with expander with the help of column Template. Please find the below code snippet to get the 2 columns with expander icon.

<script type="text/x-jsrender" id="customColumnTemplate">

    <div style='height:20px;' unselectable='on' class="tempfield">

        {{if hasChildRecords}}

        <div class='intend' style='height:1px; float:left; width:{{:level*20}}px; display:inline-block;'></div>

        {{else !hasChildRecords}}

        <div class='intend' style='height:1px; float:left; width:{{:(level)*20}}px; display:inline-block;'></div>

        {{/if}}

       <div class=' {{if expanded}}e-icon e-treegridexpand {{else hasChildRecords}}e-icon e-treegridcollapse {{/if}} {{if level===4}}e-doc{{/if}}' style='float: left;display: inline-block;font-size: 10px;height:20px;width:30px;float:left;margin-left:10px;

       style=' float left;display:inline-block; unselectable='on'></div>

        <div class='e-cell' style='display:inline-block;width:100%' unselectable='on'>{{:#data['taskName']}}</div>

    </div>

</script>

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

.Columns(co =>

               {

                   co.Field("Id").HeaderText("Task Id").Add();

                   co.Field("Name").HeaderText("Task Name").IsTemplateColumn(true).TemplateID("customColumnTemplate").Add();

                   co.Field("StartDate").HeaderText("Start Date").Add();

               }

             ).

TreeColumnIndex(0)

//…

)     

and we can trigger each expand and collapsed events with the help of “Expanded” and “Collapsed” client side event. Please find the below code snippet to achieve the show and hide the particular columns in the expanded and collapsed event

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

.ClientSideEvents(eve=>

      {

          eve.Expanded("expanded");

          eve.Collapsed("collapsed");

          eve.Create("load");         

      }).

//…

)   

<script type="text/javascript">

            function load(args) {

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

                TreeGridObj.collapseAll();

                TreeGridObj.hideColumn("Task Name");

                TreeGridObj.hideColumn("Start Date");

            }

            $(".tempfield").click(function () {

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

                for (var i = 0; i < TreeGridObj.model.columns.length; i++) {

                    if (TreeGridObj.model.columns[i].field == "StartDate") {

                        if (TreeGridObj.model.columns[i].visible == false)

                            TreeGridObj.showColumn("Start Date");

                        else

                            TreeGridObj.hideColumn("Start Date");

                    }

                }

            });

            function expanded(args) {

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

                if (args.data.Id != 1) {

                    debugger;

                    for (var i = 0; i < TreeGridObj.model.columns.length; i++) {

                        if (TreeGridObj.model.columns[i].field == "Name" && TreeGridObj.model.columns[i].visible == false) {

                            TreeGridObj.showColumn("Task Name");

                        }

                    }

                }

            }

            function collapsed(args) {

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

                if (args.data.Id == 1) {

                    TreeGridObj.hideColumn("Task Name");

                    TreeGridObj.hideColumn("Start Date");

                }

            }

        </script> 

Is this your requirement? Or else please get back to us with replication procedure

Regards,

Mahalakshmi K.

[Mahalakshmi Karthikeyan]

Hi Harry,

For your reference, we have prepared a sample regarding your requirement in your previous update.

You can find the sample under the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/119567/ze/TreeGridColumnTemplate1869717048

Is this your requirement or else please get back to us by modifying this sample with replication procedure.

And currently we are facing issue while hiding the template column in Virtualization mode. So as for now we suggest you to follow in the non-virtualization mode. A support incident has been created under your account to track the status of this Issue report. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

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

Regards,

Mahalakshmi K.

[Jayabharathi J]

From: Harry Zheng [mailto:[e-mail]]
Sent: Tuesday, July 14, 2015 10:48 AM
To: Syncfusion Support
Subject: RE: Syncfusion support community forum 119567, use treegrid to show hierarchical data, has been updated.

Hi Mahalakshmi,
Thank you for the update. I’d like to explain in more details about my requirement.
I already have created a treegrid with 3 levels of data, which can expand/collapse.
What I’d like to achieve is when I collapse all rows, I want to hide the columns “Product Line” and “Part#”(please see attached fig1). When I expand the first level data, I want to show the column “Product Line”, but not “Part#” (fig2). Finally, when I expand the next level, I want to show the column “Part#” (fig3).
I am not sure if this can be achieved in treegrid/asp.net mvc.
Thank you,

Harry
fig1
fig2
fig3

[Mahalakshmi Karthikeyan]

Hi Harry,

Thank you for your update.

we can toggle the view of the data in the columns while expanding the row with the help of “QueryCellInfo” and “Expanding” client side events. Please check the below code snippet to hide and show the cell value in the expanding event.

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

    //…

    .EnableVirtualization(true) 

    .ClientSideEvents(eve => {

        eve.Expanding("expanding");

            eve.QueryCellInfo("queryCellInfo");

        )

        @(Html.EJ().ScriptManager()) < script type = "text/javascript" >

        var flag = false;

            function expanding(args) {

                flag = true;

            }

            function queryCellInfo(args) {

                if (flag == false && (args.column.field == "Duration" || args.column.field == "PercentDone")) {

                    args.cellElement.innerHTML = "<span style='display:none'>" + args.cellElement.innerHTML + "</span>";

                }

                if (flag == true && args.data.level == 0) {

                    if ((args.column.field == "Duration" || args.column.field == "PercentDone")) {

                        args.cellElement.innerHTML = "<span style='display:none'>" + args.cellElement.innerHTML + "</span>";

                    }

                }

                if (flag == true && args.data.level == 1) {

                    if (args.column.field == "PercentDone") {

                        args.cellElement.innerHTML = "<span style='display:none'>" + args.cellElement.innerHTML + "</span>";

                    }

                }

                if (flag == true && args.data.level == 2)

                    if (args.column.field == "Duration") {

                        args.cellElement.innerHTML = "<span style='display:none'>" + args.cellElement.innerHTML + "</span>";

                    }

            } < /script>

We suggest you to run the application in virtualization mode for even better results , while rendering the widget with large data.

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/119567/ze/HideColumn701228611

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

Regards,
Mahalakshmi k.

[Harry Zheng]

Hi Mahalakshmi,

Thank you for the solution, which works well for hiding the values.

In such a scenario, If we want to hide the column(not just the values) when collapse, how should I modify the code?

Thank you,

Harry 

[John Rajaram]

Hi Harry,
Thanks for the update.
We would like to let you know that, we can hide and show our columns dynamically with the help of “hideColumn” & “showColumn” public methods in “Collapsed” & “Expanded” client side events.

Please refer the following code snippets for more details.

Code snippets:

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

//...

.ClientSideEvents(eve=>{

           eve.Collapsed("collapse");

           eve.Create("load");         

           eve.Expanded("expand");

       })

       .Datasource(ViewBag.dataSource)

    )

@(Html.EJ().ScriptManager())

    <script type="text/javascript">

       

        function collapse(args) {

            var dataLevel = args.data.level;

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

            var columnCollection = treeGridObj.model.columns;

            if (dataLevel == 0) {

                for (var i = 0; i < columnCollection.length; i++) {

                    if (columnCollection[i].field == "Duration" && columnCollection[i].visible == true) {

                        treeGridObj.hideColumn("Duration");

                        treeGridObj.hideColumn("Progress");

                    }

                }

            }

            if (dataLevel == 1) {

                for (var i = 0; i < columnCollection.length; i++) {

                    if (columnCollection[i].field == "Duration" && columnCollection[i].visible == false) {

                        treeGridObj.showColumn("Duration");

                    }

                    else if (columnCollection[i].field == "PercentDone" && columnCollection[i].visible == true) {

                        treeGridObj.hideColumn("Progress");

                    }

                }

            }

        }

        function expand(args) {

            var data = args.data;

            var dataLevel = data.level;

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

            var columnCollection = treeGridObj.model.columns;

            if (dataLevel == 0) {

                if (data.childRecords && data.childRecords.length > 0) {

                    for (var j = 0; j < data.childRecords.length; j++) {

                        if (data.childRecords[j].expanded == true) {

                            treeGridObj.showColumn("Duration");

                            treeGridObj.showColumn("Progress");

                        }

                        else {

                            for (var i = 0; i < columnCollection.length; i++) {

                                if (columnCollection[i].field == "Duration" && columnCollection[i].visible == false) {

                                    treeGridObj.showColumn("Duration");

                                }

                                else if (columnCollection[i].field == "PercentDone" && columnCollection[i].visible == true) {

                                    treeGridObj.hideColumn("Progress");

                                }

                            }

                        }

                    }

                }

            }

            if (dataLevel == 1) {

                for (var i = 0; i < columnCollection.length; i++) {

                    if (columnCollection[i].field == "PercentDone" && columnCollection[i].visible == false) {

                        treeGridObj.showColumn("Progress");

                    }

                }

            }

        }

        function load(args) {

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

            treeGridObj.collapseAll();

            treeGridObj.hideColumn("Duration");

            treeGridObj.hideColumn("Progress");

        }       
    </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/forum/119567/ze/TreeGridSample148185310

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

Regards,

John R

[Harry Zheng]

Hi John,

Thank you for your solution.

First I tried to test the code in my project just by adding the following code, and run the project, and it gives me web page error: (Error: Unable to get property 'push' of undefined or null reference). Please all see attached file for error message.

function load(args)
        {
            var treeGridObj=$("#ForecastGrid").data("ejTreeGrid");
            treeGridObj.collapseAll();
            treeGridObj.hideColumn("Product Line");
            treeGridObj.hideColumn("Part#");
        }

without the above code, the project runs well. I wonder what causes that error.

Thanks,

Harry

Attachment: HZ20150717_d63be05f.rar

[Harry Zheng]

I tried your sample, it seems when I collapse all rows, the columns "Duration" and "Progress" are still showing up.

Please see attached file.

Thanks,

Harry

Attachment: HZ2015071702_8edc9c06.rar

[John Rajaram]

Hi Harry,

Query 1:

First I tried to test the code in my project just by adding the following code, and run the project, and it gives me web page error: (Error: Unable to get property 'push' of undefined or null reference).

Solution:

We have referred your attachment and we came to know that you have used “Load” client side event instead of “Create” client side event. Please refer the below code snippets for more information.

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

//...

.ClientSideEvents(eve=>{

           eve.Create("create");       

           //... 

       })

       .Datasource(ViewBag.dataSource)

    )

@(Html.EJ().ScriptManager())

   <script type="text/javascript">

      //...

   function create(args) {

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

            treeGridObj.collapseAll();

            treeGridObj.hideColumn("Duration");

            treeGridObj.hideColumn("Progress");

        }       
    </script>

Query 2:

I tried your sample, it seems when I collapse all rows, the columns "Duration" and "Progress" are still showing up.

Solution:

We have updated our code snippets for expanding and collapsing of more than one parent rows based on your requirements. Please check the following code snippets for more details.

Code snippets:

<script type="text/javascript">

        //Collapse Rows

        function collapse(args) {

            var dataLevel = args.data.level;

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

            var columnCollection = treeGridObj.model.columns;

            if (dataLevel == 0) {

                var parentRecords = treeGridObj._parentRecords;

                var expandedParents = parentRecords.filter(function (record) {

                    if (record.level == dataLevel && record.expanded)

                        return true;

                });

                if (expandedParents && expandedParents.length == 0) {

                    //If there is no parent record in expanded state

                    for (var i = 0; i < columnCollection.length; i++) {

                        if (columnCollection[i].field == "Duration" && columnCollection[i].visible == true) {

                            treeGridObj.hideColumn("Duration");

                        }

                        if (columnCollection[i].field == "PercentDone" && columnCollection[i].visible == true) {

                            treeGridObj.hideColumn("Progress");

                        }

                    }

                }

                else {

                    var expandedChild = [];

                    //Check the expanded status of child record for the expanded parent record

                    for (var k = 0; k < expandedParents.length; k++) {

                        var children = expandedParents[k].childRecords;

                        $.each(children, function (ind, record) {

                            if (record.expanded)

                                expandedChild.push(record);

                        });

                    }

                    if (expandedChild && expandedChild.length) {

                        treeGridObj.showColumn("Duration");

                        treeGridObj.showColumn("Progress");

                    }

                    else {

                        treeGridObj.showColumn("Duration");

                        treeGridObj.hideColumn("Progress");

                    }

                }

            }

            if (dataLevel == 1) {

                var parentRecords = treeGridObj._parentRecords;

                var expandedParents = parentRecords.filter(function (record) {

                    if (record.level == dataLevel && record.expanded && record.parentItem.expanded)

                        return true;

                });

                if (expandedParents && expandedParents.length == 0) {

                    //If there is no child record with parent record in expanded state

                    for (var i = 0; i < columnCollection.length; i++) {

                        if (columnCollection[i].field == "Duration" && columnCollection[i].visible == false) {

                            treeGridObj.showColumn("Duration");

                        }

                        else if (columnCollection[i].field == "PercentDone" && columnCollection[i].visible == true) {

                            treeGridObj.hideColumn("Progress");

                        }

                    }

                }

            }

        }

        //Expand Rows

        function expand(args) {

            var data = args.data;

            var dataLevel = data.level;

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

            var columnCollection = treeGridObj.model.columns;

            if (dataLevel == 0) {

                if (data.childRecords && data.childRecords.length > 0) {

                    for (var j = 0; j < data.childRecords.length; j++) {

                        //Checking whether child record is in expanded state

                        if (data.childRecords[j].expanded == true) {

                            treeGridObj.showColumn("Duration");

                            treeGridObj.showColumn("Progress");

                            break;

                        }

                        else {

                            for (var i = 0; i < columnCollection.length; i++) {

                                //To show the duration column alone if child record are in collapsed state

                                if (columnCollection[i].field == "Duration" && columnCollection[i].visible == false) {

                                    treeGridObj.showColumn("Duration");

                                }                              

                            }

                        }

                    }

                }

            }

            if (dataLevel == 1) {

                for (var i = 0; i < columnCollection.length; i++) {

                    if (columnCollection[i].field == "PercentDone" && columnCollection[i].visible == false) {

                        treeGridObj.showColumn("Progress"); //To show the progress column alone

                    }

                }

            }
        }

//...

</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/forum/119567/ze/TreeGridSample-95821476

If you are still facing any problem, please revert us by modifying the sample based on your application along with the replication procedure? This would be helpful for us to serve you better.

Please let us know if you require further assistance on this.
Regards,
John R

[Harry Zheng]

Hi John,

Thank you for your solution.

I am trying to run your sample. First it gives me configuration error:

Configuration Error Description: An error occurred during the processing of a configuration file required to service this request. Please review the specific error details below and modify your configuration file appropriately.

Parser Error Message: Could not load file or assembly 'Syncfusion.EJ, Version=13.2400.0.29, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89' or one of its dependencies. The system cannot find the file specified.

So I migrate the project to the version 13.1.0.30, which is the one I am using.

then I get a compilation error:

Compilation Error Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS1705: Assembly 'Syncfusion.EJ.MVC, Version=13.2400.0.29, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89' uses 'Syncfusion.EJ, Version=13.2400.0.29, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89' which has a higher version than referenced assembly 'Syncfusion.EJ, Version=13.1400.0.30, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89'

Could you help with this problem?

Thanks,

Harry

[Mahalakshmi Karthikeyan]

Hi Harry,

We regret for the inconvenience caused.

For your kind information, we have to add the necessary assembly files Syncfusion.EJ and Syncfusion.EJ.MVC from the essential studio installed location before attempt to render the TreeGrid control. We can get the above mentioned assembly files from the following location,

EJ: “C:\Program Files (x86)\Syncfusion\Essential Studio\13.2.0.29\Assemblies\4.0 “ and

EJ.MVC: “C:\Program Files (x86)\Syncfusion\Essential Studio\13.2.0.29\Assemblies\MVC”.

And most importantly the versions of Syncfusion.EJ and Syncfusion.EJ.MVC assembly files mentioned in the webConfig file must be the same as that of referred assembly versions in ‘References’ section. Please refer the below code snippet for details.

[Web.config]

<system.web>

    <httpRuntime targetFramework="4.5" />

    <compilation debug="true" targetFramework="4.5">

      <assemblies>       

        <add assembly="Syncfusion.EJ, Version= 13.2400.0.29, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />       

        <add assembly="Syncfusion.EJ.Mvc, Version= 13.2400.0.29, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />   

      </assemblies>

    </compilation>

//…

</system.web>

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

Regards,

Mahalakshmi K.

[Harry Zheng]

The problem is the version I have is 13.1.0.30. I do not have 13.2.0.29.

So even I changed webconfig to match my version as following, it still gives me the same error. Is there any other place we need change settings? or Is there any way I can get version 13.2.0.29?

<assemblies>
        <add assembly="Syncfusion.EJ, Version=13.1400.0.30, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.EJ.Mvc, Version=13.1500.0.30, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
      </assemblies>

Thanks,

Harry

[Mahalakshmi Karthikeyan]

Hi Harry,

Sorry for the inconvenience caused.
We have refered your code snippet and came to know that you are using MVC5 for rendering TreeGrid. If we are using visual studio 4.5.1 framework then we have to refer EJ.Mvc version 13.1500.0.30 and EJ version 13.1450.0.30 as like below,

<assemblies>
<add assembly="Syncfusion.EJ, Version=13.1450.0.30, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
<add assembly="Syncfusion.EJ.Mvc, Version=13.1500.0.30, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
</assemblies>

Or else refer EJ from 4.0 and EJ.MVC in MVC4 folders which is available in the Essential studio installed location
EJ: C:\Program Files (x86)\Syncfusion\Essential Studio\13.1.0.30\Assemblies\4.0\Syncfusion.EJ.dll
EJ.MVC: C:\Program Files (x86)\Syncfusion\Essential Studio\13.1.0.30\Assemblies\MVC\MVC4\Syncfusion.EJ.MVC.dll

And you can also download our Essential Studio Volume 2, 2015 from the following link to get the assembly version “13.2.0.29”.
http://www.syncfusion.com/forums/119549/essential-studio-2015-volume-2-final-release-v13-2-0-29-available-for-download

We have also modified the sample in accordingly as per your requirement in MVC5. Please find the sample under the following location.
Sample: http://www.syncfusion.com/downloads/support/forum/119567/ze/SampleDemo-538574682
Is this your requirement or else please get back to us with the framework and the versions you are using.

Regards,
Mahalakshmi K.

[Harry Zheng]

Hi Mahalakshmi,

Thank you for all the information. Your codes works well!

Regards,

Harry

[Mahalakshmi Karthikeyan]

Hi Harry,
Thanks for the update.
we are happy to assist you.
please let us  know if you need further assistance on this.
Regards,
Mahalakshmi K.