Getting selected records from grid

[Cedric E]

Hi,

I would like to know how to get the checked records from the Grid. Initially, I could get it via this.gridInstance.getSelectedRecords() but when I added the checkbox row selection, I'm getting an empty array.  

Here's my code:

I'm using @syncfusion/ej2-react-grids v18.2.55

import React, { Component } from 'react';

import { GridComponent, ColumnsDirective, ColumnDirective, Filter, Inject, Page, Sort, Toolbar, Selection, Search } from '@syncfusion/ej2-react-grids';

export class samp extends Component {

    constructor() {

        super();

        this.pageSettings = {

            pageSize: 25

        };

        this.toolbarOptions = [ { text: 'Print', tooltipText: 'Print', id: 'print', prefixIcon: 'e-print' } ];

        this.selectionSettings = {

            persistSelection: true

        };

        this.filterSettings = {

            type: 'Menu'

        };

    }

    onToolbarClick(args) {

        if(args.item.id === 'print') {

            let selectedRecords = this.gridInstance.getSelectedRecords();

            let values = '';

            // Loop through selected records and parse

            window.open(`/printer/?${values}`, '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes');

        }

    }

    render() {

        return (

            <div>

                <GridComponent ref={ref => this.gridInstance = ref } dataSource={this.data} allowPaging={true} allowSorting={true} pageSettings={this.pageSettings} 

                    toolbar={this.toolbarOptions} selectionSettings={this.selectionSettings} allowFiltering={true} filterSettings={this.filterSettings} gridLines="Both"

                    toolbarClick={this.onToolbarClick.bind(this)}>

                    <ColumnsDirective>

                        <ColumnDirective type='checkbox' width='30' textAlign="Center"></ColumnDirective>

                        <ColumnDirective field="Id" visible={false} isPrimary={true}></ColumnDirective>

                        <ColumnDirective headerText="Name" field="Name" width='100' template={this.imageTemplate} />

                        <ColumnDirective headerText="Address" field="Address" width='100' />

                    </ColumnsDirective>

                    <Inject services={[Page, Sort, Filter, Selection, Toolbar, Search]} />

                </GridComponent>

            </div>

        )

    }

}

Thanks.

[Mohammed Farook J]

Hi Cedric, 

 

Thanks for contacting Syncfusion support. 

 

We have validated your reported with given code example and we found that ‘isPrimaryKey’ property is defined incorrect. So , you can’t get the selected records when you calling the this.gridInstance.getSelectedRecords()  method. Please update the code in your column definition as isPrimaryKey (instead of your code isPrimary). Please find the code example and sample for your reference. 

 

Code example: 

 

export class CheckboxSelection extends SampleBase { 

    constructor() { 

        super(...arguments); 

. . . 

 

    render() { 

        return ( 

            <div> 

                <GridComponent ref={ref => this.gridInstance = ref } dataSource={this.data} allowPaging={true} allowSorting={true} pageSettings={this.pageSettings}  

                    toolbar={this.toolbarOptions} selectionSettings={this.selectionSettings} allowFiltering={true} filterSettings={this.filterSettings}  

                    toolbarClick={this.onToolbarClick.bind(this)}> 

                    <ColumnsDirective> 

                        <ColumnDirective type='checkbox' width='30' textAlign="Center"></ColumnDirective> 

                        <ColumnDirective field="EmployeeID" width='100' isPrimaryKey={true}></ColumnDirective> 

                        <ColumnDirective headerText="First Name" field="FirstName" width='100'  /> 

                        <ColumnDirective headerText="Last Name" field="LastName" width='100' /> 

                    </ColumnsDirective> 

                    <Inject services={[Page, Sort, Filter, Selection, Toolbar, Search]} /> 

                </GridComponent> 

            </div> 

        ) 

    } 

} 

 

 

Sample : https://stackblitz.com/edit/react-s5faes?file=index.js  

API :  https://ej2.syncfusion.com/react/documentation/api/grid/columnModel/#isprimarykey  

 

Regards, 

J Mohammed Farook