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 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 = 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>

     

  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 03 Nov 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.

     

    Regards,
    Rosen
    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.
     
  3. Kendo UI is VS 2017 Ready
Back to Top