Hello,
We are experiencing a problem with the row selection checkbox when using the Data Grid with a custom data source. The "Select All" checkbox correctly selects all the rows, but the checkbox doesn't stay checked, and when the user clicks again on the checkbox, nothing happens. Therefore, the unselection of all rows doesn't work, so each row has to be unselected separately, which can be very arduous to the user.
Below is the HTML:
HTML<dx-data-grid [dataSource]="rowsDataSource" (onEditorPreparing)="onEditorPreparing($event)"(onCellPrepared)="onCellPrepared($event)" (onSelectionChanged)="onSelectionChanged($event)"
<dxo-filter-row [visible]="true"></dxo-filter-row>
<dxo-header-filter [visible]="true"></dxo-header-filter>
<dxo-selection mode="multiple" selectAllMode="allPages" showCheckBoxesMode="always"></dxo-selection>
<dxo-remote-operations [sorting]="true" [paging]="true" [filtering]=true></dxo-remote-operations>
<dxo-editing [allowUpdating]="true" mode="cell"></dxo-editing>
<dxo-paging [pageSize]="15"></dxo-paging>
<dxi-column ... ></dxi-column>
<dxi-column ... ></dxi-column>
</dx-data-grid>
Typescript:
C#this.rowsDataSource = new DataSource({
key: 'rowId',
load: (loadOptions) => {
return this.apiService.getRows(LoadOptionsConverter.convertLoadOptionsToQueryParam(loadOptions))
.toPromise()
.then(response => {
return {
data: response.results,
totalCount: response.count
};
})
.catch(error => { throw new Error('Failed'); });
}
});
The data is loaded remotely page by page with the skip and take parameters in the loadOptions passed to the API call.
Moreover, clicking the checkbox for unselecting all launches the DataSource load method for some reason.
Any help would be appreciated.
Hi,
I was unable to replicate this issue by using the WebAPI Service demo with enabled selection as shown in the attached screencast. If your scenario is different, please update the demo to illustrate the issue. I am sure we will be able to find a solution once we can replicate the issue locally.
Hello again,
We have found a possible reason for the issue. In our code, we are using the DataGrid filtering API to set filters to the data source. When a filter is set with the DataGrid's filter method, the select/unselect all behavior breaks.
For example, if one sets a filter in a following way, the unselect all doesn't work anymore (using this as an example):
ngAfterViewInit() { let filters = ['StoreState', '=', 'California']; this.dataGrid.instance.filter(filters); }Hi Johannes,
Thank you for the clarification. I reproduced the issue on our side. We will update this ticket once we have any results.