Duplicated
Last Updated: 30 Mar 2023 08:15 by ADMIN
Daniel
Created on: 18 Nov 2020 17:23
Category: Grid
Type: Feature Request
3
Include filter descriptors from the SearchBox in the State

I am trying to get the currently filtered data out of the grid as per this KB article and I want to include the searchbox filters. I do not, however, want to use OnRead but I want to get the grid state on a click of a button and get the filters plus the searchbox filters from it instead.

---

ADMIN EDIT

Here is a sample of getting those filters through the OnRead event without using remote operations - all the data is in the view model (the SourceData field) so this does not change the way operations happen compared to not using OnRead.

@using Telerik.DataSource
@using Telerik.DataSource.Extensions

@( new MarkupString(output) )

<br />
<TelerikButton OnClick="@GetFilters">Get Filters</TelerikButton>


<TelerikGrid Data=@GridData TotalCount=@Total OnRead=@ReadItems
             FilterMode=@GridFilterMode.FilterRow Sortable=true Pageable=true EditMode="@GridEditMode.Inline">
    <GridToolBar>
        <GridSearchBox />
    </GridToolBar>
    <GridColumns>
        <GridColumn Field=@nameof(Employee.ID) />
        <GridColumn Field=@nameof(Employee.Name) Title="Name" />
        <GridColumn Field=@nameof(Employee.HireDate) Title="Hire Date" />
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
            <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    TelerikGrid<Employee> GridRef { get; set; }
    string output { get; set; }
    public DataSourceRequest CurrentRequest { get; set; }
    void GetFilters()
    {
        output = string.Empty;


        foreach (var item in CurrentRequest.Filters)
        {
            if (item is FilterDescriptor) // filter row
            {
                FilterDescriptor currFilter = item as FilterDescriptor;
                output += $"field: {currFilter.Member}, operator {currFilter.Operator}, value: {currFilter.Value}<br />";
            }

            if (item is CompositeFilterDescriptor) // filter menu
            {
                CompositeFilterDescriptor currFilter = item as CompositeFilterDescriptor;
                output += $"START nested filter: logical operator: {currFilter.LogicalOperator}, details:<br />";
                // there will actually be 1 or 2 only, this showcases the concept and the types
                foreach (FilterDescriptor nestedFilter in currFilter.FilterDescriptors)
                {

                    output += $"field: {nestedFilter.Member}, operator {nestedFilter.Operator}, value: {nestedFilter.Value}<br />";
                }
                output += "END nested filter<br />";
            }
        }
    }




    public List<Employee> SourceData { get; set; }
    public List<Employee> GridData { get; set; }
    public int Total { get; set; } = 0;

    protected override void OnInitialized()
    {
        SourceData = GenerateData();
    }

    protected async Task ReadItems(GridReadEventArgs args)
    {
        CurrentRequest = args.Request;


        var datasourceResult = SourceData.ToDataSourceResult(args.Request);

        GridData = (datasourceResult.Data as IEnumerable<Employee>).ToList();
        Total = datasourceResult.Total;

        StateHasChanged();
    }

    //This sample implements only reading of the data. To add the rest of the CRUD operations see
    //https://docs.telerik.com/blazor-ui/components/grid/editing/overview

    private List<Employee> GenerateData()
    {
        var result = new List<Employee>();
        var rand = new Random();
        for (int i = 0; i < 100; i++)
        {
            result.Add(new Employee()
            {
                ID = i,
                Name = "Name " + i,
                HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20))
            });
        }

        return result;
    }

    public class Employee
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }
}

---

Duplicated
This item is a duplicate of an already existing item. You can find the original item here:
3 comments
ADMIN
Marin Bratanov
Posted on: 23 Nov 2020 09:16

Hello Daniel,

We have discussed this further and the results are as I expected - the searchbox is not and should not be a part of the grid state because it will alter very unexpectedly the rest of the filter state, which would be a very bad thing. The searchbox is intermittent, it has a very transient nature, because such searches are very short lived compared to actual filters that people tend to put more thought into. Thus, using OnRead to get those filters (and store them if you like) is a valid approach. If you don't use OnRead for query optimizations purposes already, adding it to get those filter descriptors is 5 lines of code. If you want to optimize your data queries, you'd be using OnRead anyway.

That said, another thing you may find interesting (if so - Vote for it and Follow it) is the ability to get and set the searchbox value programmatically that you can track here: https://feedback.telerik.com/blazor/1494717-ability-to-clear-the-searchbox-on-escape-key-with-an-x-in-the-input-and-programmatically. With that, you would be able to save the user input from it, and apply it after loading the grid, if that's something you need to do.

 

Regards,
Marin Bratanov
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/.

ADMIN
Marin Bratanov
Posted on: 19 Nov 2020 14:44

Hello Daniel,

At the moment, the searchbox is not in the state deliberately - if it were, it would also fill in the filters for those columns and mark them as filtered which would pose two UX issues:

  • this will add highlights for the user that they do not expect
  • this will wipe any other filters they added to those columns which will alter their experience and will not match their expectations

That's why this was logged as a separate enhancement request. Perhaps this behavior could go behind a flag of the searchbox component. Or, perhaps a two-way bindable Value could be exposed for the searchbox so you could use the app state to store and restore it. At the moment, however, OnRead is the correct approach that also does not break the UX.

 

Regards,
Marin Bratanov
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/.

Daniel
Posted on: 19 Nov 2020 08:19
Even if there is a workaround for this, I still assume that the filters from the searchbox are contained in the state of the grid. This is the expected behaviour when I query the filter descriptors of the grid with Grid.GetState().FilterDescriptors.