Unable to get Syncfusion treegrid control to work with Orchard

[Megatron]

Hi, I am trying to integrate Syncfusion controls into a ASP MVC orchard CMS. I was making the treegrid a content type, and it never renders.

Do you have any steps and working sample you can share so I can use syncfusion controls with Orchard CMS. http://www.telerik.com/forums/using-kendo-ui-grid-in-orchard-cms

thanks

[Jonesherine Stephen]

Hi Megatron, 

We have prepared the sample and rendered the TreeGrid in orchard CMS. 

Please find the things to be considered while rendering Syncfusion controls: 

1. Added one custom module to render TreeGrid 

2. Add the necessary scripts and themes in the scripts and themes folder 

2. Refer the necessary scripts and themes in cs file like “ResourceManifest” to render the Syncfusion controls. 

3. Give the name of the scripts in manifest.DefineStyle and refer these scripts name in the file where we have rendered the EJ controls. 

We have also prepared a module in orchard CMS .Please find the module project from below location 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/FirstModule1842092307 

Is this your requirement if not please share us more details related to your requirement with us. It would be helpful for us to serve you better. 

Regards, 

Jone sherine P S   

[Megatron]

Thanks for the sample.

When I tried to use it as part of content type, content part with items for master-details grid with its own data, I it will not render for me.

Can you please add some notes in the code on where you were binding the orchard driver and content type

thanks

[Manikandan Manikam]

Hi Megatron,  

Please find the response below. 

Currently we have rendered TreeGrid control in Orchard CMS by using JSON data and JavaScript in view page. 

We have followed below steps to render TreeGrid control in Orchard CMS. 

1.     We have created one module called FirstModule by using orchard command prompt, please find the screen shot below. 

 

2.     We have modified module.txt file, please find the file from below location. 

My Web Sites\Orchard CMS\Modules\FirstModule\Module.txt 

3.     Then we need to define route for our module in Routes.cs file, please find the file from below location. 

My Web Sites\Orchard CMS\Modules\FirstModule\Routes.cs 

4.     Then we have added syncfusion scripts and theme files in below mentioned folder location. 

Scripts: My Web Sites\Orchard CMS\Modules\FirstModule\Scripts 

Please find the screen shot for this. 

 

Themes: My Web Sites\Orchard CMS\Modules\FirstModule\Styles 

 

5.     Then add script and theme file reference in ResourceManifest.cs file, please find this file from below location. 

My Web Sites\Orchard CMS\Modules\FirstModule\ResourceManifest.cs 

6.     Then we have added Controller name called FirstModule, please the file from below location 

My Web Sites\Orchard CMS\Modules\FirstModule\Controllers\FirstModuleController.cs 

7.     Then we have added view for this controller with simple TreeGrid sample, please find this file from below location. 

My Web Sites\Orchard CMS\Modules\FirstModule\Views\Home\Index.cshtml 

8.     We have to include newly added files in FirstModule.csproj file, add below code snippet in project file. 

 

 

 

9.     Then we have enable this Module by using below command, please find the screen shot for this. 

 

 

10.   Then start the Orchard website from WebMatrix and add your module name at the end of Orchard website URL like below 

https://localhost:2458/FirstModule 

11.   TreeGrid is rendered in Orchard CMS, please find the screen shot below. 

 

Sample Link:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/FirstModule1842092307  

Can you please share your working sample and details about data source you have used for this with us, it will helpful to serve you better? 

 

Thanks, 

Manikandan M. 

[Megatron]

Hello Manikandan M, this explanation is much better explained than last time thanks!

My master detail scenarios with drag drop enabled in the tree grid, saving using EF for two tables. The drag drop was not working regardless of where I place the details form, the control does not render inside the window.

• Please describe which class, and which div containers do I need to ensure they have, and where to load them.
• I see you're loading based on module, is this the best way or can I load the scripts only when this content item is loaded and not for all module pages (similar to partial views).
• Does the details form have to be a separate content item (and create a dependency on add) or can I have it in the same content item
• Can I use this same process for syncfusion charts and other controls too.
  

My data look like this:

Master: Pets Table (ID, Name, Type, Sitter)
Details: List of transactions, like vaccinations, checkin check out, reminders etc.

Thanks

[Megatron]

After debugging some more I found its missing the driver that connects the grid to the UI, I created a direct trac ticket and will post more details there

[Jonesherine Stephen]

Hi Megatron,          

Please follow-up the incident to track status of this queries for better follow up.  

Regards, 

Jone sherine P S