DevExpress GridView - Custom filter function for a cell/column - devexpress

Question

How to define a custom filter-function for a column or cell? Just as an example, assume we have a text value and in the header there is a search input
How to tell the gridview to call a function
class FooComponent {
protected doSomeFilter (value: string, searchQuery: string) {
if (someConditions(value, searchQuery)) {
return true;
}
return false;
}
}
And I would expect to use it like this:
<dxi-column
dataField="myFooProperty"
[(customFilter)]='doSomeFilter'
></dxi-column>
But the GridView doesn't support customFilter method, and nothing similar. Do you know how to achieve such custom filtering in devexpress, looks very simple but I'm struggling with this for hours. Thank you in advance.

Answer 1

This example shows how to filter data using the filter panel. You can use its check box to enable/disable the current filter expression, and clicking on this expression opens the integrated filter builder. Note that changes made in it are reflected in the filter row and header filter, and vice versa, from (https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/FilterPanel/jQuery/Light/), Please see this:
$("#gridContainer").dxDataGrid({
dataSource: orders,
columnsAutoWidth: true,
filterRow: { visible: true },
filterPanel: { visible: true },
headerFilter: { visible: true },
filterValue: [["Employee", "=", "Clark Morgan"], "and", ["OrderDate", "weekends"]],
filterBuilder: {
customOperations: [{
name: "weekends",
caption: "Weekends",
dataTypes: ["date"],
icon: "check",
hasValue: false,
calculateFilterExpression: function() {
return [[getOrderDay, "=", 0], "or", [getOrderDay, "=", 6]];
}
}]
},
filterBuilderPopup: {
position: { of: window, at: "top", my: "top", offset: { y: 10 } },
},
scrolling: { mode: "infinite" },
showBorders: true,
columns: [{
caption: "Invoice Number",
dataField: "OrderNumber",
dataType: "number",
headerFilter: {
groupInterval: 10000
}
}, {
dataField: "OrderDate",
dataType: "date"
}, {
dataField: "SaleAmount",
dataType: "number",
format: "currency",
editorOptions: {
format: "currency",
showClearButton: true
},
headerFilter: {
dataSource: [ {
text: "Less than $3000",
value: ["SaleAmount", "<", 3000]
}, {
text: "$3000 - $5000",
value: [["SaleAmount", ">=", 3000], ["SaleAmount", "<", 5000]]
}, {
text: "$5000 - $10000",
value: [["SaleAmount", ">=", 5000], ["SaleAmount", "<", 10000]]
}, {
text: "$10000 - $20000",
value: [["SaleAmount", ">=", 10000], ["SaleAmount", "<", 20000]]
}, {
text: "Greater than $20000",
value: ["SaleAmount", ">=", 20000]
}]
}
}, {
dataField: "Employee",
dataType: "string"
}, {
caption: "City",
dataField: "CustomerInfo.StoreCity",
dataType: "string"
}, {
caption: "State",
dataField: "CustomerInfo.StoreState",
dataType: "string"
}]
});
Also see this: https://jsfiddle.net/mx1ovwp1/7/
$("#gridContainer").dxDataGrid({
dataSource: employees,
filterRow: {
visible: true,
applyFilter: "auto"
},
groupPanel:{
visible: true
},
searchPanel: {
visible: true,
width: 240,
placeholder: "Search..."
},
headerFilter: {
visible: true
},
paging: {
enabled: false
},
editing: {
mode: "form",
allowUpdating: true
},
columns: [
{
dataField: "Prefix",
caption: "Title",
width: 70
},
"FirstName",
"LastName", {
dataField: "Position",
width: 170
}, {
dataField: "StateID",
caption: "State",
width: 125,
lookup: {
dataSource: states,
displayExpr: "Name",
valueExpr: "ID"
}
}, {
dataField: "BirthDate",
dataType: "date"
}
]
});
Also refer to this link(dxDataGrid - How to implement a custom filter for a date field):
https://supportcenter.devexpress.com/ticket/details/t490195/dxdatagrid-how-to-implement-a-custom-filter-for-a-date-field
For the demo from DevExtreme, see this:
https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Filtering/jQuery/Light/