All Components


    Grid / Detail template


    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.

    ASP.NET MVC source

    Also available for:

    • detailtemplate.cshtml
    • DetailTemplateController.cs

    Support & learning resources

    Grid for other technologies