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

15 posts, 0 answers
  1. Ryan
    Ryan avatar
    15 posts
    Member since:
    Oct 2016

    Posted 14 Oct Link to this post

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

  2. Ryan
    Ryan avatar
    15 posts
    Member since:
    Oct 2016

    Posted 14 Oct Link to this post

    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.

  3. Kendo UI is VS 2017 Ready
  4. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 18 Oct Link to this post

    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.
     
  5. Ryan
    Ryan avatar
    15 posts
    Member since:
    Oct 2016

    Posted 04 Nov in reply to Rosen Link to this post

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

  6. Ryan
    Ryan avatar
    15 posts
    Member since:
    Oct 2016

    Posted 04 Nov Link to this post

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

  7. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 07 Nov Link to this post

    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.
     
  8. Ryan
    Ryan avatar
    15 posts
    Member since:
    Oct 2016

    Posted 07 Nov in reply to Rosen Link to this post

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

  9. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 08 Nov Link to this post

    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.
     
  10. Ryan
    Ryan avatar
    15 posts
    Member since:
    Oct 2016

    Posted 08 Nov in reply to Rosen Link to this post

    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.

  11. Ryan
    Ryan avatar
    15 posts
    Member since:
    Oct 2016

    Posted 08 Nov Link to this post

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

  12. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 09 Nov Link to this post

    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.
     
  13. Ryan
    Ryan avatar
    15 posts
    Member since:
    Oct 2016

    Posted 09 Nov in reply to Rosen Link to this post

    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.
  14. Ryan
    Ryan avatar
    15 posts
    Member since:
    Oct 2016

    Posted 09 Nov in reply to Ryan Link to this post

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

    https://jqueryui.com/draggable/

  15. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 10 Nov Link to this post

    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.
     
  16. Ryan
    Ryan avatar
    15 posts
    Member since:
    Oct 2016

    Posted 10 Nov in reply to Rosen Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready