Access Editor Controls in Edit Events

Access Editor Controls in Edit Events

The following example demonstrates how to access an editor in the edit event handler of the Grid.

The functionality relies on the following concepts:

• The edit event handler of the Grid provides a reference to the DOM element of the edit container.
• The Kendo UI widgets have a data-role HTML attribute rendered for the DOM element. This attribute holds the widget object.

For brevity, the following demo does not include the configuration for the Data Source transport. However, for the CRUD operations to work properly, they require a transport configuration.

Example

<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div id="example">
    <div id="grid"></div>

    <script>

        $(document).ready(function () {
            var dataSource = new kendo.data.DataSource({
               pageSize: 20,
               data: products,
               schema: {
                   model: {
                     id: "ProductID",
                     fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true } },
                        Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
                        UnitPrice: { type: "number", validation: { required: true, min: 1} }
                     }
                   }
               }
            });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                pageable: true,
                height: 550,
                toolbar: ["create"],
                columns: [
                    { field:"ProductName",title:"Product Name" },
                    { field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
                    { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "130px" },
                    { command: "edit", title: " ", width: "150px" }],
                editable: "inline",
                edit: function(e) {
                  var model = e.model; //reference to the model that is about the be edited

                  var container = e.container; //reference to the editor container

                  var categoryDropDownList = container.find("[data-role=dropdownlist]").data("kendoDropDownList"); //find widget element and then get the widget instance
                  // if DropDownListwidget is found
                  if (categoryDropDownList) {
                    //use DropDownList API based on the model values to accomplish your bussiness requirement.
                    //link: http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist
                    console.log("DropDownList", categoryDropDownList);
                  }

                  var priceNumericTextBox = container.find("[data-role=numerictextbox]").data("kendoNumericTextBox"); //find widget element and then the widget instance
                  if (priceNumericTextBox) {
                    //use NumericTextBox API
                    //link: http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox
                    console.log("NumericTextBox", priceNumericTextBox);
                  }
                }
            });
        });

        function categoryDropDownEditor(container, options) {
            $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
                        }
                    }
                });
        }

    </script>
</div>

See Also

• JavaScript API Reference of the Grid
• How to Add New Rows When Tabbing out of the Last One
• How to Build Custom dataSource for Custom Editor
• How to Customize the Delete Confirmation Dialog
• How to Delete Multiple Rows Selected with Checkboxes
• How to Edit Records in Child Grids
• How to Edit Records Using External Forms
• How to Increase Popup Edit Form and Textbox Width
• How to Preserve Dirty Indicator in Incell Editing and Client Operations
• How to Render Grid Editor in Column Template
• How to Show Custom Editor Using the Selected Item outside the Grid
• How to Skip Non-editable Cells When Tabbing
• How to Use AutoComplete as Custom Column Editor
• How to Use CRUD Operations When Grid Is Bound through MVVM
• How to Use Editors Based on Data Item Property
• How to Use TreeView as Custom Editor

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