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.
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.
2. Client Detail Template :
Some cases you need to display grid records on ajax call. Example of Datasource ajax call is:
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 .
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:
Note: Jquery element select option “$(‘#placeholder’) does not work as # is used also for Kendo syntax. so that I used document.getElementById.