Reputation: 77
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
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