Devextreme provides lots of features. One of them is customizing the header filter value in devextreme that applies to columns.
Sometimes we need to apply our own custom data for filters. Here I will explain how to add our own custom data in the column header filter. The below image shows the default filter value in devextreme.
Here in the below image, I have applied the custom filter in the size column.
Code Section:
Column[
...
...
...
{
dataField: "displaySize",
caption: "Size",
width: 200,
visibleIndex: 3,
allowFiltering: true,
calculateFilterExpression:calculateFilterExpression
headerFilter: {
dataSource: setDynamicDataSoruceFilterValues()
}
},
]
compareFilterSizeValae(value) in this function, I will compare the value with lessThen, greaterThan, or equal to according to selected values from the filter popup by the user. Inside this function I have called this function getFileSizeBytes(), This function calculates the size data according to KB, MB, and GB and returns the calculated data whatever size type the user selects.
setDynamicDataSoruceFilterValues():- This function creates the dynamic dataSource for the filter value and text to display in the filter search popup shown in the second image. I have set the value in text like
< 100 KB,
>= 100 KB < 1 MB,
>= 1MB < 100MB,
>= 100 MB < 1GB,
> 1 GB and apply the same logic for filtering.
var filterValues = ["100KB", "1MB", "10MB", "100MB", "1GB"];
function getFileSizeBytes(rowData) {
if (rowData.displaySize) {
var displaySizeInNumber = parseInt(rowData.displaySize);
let sizeType = rowData.displaySize.toUpperCase();
if (sizeType.endsWith("KB"))
return displaySizeInNumber * 1024;
else if (sizeType.endsWith("MB"))
return displaySizeInNumber * 1024 * 1024;
else if (sizeType.endsWith("GB"))
return displaySizeInNumber * 1024 * 1024 * 1024;
else
return displaySizeInNumber;
}
if (rowData.displaySize)
return (parseInt(rowData.displaySize));
else
return -1;
}
function calculateFilterExpression(value, selectedFilterOperations, target) {
debugger;
if (target === "headerFilter") {
let valueArray = value.split('-');
let operationType = "Between";
var displaySizeInNumber = 0;
let value1 = 0, value2 = 0;
if (valueArray.length == 1) {
operationType = value.startsWith('<') ? "LessThan" : "GreaterThan";
displaySizeInNumber = convertValueToBytes(value.substring(1));
}
else {
value1 = convertValueToBytes(valueArray[0]);
value2 = convertValueToBytes(valueArray[1]);
}
if (operationType == "Between") {
return [[getFileSizeBytes, ">=", value1], "and", [getFileSizeBytes, "<", value2]];
}
else if (operationType == "LessThan") {
return [[getFileSizeBytes, "=", 0], "or", [getFileSizeBytes, "<", displaySizeInNumber]];
}
else {
return [getFileSizeBytes, ">=", displaySizeInNumber];
}
}
return this.defaultCalculateFilterExpression.apply(this, arguments);
}
function convertValueToBytes(value) {
let parsedValue = parseInt(value);
let sizeType = value.toUpperCase();
if (sizeType.endsWith("KB"))
return parsedValue * 1024;
else if (sizeType.endsWith("MB"))
return parsedValue * 1024 * 1024;
else if (sizeType.endsWith("GB"))
return parsedValue * 1024 * 1024 * 1024;
else
return parsedValue;
}
function setDynamicDataSoruceFilterValues() {
var sizeHeaderFilterDataSource = [
{
key: 1,
text: "< 100 KB",
value: "<100KB"
}
];
for (i = 0; i < filterValues.length - 1; i++) {
var dataSourceValue = {
key: i + 2,
text: ">=" + filterValues[i] + " < " + filterValues[i + 1],
value: filterValues[i] + "-" + filterValues[i + 1]
};
sizeHeaderFilterDataSource.push(dataSourceValue);
if (i === 3) {
var lastIndexFilterValue = {
key: 6,
text: "> 1 GB",
value: ">1GB"
}
sizeHeaderFilterDataSource.push(lastIndexFilterValue);
}
}
return sizeHeaderFilterDataSource;
}