Edit this page

Use Different Popup Editors for Create and Update Operations

The following example demonstrates how to use different popup editors in a Grid for the Create and Update data operations.

Example
    <script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
    <div id="grid"></div>
    <script>
      $(document).ready(function(){
        var dataSource = new kendo.data.DataSource({
          pageSize: 5,
          data: products,
          autoSync: true,
          schema: {
            model: {
              id: "ProductID",
              fields: {
                ProductID: { editable: false, nullable: true },
                ProductName: { validation: { required: true } },
                Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} }
              }
            }
          }
        });

        $("#grid").kendoGrid({
          editable: {
            mode:"popup",
            template: $("#template").html()
          },
          dataSource: dataSource,
          pageable: true,
          edit:function(e){
            $('#categories').kendoDropDownList({
              optionLabel: "Select category...",
              dataTextField: "CategoryName",
              dataValueField: "CategoryID",
              change: function(){
                e.model.Category.CategoryName=this.text();
              },
              dataSource: {
                type: "odata",
                serverFiltering: true,
                transport: {
                  read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
                }
              }
            });
            $("#products").kendoDropDownList({
              autoBind: false,
              cascadeFrom: "categories",
              optionLabel: "Select product...",
              dataTextField: "ProductName",
              dataValueField: "ProductID",
              change: function(){
                e.model.ProductName = this.text();
              },
              dataSource: {
                type: "odata",
                serverFiltering: true,
                transport: {
                  read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                }
              }
            });
          },
          toolbar: ["create"],
          columns: [
            { field:"ProductName",title:"Product Name" },
            { field: "Category", title: "Category", width: "160px", template: "#=Category.CategoryName#" },
            { command: ["edit", "destroy"], title: "&nbsp;", width: "160px" }]

        });
      })
    </script>
    <script type="text/x-kendo-template" id="template">
    #if(data.isNew()) {#
        #var createTemp = kendo.template($("\#createTemplate").html());#
        #=createTemp(data)#
    #} else {#
        #var createTemp = kendo.template($("\#editTemplate").html());#
        #=createTemp(data)#
    #}#
    </script>
    <script type="text/x-kendo-template" id="createTemplate">
    <input id="categories" style="margin-left:10px">
    </script>
    <script type="text/x-kendo-template" id="editTemplate">
    <input id="products" style="margin-left:10px">
    </script>
    <script>

    </script>

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