Grid inside ClientDetailTemplate

[Gerardo]

hello, 
what is the general pattern to include a grid inside another Grid's DetailTemplate? I have a heriarchical collections I need to populate. I don't see other way than declaring a script inside the template's script tag, but that is invalid html.

[Momchil]

Hello, Gerardo

The general pattern to create a Kendo Grid hierarchy in ASP.NET Core is the following:

1. Create the parent Grid with HtmlHelpers and configure it based on your needs.

2. Add a Kendo Template.

3. Configure the child Grid inside the Kendo Template by using HtmlHelpers. It is important to ensure that the Name() of every child Grid is unique. A good option is to append the unique Model id of parent Grid to the name of the child Grid. For example:

.Name("child_grid_#=ModelId#")

4. Since the child Grid is initialized in a template, it is required to add the ".ToClientTemplate()" option.

5. Specify the name of the template created in Step 2 in the configuration of the parent Grid through the ".ClientDetailTemplateId()" method.

@(Html.Kendo().Grid<ParentGridModel>()
        .Name("grid")
        .ClientDetailTemplateId("template")
        .DataSource(dataSource => dataSource
                ...
                .Model(model => model.Id(p => p.ProductID))
        )
        ...
)

<script id="template" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<ChildGridModel>()
            .Name("grid_#=ProductID#")
            .DataSource(dataSource => dataSource
                .Ajax()
                ...
                .Read(read => read.Action("ReadChildGridData", "ControllerName", new { productID = "#=ProductID#" }))
            )
            ...
            .ToClientTemplate()
        )
</script>

Here is a short demo for your reference: 

https://netcorerepl.telerik.com/cmarYMOB32pCEGCc21

I hope this information helps. Please let me know if I can assist you any further. 

 

Best regards, Momchil Zanev Progress Telerik

[Gerardo]

thanks Momchil, 

Is there a way to bind the DetailTemplate to data already avaiable? I mean, to not use

.Read(read => read.Action("ReadChildGridData", "ControllerName", new { productID = "#=ProductID#" }))

and reference it without using an extra request to load the detail. The data is already available in the first "pass". Something like

.Read(read => read.Memory("#=Parent.children#")

 

An alternative quesion is how to declare a template that includes javascript like this:

<script id="template" type="text/kendo-tmpl">
     <script type="text/javascript">
     </script>
</script>

 

[Momchil]

Hi Gerardo,

In regards to your first question about loading the data locally in the child grid, I would suggest the following:

1. Configure the parent grid with a DetailTemplate() option. 

@(Html.Kendo().Grid<ParentGridModel>()
	.Name("grid")
	.DataSource(ds => ds
		.Ajax()
                ...
		.Read("GetPeople", "Home")
	)
	...
	.ClientDetailTemplateId("template")
)

2. Disable the server operations of the child grid (ServerOperation(false)).

<script id="template" type="text/kendo-tmpl">
	@(Html.Kendo().Grid<GridHierarchyDemo.Models.Order>()
		.Name("grid_#=EmployeeID#")
                ...
		.DataSource(dataSource => dataSource
			.Ajax()
			.ServerOperation(false)
		)
		.ToClientTemplate()
	)
</script>

 

3. Set a handler for the "DetailInit" event of the parent grid.

@(Html.Kendo().Grid<ParentGridModel>()
	.Name("grid")
	.DataSource(ds => ds
		.Ajax()
		.Read("GetPeople", "Home")
	)
	.ClientDetailTemplateId("template")
	.Events(e => e.DetailInit("onDetailInit"))
)

4. The "DetailInit" event provides the child grid element of the currently expanded master row. By using the "e.detailCell", get a reference of the current child grid. Then use the setDataSource() method to set the DataSource of the child grid with the appropriate data.

<script>
	function onDetailInit(e) {
		var childGridElement = e.detailCell.find(".k-grid"); //select the child grid element

		var dataSource = new kendo.data.DataSource({ //create a new DataSource component
			data: e.data.Orders 
		});
				
		$(childGridElement).data("kendoGrid").setDataSource(dataSource); //set the DataSource
	}
</script>

I am attaching a runnable demo that demonstrates this solution.

 

Regarding your second question on how to include JavaScript inside a Kendo template:

The template allows you to include HTML, JS code, and HtmlHelpers, so declaring a <script> tag inside it is not a valid syntax. If you would like to add JavaScript inside a Kendo template, check out the following documentation:

Templates Overview | Kendo UI Templates | Kendo UI for jQuery (telerik.com)

I hope this answers your questions. I will be glad to assist you further.

 

Regards,
Momchil
Progress Telerik