Excel-like Filtering in JavaScript Gantt Chart Control

18 Nov 20181 minute to read

The Excel-like filter in Gantt Chart control enables column-level filtering similar to Microsoft Excel. It supports sorting, clearing filters, and applying advanced conditions through a submenu available in each column header. This feature is highly effective for working with large datasets and applying multiple filter criteria.

To enable this feature, configure filterSettings.type as Excel and set allowFiltering to true.

Show customized text in checkbox list data

To customize the text displayed in a checkbox list, use filterItemTemplate and assign it to the desired column. This allows rendering custom content for each item in the filter list.

Hide Excel filter dialog elements

You can hide elements such as the context menu, search box, sorting options, and checkbox list in the Gantt Excel filter dialog using the following CSS:

.e-gantt .e-excelfilter .e-contextmenu-wrapper {
    display: none;
}

If you want to hide only the built-in sorting options (ascending, descending, and separator), apply the following CSS:

 .e-excel-ascending,
 .e-excel-descending,
 .e-separator.e-excel-separator {
    display: none;
  }

Customize filter choice count

The Gantt Chart control displays up to 1000 distinct values per column in the filter dialog by default. These values are taken from the first 1000 records bound to the control and shown as checkbox list items to maintain optimal performance. Additional values can be accessed using the search option within the filter dialog.

To customize this behavior, the filterChoiceCount property can be adjusted to increase or decrease the number of distinct values displayed, depending on the dataset size and filtering requirements.

Bind custom remote data source for Excel-like filtering

You can dynamically bind a custom remote data source to the Excel filter in the Gantt Chart control by using a DataManager with WebApiAdaptor. This can be done by assigning the data source directly or storing fetched data in a global variable. Then, bind it to the filter module’s dataSource within the actionBegin event when requestType is filterBeforeOpen.