Edit this page

Server Detail Templates

This article demonstrates how to set the detail template used during the server binding of a Kendo UI Grid for ASP.NET MVC.

Overview

Kendo UI Grid for ASP.NET MVC enables you to show additional information for a data item. This is done by setting the detail template of the Grid.

Getting Started

Server Details

Below are the steps for you to follow when configuring the Kendo UI Grid for ASP.NET MVC to display additional details of the Product entity from the Northwind database.

  1. Create a new ASP.NET MVC 4 application. If you have installed the Telerik UI for ASP.NET MVC Visual Studio Extensions, create a Telerik UI for ASP.NET MVC application. Name the application KendoGridServerDetailTemplate. If you decided not to use the Telerik UI for ASP.NET MVC Visual Studio Extensions, follow the steps from the introductory article to add Telerik UI for ASP.NET MVC to the application.

  2. Add a new Entity Framework Data Model. Right-click the ~/Models folder in the solution explorer and pick Add > New Item. Choose Data > ADO.NET Entity Data Model in the Add New Item dialog. Name the model Northwind.edmx and click Next. This starts the Entity Data Model Wizard.

    Figure 1. A new entity data model

    New entity data model

  3. Select Generate from database and click Next. Configure a connection to the Northwind database. Click Next.

    Figure 2. Choosing a connection

    Choose the connection

  4. Choose the Products table from Which database objects do you want to include in your model?. Leave all other options as they are set by default. Click Finish.

    Figure 3. Choosing the Products table

    Choose the Products table

  5. Open HomeController.cs and edit the Index action method.

    Example
        public ActionResult Index()
        {
            var northwind = new NorthwindEntities();
            ViewBag.Products = northwind.Products;
            return View();
        }
    
  6. In the view, configure the Grid for server binding to ViewBag.Products.

    Example
    
          <% Html.Kendo().Grid((IEnumerable<KendoGridServerDetailTemplate.Models.Product>)ViewBag.Products)
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(product => product.ProductID);
                    columns.Bound(product => product.ProductName);
                })
                .Render();
          %>
    
    
          @(Html.Kendo().Grid((IEnumerable<KendoGridServerDetailTemplate.Models.Product>)ViewBag.Products)
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(product => product.ProductID);
                    columns.Bound(product => product.ProductName);
                })
          )
    
  7. Set the detail template.

    Example
    
          <%: Html.Kendo().Grid((IEnumerable<KendoGridServerDetailTemplate.Models.Product>)ViewBag.Products)
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(product => product.ProductID);
                    columns.Bound(product => product.ProductName);
                })
                .Pageable()
                .DetailTemplate(product => {
                %>
                    <div>ProductID: <%: product.ProductID %></div>
                    <div>ProductName: <%: product.ProductName %></div>
                    <div>UnitsInStock: <%: product.UnitsInStock %></div>
                    <div>UnitPrice: <%: product.UnitPrice %></div>
                    <div>UnitsOnOrder: <%: product.UnitsOnOrder %></div>
                    <div>Discontinued: <%: product.Discontinued %></div>
                <%
                })
                .Render();
          %>
    
    
          @(Html.Kendo().Grid((IEnumerable<KendoGridServerDetailTemplate.Models.Product>)ViewBag.Products)
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(product => product.ProductID);
                    columns.Bound(product => product.ProductName);
                })
                .Pageable()
                .DetailTemplate(@<text>
                    <div>ProductID: @item.ProductID</div>
                    <div>ProductName: @item.ProductName</div>
                    <div>UnitsInStock: @item.UnitsInStock</div>
                    <div>UnitPrice: @item.UnitPrice</div>
                    <div>UnitsOnOrder: @item.UnitsOnOrder</div>
                    <div>Discontinued: @item.Discontinued</div>
                </text>)
          )
    
  8. Build and run the project.

    Figure 4. Choosing the Products table

    Server detail template

To download the Visual Studio Project, refer to this GitHub repository.

Server Hierarchy

Below are listed the steps for you to follow when configuring the Kendo UI Grid for ASP.NET MVC to display all Product entities available per Category entity from the Northwind database.

  1. Create a new ASP.NET MVC 4 application. If you have installed the Telerik UI for ASP.NET MVC Visual Studio Extensions, create a Telerik UI for ASP.NET MVC application. Name the application KendoGridServerHierarchy. If you decided not to use the Telerik UI for ASP.NET MVC Visual Studio Extensions, follow the steps from the introductory article to add Telerik UI for ASP.NET MVC to the application.

  2. Add a new Entity Framework Data Model. Right-click the ~/Models folder in the solution explorer and pick Add > New Item. Choose Data > ADO.NET Entity Data Model in the Add New Item dialog. Name the model Northwind.edmx and click Next. This starts the Entity Data Model Wizard.

    Figure 5. A new entity data model

    New entity data model

  3. Select Generate from database and click Next. Configure a connection to the Northwind database. Click Next.

    Figure 6. Choosing the connection

    Choose the connection

  4. Choose the Products and Categories tables from the Which database objects do you want to include in your model?. Leave all other options as they are set by default. Click Finish.

  5. Open HomeController.cs and edit the Index action method.

    Example
        public ActionResult Index()
        {
            var northwind = new NorthwindEntities();
            ViewBag.Categories = northwind.Categories;
            return View();
        }
    
  6. In the view, configure the Grid for server binding to ViewBag.Categories.

    Example
    
            <% Html.Kendo().Grid((IEnumerable<KendoGridServerHierarchy.Models.Category>)ViewBag.Categories)
                  .Name("grid")
                  .Columns(columns =>
                  {
                      columns.Bound(category => category.CategoryID);
                      columns.Bound(category => category.CategoryName);
                  })
                  .Render();
            %>
    
    
            @(Html.Kendo().Grid((IEnumerable<KendoGridServerHierarchy.Models.Category>)ViewBag.Categories)
                  .Name("grid")
                  .Columns(columns =>
                  {
                      columns.Bound(category => category.CategoryID);
                      columns.Bound(category => category.CategoryName);
                  })
            )
    
  7. Set the detail template. Define another Grid which is bound to the Products property of the category entity. Make sure the name of the Grid is unique.

    Example
    
            <% Html.Kendo().Grid((IEnumerable<KendoGridServerHierarchy.Models.Category>)ViewBag.Categories)
                  .Name("grid")
                  .Columns(columns =>
                  {
                      columns.Bound(category => category.CategoryID);
                      columns.Bound(category => category.CategoryName);
                  })
                  .DetailTemplate(category => {
                  %>
                    <% Html.Kendo().Grid(item.Products)
                          .Name(string.Format("product_grid_{0}", item.CategoryID)) // The Name() should be unique.
                          .Columns(columns =>
                          {
                              columns.Bound(product => product.ProductID);
                              columns.Bound(product => product.ProductName);
                          })
                          .Pageable()
                          .Render();
                    %>
                  <%
                  })
                  .Render();
            %>
    
    
            @(Html.Kendo().Grid((IEnumerable<KendoGridServerHierarchy.Models.Category>)ViewBag.Categories)
                  .Name("grid")
                  .Columns(columns =>
                  {
                      columns.Bound(category => category.CategoryID);
                      columns.Bound(category => category.CategoryName);
                  })
                  .Pageable()
                  .DetailTemplate(@<text>
                    @(Html.Kendo().Grid(item.Products)
                          .Name(string.Format("product_grid_{0}", item.CategoryID)) // The Name() should be unique.
                          .Columns(columns =>
                          {
                              columns.Bound(product => product.ProductID);
                              columns.Bound(product => product.ProductName);
                          })
                          .Pageable()
                    )
                  </text>)
            )
    
  8. Build and run the project.

    Figure 7. The final result

    Server hierarchy

See Also

Other articles on the Kendo UI Grid for ASP.NET MVC:

Articles on Telerik UI for ASP.NET MVC: