Hide the filter operator dropdown for a specific column?

[Dan Clarke]

Hi,

I have a grid where one of the columns is a dropdown of options.

I can customise the filter for this column either by using the column.filter.ui way (link to documentation), or by using the filter template (link to documentation).

Unfortunately neither of these options affects the menu operator dropdown. I can't find a way of removing it. Obviously the operator dropdown doesn't make sense when having a custom dropdown of options.

Thanks,

Dan

[Praveenkumar Gajendiran]

Hi Dan, 

Greetings from Syncfusion support.

Query: “Hide the filter operator dropdown for a specific column?” 

 

Based on your query, you want to hide the operator dropdown in menu-filter dialog for specific column.  

 

We suggest you to use actionComplete event of Grid using which you can hide the operator dropdown in menu-filter dialog for specific column as demonstrated in the below code snippet. 

 

[app.component.ts] 

actionComplete(args) { 

    if ( args.requestType === "filterafteropen" && 

      (args.columnName === "ShipCountry" ||args.columnName === "ShipName"))  // here we have hide the operator dropdown for specific columns 

      { 

        args.filterModel.dlgObj.element.children[0].firstElementChild.children[0].style.display = 

          "none"; 

      } 

  } 

[app.component.html] 

<ejs-grid #grid [dataSource]='data' allowPaging='true' allowFiltering='true' [pageSettings]='pageSettings' [filterSettings]='filterSettings' (actionComplete)="actionComplete($event)"> 

</ejs-grid> 

Here, We have prepared a sample based on this for your reference.

Sample:  https://stackblitz.com/edit/angular-igabxa-dlihvi?file=app.component.ts 

 

Let us know if you have any concerns.

Regard,
Praveenkumar g 

[Dan Clarke]

Thanks. This works, but feels very hacky. Given a dropdown filter is presumably a common scenario, and having the operation dropdown doesn't make sense with a dropdown filter - surely this should be a filter option?

[Praveenkumar Gajendiran]

Hi Dan, 

 

Based on your query, you need another option to hide the operator dropdown in menu-filter dialog for specific column.  

 

We suggest to hide the operator dropdown in menu-filter dialog for specific column by using the below CSS. 

 

[app.component.css] 

#grid-column5-flmdlg .e-flm_optrdiv { 

  display: none; 

} 

In the above code example, we have hide the operator dropdown in menu-filter dialog for the 5^th column index which has the dropdown component in menu-filter dialog.

Here, We have prepared a sample based on this for your reference.

Sample:  https://stackblitz.com/edit/angular-igabxa-vnnxmy?file=app.component.css  

 

Let us know if you have any concerns.

Regard,
Praveenkumar g 

[Dan Clarke]

Sorry, this isn't what I meant. Your first suggestion worked - I was saying that it feels like this should be built-in as a grid option. Both your suggestions feel very "hacky" for something that must be a very common scenario. It would be much nicer if you could have a filter setting option against the <e-column>.

To clarify - I'm not looking for another way of doing it - this is purely product feedback for your dev team.

[Rajapandiyan Settu]

Hi Dan, 

 

Thanks for your update. 

 

When having a menu type filter in the EJ2 Grid, we have the option to choose the filter operators using the Dropdown. This is our default architecture of Menu Filter Dialog. 

 

But you want to hide that dropdown for filter operators in the dialog using some built-in properties. Currently, it is not feasible at our end. 

 

Since your requirement is unique, we suggest you to use the workaround in previous responses to achieve your requirement.  

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S 

[Dan Clarke]

Hi. Why is my requirement unique? I want a dropdown filter in a grid - that sounds like quite a common requirement to me. If you have a dropdown filter, then the operator dropdown doesn't make sense.

[Rajapandi Ravi]

Hi Dan, 

Before we start providing solution on your query we need more information for our clarification, Please share the below details that will be helpful for us to provide better solution. 

1)  Please share the purpose of hiding the dropdown operator list. If possible, share your use case scenario with detailed description. 

2)  By default for the string columns we have displayed the dropdown operators list like starts with, contains & equal etc. Please confirm if you like to customize the default operator list. 

3)  If you like to hide the dropdown operators list, you cannot change the operator type for column from the startswith operator. 

Regards,
Rajapandi R 

 

[Dan Clarke]

I have a filter with dropdown list of options. My particular example would take too long to explain - but there are tons of reasons you might want this. For example, imagine you had a dropdown filtering by 'status'. For any "dropdown" filter - having another operator list makes no sense at all.

Imagine a user was choosing these items from a dropdown: "Todo", "In Progress", "Done". Why would you then want another dropdown with "Starts with", etc in it? If the table was a todo list, you wouldn't want to say "Starts with "In Prog"".

[Praveenkumar Gajendiran]

Hi Dan,  

We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.     

https://www.syncfusion.com/account/login  

Regards,  

Praveenkumar G. 

[Bob Vale]

I have a similar requirement for the Blazor version.

I'm using Excel filter and checkbox filter on a some columns and I would like the ability to show a completely custom filter interface for other columns.

For example for the user experience of the date columns I would like to remove the operator filter completely

Then I want to provide a dropdown with choices of "All, This Month, This Year, Last 5 Years, Between"
If between is selected I'd like to show a date range picker.

[Vignesh Natarajan]

Hi Bob,  

 

Thanks for contacting Syncfusion support. 

 

Query: “For example for the user experience of the date columns I would like to remove the operator filter completely Then I want to provide a dropdown with choices of "All, This Month, This Year, Last 5 Years, Between” 

 

We have analyzed the requested query and we understand that you want to customize the filter option for specific column while using Excel/ Checkbox filter in one column. We do not have direct support to achieve your requirement. But we can achieve your requirement by displaying our own customized dialog with our own components instead of default filter.  

 

In the below solution, we have prevented the default dialog using OnActionBegin event and displayed an own customized dialog. On selecting a Between operator DateRangerPicker component will be displayed. Clicking on Filter button after selecting a  value will filter the GridColumn.  

 

Refer the below code example. 

 

<SfGrid @ref="Grid" DataSource="@Orders" AllowFiltering="true" Query="@Qry" AllowPaging="true" Height="315"> 

    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.CheckBox"></GridFilterSettings> 

    <GridEvents OnActionBegin="ActionBegin" TValue="Order"></GridEvents> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" FilterSettings="@(new FilterSettings{Type = Syncfusion.Blazor.Grids.FilterType.Menu })" Type="ColumnType.Date" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

</SfGrid> 

  

@*Customized FilterColumn dialog*@ 

  

<SfDialog Width="250px" IsModal="true" @bind-Visible="@IsVisible"> 

    <DialogPositionData X="980" Y="90"></DialogPositionData> 

    <DialogTemplates> 

        <Content> 

            <SfDropDownList TValue="string" Placeholder="e.g. Australia" TItem="Countries" DataSource="@Country"> 

                <DropDownListFieldSettings Value="Name"></DropDownListFieldSettings> 

                <DropDownListEvents ValueChange="OnChange" TValue="string" TItem="Countries"></DropDownListEvents> 

            </SfDropDownList> 

            @if (showComponent) 

            { 

                <SfDateRangePicker @ref="DateRange" TValue="DateTime?" Placeholder="Choose a Range"></SfDateRangePicker> 

            } 

        </Content> 

    </DialogTemplates> 

    <DialogButtons> 

        <DialogButton Content="Filter" IsPrimary="true" OnClick="@Filter" /> 

        <DialogButton Content="Clear" OnClick="@CloseDialog" /> 

    </DialogButtons> 

</SfDialog> 

  

@code{ 

    SfGrid<Order> Grid { get; set; } 

    SfDateRangePicker<DateTime?> DateRange { get; set; } 

    private bool IsVisible { get; set; } = false; 

    private bool showComponent { get; set; } = false; 

    public List<Order> Orders { get; set; } 

    public Query Qry = new Query(); 

    public void Filter() 

    { 

        var Col1Pre = new WhereFilter(); 

        var predicate = new List<WhereFilter>(); 

        predicate.Add(new WhereFilter() { Condition = "or", Field = "OrderDate", value = DateRange.StartDate, Operator = "greaterthanorequal" }); 

        predicate.Add(new WhereFilter() { Condition = "or", Field = "OrderDate", value = DateRange.EndDate, Operator = "lessthanorequal" }); 

        Col1Pre = WhereFilter.And(predicate); 

        Qry = new Query().Where(Col1Pre); // to filter the Grid 

        IsVisible = false; 

    } 

    public void OnChange(ChangeEventArgs<string, Countries> Args) 

    { 

        if (Args.Value == "Between") 

        { 

            showComponent = true; 

        } 

    } 

    public void ActionBegin(ActionEventArgs<Order> Args) 

    { 

        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.FilterBeforeOpen && Args.ColumnName == "OrderDate") 

        { 

            Args.Cancel = true; 

            IsVisible = true; 

        } 

    } 

    private void CloseDialog() 

    { 

        Grid.ClearFiltering("OrderDate"); 

        this.IsVisible = false; 

    } 

 

 

Note: Similarly you can customize the action for the other dropdown values.  

 

Kindly download the sample which we have prepared using above solution from below  

Sample: https://www.syncfusion.com/downloads/support/forum/162656/ze/Grid2017018970  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/events/#onactionbegin  

 

 

Kindly get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan