DevExtreme DataGrid — Filter Data in Array-based Columns

This example implements data filtering (remote and local) across DataGrid columns whose cells contain arrays of string values.

Local Data Source

The DataGrid filters two collection columns against local data. Each cell in these columns displays data from the following sources:

1. An array of strings.
2. An array of objects. Each object contains a string field.

Both columns use columns[].calculateFilterExpression to implement custom filtering logic. The example defines a custom comparison function (selector) designed to filter values within each cell collection:

function calculateFilterExpression(filterValue, selectedFilterOperation, target) {
    const column = this;
    if (filterValue) {
        const selector = (data) => {
            const applyOperation = (arg1, arg2, op) => {
                const normalizedArg1 = arg1.toLowerCase();
                const normalizedArg2 = arg2.toLowerCase();
                if (op === "=") return normalizedArg1 === normalizedArg2;
                // ...
            };

            const values = extractDisplayValues
                ? column.calculateDisplayValue(data).toLowerCase().split(", ")
                : column.calculateCellValue(data);
            return !!values?.find((v) => applyOperation(v, filterValue, selectedFilterOperation));
        };
        return [selector, "=", true];
    }
    return this.defaultCalculateFilterExpression.apply(this, arguments);
}

Remote Data Source

For remote filtering, the DataGrid processes one column. The example sets RemoteOperations to true, and the component displays data from an array of objects. Each of these objects contains a string field.

The example configures remote filtering in an ASP.NET Core server application (ServerApp). This server uses DevExtreme.AspNet.Data and calls RegisterBinaryExpressionCompiler to extend filter expression capabilities. Refer to the following file for implementation details: FilterByCollectionPropertyHelper.cs.

Remote Data Source Types

ServerApp includes two data controllers:

1. InMemoryDataController (default): Supplies data from in-memory variables defined in the ASP.NET Core server application. Use this controller for testing.
2. DbDataController: Supplies data from a Microsoft SQL (MSSQL) Northwind database. Better suited for production environments.

Files to Review

• Server App
  • FilterByCollectionPropertyHelper.cs
  • InMemoryDataController.cs
  • DbDataController.cs
• Angular
  • data-grid-local.component.html
  • data-grid-remote.component.html
• React
  • data-grid-local.tsx
  • data-grid-remote.tsx
• Vue
  • DataGridLocal.vue
  • DataGridRemote.vue
• jQuery
  • DataGridLocal.js
  • DataGridRemote.js
• ASP.NET Core
  • DataGridLocal.cshtml
  • dataGridLocal.js
  • DataGridRemote.cshtml
  • dataGridRemote.js
  • FilterByCollectionPropertyHelper.cs
  • InMemoryDataController.cs
  • DbDataController.cs

Documentation

• Filtering Columns Bound to Collection

Does This Example Address Your Development Requirements/Objectives?

(you will be redirected to DevExpress.com to submit your response)