1. Home
  2. Forum
  3. React - EJ 2
  4. checkbox selection with pre selected rows + filter does not work correctly

checkbox selection with pre selected rows + filter does not work correctly

Goals:

  • Set pre-selected checkboxes when Grid renders
  • Filter grid and select and deselect row's checkboxes
  • Update and display changes correctly after filter operations

Problems:

  • If I select a row and then filter, the same indexes are selected in the filtered grid.
  • If I use persistSelection: true in selectionsettings and isPrimaryKey: true for Columns, checkboxes are not selected anymore after filter and just the pre selected rows are selected
  • Pre-selected rows duplicates selections when is filtered in dataBound
  • Deselection does not work correct for checkboxes


How Can I handle this issue so that the pre-selected, selected and deselected rows will displayed and updated correctly after filter operations?


Here the relevant simplified components for this issue:

filterSettings: any = {
    showFilterBarOperator: true,
    mode: 'Immediate'
}

filter: IFilter = {
    type: 'CheckBox',
    operator: 'contains'
}

selectionsettings: SelectionSettingsModel = {
    persistSelection: true
};

rowselect(args: RowSelectEventArgs) {
// sets selected = true in data from DB
}

rowDeselect(args: RowDeselectEventArgs) {
   // sets selected = false in data from DB
}

setSelectedCheckboxes = () => {
   // sets the pre-selected rows before rendering into selectedDataCheckbox
}

dataBound() {
    const { selectedDataCheckbox } = this.state

    this.grid.selectRows(selectedDataCheckbox);
    this.grid.element.addEventListener("click", this.onClick.bind(this));
}
....


Kind Regards


5 Replies
MS Manivel Sellamuthu Syncfusion Team July 26, 2021 02:02 PM UTC

Hi Andreas, 

Greetings from Syncfusion support. 

Before proceeding further about your query, Could you please share the below details, which will be helpful for us to validate further about your requirement. 

  1. Share the complete Grid code
  2. please share the values of the indexes(i.e., selectedDataCheckbox).
  3. Share the video demonstration of the issue while implementing your requirement
  4. Share the Syncfusion packages version

Regards, 
Manivel 


AW Andreas Weber July 28, 2021 02:39 PM UTC

Hi Manivel,


  1. https://codesandbox.io/s/lively-silence-0vchf?file=/src/grid.tsx  
This example is shortened and commented out except for the essentials and without sample data.
You can integrate this in gridRender_data for columns and gridData_data for grid data. 

     3. See Upload  

     4. "19.1.69"

Thank you for your Support.

Kind Regards,
Fabian


Attachment: filter_and_select_f4e81180.zip

AW Andreas Weber replied to Andreas Weber July 29, 2021 04:39 PM UTC

as this feature is crucial for a currently running project: 
when could be expect to get an answer from your side?
Thanks 

Andreas


MS Manivel Sellamuthu Syncfusion Team July 30, 2021 03:05 PM UTC

Hi Andreas, 

Thanks for your update. 

While preparing the sample based on your requirement we have found that “dataBound is triggering twice in the initial rendering”. Currently we are validating the issue at our end and we will update the further details on Aug 02, 2021. Until then we appreciate our patience. 

Regards, 
Manivel 


MS Manivel Sellamuthu Syncfusion Team August 3, 2021 08:21 AM UTC

Hi Andreas, 

Sorry for the delay getting back to you. 

We have found that issue “dataBound is triggering twice in the initial rendering” issue is reproduced only in the stackblitz samples and not replicated in the local sample. So it is not a grid related issue. 

We have prepared sample based on your requirement. In the below sample we have enabled persistSelection and selected the rows initially using the flag variable in the dataBound event. The flag variable is set as true in the initial rendering only, after selecting the rows using selectRows method in initial rendering flag variable will be set as false. 

Because the dataBound event will be triggered for every grid actions such as paging, filtering, sorting., etc. So setting flag as false will prevent the selectRows method called each time. Please refer the below code example, sample and video demo for more information. 

. . . 
 
export class App extends React.Component { 
  constructor() { 
    super(...arguments); 
// we have enabled the persistSelection to maintain the grid selected records 
    this.selectionsettings = { persistSelection: true }; 
    this.flag = true; 
    this.filterSettings = { 
        showFilterBarOperator: true, 
        mode: "Immediate" 
      }; 
} 
 
  dataBound(args) { 
    if (this.flag) { 
      this.flag = false; 
// using flag variable we have selected the rows in the initial rendering only 
      this.gridInstance.selectRows([0,3]); 
    } 
  } 
 
  render() { 
    return (<div className='control-pane'> 
            <div className='control-section'> 
                <GridComponent dataSource={orderDetails} dataBound={this.dataBound.bind(this)} ref={grid => this.gridInstance = grid}  
                allowPaging={true} pageSettings={{ pageCount: 5 }} selectionSettings={this.selectionsettings} allowFiltering={true} filterSettings={this.filterSettings}> 
                    <ColumnsDirective> 
                    <ColumnDirective type='checkbox' width='50'></ColumnDirective> 
                        <ColumnDirective field='OrderID' isPrimaryKey={true} headerText='Order ID' width='120' textAlign="Right"></ColumnDirective> 
                        <ColumnDirective field='CustomerName'  filter={{operator: "contains" }}  headerText='Customer Name' width='150'></ColumnDirective> 
                         . . . 
                    </ColumnsDirective> 
                    <Inject services={[Page, Selection,Filter, Toolbar, Edit]}/> 
                </GridComponent> 
            </div> 
        </div>); 
} 
} 
 
ReactDOM.render(<App />, document.getElementById('root')); 
 



Please let us know if you need further assistance. 

Regards, 
Manivel

Loader.
Up arrow icon