Kendo Editable Grid - Change event not working on Drop Downs

2 posts, 0 answers
  1. Vivek
    Vivek avatar
    3 posts
    Member since:
    Oct 2016

    Posted 31 Oct 2016 Link to this post

    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 ={
        id: "ProductID",
        fields: {
            ProductID: { type: "string" },
            ProductName: { type: "string" },
            ContactName: { type: "string" },
            UnitPrice: { type: "number" },
            UnitsInStock: { type: "number" },
            Discontinued: { type: "bool" }

    var productDatasource = new{
        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{
        data: [
            {"Value": 1, "Text": "Edit"},
            {"Value": 2, "Text": "Delete"},
            {"Value": 3, "Text": "Preview"},
            {"Value": 4, "Text": "Clone"}

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

    $(function() {
        var viewModel = new{
            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-bind="source: actionSource, events: { change: onChange}"/>
        <div class="demo-section">
            <div class="k-content" style="width: 100%">
                <div id="grid"
                data-toolbar="[{'name': 'create', 'text': 'Add'}]"
                    { field: 'ProductID' },
                    { field: 'ProductName' },
                    { field: 'UnitPrice' },
                    { field: 'UnitsInStock' },
                    { field: 'Discontinued' },
                    { title: 'Action', template: kendo.template($('#ddlGrid').html())} ]"
                data-bind="source: dataSource, event">


  2. Rosen
    Rosen avatar
    3253 posts

    Posted 03 Nov 2016 Link to this post

    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.


    Telerik by Progress
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
Back to Top