This is a migrated thread and some comments may be shown as answers.

Kendo Editable Grid - Change event not working on Drop Downs

1 Answer 132 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Vivek
Top achievements
Rank 1
Vivek asked on 31 Oct 2016, 01:19 PM

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>

 

1 Answer, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 03 Nov 2016, 07:49 AM

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.
 
Tags
Grid
Asked by
Vivek
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Share this question
or