Problem with cancel an newly inserted row in grid

3 posts, 1 answers
  1. Rak
    Rak avatar
    2 posts
    Member since:
    Dec 2016

    Posted 26 Dec 2016 Link to this post

    Hello, I am struggling with a weird error while canceling a newly inserted row in a grid. Please help.

    Below is a simplifed version of my code (http://jsfiddle.net/m2s59mpo/5/)

    var myGrid = $("#my-table-grid").kendoGrid({
      toolbar: [ {
                        name: "create",
                        text: "Create"
                    } ],
      editable: { mode: "inline", confirmation: false },
     
      columns: [
        { field: "name" },
        { field: "age" },
        { command: [{ name: "edit"}] }
      ],
      dataSource: {
        //data: [],
        data: {"a": []},   
        schema: {
          data: "a",
          model: { id: "id",
              fields: {
                 id: {type: "number"},
                 name: {type : "string"},
                 age: {type: "number"},
              }}
        }
      },
    });

     

    Steps to reproduce:

    1. Click the "Create" button to insert a new row.

    2. Fill in any data and click "Update" to save the row.

    3. Click the "Create" button to insert a second row.

    4. Click "Cancel" button right away without filling in any data in the second row.

    Sympton:

    The second row will NOT be canceled. Error message "Uncaught TypeError: Cannot read property 'uid' of undefined" is shown in the console.

     

    This issue will not occur for the first row added (You can cancel the first row). Also, if I do not specify the data field in the dataSource section (http://jsfiddle.net/m2s59mpo/6/), it works fine too. In my real case, the data comes from a API call with structured JSON data so this is not an option for me.

     

    I wonder if I misconfigured something or this is a bug. Please help. Thanks a lot in advance.

  2. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    135 posts

    Posted 27 Dec 2016 Link to this post

    Hi Rak,

    Thank you very much for the provided runnable sample.

    To enable editing of the Kendo UI Grid, the Data Source should be configured for CRUD operations:

    http://docs.telerik.com/kendo-ui/framework/datasource/crud

    Once, this is done, everything works as expected:

    http://dojo.telerik.com/oPuKA

    For more demos, you may check out the official demos site, e.g. remote data source CRUD operation with inline editing is available at:

    http://demos.telerik.com/kendo-ui/grid/editing-inline

    I hope this helps.

    Regards,
    Alex Hajigeorgieva
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Rak
    Rak avatar
    2 posts
    Member since:
    Dec 2016

    Posted 30 Dec 2016 in reply to Alex Hajigeorgieva Link to this post

    Thank you so much Alex. This is very helpful!
Back to Top