Category / Section
How to hide/remove the menu filter operators which are not required for the particular column?
1 min read
This Knowledge Base explains the way to remove the operators which are not required in the menu filter for the particular column
HTML
<div id="Grid"></div>
JS
<script type="text/javascript"> $(function () { $("#Grid").ejGrid({ dataSource: window.gridData, allowPaging: true, allowFiltering: true, filterSettings: { filterType: "menu" }, columns: [ { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", width: 90 }, { field: "CustomerID", headerText: "Customer ID", width: 90 }, { field: "EmployeeID", headerText:"Employee ID", width: 90 }, { field: "ShipCity", headerText: "Ship City", width: 90 } ], create: "create", }); }); </script>
Razor
@(Html.EJ().Grid<MVCSampleBrowser.Models.EditableOrder>("Grid") .Datasource((IEnumerable<object>)ViewBag.datasource) .AllowPaging() .AllowFiltering().FilterSettings(filter => filter.FilterType(FilterType.Menu)) .Columns(col => { col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).Width(90).Add(); col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add(); col.Field("EmployeeID").HeaderText("EmployeeID").Width(90).Add(); col.Field("ShipCity").HeaderText("Ship City").Width(90).Add(); }) .ClientSideEvents(eve => { eve.Create("create"); }) )
C#
namespace Sample.Controllers { public class GridController : Controller { public ActionResult GridFeatures() { var DataSource = new NorthwindDataContext().OrdersViews.ToList(); ViewBag.datasource = DataSource; return View(); } } }
ASPX
<ej:Grid ID="Grid" runat="server" AllowPaging="True" AllowFiltering="true"> <FilterSettings FilterType="Menu"></FilterSettings> <Columns> <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" Width="65"></ej:Column> <ej:Column Field="CustomerID" HeaderText="CustomerID" TextAlign="Left" Width="90" /> <ej:Column Field="EmployeeID" HeaderText="EmployeeID" Width="90"></ej:Column> <ej:Column Field="ShipCity" HeaderText="ShipCity" TextAlign="Left" Width="90" /> </Columns> <ClientSideEvents Create="create" /> </ej:Grid>
By using create event of grid and open event of dialog, we can hide/remove the operators of menu filter for the particular column according to the user requirement. The following code example shows about customizing the operator in the menu filter for the CustomerID column.
<script type="text/javascript"> function create(args) { var grid = $("#Grid").ejGrid("instance"); this.element.on("mousedown", ".e-gridheader .e-filtericon", function (argument) { var target = argument.target; // ”Grid_stringDlg” – Here “Grid” is Grid control ID and where “_stringDlg” is common name for all the string columns in grid. This id is same for all the string columns so we need to find the corresponding column based on the ej-mappingname of the parent element. $("#Grid_stringDlg").ejDialog({ //open event of the filter menu dialog open: function (e) { if ($(target).parent().find(".e-headercelldiv").attr("ej-mappingname") == "CustomerID") $("#" + grid._id + "string_ddinput_popup_wrapper").find("li[value='Equal']").hide(); else $("#" + grid._id + "string_ddinput_popup_wrapper").find("li[value='Equal']").show(); } }); }); } </script>
Figure: Customized the operator in menu filter for the CustomerID column by removing the Equal Operator.