New to Kendo UI for jQuery? Download free 30-day trial

Initialize Data Attribute with Detail Template

Environment

Product Progress® Kendo UI® Grid for jQuery
Operating System Windows 10 64bit
Preferred Language JavaScript

Description

How can I initialize a Kendo UI jQuery Grid widget by using data attributes and including a detail template?

Solution

The following example demonstrates how to initialize a Grid by using data attributes and include a detail template.

     <div id="grid"
         data-role="grid"
         data-sortable="true"
         data-pageable="true"
         data-height="450"
         data-detail-init="viewModel.detailInit"
         data-columns='[{"field": "FirstName"}, {"field": "LastName"}, {"field": "Country"}, {"field": "City"}, {"field": "Title"}]'
         data-bind="source: dataSource, events: { dataBound: dataBound }"></div>
    <script>
      var dataSource = new kendo.data.DataSource({
        type: "odata",
        transport: {
          read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
        },
        pageSize: 6,
        serverPaging: true,
        serverSorting: true
      });

      var viewModel = kendo.observable({
        dataSource: dataSource,
        detailInit: function (e) {
          $("<div/>").appendTo(e.detailCell).kendoGrid({
            dataSource: {
              type: "odata",
              transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
              },
              serverPaging: true,
              serverSorting: true,
              serverFiltering: true,
              pageSize:6,
              filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
            },
            scrollable: false,
            sortable: true,
            pageable: true,
            columns: [
              { field: "OrderID", width: 70 },
              { field: "ShipCountry", title:"Ship Country", width: 100 },
              { field: "ShipAddress", title:"Ship Address" },
              { field: "ShipName", title: "Ship Name", width: 200 }
            ]
          });
        },
        dataBound: function(e) {
          e.sender.expandRow(e.sender.tbody.find("tr.k-master-row").first());
        }
      });
      kendo.bind($(document.body), viewModel);
    </script>

See Also

In this article