Add row in kendo grid

13 posts, 0 answers
  1. Projects Computerra
    Projects Computerra avatar
    31 posts
    Member since:
    Aug 2009

    Posted 23 May 2012 Link to this post

    Hello,

    We can easily bind data first time using method provided but then we need to add a single row to
    grid using grid.addRow(msg) function but can not bind data to grid and blank row is added to the grid

    Please help in it
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 25 May 2012 Link to this post

    Hi,

     You can add a new record to the datasource of the grid:

    grid.dataSource.add( { name: "Name", value: "2" } );

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Nathan
    Nathan avatar
    23 posts
    Member since:
    Jul 2012

    Posted 24 Mar 2014 in reply to Atanas Korchev Link to this post

    I know you guys really want to help.  And I at least appreciate it.

    It's incredibly annoying to get a fragment of an answer and not a more detailed explanation or code sample. 
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 24 Mar 2014 Link to this post

    Hi Nathan,

    Here is an explanation of the code snippet:

    1. First you need to get a reference to the client-side object of the grid

    var grid = $("#grid").data("kendoGrid");

    2. Then you need to call the add method of the grid data source.
    grid.dataSource.add( { name: "Name", value: "2" } );

    The add method accepts the default data item fields specified as key value pairs.

    Regards,
    Atanas Korchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Nathan
    Nathan avatar
    23 posts
    Member since:
    Jul 2012

    Posted 24 Mar 2014 in reply to Atanas Korchev Link to this post

    Do you have a more detailed sample.  Not a fragment upon a fragment.

    Thanks
  7. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 24 Mar 2014 Link to this post

    Hi Nathan,

    Could you please describe how much more detailed you need the example to be? 

    Regards,
    Atanas Korchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Nathan
    Nathan avatar
    23 posts
    Member since:
    Jul 2012

    Posted 24 Mar 2014 in reply to Atanas Korchev Link to this post

    Never mind, I'll look somewhere else for now
  9. Nathan
    Nathan avatar
    23 posts
    Member since:
    Jul 2012

    Posted 28 Mar 2014 in reply to Atanas Korchev Link to this post

    No longer an issue.  Thanks for trying and responding.  Would you please close and/or delete post.
  10. Richard
    Richard avatar
    26 posts
    Member since:
    Sep 2014

    Posted 16 Dec 2014 in reply to Atanas Korchev Link to this post

    So after you add data to the datasource then what do you do.  I wanted to add data based on a button click but do not know how to get it to insert into the grid. 
  11. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 18 Dec 2014 Link to this post

    Hello Richard,

    You don't need to do anything else. The grid will display the newly inserted item by itself. Here is a live demo: http://dojo.telerik.com/@korchev/eRoSA

    Regards,
    Atanas Korchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  12. Nisarg
    Nisarg avatar
    18 posts
    Member since:
    Jan 2015

    Posted 09 Jan 2015 in reply to Atanas Korchev Link to this post

    Hi there,

    Instead of adding a row, I require to edit one. So what I did was, get the dataSource.data(), then for an item in that data, I used the set method to set a particular field. 

    The problem here is that I have 1000 rows in the grid and setting one row, refreshes the whole grid and thus takes long. Is there a way to refresh the grid partially? Or making it less sticky?. 

    PS: I know paging the grid would be one solution. But please let me know if there is another way to do this.

    Thank you in advance,
    Nisarg Patek
  13. Vassili King
    Vassili King avatar
    60 posts
    Member since:
    May 2010

    Posted 12 Dec 2015 in reply to Atanas Korchev Link to this post

    Atanas Korchev said:Hello Richard,

    You don't need to do anything else. The grid will display the newly inserted item by itself. Here is a live demo: http://dojo.telerik.com/@korchev/eRoSA

     

    This example works, but only in some situations. Here is a situation when it doesn't work as well:

    I'm using a data set defined in javascript. I use toolbar: ["save", "cancel", "create"] on my grid (not just "create" used in the example). When I click the Add button, the new record is added, just as expected. I can click it a few more times, make a few edits, click the "Save changes" button, and everything looks good. I add a few more records using the "Add new record" button on the grid itself, then add a few more using the custom Add button again. I make a few more edits in random places in the grid. Then I press the "Save changes" button again. And here is how it all falls apart: when I press the "Cancel Changes" button, all records inserted using the custom "Add" button, even those that were additionally edited, disappear.

     

    So, how can this example be modified in order to preserve all records that were saved?

     

    Thank you.

  14. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 17 Dec 2015 Link to this post

    Hello Vassili,

    A given Grid record can disappear when changes are cancelled if its new. New record is a record which has no model.id value.

    All records that do not have ID should be saved through the create transport before the user clicks save changes button.

    Your particular scenario is a bit unclear because the example provided by my colleague uses inline editing while the toolbar configuration that you have is used in batch editing.

    In case you need further assistance please update the Dojo example and list the exact steps that I need to perform in order to reproduce the issue.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready