Kendo Grid Template Input OnChange/Keyup Event Hookup

[Sandro]

I'm trying to calculate a "Total" column while the user types the quantity through a input inside the template of the grid. I've been stuck here for a while now.

var ds = new kendo.data.DataSource({
                type: "aspnetmvc-ajax",
                transport: {
                    read: "Home/Products_Read"
                },
                schema: {
                    data: "data",
                    total: "total",
                    model: {
                        id: "products",
                        fields: {
                            Code: { editable: false },
                            Number: { editable: false },
                            Name: { editable: false },
                            Supplier: { editable: false },
                            Price: { editable: false, type: "number", format: "{0:n}" },
                            UnitStock: { editable: false },
                            UnitBasic: { editable: false },
                            Quantity: { editable: true, type: "number" },
                            Total: { editable: true, type: "number", format: "{0:n}" }
                        }
                    }
                },
                pageSize: 15,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            });

            var gridResult = $("#grid").kendoGrid({
                dataSource: ds,
                selectable: "row",
                sortable: true,
                pageable: true,
                columns: [
                    { field: "Code", title: "Code", width: "100px" },
                    { field: "Number", title: "Number", width: "100px" },
                    { field: "Name", title: "Name" },
                    { field: "Supplier", title: "Supplier", width: "100px" },
                    { field: "Price", title: "Price", width: "100px", format: "{0:n}" },
                    { field: "UnitStock", title: "Unit", width: "100px" },
                    { field: "Quantity", title: "Quantity", width: "100px", template: '<input class="someInput" name=#=Code# value=#=Quantity# />' },
                    { field: "Total", title: "Total", width: "100px", template: '#=Price*Quantity#' },
                    ]
            });

            $('.someInput').on('change', function () {
                for (var i = 0; i < gridResult.dataSource.data().length; i++) {
                    if (parseInt(gridResult.dataSource.data()[i].Code) == parseInt($(this).attr('name'))) {
                        gridResult.dataSource.data()[i].Quantity.Set($(this).val());
                    }
                }
                gridResult.refresh();
            });

[Dimiter Madjarov]

Hello Sandro,


To change a property of an observable object you should use the set method, so the dataSource is aware of this.
E.g.

var item = grid.dataSource.at(0);
item.set("Quantity", 100);

I will also suggest you an alternative approach to achieve this - define the Grid as editable, bind to the save event and use the values parameter to get the new value for the specified model. Here is a JS Bin example, which demonstrates this.

I hope that this information was helpful for you.

Regards,
Dimiter Madjarov
Telerik