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.
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.
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.
From: Harry Zheng [mailto:[email protected]]
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
@(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> |
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"); } |
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
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) )
function create(args) { var treeGridObj = $("#TreeGridContainer").data("ejTreeGrid"); treeGridObj.collapseAll(); treeGridObj.hideColumn("Duration"); treeGridObj.hideColumn("Progress"); } |
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 } } } |
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
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
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.