Update a single dataItem in a DataSource

6 posts, 0 answers
  1. Grant
    Grant avatar
    41 posts
    Member since:
    Jul 2016

    Posted 25 Oct Link to this post

    Hi, 

    I have a DataSource, let say it looks like this: [{ id: 1, name: 'Grant' }, { id: 2, name: 'Vaughan' }, { id: 3, name: 'David' }].

    I also have an object { id: 2, name: 'Devina' }.

    How would I go about updating the relevant data item in the datasource with the new object?

    Thanks,
    Grant

  2. Patrick
    Admin
    Patrick avatar
    172 posts

    Posted 25 Oct Link to this post

    Hello Grant,

    Please take a look at the following Kendo UI Dojo by Progress which illustrates how to get a dataItem, and modify its values.

    In this example, it uses a button to change "Vaughn" to "Devina" by getting the DataItem and setting it.  

    Hope this helps!

    Regards,
    Patrick
    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.
     
  3. Kendo UI is VS 2017 Ready
  4. Grant
    Grant avatar
    41 posts
    Member since:
    Jul 2016

    Posted 26 Oct in reply to Patrick Link to this post

    Yes, that does resolve the issue I posted, but suppose my datasource objects are more complex and I dont know what fields have been are different from the original, how can I overwrite/update the entire object?
  5. Patrick
    Admin
    Patrick avatar
    172 posts

    Posted 26 Oct Link to this post

    Hi Grant,

    Use the same technique.  Get the dataItem that you want to overwrite, and set each field to what you want them to be.
    var grid = $("#grid").data("kendoGrid");
               
    var dataItem = grid.dataSource.get(2);
    dataItem.set("id", 4);
    dataItem.set("name","Devina");
    dataItem.set("location","D");
    dataItem.set("color","purple");

    I've created a new Dojo for you to see this functionality.

    Hope this helps!

    Regards,
    Patrick
    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.
     
  6. Grant
    Grant avatar
    41 posts
    Member since:
    Jul 2016

    Posted 27 Oct in reply to Patrick Link to this post

    I still dont think we're on the same page. I've updated your example and added some comments that will hopefully clarify what Im trying to do, http://dojo.telerik.com/AqAtE/2

    Thanks,
    Grant

  7. Patrick
    Admin
    Patrick avatar
    172 posts

    Posted 27 Oct Link to this post

    Hi Grant,

    Another option you can use to update a dataItem is pushUpdate().  The only issue with pushUpdate is it will not mark the items as "dirty".  So use the dataSource's get() method to determine which item was updated, and set the dirty property to true.  Finally, use sync() to save the new changes to the dataSource.

    Please take a look at this dojo which illustrates the approach.

    Please let me know if you have any questions.  Hope this helps!

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