New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Detail template

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Theme Builder
Change Theme
default
Themes & Swatches

SASS

LESS

Launch Theme Builder
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Purple

Turquoise
Bootstrap Theme

Main

Main Dark

Nordic

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Nova
Classic Theme

Main

Main Dark

Opal

Silver
- Black
- Blue Opal
- Bootstrap v3
- Default
- Fiori
- Flat
- High Contrast
- Material
- Material Black
- Metro
- Metro Black
- Moonlight
- Nova
- Office 365
- Silver
- Uniform

                        detailtemplate.cshtml
                    
                        DetailTemplateController.cs

Also available for:

CLIENT-SIDE API SERVER-SIDE API

kendo.syncReady(function(){jQuery("#grid").kendoGrid({"dataBound":dataBound,"columns":[{"title":"First Name","headerAttributes":{"data-field":"FirstName","data-title":"First\u0026#32;Name"},"width":"120px","exportable":true,"field":"FirstName","encoded":true},{"title":"Last Name","headerAttributes":{"data-field":"LastName","data-title":"Last\u0026#32;Name"},"width":"120px","exportable":true,"field":"LastName","encoded":true},{"title":"Country","headerAttributes":{"data-field":"Country","data-title":"Country"},"width":"120px","exportable":true,"field":"Country","encoded":true},{"title":"City","headerAttributes":{"data-field":"City","data-title":"City"},"width":"120px","exportable":true,"field":"City","encoded":true},{"title":"Title","headerAttributes":{"data-field":"Title","data-title":"Title"},"exportable":true,"field":"Title","encoded":true}],"pageable":{"buttonCount":10},"sortable":true,"scrollable":{"height":"200px"},"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/aspnet-mvc/grid/detailtemplate_hierarchybinding_employees"},"prefix":""},"pageSize":5,"page":1,"groupPaging":false,"total":0,"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"EmployeeID":{"type":"number"},"FirstName":{"type":"string"},"EmployeeName":{"type":"string"},"LastName":{"type":"string"},"Title":{"type":"string"},"Country":{"type":"string"},"City":{"type":"string"},"Address":{"type":"string"},"HomePhone":{"type":"string"},"Notes":{"type":"string"},"ReportsTo":{"type":"number","defaultValue":null}}}}},"detailTemplate":kendo.template(jQuery('#template').html())});}); <div class="k-tabstrip-wrapper"><div class="k-widget k-tabstrip k-header" id="tabStrip_#=EmployeeID#"><ul class="k-reset k-tabstrip-items"><li class="k-item k-state-default k-state-active"><span class="k-link" unselectable="on">Orders</span></li><li class="k-item k-state-default"><span class="k-link" unselectable="on">Contact Information</span></li></ul><div class="k-content k-state-active" id="tabStrip_#=EmployeeID#-1" style="display:block"> <div class="k-widget k-grid" id="grid_#=EmployeeID#"><table><colgroup><col style="width:100px" /><col style="width:150px" /><col /><col style="width:190px" /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="OrderID" data-index="0" data-title="ID" id="#=kendo.guid()#" scope="col"><a class="k-link" href="/aspnet-mvc/grid/detailtemplate_hierarchybinding_orders?employeeID=#=EmployeeID#&grid_#=EmployeeID#-sort=OrderID-asc">ID</a></th><th class="k-header" data-field="ShipCountry" data-index="1" data-title="Ship Country" id="#=kendo.guid()#" scope="col"><a class="k-link" href="/aspnet-mvc/grid/detailtemplate_hierarchybinding_orders?employeeID=#=EmployeeID#&grid_#=EmployeeID#-sort=ShipCountry-asc">Ship Country</a></th><th class="k-header" data-field="ShipAddress" data-index="2" data-title="Ship Address" id="#=kendo.guid()#" scope="col"><a class="k-link" href="/aspnet-mvc/grid/detailtemplate_hierarchybinding_orders?employeeID=#=EmployeeID#&grid_#=EmployeeID#-sort=ShipAddress-asc">Ship Address</a></th><th class="k-header" data-field="ShipName" data-index="3" data-title="Ship Name" id="#=kendo.guid()#" scope="col"><a class="k-link" href="/aspnet-mvc/grid/detailtemplate_hierarchybinding_orders?employeeID=#=EmployeeID#&grid_#=EmployeeID#-sort=ShipName-asc">Ship Name</a></th></tr></thead><tbody><tr class="k-no-data"><td colspan="4"></td></tr></tbody></table><div class="k-pager-wrap k-grid-pager"><a aria-label="Go to the first page" class="k-link k-pager-nav k-state-disabled k-pager-first" data-page="1" href="\#" title="Go to the first page"><span class="k-icon k-i-arrow-end-left"></span></a><a aria-label="Go to the previous page" class="k-link k-pager-nav k-state-disabled" data-page="0" href="\#" title="Go to the previous page"><span class="k-icon k-i-arrow-60-left"></span></a><div class="k-pager-numbers-wrap k-floatwrap"><select class="k-dropdown k-picker k-dropdown-list"><option selected="selected">1</option></select><ul class="k-pager-numbers"><li><span class="k-link k-state-selected" data-page="1">1</span></li></ul></div><a aria-label="Go to the next page" class="k-link k-pager-nav k-state-disabled" data-page="2" href="\#" title="Go to the next page"><span class="k-icon k-i-arrow-60-right"></span></a><a aria-label="Go to the last page" class="k-link k-pager-nav k-state-disabled k-pager-last" data-page="1" href="\#" title="Go to the last page"><span class="k-icon k-i-arrow-end-right"></span></a><span class="k-pager-info k-label">No items to display</span></div></div><script> kendo.syncReady(function(){jQuery("\#grid_#=EmployeeID#").kendoGrid({"columns":[{"title":"ID","headerAttributes":{"data-field":"OrderID","data-title":"ID","id":"#=kendo.guid()#"},"width":"100px","exportable":true,"field":"OrderID","encoded":true},{"title":"Ship Country","headerAttributes":{"data-field":"ShipCountry","data-title":"Ship Country","id":"#=kendo.guid()#"},"width":"150px","exportable":true,"field":"ShipCountry","encoded":true},{"title":"Ship Address","headerAttributes":{"data-field":"ShipAddress","data-title":"Ship Address","id":"#=kendo.guid()#"},"template":"\\#= ShipAddress \\#","exportable":true,"field":"ShipAddress","encoded":true},{"title":"Ship Name","headerAttributes":{"data-field":"ShipName","data-title":"Ship Name","id":"#=kendo.guid()#"},"width":"190px","exportable":true,"field":"ShipName","encoded":true}],"pageable":{"buttonCount":10},"sortable":true,"scrollable":false,"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/aspnet-mvc/grid/detailtemplate_hierarchybinding_orders?employeeID=#=EmployeeID#"},"prefix":""},"pageSize":5,"page":1,"groupPaging":false,"total":0,"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"OrderID":{"type":"number"},"CustomerID":{"type":"string"},"ContactName":{"type":"string"},"Freight":{"type":"number","defaultValue":null},"ShipAddress":{"type":"string"},"OrderDate":{"type":"date","defaultValue":null},"ShippedDate":{"type":"date","defaultValue":null},"ShipCountry":{"type":"string"},"ShipCity":{"type":"string"},"ShipName":{"type":"string"},"EmployeeID":{"type":"number","defaultValue":null}}}}}});}); <\/script> </div><div class="k-content" id="tabStrip_#=EmployeeID#-2"><div class='employee-details'><ul><li><label>Country:</label>#= Country #</li><li><label>City:</label>#= City #</li><li><label>Address:</label>#= Address #</li><li><label>Home Phone:</label>#= HomePhone #</li></ul></div></div></div></div><script> kendo.syncReady(function(){jQuery("\#tabStrip_#=EmployeeID#").kendoTabStrip({"animation":{"open":{"effects":"fade:in"}}});}); <\/script> .k-detail-cell .k-tabstrip .demo-section{ padding: 0.2em; } .employee-details ul { list-style:none; font-style:italic; margin: 15px; padding: 0; } .employee-details ul li { margin: 0; line-height: 1.7em; } .employee-details label { display:inline-block; width:90px; padding-right: 10px; text-align: right; font-style:normal; font-weight:bold; }

Description

This example demonstrates how you can utilize the detail template feature of the MVC grid component when implementing hierarchical table presentation. The key steps here are to:

Set the ClientDetailTemplateId setting which specifies the id of the script element containing the client-side detail template of the grid
Define the script tag content that will be shown when the user expands the grid rows

In this example we inject a TabStrip HtmlHelper extension with two tabs in the detail template - the first contains the orders of the relevant employee, and the second one holds his/her contact information.

Detail template

Themes & Swatches

Description

Support & Learning Resources