Completed
Last Updated: 25 Mar 2022 20:22 by Kyler
Release 3.1.0
Michael McCallum
Created on: 10 Dec 2019 12:30
Category: UI for Blazor
Type: Feature Request
31
Filter Component
Like the one in UI for ASP.NET AJAX and Kendo, as it is more powerful than the built-in filtering of the grid.
5 comments
Kyler
Posted on: 25 Mar 2022 20:22
According to the [3.1.0 release notes](https://www.telerik.com/support/whats-new/blazor-ui/release-history/ui-for-blazor-3-1-0), this has been added!
ADMIN
Dimo
Posted on: 01 Jul 2021 14:19

Hello Bob,

We provide two types of filter descriptors:

There are two main differences:

  • The CompositeFilterDescriptor has a FilterDescriptors property, which holds a collection of one or more filter descriptors. These nested descriptors can be either composite or single. In this way you can create a tree-like structure of filtering criteria.
  • The CompositeFilterDescriptor has a LogicalOperator enum property that can be equal to And or Or. This determines how the direct children descriptors are treated. Of course, the logical operators at different levels can be different.

Here is a simplified example of what you are trying to achieve:

@page "/t1445600"
@using Telerik.DataSource.Extensions
@using Telerik.DataSource

<h4>Custom filter appled programmatically:</h4>

<ul>
    <li>
        ID &gt; 20 AND (
        <ul>
            <li>Age &lt; 40 OR</li>
            <li>Height &gt; 180</li>
        </ul>
        )
    </li>
</ul>

<TelerikGrid Data="@CurrentGridData"
             TotalCount="@CurrentGridTotal"
             OnRead="GridReadHandler"
             Pageable="true" PageSize="10">
    <GridColumns>
        <GridColumn Field="ID" />
        <GridColumn Field="Name" />
        <GridColumn Field="Age" />
        <GridColumn Field="Height" Title="Height (cm)" />
        @*<GridColumn Field="Weight" Title="Weight (kg)" />*@
    </GridColumns>
</TelerikGrid>

@code {

    public List<Person> RawData { get; set; } = new();
    public List<Person> CurrentGridData { get; set; } = new();
    public int CurrentGridTotal { get; set; }

    private async Task GridReadHandler(GridReadEventArgs args)
    {
        var rootCFD = new CompositeFilterDescriptor();
        rootCFD.LogicalOperator = FilterCompositionLogicalOperator.And;

        var idFD = new FilterDescriptor("ID", FilterOperator.IsGreaterThan, 20);
        rootCFD.FilterDescriptors.Add(idFD);

        var nestedCFD = new CompositeFilterDescriptor();
        nestedCFD.LogicalOperator = FilterCompositionLogicalOperator.Or;

        var ageFD = new FilterDescriptor("Age", FilterOperator.IsLessThan, 40);
        nestedCFD.FilterDescriptors.Add(ageFD);
        var heightFD = new FilterDescriptor("Height", FilterOperator.IsGreaterThan, 180);
        nestedCFD.FilterDescriptors.Add(heightFD);

        rootCFD.FilterDescriptors.Add(idFD);
        rootCFD.FilterDescriptors.Add(nestedCFD);

        args.Request.Filters.Add(rootCFD);

        var result = RawData.ToDataSourceResult(args.Request);
        CurrentGridData = (result.Data as IEnumerable<Person>).ToList();
        CurrentGridTotal = result.Total;
    }

    protected override Task OnInitializedAsync()
    {
        Random rnd = new Random();

        for (int i = 1; i <= 100; i++)
        {
            RawData.Add(new Person()
            {
                ID = i,
                Name = "Name " + i,
                Age = rnd.Next(18, 60),
                Height = rnd.Next(150, 199),
                Weight = rnd.Next(50, 120)
            });
        }

        return base.OnInitializedAsync();
    }

    public class Person
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
        public int Height { get; set; }
        public int Weight { get; set; }
    }
}

Regards,
Dimo
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Bob
Posted on: 30 Jun 2021 19:11

Okay, I am going to need some help using the DataSourceRequest as you have suggested.&nbsp; Here is the Json for somewhat complex filter that I have stored from our project using the .Net Core Filter Control.

{
  "logic": "and",
  "filters": [
    {
      "field": "BusinessCenter",
      "value": "09",
      "operator": "eq"
    },
    {
      "logic": "or",
      "filters": [
        {
          "field": "GrantNumber",
          "value": "",
          "operator": "eq"
        },
        {
          "logic": "and",
          "filters": [
            {
              "field": "GrantNumber",
              "value": "F",
              "operator": "doesnotcontain"
            },
            {
              "field": "GrantNumber",
              "value": "S",
              "operator": "doesnotcontain"
            },
            {
              "field": "GrantNumber",
              "value": "L",
              "operator": "doesnotcontain"
            }
          ]
        }
      ]
    }
  ]
}

How do I turn this into a DataSourceRequest and use that with my Grid in Blazor?  I don't see any way to set the filters in the grid to be "Or", they all seem to be "And"?  

This is EXTREMELY  important as we are set to release our new version in December and I MUST be able to use the Filter Control just as it works today or I am totally screwed.

ADMIN
Marin Bratanov
Posted on: 03 May 2021 04:55

Hi Bob,

What I can say at this point is that this component is not planned for the R3 2021 timeframe, and I cannot say anything for the plans beyond that point.

The structure of the filters the Kendo widget provides is compatible with the Kendo DataSource widget, so it is pretty close to the DataSourceRequest object that we use in Blazor as well. Thus, with relatively little parsing of the expression object you can get from its change event, you will be able to generate a request that the C# code can understand.

Regards,
Marin Bratanov
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Bob
Posted on: 03 May 2021 01:48

Are there any plans to create this control any time soon?  I am in the process of upgrading our web app to blazor and this control is REALLY needed in our application.

If there are no plans to create it then I will either have to figure out how to use the jquery control on the two pages that use this control or I will have to try to create my own filter control that works just like the one you already have.