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

Kendo Grid Template Input OnChange/Keyup Event Hookup

1 Answer 716 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sandro
Top achievements
Rank 1
Sandro asked on 18 Jul 2013, 03:04 AM
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();
            });

1 Answer, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 19 Jul 2013, 01:13 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Sandro
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or