BoldSignA modern eSignature application with affordable pricing. Sign up today for unlimited document usage!
grid getSelectedRecords not working
Is there no getSelectedRecords() function? Or are you using it incorrectly?
<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
Gets the collection of selected records.
Returns Object[]
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
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
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] <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