Filter bar in ASP.NET Core Grid component

6 Dec 202424 minutes to read

The filter bar feature provides a user-friendly way to filter data in the Syncfusion^® ASP.NET Core Grid. It displays an input field for each column, allowing you to enter filter criteria and instantly see the filtered results.

By defining the allowFiltering to true, then filter bar row will be rendered next to header which allows you to filter data. You can filter the records with different expressions depending upon the column type.

Filter bar expressions:
You can enter the following filter expressions(operators) manually in the filter bar.

Expression	Example	Description	Column Type
=	=value	equal	Number
!=	!=value	notequal	Number
>	>value	greaterthan	Number
<	<value	lessthan	Number
>=	>=value	greaterthanorequal	Number
<=	<=value	lessthanorequal	Number
*	*value	startswith	String
%	%value	endswith	String
N/A	N/A	Always equal operator will be used for Date filter	Date
N/A	N/A	Always equal operator will be used for Boolean filter	Boolean

The following example demonstrates how to activate default filtering in the grid.

CSHTML
filter-bar.cs
<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowFiltering="true" height="275px">
    <e-grid-filterSettings type="FilterBar"></e-grid-filterSettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" format="yMd" width="120"></e-grid-column>          
        <e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="100"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    ViewBag.dataSource = OrderDetails.GetAllRecords();
    return View();
}

Filter bar

To enable or dynamically switch the filter type, you must set the filterSettings.type as FilterBar.

Filter bar modes

The Syncfusion^® ASP.NET Core Grid component refers to two different ways in which the grid’s filter bar can operate when filtering criteria are applied. These modes, “OnEnter Mode” and “Immediate Mode,” offer users different experiences and behaviors when interacting with the filter bar.

OnEnter Mode:
By settings filterSettings.mode as OnEnter, the filter bar captures the filter criteria entered but doesn’t initiate filtering until the Enter key is pressed. This allows multiple criteria modifications without triggering immediate filtering actions.

Immediate Mode:
By settings filterSettings.mode as Immediate, the filter bar instantly applies filtering as filter criteria are entered. Filtering actions take place as soon as criteria are input or modified, providing real-time previews of filtering results.

CSHTML
filter-bar.cs
@{
    var filterModesData = new[] {
        new { value = "OnEnter", text = "OnEnter" },
        new { value = "Immediate", text = "Immediate" }
    };
}
<div style="padding-bottom: 20px; display: flex">
    <label style="padding: 5px 20px 0 0"> Select Filter Mode</label>
    <span style="height:fit-content">      
      <ejs-dropdownlist id="modeDropDown" datasource="filterModesData" index=0 width="120px" change="onModeChange">
        <e-dropdownlist-fields value="value" text="text"></e-dropdownlist-fields>
      </ejs-dropdownlist> 
    </span>
</div>
<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowFiltering="true" allowPaging="true" height="180px">
    <e-grid-filterSettings type="FilterBar"></e-grid-filterSettings>
    <e-grid-pageSettings pageSize=5></e-grid-pageSettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" format="yMd" width="120"></e-grid-column>          
        <e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="100"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
<script>  
    function onModeChange(args)  {
        var grid = document.getElementById("grid").ej2_instances[0];
        grid.filterSettings = { mode: args.value }
    }
  </script>
public IActionResult Index()
{
    ViewBag.dataSource = OrderDetails.GetAllRecords();
    return View();
}

Filter bar

The Syncfusion^® ASP.NET Core Grid component provides an option to display filter text within the pager, indicating the current filtering status. Enabling this feature provides you with a clear understanding of the applied filters and the criteria used for filtering.

To enable the display of filter text within the pager, you should set the showFilterBarStatus property within the filterSettings configuration.

CSHTML
filter-bar.cs
<div style="padding-bottom: 20px; display: flex">
    <label style="margin-right:5px;margin-top: -3px;font-weight: bold;">Show filter bar status </label>    
    <ejs-switch id="switch" checked="true" change="onChange"></ejs-switch>
</div>
<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowFiltering="true" height="273px" allowPaging="true">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column>
        <e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="100"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
<script>
    function onChange(args)  {
      var grid = document.getElementById("grid").ej2_instances[0];
      grid.filterSettings = { showFilterBarStatus: args.checked }
    }
</script>
public IActionResult Index()
{
    ViewBag.dataSource = OrderDetails.GetAllRecords();
    return View();
}

Filter bar

Show or hide filter bar operator in filter bar cell

In the Syncfusion^® ASP.NET Core Grid component, you have the ability to modify the filter operator for a column directly within the user interface during the filtering process through the filter bar cell. For instance, the default operator for filtering string-type columns in the filter bar is “startswith”. Now, you can customize the default operator for a specific column using the filter operator feature.

To achieve this functionality, you can enable the showFilterBarOperator property within the filterSettings.

CSHTML
filter-bar.cs
<div style="padding-bottom: 20px; display: flex">
    <label style="margin-right:5px;margin-top: -3px;font-weight: bold;">Show filter bar status </label>
    <ejs-switch id="switch" change="onChange"></ejs-switch>
</div>
<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowFiltering="true" allowPaging="true" height="205px">
    <e-grid-filterSettings type="FilterBar"></e-grid-filterSettings>
    <e-grid-pageSettings pageSize=6></e-grid-pageSettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" format="yMd" width="120"></e-grid-column>          
        <e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="170"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
<script>
    function onChange(args)  {
      var grid = document.getElementById("grid").ej2_instances[0];
      grid.filterSettings = { showFilterBarOperator: args.checked }
    }
</script>
public IActionResult Index()
{
    ViewBag.dataSource = OrderDetails.GetAllRecords();
    return View();
}

Filter bar

Prevent filtering for particular column

In the Syncfusion^® ASP.NET Core Grid, you can prevent filtering for a specific column by utilizing the allowFiltering property of the column object and setting it to false. This feature is useful when you want to disable filtering options for a particular column.

Here’s an example that demonstrates how to remove the filter bar for the CustomerID column in Syncfusion^® ASP.NET Core Grid:

CSHTML
filter-bar.cs
<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowFiltering="true" height="300px">
    <e-grid-filterSettings type="FilterBar"></e-grid-filterSettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer Name" width="120" allowFiltering="false"></e-grid-column>
        <e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="100"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    ViewBag.dataSource = OrderDetails.GetAllRecords();
    return View();
}

Hide filter bar for template column

By default, the filter bar is set to a disabled mode for template columns in the grid. However, in certain cases, you may want to hide the filter bar for a template column to provide a customized filtering experience.

To hide the filter bar for a template column, you can use the filterTemplate property of the column. This property allows you to define a custom template for the filter bar of a column.

Here’s an example that demonstrates how to hide the filter bar for a template column in the Syncfusion^® ASP.NET Core Grid:

CSHTML
filter-bar.cs
<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowFiltering="true" height="275px" load="load">
    <e-grid-filterSettings type="FilterBar"></e-grid-filterSettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
        <e-grid-column field="Action"  template="#template" width="100"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
<script type="text/x-jsrender" id="template">
    <button class="e-btn">Custom action</button>
</script>
<script>
 function load() {
    var grid = document.getElementById("grid").ej2_instances[0];
    grid.columns[2].filterTemplate = '<span></span>';
  }
</script>
public IActionResult Index()
{
    ViewBag.dataSource = OrderDetails.GetAllRecords();
    return View();
}

Filter bar

Filter bar template with custom component

The filterBarTemplate feature in the Syncfusion^® ASP.NET Core Grid allows you to customize the components displayed in the filter bar. Normally, a text box is the default element rendered in the filter bar cell. This flexibility allows you to use various components, such as datepicker, numerictextbox, combobox, and multiselect, within the filter bar based on your specific requirements.

To utilize this feature, you can define a custom template for the filter bar by setting the filterBarTemplate property of a column in your ASP.NET Core application:

CSHTML
filter-bar.cs
@using Newtonsoft.Json;
@{
    var templateOptionsNumericTextBox = new { create = "numericCreate", write = "numericWrite" };
    var filterBarTemplate = new { create = "dropDownCreate", write = "stringWrite" };
    var templateOptionsComboBox = new { create = "comboBoxCreate", write = "comboBoxWrite" };
    var templateOptionsMultiSelect = new { create = "multiSelectCreate", write = "multiSelectWrite" };
    var templateOptionsDatePicker = new { create = "datePickerCreate", write = "datePickerWrite" };
}
<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowFiltering="true" height="275px">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer Name" width="120" filterBarTemplate=filterBarTemplate></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120" filterBarTemplate=templateOptionsNumericTextBox></e-grid-column>          
        <e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" format="yMd" width="120" filterBarTemplate=templateOptionsDatePicker></e-grid-column>          
        <e-grid-column field="ShipCity" headerText="Ship City" width="100" filterBarTemplate=templateOptionsComboBox></e-grid-column>
        <e-grid-column field="ShipCountry" headerText="Ship Country" width="170" filterBarTemplate=templateOptionsMultiSelect></e-grid-column>
    </e-grid-columns>
</ejs-grid>
<script>
    var dropDown;
    var numericElement;
    var dateElement;
    var comboElement;
    var multiSelectElement;
    var shipCityDistinctData = ej.data.DataUtil.distinct(@Html.Raw(JsonConvert.SerializeObject(ViewBag.DataSource)), 'ShipCity', true);
    var shipCountryDistinctData = ej.data.DataUtil.distinct(@Html.Raw(JsonConvert.SerializeObject(ViewBag.DataSource)), 'ShipCountry', true);
    var data = @Html.Raw(JsonConvert.SerializeObject(ViewBag.DataSource));
    function dropDownCreate() {
        dropDown = document.createElement('select');
        dropDown.id = 'CustomerID';
        var option = document.createElement('option');
        option.value = 'All';
        option.innerText = 'All';
        dropDown.appendChild(option);
        data.forEach((item) => {
            var option = document.createElement('option');
            option.value = item.CustomerID;
            option.innerText = item.CustomerID;
            dropDown.appendChild(option);
        });
        return dropDown;
    }
    function stringWrite () {
        var dropDownList  = new ej.dropdowns.DropDownList({
            change: (args) => {
                var grid = document.getElementById("grid").ej2_instances[0];
                if (args.value !== 'All') {
                    grid.filterByColumn(args.item.parentElement.id.replace('_options', ''), 'equal', args.value);
                } else {
                    grid.removeFilteredColsByField(args.item.parentElement.id.replace('_options', ''));
                }
            }
        });
        dropDownList .appendTo(dropDown);
    }
   function numericCreate(){
        numericElement = document.createElement('input');
        return numericElement;
    }
    function numericWrite(){
        var numericTextBox = new ej.inputs.NumericTextBox({
            format: '00.00',
            value: 10,
        });
        numericTextBox.appendTo(numericElement);
    }
   function datePickerCreate(){
        dateElement = document.createElement('input');
        return dateElement;
    }
    function datePickerWrite (args){
        var datePickerObject = new ej.calendars.DatePicker({
            value: new Date(args.column.field),
            change: handleFilterChange,
        });
        datePickerObject.appendTo(dateElement);
    }
    function comboBoxCreate(){
        comboElement = document.createElement('input');
        comboElement.id = 'ShipCity';
        return comboElement;
    }
    function comboBoxWrite(args) {
        var comboBox = new ej.dropdowns.ComboBox({
            value: args.value,
            placeholder: 'Select a city',
            change: handleFilterChange,
            dataSource: shipCityDistinctData.map((item) => item.ShipCity),
        });
        comboBox.appendTo(comboElement);
    }
    function multiSelectCreate(){
        multiSelectElement = document.createElement('input');
        multiSelectElement.id = 'ShipCountry';
        return multiSelectElement;
    }
    function multiSelectWrite(args){
        var multiselect = new ej.dropdowns.MultiSelect({
            value: args.value,
            placeholder: 'Select a country',
            change: multiselectFunction,
            dataSource: shipCountryDistinctData.map((item) => item.ShipCountry),
        });
        multiselect.appendTo(multiSelectElement);
    }
   function handleFilterChange (args){
        var grid = document.getElementById("grid").ej2_instances[0];
        var targetElement = ej.grids.parentsUntil(args.element, 'e-filtertext');
        var columnName = targetElement.id.replace('_filterBarcell', '');
        if (args.value) {
            grid.filterByColumn(columnName, 'equal', args.value);
        } else {
            grid.removeFilteredColsByField(columnName);
        }
    }
    function multiselectFunction(args){
        var grid = document.getElementById("grid").ej2_instances[0];
        var selectedValues = args.value;
        if (selectedValues.length === 0) {
                var orginalData = new ej.data.DataManager(data).executeLocal(new ej.data.Query());
                grid.dataSource = orginalData;
        } else {
            var predicate = [];
            for (var x = 0; x < selectedValues.length; x++) {
                predicate = predicate.length === 0 ? new ej.data.Predicate('ShipCountry', 'equal', selectedValues[x]) : predicate.or('ShipCountry', 'equal', selectedValues[x]);
            }
            var filteredData = new ej.data.DataManager(data).executeLocal(new ej.data.Query().where(predicate));
            grid.dataSource = filteredData;
        }
    }
</script>
public IActionResult Index()
{
    ViewBag.dataSource = OrderDetails.GetAllRecords();
    return View();
}

Filter bar

Filter bar in ASP.NET Core Grid component

Filter bar modes

Display filter text in pager

Show or hide filter bar operator in filter bar cell

Prevent filtering for particular column

Hide filter bar for template column

Filter bar template with custom component

See also