Grid: persistSelection not working on grid refresh when allowSelection is binded to a component property

[maidmehic]

Hi, When binding to allowSelection property, grid is deselecting the lastly selected row on grid refresh. Expected behavior would be to persist all the previous selected rows because the persistSelection is set to true.

Grid component: <ejs-grid ref="grid" :dataSource="dataSource" :columns="columns" :allowSelection="allowSelection" :selectionSettings="selectionSettings" />

selectionSettings: const selectionSettings = ref({ type: "Multiple", enableSimpleMultiRowSelection: true, persistSelection: true, checkboxOnly: true, })

If allowSelection is untouched (default - always true), everything is working as expected.

[Ajithbala]

Hi Customer,

Thanks for contacting Syncfusion support.

Query: When binding to allowSelection property, grid is deselecting the lastly selected row on grid refresh. Expected behavior would be to persist all the previous selected rows because the persistSelection is set to true. Grid component: ` selectionSettings:const selectionSettings = ref({ type: "Multiple", enableSimpleMultiRowSelection: true, persistSelection: true, checkboxOnly: true, })`

Based on your query, you are facing row deselecting issue when refresh the Grid component with persistSelection. So, we have prepared sample with persistSelection and found the selected rows are persisted properly after refreshing the Grid component. For your convenience we have attached the sample, please refer them for your reference.

Code Example: ` Grid Refresh <ejs-grid ref="grid" :dataSource="data" allowPaging="true" :pageSettings="pageSettings" :selectionSettings="selectionSettings" allowSelection="true"

…..

export default Vue.extend({ data: () => { return { data: gridData, pageSettings: { pageSize: 5 }, editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: "Dialog", },

  selectionSettings: { 
    persistSelection: true, 
    checkboxOnly: true, 
    type: "Multiple", 
    enableSimpleMultiRowSelection: true, 
  }, 
}; 

}, methods: { onClick: function (e) { this.$refs.grid.refresh(); }, }, `

Sample Link: https://codesandbox.io/s/vue-template-forked-xjb02?file=/src/App.vue

If you still face the issue, then please share the below details to find the root cause of the issue.

Share the complete Grid code example.

If possible, please share the issue reproducible sample.

Share the video demonstration of the reported issue.

Share the Syncfusion package version.

Regards, Ajith G.

[maidmehic]

Hi @Ajithbala,

Thanks for replying back.

I have edited Your example a bit. Toggling :allowSelection property on button click, and bumped up the @syncfusion/ej2-vue-grids to 19.1.59.

Sample link: https://codesandbox.io/s/vue-template-forked-diwv0?file=/src/App.vue

If You click the "Toggle allow Selection" button first and select the rows, after refresh, grid will deselect the last selected row.

Best.

[maidmehic]

Hi, any update on this?

[Pavithra15]

Hi @maidmehic,

We already have logged a defect report “Persist Selection is not working properly after enabling selection dynamically” and the fix has been included in our patch release (v19.3.54). So please update your packages to the latest version to overcome the issue.

Release Notes: https://ej2.syncfusion.com/vue/documentation/release-notes/19.3.54/?type=all#grid

Regards, Pavithra S