Articles in this section
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>

 

 

C:\Users\Manisankar.durai\Desktop\menu filter.png

 

Figure: Customized the operator in menu filter for the CustomerID column by removing the Equal Operator.

 

 

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