How can I implement a Select All function using buttons outside the grid?

[Akira Kume]

Hi,

I'm unable to access the following page, so I'm creating a separate thread. (502 error)

https://www.syncfusion.com/forums/197431/how-can-i-implement-the-same-behavior-as-the-select-all-checkbox

I was informed that setting `persistSelection` to `true` in `selectionSettings` is necessary to implement the following, but is there a way to implement the “select all” functionality using a button outside the Grid instead of the column header checkboxes?

・I want to select data from pages other than the one currently displayed.

・When filters or searches are applied, I want to select only the data that matches those criteria.

[Joseph Christ Nithin Issack]

Hi Akira,

Greetings from Syncfusion support

Based on your query, we could see that you want to the Select All checkbox to select the filtered data in the Grid and if multiple pages exist you need to select that records also in the Grid. To select the filtered records across the page and persist the selection even after clearing the filter, you can achieve this by using selectionSettings.persistSelection. For persisting selection on the Grid, any one of the column should be defined as a primary key using isPrimaryKey property.

We can implement the selectAll functionality when clicking on an external button by invoking the click method of the checkbox by getting the header checkbox element. Please refer the below code example and sample for more information.

App.component.ts

 

const selectionsettings = { persistSelection: true, checkboxMode: "ResetOnRowClick" };

 const toggleSelect = () => {

    gridInstance.element.querySelector('.e-checkselectall').click();

  };

 

 

.  ..  .  ..  .  ..  .

.  ..  .  ..  .  ..  .

.  ..  .  ..  .  ..  .

<ButtonComponent cssClass="e-flat e-primary" onClick={toggleSelect}>Select All</ButtonComponent>

<GridComponent dataSource={data} ref={grid => gridInstance = grid} enableHover={false} allowPaging={true} pageSettings={{ pageCount: 5 }}

 allowFiltering={true} filterSettings={filterSettings} selectionSettings={selectionsettings} toolbar={toolbarOptions} editSettings={editSettings}>

                    <ColumnsDirective>

                        <ColumnDirective type='checkbox' width='50'></ColumnDirective>

                        <ColumnDirective field='OrderID' isPrimaryKey={true} headerText='Order ID' width='120' textAlign="Right"></ColumnDirective>

                        <ColumnDirective field='CustomerName' headerText='Customer Name' width='150'></ColumnDirective>

                        <ColumnDirective field='OrderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right'/>

                        <ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'/>

                        <ColumnDirective field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign="Right"></ColumnDirective>

                    </ColumnsDirective>

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

                </GridComponent>

 

Sample: https://stackblitz.com/edit/react-pwwr8n3p-uvptydja?file=index.js,package.json

Demos: https://ej2.syncfusion.com/react/demos/#/tailwind3/grid/checkbox-selection

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

Regards,

Joseph I.

[Akira Kume]

Hi Joseph ,

Thank you for your reply.

I understand that enabling the checkbox column allows the expected behavior to occur.

Is it difficult to achieve the same functionality without a checkbox column?

[Joseph Christ Nithin Issack]

Hi Akira,

Based on your query, you want to perform selection using an external button click, on an EJ2 Grid without a checkbox column. By default, in EJ2 Grid, currently we do not have a specific method to select all the records in all the pages in the EJ2 Grid, however, we can only select a particular row (selectRow) or multiple rows (selectRows) or a range of rows (selectRowsByRange) in the current page. This is the reason we have provided the previous solution by invoking click in the header checkbox. Hence it is not feasible to select all the records in the EJ2 Grid externally without defining a checkbox column.

[Akira Kume]

Hi Joseph ,

Understood.

Thank you for your response.

[Getsy Edwin]

Hi Akira,

You're welcome! Please get back to us if you need any further assistance.

Regards,

Getsy