How can I use Flexgrid with Vue 2 and Vuex

How can I use Flexgrid with Vue 2 and Vuex

Posted by: daryn.holmes on 13 July 2018, 11:29 am EST

• 

  daryn.holmes

  • Post Options:
  • Link
    Copy

  Posted 13 July 2018, 11:29 am EST

  Hi,

  Could you please provide me with an example of using the Vue 2 version of Flexgrid with Vuex?

  We want to store the

  items-source

  in Vuex. When the user clears a cell we need to send off an API call to clear cells in the backend.

  Could you please provide an example of how we can do this?

  At the moment I have the data-source in vuex, however I get this error when I edit a cell: [Vue warn]: Error in callback for watcher “function () { return this._data.$$state }”: “Error: [vuex] Do not mutate vuex store state outside mutation handlers.”

  Thanks

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 16 July 2018, 7:34 am EST

  Hi,
  
  The error is because when the user edits the grid’s cell then grid commits the changes to its itemsSource to sync data between grid and source.
  
  In this case, the item-source is stored in the vuex store which allows changing the store state only through the mutations and any change in the state outside the mutation causes an error.
  
  To avoid this you may set store’s strict property to false or maintain a local copy of grid’s data and sync it with store wherever user edits the data.
  
  //please refer to following code snippet

  var store = new Vuex.Store({
   
   
  strict:false,
  ...other options
   
   
  });
  

  To notify server on cell clear, you may handle cellEditEnded event and check is the data is null.
  
  //refer to following code snippet:-

  <wj-flex-grid
   
   
  :items-source="gridData"
   
   
  :cell-edit-ended="editEnd">
   
   
  </wj-flex-grid>
  //in equivalent vue component
  methods: {
   
   
  editEnd: (sender, args) => {
   
   
  let colEdit=args.col;
  let rowEdit=args.row;
  let data=sender.getCellData(args.row,args.col); 
  if(data==""){
   
   
  //data is cleared do something
   
   
  }
   
   
  }
   
   
  },
  

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

  Regards