Header filter failed with remote filtering enabled

[Davidas84]

We are using ASP.Net Core + React DataGrid. When I set enableSearch property of headerFilter with remoteOperations={{ filtering: true }} and try to type something in the filter of string type column - it doesn’t work (on server side I receive DataSourceLoadOptions with filter value:

{[ null, "contains", "mySearchString" ]} Expected: {[ "docNumber", "contains", "mySearchString" ]})

However for dateTime type column it works well.

Thank you in advance for your help.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Column, DataGrid } from 'devextreme-react/ui/data-grid';
import * as AspNetData from 'devextreme-aspnet-data-nojquery';

export default class RegistryGrid extends React.Component<any, any> {
    dataSource: any;

    constructor(props: any) {
        super(props);

        this.dataSource = AspNetData.createStore({
            key: 'id',
            loadUrl: `/Registry/Grid`,
        });
    }

    public render() {
        return (
            <div>
                <DataGrid
                    id="registryGrid"
                    dataSource={this.dataSource}
                    headerFilter={{
                        visible: true,
                        allowSearch: true,
                    }}
                    remoteOperations={{ filtering: true }}
                >
                    <Column
                        dataField="docNumber"
                        caption="Document number"
                        dataType="string"
                    />
                    <Column
                        dataField="docDate"
                        caption="Document date"
                        dataType="datetime"
                        format="dd.MM.yyyy"
                    />
                </DataGrid>
            </div>
        );
    }
}

ReactDOM.render(
    <RegistryGrid />, document.getElementById('RegistryGridContainer') 
);

[artem-kurchenko]

Hi David,   The issue is not specific to our React integration. I was able to reproduce it using the following example: https://codepen.io/ArtemDevExpress/pen/gqjVbQ?editors=1010 The default Header Filter logic expects that you enable all remote operations including paging and grouping. Would you please clarify why you're using filtering only?