grid getSelectedRecords not working in Vue3 platform

[aim Systems]

grid getSelectedRecords not working

Is there no getSelectedRecords() function? Or are you using it incorrectly?

1. grid template

    <ejs-grid

            :id="gridName"

            :ref="gridName"

 ..

</ejs-grid>

2. grid click Action!

3. script

<script>

let gridRef = this.$refs[this.gridName].ej2Instances;

let selected = gridRef.getSelectedRecords();

//selected => undefined

let selectedIndexs = gridRef.getSelectedRowIndexes();

//selectedIndexs => [1]

let selectedObject = grid.selectedRecords;

//selectedObject => Object

grid getSelectedRecords(); not working!

syncfution document : https://ej2.syncfusion.com/vue/documentation/api/grid/selection/#getselectedrecords

getSelectedRecords

Gets the collection of selected records.

Returns Object[]

[Rajapandiyan Settu]

Hi,

Thanks for contacting Syncfusion support.

We can get the details of the selected records using the Grid instances through the getSelectedRecords method. Please find the attached sample and code example for your reference.

[App.vue]

btnClick: function (args){

let gridRef = this.$refs["grid"].ej2Instances;

var selectedRecords = gridRef.getSelectedRecords();

console.log(args);

console.log(selectedRecords);

}

Still, if you face the issue, share the issue reproducible sample or try to replicate it in the given sample or share the complete Grid code files.

Regards,

Rajapandiyan S

Attachment: vue3_grid_getSelectedRecords_9b9af7dd.zip

[aim Systems]

I found the cause.

If grid's selectionOptions: {persistSelection: true} and getSelectedRecords() without pk, the selected is undefined.

However, the selected index exists.

thanks Rajapandiyan S

[Rajapandiyan Settu]

Hi,

If ‘persistSelection’ is set to true, then the Grid selection is persisted on all the operations. For persisting selection in the Grid, any one of the columns should be enabled as a primary key. The primaryKey field should contain unique values in the dataSource.

The checkbox type column is mandatory for the persistSelection feature.

https://ej2.syncfusion.com/vue/documentation/grid/selection/check-box-selection/

We suspect that you didn’t provide the primary key column to the Grid which causes the reported problem. Please make any one of the columns as a primary key to resolve this.

 

[App.vue]

<template>

    <button v-on:click="btnClick"> Get Selected Records </button>

    <ejs-grid

      ref="grid"

      :dataSource="data"

      :allowPaging="true"

      :allowSorting="true"

      :selectionSettings="selectionSettings"

    >

      <e-columns>

        <e-column

          type="checkbox"

          width="50"

        ></e-column>

        <e-column

          field="OrderID"

          headerText="Order ID"

          textAlign="Right"

          :isPrimaryKey="true"

          width="100"

        ></e-column>

        <e-column

          field="CustomerID"

          headerText="Customer ID"

          width="120"

        ></e-column>

        <e-column field="Status" width="100"></e-column>

        <e-column

          field="ShipName"

          headerText="Ship Name"

          width="100"

        ></e-column>

      </e-columns>

    </ejs-grid>

  </div>

</template>

 

<script>

import { GridComponent, ColumnsDirective, ColumnDirective, Page, RowDD, Sort, Filter, Toolbar, Edit } from '@syncfusion/ej2-vue-grids';

export default {

  name: 'App',

  components: {

    'ejs-grid' : GridComponent,

    'e-columns' : ColumnsDirective,

    'e-column' : ColumnDirective,   

  },

  data() {

   return {

     data: data,

     selectionSettings: {persistSelection: true},

   };

  },

  methods:{

    btnClick: function (args){

     let gridRef = this.$refs["grid"].ej2Instances;

     var selectedRecords = gridRef.getSelectedRecords();

     console.log(args);

     console.log(selectedRecords);

    }

  },

  // module injection

  provide: {

    grid: [Page, Sort, Filter, Toolbar, Edit, RowDD]

  }

};

</script>

 

Regards,

Rajapandiyan S