How to customize header filter value in devextreme

Author - Webner
15.11.2021
|
0 Comments
||



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.
Devextreme

Here in the below image, I have applied the custom filter in the size column.
Devextreme1

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;
}

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

Your email address will not be published. Required fields are marked *