Thursday, May 30, 2013

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.

4 comments:

  1. For those that are interested, you can still use the jquery selector for this.

    Instead of using: $(document.getElementById("placeholder")).html(data);

    Use: $("\\#placeholder").html(data);

    Using "\\" escapes the hash key character in the kendo controls. Other than that, thanks for this. I was trying to using @Html.RenderPartial() and it was constantly giving me errors, but this works just as well.

    ReplyDelete
  2. thanks for sharing your experience.

    ReplyDelete
  3. Hi Syed,
    I liked the approach.. can u paste a full working code here or any other site like jsfiddle.net.
    I need to know how to figure out the Id of the parent row.
    Thanks in advance

    ReplyDelete