Hello, after much trial and error I've managed to remote bind my Grid to a Datasource and update it. However, it appears it ONLY updates if I'm changing at least 2 cells in a row. If I only change 1 cell, the update event does not fire.
I suspect the is either a Schema, Model or Data Binding issue.
$(kendoGrid).kendoGrid({
dataSource: {
transport: {
read: {
url: "Personnel/GetPersonnel",
type: "GET",
dataType: "json"
},
update: {
url: "Personnel/PutPersonnel",
type: "PUT",
beforeSend: function (xhr, data) {
var json = JSON.parse(data.data);
data.url += '?=' + json.id;
xhr.setRequestHeader('id', json.id);
},
contentType: "application/json; charset=utf-8"
},
parameterMap:
function (options, operation) {
if (operation !== "read") {
return JSON.stringify(options);
}
}
},
schema: {
data: "data",
total: "total",
model: {
"id": "id",
}
},
fields: {
id: { "editable": false },
employeeNumber: { "editable": false },
loginName: { },
firstName: { },
middleName: { },
lastName: { },
site.name: { },
state.stateName: { },
isMechanic: { "editable": false },
isDriver: { "editable": false }
}
}
});
14 Answers, 1 is accepted
Rank 1
Didn't realize I couldn't edit my post. To expand, if I make 2 changes to a row in the grid, meaning I change 2 values in 2 seperate cells to be something other than the original values, Kendo generates a successful request. My server receives the value and updates the DataSource. The change is reflected in the Grid.
If I only make 1 change to 1 cell in the Grid and then click the 'Update' button, Kendo does not create a Network request at all. It is not detecting a changed value.
Hello Ryan,
Unfortunately, I'm not able to tell where the cause for the problem might be by looking at the provided information. Are you getting the same behavior using the inline editing online demo? Maybe you could modify the demo to showcase the issue you are facing.
Rosen
Telerik by Progress
Rank 1
I did attempt to but I wasn't able to replicate my situation. My data is created from JSON values and the general construction of my grid appears below. Please let me know if you see any mistakes in my setup.
$(kendoGrid).kendoGrid({
selectable: data.selectable,
allowCopy: data.allowCopy,
filterable: $.parseJSON(data.filterable),
sortable: data.sortable,
columnMenu: data.columnMenu,
resizable: data.resizable,
columns: data.columns,
dataSource: {
transport: {
read: {
url: data.dataRoute,
type: "GET",
dataType: "json"
},
update: {
url: data.dataUpdateRoute,
type: data.dataUpdateType,
beforeSend: function (xhr, data) {
var json = JSON.parse(data.data);
data.url += '?=' + json.id;
xhr.setRequestHeader('id', json.id);
kendo.ui.progress($(kendoGrid).data('kendoGrid').element, true);
},
complete: function(response, type){
kendo.ui.progress($(kendoGrid).data('kendoGrid').element, false);
},
contentType: "application/json; charset=utf-8"
},
parameterMap:
function (data, operation) {
if (operation !== "read") {
return JSON.stringify(data);
}
console.log(data);
}
},
schema: {
data: "data",
total: "total",
model: data.model,
},
serverPaging: false,
pageSize: data.pageSize
},
pageable: data.pageable,
editable: data.editable
});
Rank 1
Update: Since I last posted, I reported my problem as being an issue with less than 2 cells being updated in my grid. I have further narrowed down my problem since then. I suspect there is a 0 indexing problem that may have something to do with how my model and schema work together.
Assume a grid with columns First Name, Middle Name and Last Name of a person showing. If I click my edit button, then first change the values in First Name then the values in Middle Name, and finally hit Update, only Middle Name is shown in my Network request as having a changed value. The full Network request shows that entire row's data with the only difference being in Middle Name from what is shown in the gird. The old value from First Name is in the network request with the new value in Middle Name. I would expect First and Middle Names to both have update values in the Network request.
If I changed only 1 column value and click Update, a Network request is not sent. Kendo did not detect a grid change so no request was created. I would expect a request to be created with the newly changed value.
If I change all 3 columns in the order First Name, Middle Name, Last Name and click Update, only Middle Name and Last Name's changed values are seen in the Network request (along with all other data and the original value of First Name).
Hello Ryan,
I'm afraid that the provided code snippet brings little information about the possible cause for the behavior in question. The column definition as well as schema.model definition are missing. Are you using custom edit templates or/and have set some of the fields as editable: false?
Regards,Rosen
Telerik by Progress
Rank 1
My grid is constructed dynamically so it's a bit difficult to show the entire grid in script. I am setting some fields to editable: false. Here is the raw data I am using for schema.model and column:
"columns": [
{
"field": "id",
"title": "ID",
"filterable": true,
"editable": false
},
{
"field": "employeeNumber",
"title": "Employee #",
"filterable": true
},
{
"field": "loginName",
"title": "Login Name",
"filterable": true
},
{
"field": "firstName",
"title": "First Name",
"filterable": true
},
{
"field": "middleName",
"title": "Middle Name",
"filterable": false
},
{
"field": "lastName",
"title": "Last Name",
"filterable": false
},
{
"field": "site.name",
"title": "Site",
"filterable": false
},
{
"field": "state.stateName",
"title": "State",
"filterable": false
},
{
"field": "isMechanic",
"title": "Is Mechanic",
"filterable": false
},
{
"field": "isDriver",
"title": "Is Driver",
"filterable": false
},
{
"command": [
{
"name": "edit",
"text": {
"edit": "Edit"
}
}
],
"title": " "
}
],
"editable": "inline"
"model": {
"id": "id",
"fields": {
"id": {
"editable": false
},
"employeeNumber": {
"editable": false
},
"loginName": {},
"firstName": {},
"middleName": {},
"lastName": {},
"site.name": {},
"state.stateName": {},
"isMechanic": {
"editable": false
},
"isDriver": {
"editable": false
}
}
}
Hello Ryan,
Unfortunately, I'm still not able to re-create such behavior. Please take a look at this test page, maybe I'm missing something obvious. Feel free to modify it as the issue to appear and send it back to us for further investigation.
Regards,Rosen
Telerik by Progress
Rank 1
I attempted using your example, but I could not replicate my issue. However, I have further narrowed down the cause of my problem. It appears that my problem is related to the field currently being edited. While the blinking mouse cursor is inside of the field being changed (the capital " I " mouse cursor), the change is not registered by Kendo until the mouse is moved away from the field. Therefore, what I am witnessing which is me believing only 1 field of 2 fields being changed is a result of my mouse cursor not having been moved away from that field yet.
For example, in my grid if I change my first name field and middle name field, but leave the mouse cursor inside of middle name, then click 'Update', only first name is changed. However, if I were to make the same change, but instead move my mouse cursor to the last name field after making my changes to first and middle name, THEN clicking update, the changes to first name and middle name are registered.
This is why my network request was only showing some of the fields changed. Kendo was not detecting a change in the field values when the Update button was clicked.
Rank 1
$(kendoGrid).kendoGrid({
selectable: true,
allowCopy: true,
filterable: true,
sortable: true,
columnMenu: true,
resizable: true,
columns: [
{
"field": "id",
"title": "ID",
"filterable": true,
"editable": false
},
{
"field": "employeeNumber",
"title": "Employee #",
"filterable": true
},
{
"field": "loginName",
"title": "Login Name",
"filterable": true
},
{
"field": "firstName",
"title": "First Name",
"filterable": true
},
{
"field": "middleName",
"title": "Middle Name",
"filterable": false
},
{
"field": "lastName",
"title": "Last Name",
"filterable": false
},
{
"field": "site.name",
"title": "Site",
"filterable": false
},
{
"field": "state.stateName",
"title": "State",
"filterable": false
},
{
"field": "isMechanic",
"title": "Is Mechanic",
"filterable": false
},
{
"field": "isDriver",
"title": "Is Driver",
"filterable": false
},
{
"command": [
{
"name": "edit",
"text": {
"edit": "Edit"
}
}
],
"title": " "
}
],
"editable": "inline",
dataSource: {
transport: {
read: {
url: Personnel/GetPersonnel,
type: "GET",
dataType: "json"
},
update: {
url: Personnel/PutPersonnel,
type: "PUT",
beforeSend: function (xhr, data) {
var json = JSON.parse(data.data);
data.url += '?=' + json.id;
xhr.setRequestHeader('id', json.id);
kendo.ui.progress($(kendoGrid).data('kendoGrid').element, true);
},
complete: function(response, type){
kendo.ui.progress($(kendoGrid).data('kendoGrid').element, false);
},
contentType: "application/json; charset=utf-8"
},
parameterMap:
function (data, operation) {
if (operation !== "read") {
return JSON.stringify(data);
}
console.log(data);
}
},
batch: true,
schema: {
data: "data",
total: "total",
model: {
"id": "id",
"fields": {
"id": {
"editable": false
},
"employeeNumber": {
"editable": false
},
"loginName": {},
"firstName": {},
"middleName": {},
"lastName": {},
"site.name": {},
"state.stateName": {},
"isMechanic": {
"editable": false
},
"isDriver": {
"editable": false
}
}
},
serverPaging: false,
pageSize: 5
},
pageable: true,
editable: true
});
I took the time to compile my grid's structure completely. Please let me know if anything seems out of place.
Hello Ryan,
Indeed, in order changes to be tracked by the DataSource change event of the input element should be triggered. However, it should be triggered when the button is clicked as the input element will be blured, moving the focus to the button. From the provided description, it seems that this is not true in your case. However, I'm not able to tell why. Are you doing some custom focus management? For example handling the keyboard navigation or manually focusing elements on the page? Or maybe the Grid is placed inside some container which is "stilling" the focus.
Rosen
Telerik by Progress
Rank 1
Rank 1
Specifically, the property causing my issue with Kendo's focus events is JQuery UI's draggable class.
https://jqueryui.com/draggable/
Hello Ryan,
Most probably the draggable is preventing the mousedown event or similar. It appears that there was similar issue which seems to be addressed some time ago. Are you using the latest version of the draggable.
Regards,Rosen
Telerik by Progress
Rank 1