Update a single dataItem in a DataSource

8 posts, 0 answers
  1. Grant
    Grant avatar
    69 posts
    Member since:
    Jul 2016

    Posted 25 Oct 2016 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
    203 posts

    Posted 25 Oct 2016 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. Grant
    Grant avatar
    69 posts
    Member since:
    Jul 2016

    Posted 26 Oct 2016 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?
  4. Patrick
    Admin
    Patrick avatar
    203 posts

    Posted 26 Oct 2016 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.
     
  5. Grant
    Grant avatar
    69 posts
    Member since:
    Jul 2016

    Posted 27 Oct 2016 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

  6. Patrick
    Admin
    Patrick avatar
    203 posts

    Posted 27 Oct 2016 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.
     
  7. Sam
    Sam avatar
    8 posts
    Member since:
    Dec 2016

    Posted 15 Mar in reply to Patrick Link to this post

    I have the same requirement as Grant here.

    You need to be able to replace the item in the array for angulars $onChanges lifecycle hook to be able to work.

     

    In addition to this, calling pushUpdate when using ng resource causes a a Maxiumum call stack error.  ctrl.grid.dataSource.pushUpdate({ << ng-resource item >>>})

  8. Stefan
    Admin
    Stefan avatar
    685 posts

    Posted 17 Mar Link to this post

    Hello Sam,

    I was not able to reproduce the described issue in AngularJS application.

    Could you please use the provided example by my colleague as a reference and modify it to match the scenario and to reproduce the issue. This will help us debug the example and check what may be causing the maximum call stack error.

    Regards,
    Stefan
    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.
Back to Top