We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

grid getSelectedRecords not working in Vue3 platform

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[]


3 Replies

RS Rajapandiyan Settu Syncfusion Team March 2, 2023 04:03 AM UTC

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



AS aim Systems March 2, 2023 07:25 AM UTC

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



RS Rajapandiyan Settu Syncfusion Team March 3, 2023 12:55 PM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon