Edit this page

Show Custom Editor Using the Selected Item outside the Grid

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

Example
    <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>

See Also

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy