Kendo Editable Grid - Change event not working on Drop Downs

[Vivek]

We have Kendo Editable Grids with editables as opups. On these popups we have a number of Drop Downs. Based on the values that a user selects , we want to make certain fields apper\disappear , change value etc. 

But we are getting a java script error 

 

Refer the Example here

var ProductModel = kendo.data.Model.define({
    id: "ProductID",
    fields: {
        ProductID: { type: "string" },
        ProductName: { type: "string" },
        ContactName: { type: "string" },
        UnitPrice: { type: "number" },
        UnitsInStock: { type: "number" },
        Discontinued: { type: "bool" }
    }
});

var productDatasource = new kendo.data.DataSource({
    data: [{"ProductID":1,"ProductName":"Chai","UnitPrice":18,"UnitsInStock":39,"Discontinued":false},{"ProductID":2,"ProductName":"Chang","UnitPrice":19,"UnitsInStock":17,"Discontinued":false},{"ProductID":3,"ProductName":"Aniseed Syrup","UnitPrice":10,"UnitsInStock":13,"Discontinued":false},{"ProductID":4,"ProductName":"Chef Anton\u0027s Cajun Seasoning","UnitPrice":22,"UnitsInStock":53,"Discontinued":false}],    
    schema: {
        model: ProductModel
    }                
});
var actionDataSource = new kendo.data.DataSource({
    data: [
        {"Value": 1, "Text": "Edit"},
        {"Value": 2, "Text": "Delete"},
        {"Value": 3, "Text": "Preview"},
        {"Value": 4, "Text": "Clone"}
    ]
});

var onClick = function (event, delegate) {
      event.preventDefault();
      var grid = $("#grid").data("kendoGrid");
      var selectedRow = grid.select();
      var dataItem = grid.dataItem(selectedRow);
      if (selectedRow.length > 0)
        delegate(dataItem);
      else
        alert("Please select a row.");
      };

$(function() {
    var viewModel = new kendo.data.ObservableObject({
        dataSource: productDatasource,
        actionSource: actionDataSource,
        
        onChange: function (event) {
            onClick(event, function (dataItem) {
                alert(dataItem.ProductID + " " + dataItem.ProductName);
            });            
        },
        
    });
    
    kendo.bind($("#grid"), viewModel);
});

 

<script type="text/x-kendo-template" id="ddlGrid">
    <input data-role="dropdownlist"
           data-text-field="Text"
           data-value-field="Value"
           data-bind="source: actionSource, events: { change: onChange}"/>
</script>
    <div class="demo-section">
        <div class="k-content" style="width: 100%">
            <div id="grid"
            data-role="grid"
            data-toolbar="[{'name': 'create', 'text': 'Add'}]"
            data-role="grid"
            data-scrollable="true"
            data-editable="popup"
            data-selectable="true"
            data-filterable="true"
            data-sortable="true"
            data-pageable="true"
            data-columns="[
                { field: 'ProductID' },
                { field: 'ProductName' },
                { field: 'UnitPrice' },
                { field: 'UnitsInStock' },
                { field: 'Discontinued' },
                { title: 'Action', template: kendo.template($('#ddlGrid').html())} ]"
            data-bind="source: dataSource, event">
            </div>
        </div>
    </div>

 

[Rosen]

Hello Vivek,

 

I'm afraid that the event binding which handler is attached to the main view model will not work inside the edit form. This limitation is due to the way event handlers are resolved as the edit form has internal view model. In order to achieve this you will need to manually attach the handler inside the edit event of the Grid. Here is a modified version of the sample. Note that the change event handler is removed from the DropDownList initialization and for the display mode it is attached inside the dataBound event of the Grid widget.

 

Regards,
Rosen
Telerik by Progress