Client Detail Templates
The Telerik UI Grid for ASP.NET MVC enables you to show additional information for a data item by setting the detail template of the Grid.
For a runnable example, refer to the demo on detail templates in the Grid.
To configure the client detail template:
Defining the Client Details
To configure the Grid for ASP.NET MVC to display additional details of the Product entity from the Northwind database:
- Create a new ASP.NET MVC application. If you have installed the Telerik UI for ASP.NET MVC Visual Studio Extensions, create a Telerik UI for ASP.NET MVC application. Name the application
KendoGridClientDetailTemplate
. If you have chosen not to use the Telerik UI for ASP.NET MVC Visual Studio Extensions, follow the steps from the introductory article to add Telerik UI for ASP.NET MVC to the application. -
Add a new
Entity Framework Data Model
. Right-click the~/Models
folder in the solution explorer and pick Add > New Item. Choose Data > ADO.NET Entity Data Model in the Add New Item dialog. Name the modelNorthwind.edmx
and click Next. This starts the Entity Data Model Wizard. -
Select Generate from database and click Next. Configure a connection to the Northwind database. Click Next.
-
Choose the Products table from the Which database objects do you want to include in your model?. Leave all other options as set by default. Click Finish.
-
Open
HomeController.cs
and add a new action method which will return the Products as JSON. The Grid makes Ajax requests to this action.public ActionResult Products_Read() { }
-
Add a new parameter of type
DataSourceRequest
to the action. This parameter will contain the current Grid request information—page, sort, group, and filter. Decorate that parameter with theDataSourceRequestAttribute
. This attribute will populate theDataSourceRequest
object from the posted data.public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request) { }
-
Use the
ToDataSourceResult
extension method to convert the Products to aDataSourceResult
object. That extension method will page, filter, sort, or group your data using the information provided by theDataSourceRequest
object.public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request) { using (var northwind = new NorthwindEntities()) { IQueryable<Product> products = northwind.Products; DataSourceResult result = products.ToDataSourceResult(request); } }
-
Return the
DataSourceResult
as JSON. Configure the Grid for Ajax binding.public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request) { using (var northwind = new NorthwindEntities()) { IQueryable<Product> products = northwind.Products; DataSourceResult result = products.ToDataSourceResult(request); return Json(result); } }
-
In the view, configure the Grid to use the action method created in the previous steps.
@(Html.Kendo().Grid<KendoGridClientDetailTemplate.Models.Product>() .Name("grid") .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("Products_Read", "Home")) ) .Columns(columns => { columns.Bound(product => product.ProductID); columns.Bound(product => product.ProductName); }) .Pageable() )
-
Define the client template using the Kendo UI for jQuery template syntax. The context of the template is the data item—Product entity— bound to the Grid.
Each
#
symbol that is not part of a template expression—#: #
,# #
or#= #
—must be escaped—\\#
.<script id="client-template" type="text/x-kendo-template"> <div>ProductID: #: ProductID #</div> <div>ProductName: #: ProductName #</div> <div>UnitsInStock: #: UnitsInStock #</div> <div>UnitPrice: #: UnitPrice #</div> <div>UnitsOnOrder: #: UnitsOnOrder #</div> <div>Discontinued: #: Discontinued #</div> </script>
-
Specify the
id
of the template by using theClientDetailTemplateId
method.@(Html.Kendo().Grid<KendoGridClientDetailTemplate.Models.Product>() .Name("grid") .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("Products_Read", "Home")) ) .Columns(columns => { columns.Bound(product => product.ProductID); columns.Bound(product => product.ProductName); }) .Pageable() .ClientDetailTemplateId("client-template") )
Build and run the project.
To download the Visual Studio Project, refer to this GitHub repository.
Setting the Client Hierarchy
To configure the Grid for ASP.NET MVC to display all Product entities that are available per the Category entity from the Northwind database:
- Create a new ASP.NET MVC application. If you have installed the Telerik UI for ASP.NET MVC Visual Studio Extensions, create a Telerik UI for ASP.NET MVC application. Name the application
KendoGridClientHierarchy
. If you have chosen not to use the Telerik UI for ASP.NET MVC Visual Studio Extensions, follow the steps from the introductory article to add Telerik UI for ASP.NET MVC to the application. -
Add a new
Entity Framework Data Model
. Right-click the~/Models
folder in the solution explorer and pick Add > New Item. Choose Data > ADO.NET Entity Data Model in the Add New Item dialog. Name the modelNorthwind.edmx
and click Next. This starts the Entity Data Model Wizard. -
Select Generate from database and click Next. Configure a connection to the Northwind database. Click Next.
Choose the Products and Categories tables from Which database objects do you want to include in your model?. Leave all other options as set by default. Click Finish.
-
Open
HomeController.cs
and add a new action method which will return the Category entities as JSON. The Grid makes Ajax requests to this action.public ActionResult Categories_Read() { }
-
Add a new parameter of type
DataSourceRequest
to the action. This parameter will contain the current grid request information - page, sort, group and filter. Decorate that parameter with theDataSourceRequestAttribute
. That attribute will populate theDataSourceRequest
object from the posted data.public ActionResult Categories_Read([DataSourceRequest]DataSourceRequest request) { }
-
Use the
ToDataSourceResult
extension method to convert the Categories to aDataSourceResult
object. That extension method will page, filter, sort, or group your data using the information provided by theDataSourceRequest
object.public ActionResult Categories_Read([DataSourceRequest]DataSourceRequest request) { using (var northwind = new NorthwindEntities()) { IQueryable<Category> categories = northwind.Categories; // Flatten the Category to avoid circular references during JSON serialization. DataSourceResult result = categories.ToDataSourceResult(request, category => new { category.CategoryID, category.CategoryName }); } }
-
Return the
DataSourceResult
as JSON. Now let's configure the Grid for AJAX binding.public ActionResult Categories_Read([DataSourceRequest]DataSourceRequest request) { using (var northwind = new NorthwindEntities()) { IQueryable<Category> categories = northwind.Categories; // Flatten the Category to avoid circular references during JSON serialization. DataSourceResult result = categories.ToDataSourceResult(request, category => new { category.CategoryID, category.CategoryName }); return Json(result); } }
-
Open
HomeController.cs
and add a new action method which will return the Product entities for a given category as JSON. The child Grid makes Ajax requests to this action.public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request, int categoryId) { using (var northwind = new NorthwindEntities()) { IQueryable<Product> products = northwind.Products.Where(product => product.CategoryID == categoryId); // Flatten the Product to avoid circular references during JSON serialization DataSourceResult result = products.ToDataSourceResult(request, product => new { product.ProductID, product.ProductName }); return Json(result); } }
-
In the view, configure the Grid for Ajax binding to
Categories_Read
.@(Html.Kendo().Grid<KendoGridClientHierarchy.Models.Category>() .Name("grid") .Columns(columns => { columns.Bound(category => category.CategoryID); columns.Bound(category => category.CategoryName); }) .DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("Categories_Read", "Home")) ) )
-
Define the client template using Kendo UI Template syntax. The context of the template is the Category entity bound to the Grid. The template itself contains another Grid bound to the
Products_Read
action.- Always call the
ToClientTemplate
method when using Telerik UI for ASP.NET MVC helpers in a client template. - Escape the
#
characters used for a template expression when using a columnClientTemplate
in a detail template, so that the expression is evaluated in the correct context.
<script id="client-template" type="text/x-kendo-template"> @(Html.Kendo().Grid<KendoGridClientHierarchy.Models.Product>() .Name("grid_#=CategoryID#") // make sure the Name is unuque .Columns(columns => { columns.Bound(product => product.ProductID); columns.Bound(product => product.ProductName).ClientTemplate("<strong>\\#:ProductName\\#</strong>"); // escape the "#" characters }) .DataSource(dataSource => // Make a request to Products_Read and provide the current CategoryID as a route parameter. dataSource.Ajax().Read(read => read.Action("Products_Read", "Home", new { categoryId = "#=CategoryID#" })) ) .Pageable() .ToClientTemplate() ) </script>
- Always call the
-
Specify the
id
of the template using theClientDetailTemplateId
method.@(Html.Kendo().Grid<KendoGridClientHierarchy.Models.Category>() .Name("grid") .Columns(columns => { columns.Bound(category => category.CategoryID); columns.Bound(category => category.CategoryName); }) .DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("Categories_Read", "Home")) ) .ClientDetailTemplateId("client-template") )
-
Build and run the project.
To download the Visual Studio Project, refer to [this GitHub repository]((https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/client-hierarchy).
Handling Nested Client Templates
Nesting client templates are not an out-of-the-box feature the Kendo UI Core wrappers support. For more information on this issue, check the Grid troubleshooting section in invalid template errors when nesting client templates.