Display two different treegrid in the same page

[Harry Zheng]

Hi,

I wonder if we can display two different treegrid in the same page. Also, I also need to edit some cells for these two treegrid. In other words, I need use BeginEdit and EndEdit events for both treegrids.

Thank you,

Harry

[Mahalakshmi Karthikeyan]

Hi Harry,

We can render the multiple TreeGrid in the same page with different id. Also we can bind events to each TreeGrid with different function name to differentiate the functionality for both. Please refer the below code example for details.

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

//…

ClientSideEvents(eve =>

       {

           eve.BeginEdit("beginedit");

           eve.EndEdit("endedit");

       }).

)

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

//…

ClientSideEvents(eve =>

       {

           eve.BeginEdit("Treegrid2BeginEdit");

           eve.EndEdit("Treegrid2EndEdit");

       }).

  )

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

   <script type="text/javascript">

       function beginedit(args) {

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

           debugger;

           //first treegrid begin edit code goes here

       }

       function endedit(args) {

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

           //first treegrid end edit code goes here

           debugger;

       }

       function Treegrid2BeginEdit(args) {

           var treeGrid2Obj = $("#TreeGridContainer1").data("ejTreeGrid");

           //second treegrid begin edit code goes here

           debugger;

       }

       function Treegrid2EndEdit(args) {

           var treeGrid2Obj = $("#TreeGridContainer1").data("ejTreeGrid");

           //second treegrid end edit code goes here

           debugger;

       }

   </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/directtrac/general/ze/MultipleTreeGrid1399200820

Regards,

Mahalakshmi K.

[Harry Zheng]

Hi Mahalakshmi,

Thank you for the solution. I could display and edit two treegrids in the same page by following your sample.

But I found an issue: if you set .EnableResize(true) for both grids,  when you resize the browser window, it will give exception (please see attached file).

I wonder if there is a way to solve this issue.

Regards,

Harry

Attachment: HZ20151015_dcd8ae85.rar

[Harry Zheng]

BTW: I am using asp.net mvc 5, .Net framework 4.5, Syncfusion, 13.2.0.39, visual studio 2013, IE 11.

Harry

[Jayakumar Duraisamy]

Hi Harry,
We regret for the inconvenience caused.

We have analysed the reported issue with our sample. We are unable to reproduce the issue. Whether are you trying to use any kind of container control for rendering the Treegrid controls? And we have also prepared sample with the below configuration setup.

MVC version	MVC 5
Visual studio version	VS 2013
.Net framework	4.5
Syncfusion version	13.2.0.39

Can you please revert us by modifying the sample based on your application along with the replication procedure?

Sample Location: http://www.syncfusion.com/downloads/support/forum/120743/ze/Mvc5TreeGridSample-286212925

Please let us know if you need more information on this.
Regards,
Jayakumar Duraisamy

[Harry Zheng]

Hi Jayakumar,

Thank you for the sample. I modified the sample based on my project. It behaves a little bit different from my project, but throws same exception.

When you click any cell in startdate column, it will throw the exception (please see attached image).

I also attached modified sample.

Regards,

Harry

Attachment: HZ20151016_7004f29e.rar

[Mahalakshmi Karthikeyan]

Hi Harry,

We have analyzed your sample and came to know that, the scripts are referred 2 times for the 2 controls separately, that’s why we got exception, since both are same control not need to call the layout page 2 times in the sample, please remove the _Layout page call from the “_ViewStart.cshtml”. We have also modified the sample and you can find the sample under the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/120743/ze/Mvc5TreeGridSample-286212925SF-2086476480

Regards,

Mahalakshmi K.

[Harry Zheng]

Hi Mahalakshmi,

I changed the setting in “_ViewStart.cshtml" in my project, but it still has that problem. Right now, I could not figure out what caused that problem.

If you happened to know what could cause this kind of problem, please let me know.

Regards,

Harry

[Mahalakshmi Karthikeyan]

Hi Harry,

The reported issue in your previous update occurred due to the multiple script reference for the same control. So we have removed the reference from the view layout page then the script was referred once in the main view page alone and the issue was resolved for us and the provided sample by us in our previous update is also working fine at our end. But analyzing further on all possibilities to reproduce the issue you are facing, we were not able to reproduce it. So it would be helpful for us if you provide us your sample in which you are facing the issue or please modify the sample provided by us, along with replication procedure to reproduce the issue, so that we could provide you the solution at the earliest.

Regards,

Mahalakshmi K.