Kendo UI MVC: Display Detail/Child records for each Grid row using Detail Templates

 

Kendo has good feature to display the detail of any row or relevant child records using detail template. The example already exists in Kendo UI demo site.

example http://demos.kendoui.com/web/grid/detailtemplate.html

There have three different ways to display detail template for grid rows.

1. Server detail template:

If you make server binding in main grid using MVC wrapper then Server Detail Template  is very good option to display child records or detail element for each grid row. Here it is very similar to adding a child control inside a grid using DetailTemplate(…) action. It also gives expression to write as razor MVC syntax.

Example :

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/server-detail-template

2. Client Detail Template :

Some cases you need to display grid records on ajax call.  Example of Datasource ajax call is:

   1: .DataSource(dataSource => dataSource

   2:           .Ajax()

   3:           .Read(read => read.Action("Products_Read", "Home"))

   4:        )

In this case Server Detail Template will not work. Because main grid records are loaded by ajax call dynamically. To display detail template for ajax read call you need to use Client Detail Template . 

Example: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/client-detail-template

The problem is that you need to know some kendo client template syntax. Here has example to write client template scripts ( if-else condition, for loop ) using kendo expression http://docs.kendoui.com/getting-started/framework/templates/overview

But You can still write MVC wrapper widget and at the end you have to call ToClientTemplate to use it inside client template.

 

3. Hybrid Solution:

It is a mix solution of client detail template and using server call to render HTML . So I called this hybrid solution. Inside client script you can also make Javascript ajax call.

   1: <script id="client-template" type="text/x-kendo-template">

   2: <div id="placeholder">

   3: <script>

   4: $.get("url",function(data){

   5:  // do somethings

   6: $(document.getElementById("placeholder)).html(data);

   7: });

   8: </script>

   9: </script>

 

In this example I am making an simple Javascript ajax call to get data from server side ( calling MVC controller action). In server side through Partial View I am getting the html which is rendered in server side. Using this way you are getting full freedom to write code in MVC razor syntax and Kendo MVC wrapper though you are using client template. After getting html from server side the placeholder div is populated with the resultant HTML.

Note: Jquery element select option “$(‘#placeholder’) does not work as # is used also for Kendo syntax. so that I used  document.getElementById.