How to add Filtering and Sort to multiple row selection using a checkbox in a grid

[Ryosei Yawata]

Hello,

I tried to add Sort and Filtering to multiple row selection using a checkbox as below.

but both function does'nt work as normal.

Could you tell me how to work both function in multiple selection mode?

        <GridComponent

          dataSource={this.state.searchResult)}

          ref={g => this.grid = g}

          allowSorting={true}

          selectionSettings={{ mode: "Row", type: "Multiple" }}

          dataBound={this.dataBound}

          rowSelected={this.rowSelected}

          rowDeselected={this.rowDeselected}>

          <ColumnsDirective>

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

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

            <ColumnDirective field='work_title' width='130' />

            <ColumnDirective field='person_id' width='120' />

            <ColumnDirective field='person_name' width='140' />

            <ColumnDirective field='__status__'  width='120' disableHtmlEncode={false} />

            <ColumnDirective field='will_work_date'  width='160' type='date' format={{ type: "dateTime", format: "yyyy/MM/dd HH:mm" }} />

            <ColumnDirective field='project_name' width='130' />

            <ColumnDirective field='project_id'  width='100' />

            <ColumnDirective field='user_name'  width='120' />

          </ColumnsDirective>

          <Inject services={[Sort, Filter]} />

        </GridComponent>

[Pavithra Subramaniyam]

Hi Ryosei, 

 

Thanks for contacting Syncfusion Support. 

 

By default filtering and Sorting will work fine in Essential JavaScript 2 Grid with checkbox selection mode. We have prepared a simple sample based on your requirement. Please refer to the below code example and sample link for more information. 

 

[index.js] 

export class CheckboxSelection extends SampleBase { 

    constructor() { 

        super(...arguments); 

        this.selectionsettings = { mode: "Row", type: "Multiple" };        

    } 

    render() { 

        return (<div className='control-pane'> 

     <GridComponent dataSource={data} ref={grid => this.gridInstance = grid} allowPaging={true} selectionSettings={this.selectionsettings} allowSorting={true} allowFiltering={true}> 

                        <ColumnsDirective> 

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

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

                            .   .   . 

                        </ColumnsDirective> 

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

                    </GridComponent> 

                </div> 

            </div>); 

    } 

} 

 

render(<CheckboxSelection />, document.getElementById('sample')); 

 

Sample: https://stackblitz.com/edit/react-4zg9bu-uc1vuj?file=index.js 

If you are facing any issue please provide the below details that will be helpful for us to provide a better solution as early as possible. 

1. Share the video demo of your issue
2. Share the stack trace if any script error
3. Share the issue reproducible sample if possible.

 

Regards, 

Pavithra S.  

[Ryosei Yawata]

Hi Pavithra,

Thank you for quick response.

I realized that my date type doesn't work. Filtering works after changing date type as below.

If it is the way to be able to Filtering in previous date format, please let me know the way.
"2019-06-02T15:00:00.000Z" => "Mon Jun 03 2019 00:00:00"

I also want to add the function which can keep chcked box status after sorting or filtering.

Could you tell me how to get JSON data after sorting or filtering?

I analyze that data and pass checked box indices to selectRows method.

Thanks in advance,

Ryosei

[Pavithra Subramaniyam]

Hi Ryosei, 

 

Thanks for your update. 

 

Query#1: I realized that my date type doesn't work. Filtering works after changing date type as below. 

 

To resolve the reported issue, we suggest to directly provide a date type values as date objects (new Date()) in the Grid dataSource. Because, if you provide a date value as string and mention column type as date, then we will convert the date string value to date object. We have applied this conversion only for the displaying purpose. So, this conversion will not affect in the Grid filtering. This is the default behavior of the Grid. So, please directly provide date value like (new Date(“2019-05-31T04:00:00Z”)) in your dataSource to resolve this issue. 

 

Qyery#2: I also want to add the function which can keep chcked box status after sorting or filtering. 

 

You can achieve your requirement by using the “selectionSettings.persistSelection” property which will maintain the selection in all Grid actions. Please refer to the below documentation link for more information. 

 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/selection/#checkbox-selection 

 

Please g et back to us if you need any further assistance on this. 

 

Regards, 

Pavithra S. 

[Ryosei Yawata]

Hi Pavithra,

Query#1: I realized that my date type doesn't work. Filtering works after changing date type as below. 

Ok, I have already used the way. 

Qyery#2: I also want to add the function which can keep chcked box status after sorting or filtering. 

Thanks! It works as expected.

Best Regards,

Ryosei

[Pavithra Subramaniyam]

Hi Ryosei, 

 

Thanks for your update. 

We are happy to hear that the provided solution is working. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

  

Regards, 

Pavithra S.