Data Filtering

Instead of automatic filtering, developers can set and apply filter lists themselves. Grid When FilteringOptions.enabled is true and filters are set in the column, a filter handle is displayed in the column header, and the user clicks the handle to use the displayed filter list. You can filter data by column.

When multiple filters are selected within one column, rows are displayed even if they meet only one filter condition in the filter set. However, when filters are set on multiple columns, only rows corresponding to the filter set for all columns are displayed.

Register filter, remove filter

You can apply a column filter to a column with setFilters() and remove the filter with clearFilters().

//Apply filter
var filters = [
   {
     name: "Mozambique",
     criteria: "value = 'Mozambique'"
   },
   {
     name: "Canada",
     criteria: "value = 'Canada'"
   }
   //...skip...
];
gridView.setColumnFilters("KorCountry", filters);
 
//remove filter
gridView.clearColumnFilters("KorCountry");

Register additional filters, remove some

You can add filters to the existing filter list or remove filters.

Let's add 'Ukraine', 'Brazil', and 'Peru' to the existing filter list of investment countries. And let's remove 'Mozambique' and 'Canada'.

//Register additional filters
var filters = [
   {
     name: "Ukraine",
     criteria: "value = 'Ukraine'",
     active: false
   },
   {
     name: "Brazil",
     criteria: "value = 'Brazil'",
     active: true
   },
   {
     name: "Peru",
     criteria: "value = 'Peru'"
   }
];
var overwrite = true; // If false, an exception occurs if there is an existing filter with the same name.
 
gridView.addColumnFilters("KorCountry", filters, overwrite);
 
//filter remove mozambique canada
gridView.removeColumnFilters("KorCountry", ["Mozambique", "Canada"]);

Apply filter, clear filter

You can apply and remove specific filters or all filters.

//Mozambique, Canada filter applied
gridView.activateColumnFilters("KorCountry", ["Mozambique", "Canada"], true);
 
//Deactivate Mozambique
gridView.activateColumnFilters("KorCountry", ["Mozambique"], false);
 
//Apply all filters
gridView.activateAllColumnFilters("KorCountry", true);
 
//Unapply all filters
gridView.activateAllColumnFilters("KorCountry", false);

Hide, unhide filters

You can hide or unhide specific filters or all filters from the registered filter list. Let's hide the Mozambique and Canada filters for investment countries, unhide the Mozambique filter, and hide and unhide all filters.

//Hide Mozambique, Canada
gridView.hideColumnFilters("KorCountry", ["Mozambique", "Canada"], true);
 
//Unhide Mozambique
gridView.hideColumnFilters("KorCountry", ["Mozambique"], false);
 
//Hide all filters
gridView.hideAllColumnFilters("KorCountry", true);
 
//Unhide all filters
gridView.hideAllColumnFilters("KorCountry", false);

Filter toggle

Toggles the specified filters for the corresponding column. Let's toggle the investment country filters for Mozambique and Canada and toggle all filters.

//Toggle Mozambique, Canada
gridView.toggleColumnFilters("KorCountry", ["Mozambique", "Canada"]);
 
//Toggle all filters
gridView.toggleAllColumnFilters("KorCountry");

Set with filter condition function

Set filtering conditions in function form.

//filter function set
var filterFunc = function(dataProvider, dataRow, level, fieldName, filter, value) {
   if (filter.tag == 1 && value == "Mozambique") {
     return true;
   } else if (filter.tag == 2 && value == "Canada") {
     return true;
   } else if (filter.tag == 3 && value == "Ukraine") {
     return true;
   } else {
     return false;
   }
};
var filters = [
   {
     name: "filter1",
     text: "Mozambique",
     tag: 1,
     callback: filterFunc
   },
   {
     name: "filter2",
     text: "Canada",
     tag: 2,
     callback: filterFunc
   },
   {
     name: "filter3",
     text: "Ukraine",
     tag: 3,
     callback: filterFunc
   }
];
 
gridView.setColumnFilters("KorCountry", filters);

lookup filter settings

You can create and search a filtering list using the lookup column labels value.

gridView.filteringOptions.automating.lookupDisplay = true;

and, or range filter settings

You can set filtering by applying and and or to criteria.

Set a filter with values between 20 and 50 in the 'Age' column. When active: true is set, filtering is applied at the same time as the filter is set.

//and condition filter
var filters = [
   {
     name: "Age 20~50",
     criteria: "(value > 19) and (value <= 50)",
     active: true
   }
];
gridView.setColumnFilters("Age", filters);

Set a filter with the values of May and November in the 'Order Date' column.

//or condition filter
var filters = [
   {
     name: "May and November",
     criteria: "(month(value) = 5) or (month(value) = 11)",
     active: true
   }
];
gridView.setColumnFilters("OrderDate", filters);

Automatic filtering Column layout (column grouping)