Modify odatacollection's items programatically

Modify odatacollection's items programatically

Posted by: petr.somek on 4 January 2021, 7:57 pm EST

• 

  petr.somek

  • Post Options:
  • Link
    Copy

  Posted 4 January 2021, 7:57 pm EST

  Hello,
  we are using flexgrid with odatacollection in our application.
  And we are using this scenario:
  
  - user change grid's cell
  - i'm listenening cellEditEnded event
  - in this event i'm checking what cell was changed and if some condition is filled I'm taking new value and update another cell's content with this new value (some cells in grid must be synchronized)
  - for this copying I'm using contruct:
  //find item from odatacollections to be updated
  this.itemsSource.editItem(iteratedItem); //edit the item
  //fill attributes of item
  this.itemsSource.commitEdit(); //commit changes
  
  - this code works but calling editItem method causes selecting the grid's row which is binded to the item
  So my question - is there another (better) way, how to update odatacollection's items without using editItem? this changes must be reflected in grid.
  
  thanks
• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Replied 6 January 2021, 1:56 am EST

  Hi Petr,
  
  The commitEdit method contains logic that sends updates to your OData server. If this method is not called, then your updates will only be saved on the grid and will not be updated on your server.
  
  But your issue can be resolved with a small workaround. In your cellEditEnded event, save the currentItem of the ODataCollectionView before calling the editItem method and then set it again after calling the commitEdit method:
  

  theGrid.cellEditEnded.addHandler((s, e) => {
    var currentItem = s.collectionView.currentItem;
    // call commitEdit to edit some other item
    s.collectionView.currentItem = currentItem;
  });

  
  Let me know if this helps.
  
  Regards,
  Ashwin
• 

  petr.somek

  • Post Options:
  • Link
    Copy

  Replied 7 January 2021, 6:28 pm EST

  Hi Ashwin,
  thanks for your anwser. I understand your workaround, but if I perform several editItem + commitItem it will cause several cell's selecting, which is not pleasant for user experience. So I wanted to find some better way, without this wild selecting effect.
  In our case, we don't submit changes after each changes, but we send everything in one bacth to server after 'save' button click. Isn't there another way how to modify collection, when we are using this batch submiting?

• Marked as Answer

  

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Replied 10 January 2021, 5:04 pm EST

  Hi Petr,
  
  You can use the beginUpdate and endUpdate method to not display the changes in the grid. The updates performed after the beginUpdate call will only be reflected once the endUpdate method is called. You can call the beginUpdate method before updating the items using editItem and set the currentItem again before calling the endUpdate method. The multiple changes done between these 2 methods will not be reflected on the screen.
  

  theGrid.cellEditEnded.addHandler((s, e) => {
    s.beginUpdate();
    var currentItem = s.collectionView.currentItem;
    // call commitEdit to edit some other item
    s.collectionView.currentItem = currentItem;
    s.endUpdate();
  });

  
  beginUpdate: https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#beginupdate
  endUpdate: https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#endupdate
  
  If this does not work for you, there is also a different way to edit the items but it only works when deferCommits is set to true (as in your scenario). While this property is set to true, the ODataCollectionView saves all the updates in the itemsEdited, itemsAdded, etc arrays and uses them to update the data on the server.
  So, you can update the item directly without using the editItem and commitEdit methods.
  Instead of calling these methods, you will need to raise the collectionChanged event so that the collection view will add the edited item to the itemsEdited array. The sample link below demonstrates this behavior. In this sample, if you will edit any cell, the company name of the 4th row will be updated. Now if you will click on the commit button, both of these changes will be sent to the server.
  
  https://stackblitz.com/edit/js-1zkcge
  
  Note that the OData server used in this sample does not have the edit functionality implemented. So committing the edit will not actually update the data but you can observe the network tab of the browser's console to check whether the correct data is sent to the server or not.
  
  I hope this helps.
  
  ~regards
• 

  petr.somek

  • Post Options:
  • Link
    Copy

  Replied 11 January 2021, 11:23 pm EST

  Hi Ashwin,
  works perfectly! Thank you very much,
  Petr