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.
Solution
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.
- Render the grid control
JS
<div id="Grid"></div>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource:window.gridData,
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" },
],
actionBegin:"actionBegin",
});
});
</script>
RAZOR
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<Object>)ViewBag.datasource)
.AllowPaging()
.AllowFiltering()
.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"))
)
C#
namespace Sample.Controllers
{
public class GridController : Controller
{
public ActionResult GridFeatures()
{
ViewBag.datasource = new NorthwindDataContext().OrdersViews.ToList();
return View();
}
}
}
ASPX
<ej:Grid ID="Grid" runat="server" AllowPaging="True" AllowFiltering="true"> <FilterSettings FilterBarMode="OnEnter" FilterType="FilterBar"></FilterSettings> <ClientSideEvents ActionBegin="actionBegin" /> <Columns> <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" /> </Columns> </ej:Grid>
ASP.NET CORE
<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-columns> <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> </e-columns> </ej-grid>
Angular
<ej-grid #grid id="Grid" [dataSource]="gridData" [allowPaging]="true" [allowFiltering]="true" [filterSettings]="filterType" (actionBegin)="onactionBegin($event)"> <e-columns> <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> </e-columns> </ej-grid>
- 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);
}
}
}
}
- 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.
JS
<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
}
}
}
}
</script>
Figure 1: shows filtering had done based on the given value on filterbar cell from all the columns after pressing enter key.
