Articles in this section
Category / Section

How to filter all the columns when press the enter key for last filterbar cell ?

1 min read

This Knowledge base explains the way of how to filter all the columns when pressing the enter key for last filterbar-cell.


 This can be achieved using actionBegin event of ejGrid. In this event, we can get filterCollections for last column filterbar cell, so that the filtercollections value can be append based on that corresponding filterbarcell value.

The following code example demonstrates how to filter all the columns when pressing the enter key for last filterbar cell.


  1. Render the grid control


<div id="Grid"></div>
<script type="text/javascript">
        $(function () {
                allowPaging: true,
                allowFiltering: true,
                filterSettings: { filterType: "filterbar", filterBarMode: ej.Grid.FilterBarMode.OnEnter },
                columns: [
                            { field: "OrderID", headerText: "Order ID", isPrimaryKey: true },
                            { field: "CustomerID", headerText: "Customer ID" },
                            { field: "EmployeeID", headerText: "Employee ID" },
                            { field: "ShipCity", headerText: "Ship City" },
                            { field: "ShipCountry", headerText: "Ship Country" },



           .FilterSettings(filter => filter.FilterBarMode(FilterBarMode.OnEnter).FilterType(FilterType.FilterBar))
           .Columns(col =>
               col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add();
               col.Field("CustomerID").HeaderText("Customer ID").Add();
               col.Field("EmployeeID").HeaderText("Employee ID").Add();
               col.Field("ShipCity").HeaderText("Ship City").Add();
               col.Field("ShipCountry").HeaderText("Ship Country").Add();
       .ClientSideEvents(eve => eve.ActionBegin("actionBegin"))




namespace Sample.Controllers
    public class GridController : Controller
        public ActionResult GridFeatures()
            ViewBag.datasource = new NorthwindDataContext().OrdersViews.ToList();
            return View();



<ej:Grid ID="Grid" runat="server" AllowPaging="True" AllowFiltering="true">
        <FilterSettings FilterBarMode="OnEnter" FilterType="FilterBar"></FilterSettings>
        <ClientSideEvents ActionBegin="actionBegin" />
            <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true"></ej:Column>
            <ej:Column Field="CustomerID" HeaderText="Customer ID" />
            <ej:Column Field="EmployeeID" HeaderText="Employee ID" />
            <ej:Column Field="ShipCity" HeaderText="Ship City" />
            <ej:Column Field="ShipCountry" HeaderText="Ship Country" />




<ej-grid id="Grid" allow-paging="true" datasource="ViewBag.datasource" action-begin="actionBegin">
  <e-filter-settings filter-type="FilterBar" filter-bar-mode="OnEnter"></e-filter-settings>
        <e-column field="OrderID" header-text="Order ID" is-primary-key="true"></e-column>
        <e-column field="CustomerID" header-text="Customer ID"></e-column>
        <e-column field="EmployeeID" header-text="Employee ID"></e-column>
        <e-column field="ShipCity" header-text="Ship City"></e-column>
        <e-column field="ShipCountry" header-text="Ship Country"></e-column>



<ej-grid #grid id="Grid" [dataSource]="gridData" [allowPaging]="true" [allowFiltering]="true" [filterSettings]="filterType"  (actionBegin)="onactionBegin($event)">
        <e-column field="OrderID" [isPrimaryKey]="true" headerText="Order ID" ></e-column>
        <e-column field="CustomerID" headerText="Customer  ID"></e-column>
        <e-column field="EmployeeID" headerText="EmployeeID"></e-column>
        <e-column field="ShipCity" headerText="Ship City"></e-column>
        <e-column field="ShipCountry" headerText="Ship Country"></e-column>        


  1. In actionBegin event the filterCollection contains the last column filterbar cell value.

TS file

@ViewChild('grid') GridModel: EJComponents<any, any>;
public filterType = { filterType: "filterbar", filterBarMode: ej.Grid.FilterBarMode.OnEnter  };
  onactionBegin(e: any) {
        if (e.requestType == "filtering" && e.currentFilterObject[0].operator == "startswith") {
                e.currentFilterObject[0].operator = "contains";
                var len = e.model.columns.length, columns = e.model.columns, currentFilterField = e.currentFilterObject[0].field;
               for (var i = 0; i < len; i++) {
                         if ($("#" + columns[i].field + "_filterBarcell").val().length > 0 && (columns[i].field != currentFilterField)) {
                         var filterCollection = { "field": columns[i].field, "operator": "contains", "predicate": 'and', "value": $("#" + columns[i].field + "_filterBarcell").val() }    //create a filter object
                          e.filterCollection.splice(i - 1, 0, filterCollection);


  1. So upon appending the filterbar cell value for each column to the filterCollection, filtering takes place based on the each value in the filter bar.



<script type="text/javascript">
     function actionBegin(args) {
        if (args.requestType == "filtering" && args.currentFilterObject[0].operator == "startswith") {
            args.currentFilterObject[0].operator = "contains";
            //here we can find the columns length and current filter field value
            var len = this.model.columns.length, columns = this.model.columns, currentFilterField = args.currentFilterObject[0].field;
            for (var i = 0; i < len; i++) {
                //check the condition for any filterbarcell has value expect current filter barcell
                if ($("#" + columns[i].field + "_filterBarcell").val().length > 0 && (columns[i].field != currentFilterField)) {
                    var filterCollection = { "field": columns[i].field, "operator": "contains", "predicate": 'and', "value": $("#" + columns[i].field + "_filterBarcell").val() }  
                               //create a filter object
                    args.filterCollection.splice(i - 1, 0, filterCollection);
//insert filterobject into filtercollection array based on that index



Figure 1: shows filtering had done based on the given value on filterbar cell from all the columns after pressing enter key.


Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment