Unplanned
Last Updated: 29 Jun 2020 13:01 by ADMIN
Alexandre
Created on: 12 Jul 2019 19:51
Category: Grid
Type: Feature Request
16
Option to hide grid filter operators
Sometimes, we just want a simple equal filter in grid, without operators options
10 comments
ADMIN
Marin Bratanov
Posted on: 29 Jun 2020 13:01

Hi all,

You can now do this through the custom filter templates. Here's an example:

@using Telerik.DataSource
@using Telerik.Blazor.Common.Filter

<TelerikGrid Data=@GridData FilterMode="@GridFilterMode.FilterRow"
             Height="400px" Width="700px" Pageable="true">
    <GridColumns>
        <GridColumn Field="Id" Filterable="false" Width="80px" />
        <GridColumn Field="Price" Filterable="false" />

        <GridColumn Field="ProductName" Title="Product">
            <FilterCellTemplate>
                <TelerikTextBox @bind-Value="@currFilterValue" 
                                OnChange="@(async () =>
                                          {
                                              (context.FilterDescriptor.FilterDescriptors[0] as FilterDescriptor).Value = currFilterValue;

                                              // invoke filter through built-in method
                                              await context.FilterAsync();
                                          })"></TelerikTextBox>
                <div class="k-filtercell-operator">
                    <TelerikDropDownList Data="@Operators"
                                         Class="k-dropdown-operator"
                                         PopupWidth="auto"
                                         PopupHeight="auto"
                                         Width=""
                                         OnChange="@(async () =>
                                          {
                                              // invoke filter through built-in method
                                              await context.FilterAsync();
                                          })"
                                         @bind-Value="@( (context.FilterDescriptor.FilterDescriptors[0] as FilterDescriptor).Operator )"
                                         ValueField="@nameof(FilterListOperator.Operator)"
                                         TextField="@nameof(FilterListOperator.Text)">
                    </TelerikDropDownList>
                    <TelerikButton ButtonType="ButtonType.Button"
                                   Class="k-clear-button-visible ml-2"
                                   Icon="filter-clear"
                                   Enabled="@( !string.IsNullOrEmpty(currFilterValue) )"
                                   OnClick="@(async () =>
                                          {
                                              currFilterValue = null;

                                              // clear filter through the method the context provides
                                              await context.ClearFilterAsync();
                                          })">
                    </TelerikButton>
                </div>
            </FilterCellTemplate>
            </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    //used for the custom filter
    string currFilterValue { get; set; }

    // custom filter operators list - mind the field type as not all operators can apply to all types
    List<FilterListOperator> Operators =>
        new List<FilterListOperator>()
        {
                new FilterListOperator() { Text = "starts with", Operator = FilterOperator.StartsWith },
                new FilterListOperator() { Text = "contains", Operator = FilterOperator.Contains },
                new FilterListOperator() { Text = "is not empty", Operator = FilterOperator.IsNotEmpty },
        };


    // sample grid data

    public List<SampleData> GridData { get; set; } = Enumerable.Range(1, 50).Select(x => new SampleData
    {
        Id = x,
        Price = x * 0.5m,
        ProductName = $"Product {x}"
    }).ToList();

    public class SampleData
    {
        public int Id { get; set; }
        public decimal Price { get; set; }
        public string ProductName { get; set; }
    }
}


<style>
    /* change the dropdownlist arrow to a filter icon */
    .k-dropdown-operator .k-i-arrow-60-down::before {
        content: "\e129";
    }
</style>

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
ADMIN
Marin Bratanov
Posted on: 05 Dec 2019 16:11

Hi Peter,

You can see our short-term plans in our roadmap page: https://www.telerik.com/support/whats-new/blazor-ui/roadmap. We take the community feedback actively when prioritizing items, so the more popular a given request becomes, the more likely it is to be implemented sooner rather than later. This also means that we can't commit to firm timeframes for all those features in the portal, and the best way to know when something gets done is to Follow its progress.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Peter
Posted on: 05 Dec 2019 14:42
I'm fairly new to using your controls. Is there a process this now goes through to work its way into production? How long does it typically take?
ADMIN
Marin Bratanov
Posted on: 05 Dec 2019 14:18

Thank you Peter, it helps having our customers' preferences so we can better accommodate them.

--Marin

Peter
Posted on: 05 Dec 2019 14:15

Hi Marin,

I think for the most part that Operators to Exclude would be the most useful. If we don't want to filter on a particular column can't we just set the Filterable parameter on the column itself? If you can implement Operators to Include as well but only allow one of the parameters (Operators to Include/Operators to Exclude) to be implemented at the same time, that would be helpful for situations where the desired number of operators is small. I would also like to see Default Operator implemented as per your example below. All of this should be implemented in the GridColumn definition. Hope that helps.

Regards,

Peter Zanutto

ADMIN
Marin Bratanov
Posted on: 05 Dec 2019 08:19

Hello Peter,

This brings me back to my initial question of how you want this exposed for configuration - operators to include, operators to exclude, default operator, parameter for whether the operators list will be available at all, some other sort of parameter per field type at the grid level? There are various ways to get this implemented and we'd appreciate feedback on how you want it to work.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Peter
Posted on: 04 Dec 2019 20:36

Marin,

 I like your suggested treatment. I was just looking at a way to simplify the number of choices that a user has depending on the data type of a column. We may for instance not provide the same operator choices for numeric data as we would for string data. 

ADMIN
Marin Bratanov
Posted on: 15 Jul 2019 14:22
Hello Alexandre,

Would something like this be useful for you (I am trying to make the feature more generic so that it can accommodate more use cases):

<TelerikGridColumn Field="@(nameof(ReadModel.Name))" Title="User name" DefaultFilterOperator="EqualTo" FilterOperators="EqualTo" />

which would let you define the available operators in the dropdown - in this case so there is only one option - and, in addition, so you can define the default action in case you want to keep a number of operators (FilterOperators would be able to take a list of sorts, this is pseudocode). With FilterRow filtering (the default) blurring the input would trigger filtering anyway, so clicking the filter button would simply show the current operator so the user can know what they are actually doing.

or

<TelerikGridColumn Field="@(nameof(ReadModel.Name))" Title="User name" DefaultFilterOperator="EqualTo" ShowFilterOperatorsList="false" />

so that there is no dropdown at all (see the second property) and only a filter button is available in addition to the input. This would make more of a difference in the upcoming Filter Menu filtering mode.


Regards,
Marin Bratanov
Progress Telerik UI for Blazor
Alexandre
Posted on: 15 Jul 2019 13:08

Hey Marin!

Something like this:
<TelerikGridColumn Field="@(nameof(ReadModel.Name))" Title="User name" ExclusiveFilterOperator="Equal" />

 

If you configure the property ExclusiveFilterOperator, the drop down will not show and the operator will be the value of ExclusiveFilterOperator?

 

ok?

ADMIN
Marin Bratanov
Posted on: 15 Jul 2019 08:32
Hello Alexandre,

How would you expect this to be exposed for configuration? For example, List<string> properties where you can list the available operators, or properties where you list the ones you want to hide? Also, how would you want to control this depending on the field type (like numeric, string, DateTime, boolean), as they have different available filter options?


Regards,
Marin Bratanov
Progress Telerik UI for Blazor