NFeskova
NFeskova

Reputation: 77

onChange function for a specific column in grid

Ok, so here is the thing... I have grid with 3 columns: Premises Order, Name and Postal Code

The first column Premises Order is editable(numericall). What I want to do is this: Make an onChange function to save the value of the new inserted number. I know I need a procedure for that I just want to know how to catch the value (in console), to know that I have it and than I'll do the procedure.

Here is the code

PremisesGrid2 = $("#assignedRoute").kendoGrid({
                dataSource: {
                    type: "application/jsonp",
                    transport: {
                        read:
                                {
                                    url: "http://" + servername + "/uBillingServices/Premise/Premise.svc/GetAllPremisesByRoute",
                                    dataType: "json",
                                    data: function () {
                                        return {

                                            Route_ID: selectedID,
                                            UserName: userName,
                                            WorkStation: workStation

                                        }
                                    }
                                }
                    }, pageSize: 10,
                    serverPaging: true,
                    schema: {
                        model: {
                            fields: {
                                ID: { type: "string", validation: { required: true },     editable: false },
                                PostalCode: { type: "string", validation: { required: true }, editable: false },
                                Latitude: { type: "string", validation: { required: true }, editable: false },
                                Longitude: { type: "string", validation: { required: true }, editable: false },
                                IsMember: { type: "string", validation: { required: true }, editable: false },
                                Name: { type: "string", validation: { required: true }, editable: false },
                                RouteOrderBy: { type: "number", validation: { required: true }, editable: true, nullable: false, format: "{0:n2}" }
                            }
                        },
                        data: function (result) {
                            return result.rows || result;
                        },
                        total: function (result) {
                            var data = this.data(result);
                            return result.totalRows || result.length || 0; ;
                        }
                    }
                },
change: onChange,
                dataBound: function (e) {
                    e.sender.select(e.sender.tbody.find(">tr:first"));
                },
                selectable: "multiple",
                scrollable: true,
                filterable: true,
                editable: true,
                groupable: false,
                pageable: {
                    numeric: true,
                    pageSizes: true,
                    previousNext: false
                },
                sortable: {
                    mode: "single",
                    allowUnsort: false
                },
                height: 400,
                columns: [
                { field: "RouteOrderBy", title: "Premise Order", headerAttributes: {
                    style: "font-size:small; text-align:center"
                }, attributes: { style: "text-align:right" }
                },
                    { field: "PostalCode", title: "Assigned Premises", headerAttributes: {
                        style: "font-size:small; text-align:center"
                    }
                    },
                    { field: "Name", title: "Customer", headerAttributes: {
                        style: "font-size:small; text-align:center"
                    }
                    }

                    ]
            });

Thank you.

Upvotes: 1

Views: 3625

Answers (1)

OnaBai
OnaBai

Reputation: 40887

Instead of using change event, you should use save. change is fired when there is a change in the selection of a row not in the value.

For displaying the edited value, the HTML element containing the edited value and the item in the model, you can use:

save : function (e) {
    console.log("The values entered by the user.", e.values);
    console.log("The jQuery element which is in edit mode.", e.container);
    console.log("The edited model.", e.model);
},

Upvotes: 4

Related Questions