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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

147569 Sep 17,2019 02:29 AM UTC Sep 19,2019 06:02 AM UTC React - EJ 2 5
loading
Tags: Grid
Ryosei Yawata
Asked On September 17, 2019 02:29 AM UTC


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 [Syncfusion]
Replied On September 17, 2019 06:21 AM UTC

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')); 
 

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
Replied On September 17, 2019 08:07 AM UTC

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 [Syncfusion]
Replied On September 18, 2019 05:32 AM UTC

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. 
 
 
Please g et back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


Ryosei Yawata
Replied On September 18, 2019 07:25 AM UTC

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 [Syncfusion]
Replied On September 19, 2019 06:02 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon