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

    Show Custom Editor Using the Selected Item outside the Grid

    Environment

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

    Description

    How can I show a custom editor which uses the currently selected item outside the Kendo UI Grid for jQuery?

    Solution

    The following example demonstrates how to use a custom editor, which uses the currently selected item, outside the Grid.

    Open In Dojo
        <style>
          label{display:block;width:25em;position:relative;line-height:2.6;}
          label > .k-textbox, label > .k-button, label > .k-widget{position:absolute;right:0;width:15em;}
          label > .checkbox{position:absolute;right:12.4em;top:.3em;font-size:1.1em;}
          #grid{margin:2em 0 0;}
        </style>
    
        <div id="example">
    
          <form id="gridEditor">
            <label>ProductName <input type="text" name="ProductName" data-bind="value: ProductName" required="true" class="k-textbox" /></label>
            <label>UnitsInStock <input type="number" name="UnitsInStock" data-role="numerictextbox" required="true" min="0" data-bind="value: UnitsInStock" /></label>
            <label>Discontinued <input type="checkbox" name="Discontinued" data-bind="checked: Discontinued" class="checkbox" /></label>
            <label>Save changes <button type="button" id="saveChanges" class="k-button">Submit</button></label>
            <span class="k-invalid-msg" data-for="ProductName"></span>
            <span class="k-invalid-msg" data-for="UnitsInStock"></span>
          </form>
    
          <div id="grid"></div>
    
          <script>
            $(document).ready(function () {
              var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
                  dataSource = new kendo.data.DataSource({
                    transport: {
                      read:  {
                        url: crudServiceBaseUrl + "/Products",
                        dataType: "jsonp"
                      },
                      update: {
                        url: crudServiceBaseUrl + "/Products/Update",
                        dataType: "jsonp"
                      },
                      destroy: {
                        url: crudServiceBaseUrl + "/Products/Destroy",
                        dataType: "jsonp"
                      },
                      create: {
                        url: crudServiceBaseUrl + "/Products/Create",
                        dataType: "jsonp"
                      },
                      parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                          return {models: kendo.stringify(options.models)};
                        }
                      }
                    },
                    batch: true,
                    pageSize: 10,
                    schema: {
                      model: {
                        id: "ProductID",
                        fields: {
                          ProductID: { editable: false, nullable: true },
                          ProductName: { validation: { required: true } },
                          Discontinued: { type: "boolean" },
                          UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                        }
                      }
                    }
                  });
    
              var selectedRow = null;
    
              $("#gridEditor").kendoValidator();
    
              var grid = $("#grid").kendoGrid({
                dataSource: dataSource,
                change: function(e){
                  selectedRow = e.sender.select();
                  var item = e.sender.dataItem(selectedRow);
                  kendo.bind($("#gridEditor"), item);
                },
                dataBound: function(e){
                  if (selectedRow) {
                    var tr = $("[data-uid='"+ selectedRow.attr("data-uid") +"']");
                    e.sender.select(tr);
                  }
                  if (!selectedRow || !tr[0]) {
                    grid.select(grid.tbody.children().eq(0));
                  }
                },
                pageable: true,
                selectable: true,
                height: 400,
                toolbar: [{template: "<button id='addNew' type='button' class='k-button'>Add new record</button>"}],
                columns: [
                  { field: "ProductName", title: "Product Name"},
                  { field: "UnitsInStock", title:"Units In Stock", width: 200 },
                  { field: "Discontinued", width: 200 }]
              }).data("kendoGrid");
    
              $("#addNew").click(function(){
                var newItem = grid.dataSource.insert({},0);
                grid.dataSource.page(1);
                grid.select($("[data-uid='"+ newItem.uid +"']"));
              });
    
              $("#saveChanges").click(function(){
                grid.dataSource.one("requestEnd", function(e) {
                  alert("Success");
                });
                grid.saveChanges();
              });
    
            });
          </script>
        </div>