Hide the filter operator dropdown for a specific column?

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




11 Replies 1 reply marked as answer

PG Praveenkumar Gajendiran Syncfusion Team August 17, 2020 12:21 PM UTC

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
 


Marked as answer

DC Dan Clarke August 21, 2020 09:54 AM UTC

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?


PG Praveenkumar Gajendiran Syncfusion Team August 24, 2020 12:59 PM UTC

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 5th 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
 



DC Dan Clarke September 4, 2020 08:45 AM UTC

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.


RS Rajapandiyan Settu Syncfusion Team September 7, 2020 12:33 PM UTC

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 



DC Dan Clarke September 8, 2020 06:19 AM UTC

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.


RR Rajapandi Ravi Syncfusion Team September 9, 2020 12:28 PM UTC

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 
 



DC Dan Clarke September 10, 2020 05:56 AM UTC

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"".



PG Praveenkumar Gajendiran Syncfusion Team September 14, 2020 03:37 PM UTC

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.     

Regards,  
Praveenkumar G. 



BV Bob Vale February 17, 2021 12:18 AM UTC

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.




VN Vignesh Natarajan Syncfusion Team February 17, 2021 09:44 AM UTC

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 { getset; } 
    SfDateRangePicker<DateTime?> DateRange { getset; } 
    private bool IsVisible { getset; } = false; 
    private bool showComponent { getset; } = false; 
    public List<Order> Orders { getset; } 
    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<stringCountries> 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  
 
Refer our UG documentation for your reference 
 
 
 
Kindly get back to us if you have further queries.   
 
Regards, 
Vignesh Natarajan  


Loader.
Up arrow icon