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

Kendo Grid Update Only Working on Minimum of 2 Cells in Row

14 Answers 424 Views

Grid

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

Ryan asked on 14 Oct 2016, 07:16 PM

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

answered on 04 Nov 2016, 05:58 PM

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
});

answered on 04 Nov 2016, 06:06 PM

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).

answered on 07 Nov 2016, 03:13 PM

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
}
}
}

answered on 08 Nov 2016, 05:27 PM

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.

answered on 08 Nov 2016, 05:34 PM

$(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.

answered on 09 Nov 2016, 08:15 AM

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.

Regards,
Rosen
Telerik by Progress

Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.