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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

use treegrid to show hierarchical data

Thread ID:

Created:

Updated:

Platform:

Replies:

119567 Jul 9,2015 01:54 PM UTC Jul 23,2015 08:35 AM UTC ASP.NET MVC 17
loading
Tags: TreeGrid
Harry Zheng
Asked On July 9, 2015 01:54 PM UTC

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 [Syncfusion]
Replied On July 10, 2015 12:50 PM UTC

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
Replied On July 10, 2015 02:10 PM UTC

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 [Syncfusion]
Replied On July 13, 2015 05:43 PM UTC

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 [Syncfusion]
Replied On July 14, 2015 12:10 PM UTC

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 [Syncfusion]
Replied On July 15, 2015 04:09 AM UTC

From: Harry Zheng [mailto:hzheng@tat-co.com]
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 [Syncfusion]
Replied On July 16, 2015 12:55 PM UTC

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
Replied On July 16, 2015 01:40 PM UTC

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 [Syncfusion]
Replied On July 17, 2015 03:29 PM UTC

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
Replied On July 17, 2015 07:10 PM UTC

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
Replied On July 17, 2015 07:51 PM UTC

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 [Syncfusion]
Replied On July 20, 2015 12:45 PM UTC

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
Replied On July 20, 2015 03:02 PM UTC

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 [Syncfusion]
Replied On July 21, 2015 11:08 AM UTC

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
Replied On July 21, 2015 12:48 PM UTC

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 [Syncfusion]
Replied On July 22, 2015 09:47 AM UTC

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
Replied On July 22, 2015 02:19 PM UTC

Hi Mahalakshmi,

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

Regards,

Harry

Mahalakshmi Karthikeyan [Syncfusion]
Replied On July 23, 2015 08:35 AM UTC

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.

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.

Warning Icon 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.Close Icon

;