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. Image for the cookie policy date

Display two different treegrid in the same page

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

8 Replies

MK Mahalakshmi Karthikeyan Syncfusion Team October 12, 2015 11:54 AM UTC

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.



HZ Harry Zheng October 15, 2015 06:49 PM UTC

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


HZ Harry Zheng October 15, 2015 06:51 PM UTC

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

Harry


JD Jayakumar Duraisamy Syncfusion Team October 16, 2015 12:00 PM UTC

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



HZ Harry Zheng October 16, 2015 02:06 PM UTC

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


MK Mahalakshmi Karthikeyan Syncfusion Team October 19, 2015 03:17 PM UTC

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.



HZ Harry Zheng October 21, 2015 08:23 PM UTC

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


MK Mahalakshmi Karthikeyan Syncfusion Team October 22, 2015 02:22 PM UTC

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.


Loader.
Live Chat Icon For mobile
Up arrow icon