Flexgrid - Vue 2 - how to update the underlying data and keep the selection?

Flexgrid - Vue 2 - how to update the underlying data and keep the selection?

Posted by: daryn.holmes on 6 August 2018, 12:50 am EST

• 

  daryn.holmes

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 6 August 2018, 12:50 am EST

  Hi,

  I would like to update the underlying data of flexgrid, however I would like flexgrid to keep the current selection.

  I tried setting preserveOutlineState to true, however that did not seem to work.

  Could you provide me with an example on how to do this?

  Please note, I am using a computed property of the data, it wold be great if you cold give me an example with the same setup.

  Thanks, Daryn

• 

  daryn.holmes

  • Post Options:
  • Link
    Copy

  Posted 6 August 2018, 2:16 am EST

  Sorry I meant I used: preserveSelectedState

  Still no luck . . .

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 6 August 2018, 8:23 pm EST

  Hi,

  When we change the grid’s data source then it goes through a full update which cases the grid to reset its selection.
  
  To preserve the grid’s selection between the source changes, you need to explicitly save the grid’s selection before changing the source and restore it afterwards.
  
  Please refer to the following code snippet:-

  //save grid's selection
  let curSelection=grid.selection;
  //change source
  grid.itemsSource=newSource;
  //restore selection
  setTimeout(()=>{flex.selection=selection;});
  

  You may also refer to the following sample:-
  
  https://codesandbox.io/s/7w007ynn40

  ~Manish

• 

  daryn.holmes

  • Post Options:
  • Link
    Copy

  Posted 7 August 2018, 4:11 am EST

  Thanks, but how can you do this when you are using Vuex?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 7 August 2018, 9:46 pm EST

  Hi,
  
  You can do the same before and after dispatching the update action to store.

  You may also add handlers to grid’s itemsSourceChanging/itemsSourceChanged events to save and restore selection everytime itemsSource is changed.
  
  Please refer to the following sample which implements the same:-
  
  https://codesandbox.io/s/vy8lpmv1xl

  Regards

• 

  daryn.holmes

  • Post Options:
  • Link
    Copy

  Posted 7 August 2018, 10:28 pm EST

  Thanks Manish, however the examples you have provided are not without error.

  If you scroll down a few lines, make a selection and then click refresh data multiple times, you will see erratic behaviour.

  Can you try reproduce this?
  
  If you can, any ideas on how to fix it?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 9 August 2018, 4:03 pm EST

  Hi,
  
  We are sorry indeed for the issue in the last sample and delayed response.

  Please refer to the following updated sample with the fix and refer to the itemsSourceChanging and itemsSourceChanged event within the initGrid method:-
  
  https://codesandbox.io/s/748o0znz8x

  ~Manish

• 

  daryn.holmes

  • Post Options:
  • Link
    Copy

  Posted 28 August 2018, 3:14 am EST

  Thanks Manish,

  Unfortunately this fails to load: ModuleNotFoundError
  
  Could not find module in path: ‘wijmo/wijmo.vue2.grid’ relative to ‘/src/App.vue’

  I think the wijmo files are missing?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 28 August 2018, 5:59 pm EST

  Hi,
  
  We tried the sample on windows 10 machine in Google Chrome browser, and the sample seems to be working fine without any error.
  
  In case there could be some errors related to codesandbox, I am attaching an offline version please download and extract the sample, navigate to sample root directory and install the required modules using ‘npm install’ and then run using ‘npm start’ command.

  Please let us know if you face any further issues.

  ~Sharad
  
  vue-vuex-wijmo-preserve-selection.zip