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 112 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
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

Sort by
0
Ryan
Top achievements
Rank 1
answered on 14 Oct 2016, 07:18 PM

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.

0
Rosen
Telerik team
answered on 18 Oct 2016, 09:30 AM

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.

Regards,
Rosen
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Ryan
Top achievements
Rank 1
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
    });

0
Ryan
Top achievements
Rank 1
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).

0
Rosen
Telerik team
answered on 07 Nov 2016, 09:26 AM

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
 
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.
 
0
Ryan
Top achievements
Rank 1
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
              }
            }
          }

0
Rosen
Telerik team
answered on 08 Nov 2016, 08:49 AM

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
 
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.
 
0
Ryan
Top achievements
Rank 1
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.

0
Ryan
Top achievements
Rank 1
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.

0
Rosen
Telerik team
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.
 
0
Ryan
Top achievements
Rank 1
answered on 09 Nov 2016, 02:40 PM
Most likely my issue is related to the container our grid is in.  We allow our grids to be moved around in windows we have created in our webtop application.  The update appears to work well when the grid is locked in place and unable to moved around on the screen.
0
Ryan
Top achievements
Rank 1
answered on 09 Nov 2016, 04:21 PM

Specifically, the property causing my issue with Kendo's focus events is JQuery UI's draggable class.

https://jqueryui.com/draggable/

0
Rosen
Telerik team
answered on 10 Nov 2016, 06:40 AM

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
 
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.
 
0
Ryan
Top achievements
Rank 1
answered on 10 Nov 2016, 03:01 PM
Rosen, thank you for help in resolving this issue.  I inherited this project from a former employee and I had not realized this was not included as a part of the package manager.  Updating JQuery UI resolved the problems we were facing.
Tags
Grid
Asked by
Ryan
Top achievements
Rank 1
Answers by
Ryan
Top achievements
Rank 1
Rosen
Telerik team
Share this question
or