Create Custom Editor in Detail Template

Environment

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

Description

How can I create custom editor in the detail template of the Kendo UI Grid for jQuery?

Solution

The following example demonstrates how to create a custom editor in a Grid detail template.

EditPreviewOpen In Dojo

    <div id="grid"></div>

    <script type="text/x-kendo-template" id="template">
    <div class="tabstrip">
        <ul>
            <li class="k-active">Contact Information</li>
            <li>Orders</li>
      </ul>

        <div>
            <div class='employee-details'>
                <span class="field-name">First Name: </span> <input type="text" class="k-input k-textbox k-input-solid k-input-md k-rounded-md" data-bind="value:FirstName"/><br />
                <span class="field-name"> Last Name: </span> <input type="text" class="k-input k-textbox k-input-solid k-input-md k-rounded-md" data-bind="value:LastName"/><br />
                <span class="field-name"> Country: </span> <input type="text" class="k-input k-textbox k-input-solid k-input-md k-rounded-md" data-bind="value:Country"/><br />   

      </div>
      </div>
        <div>
            <div class="orders"></div>
      </div>
      </div>

    </script>


    <script>
      var element = $("#grid").kendoGrid({
        dataSource: {
          type: "odata",
          transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
          },
          pageSize: 5,
          serverPaging: true,
          serverSorting: true,
          schema: {
            model: {
              id: "EmplyeeID",
              fields: {
                FirstName: "FirstName",
                LastName: "LastName",
                Country: "Country"
              }
            }
          }
        },
        height: 450,
        sortable: true,
        pageable: true,
        detailTemplate: kendo.template($("#template").html()),
        detailInit: detailInit,
        toolbar: [{ text:"Save Changes", className: "grid-save-changes"}],
        columns: [
          {
            field: "FirstName",
            title: "First Name"
          },
          {
            field: "LastName",
            title: "Last Name"
          },
          {
            field: "Country"
          },
          {
            field: "City"
          },
          {
            field: "Title"
          }
        ]
      });

      function detailInit(e) {
        var detailRow = e.detailRow;
        var model = e.data;
        kendo.bind(detailRow,model);
        model.bind('change',function(e){
          var tr = $('tr[data-uid='+model.uid+']');
          $('#grid').data().kendoGrid.expandRow(tr);
        })
        detailRow.find(".tabstrip").kendoTabStrip({
          animation: {
            open: { effects: "fadeIn" }
          }
        });



        detailRow.find(".orders").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 }
          ]
        });
      }
    </script>
    <style> 
      .employee-details .k-input{
        width:50%;        
      }
      .field-name{
        width: 100px;
        display: inline-block;
      }
    </style>