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

Access the Editor Control in the edit Event of the Grid


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


How can I 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.

<script src=""></script>
<div id="example">
    <div id="grid"></div>


        $(document).ready(function () {
            var dataSource = new{
               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} }

                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 the widget element and then get the widget instance
                  // if the DropDownListwidget is found.
                  if (categoryDropDownList) {
                    // Use the DropDownList API based on the model values to accomplish your business requirement.
                    // Link:
                    console.log("DropDownList", categoryDropDownList);

                  var priceNumericTextBox = container.find("[data-role=numerictextbox]").data("kendoNumericTextBox");
                  // Find the widget element and then the widget instance.
                  if (priceNumericTextBox) {
                    // Use the NumericTextBox API.
                    // Link:
                    console.log("NumericTextBox", priceNumericTextBox);

        function categoryDropDownEditor(container, options) {
            $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
                    autoBind: false,
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: ""


See Also

In this article