Completed
Last Updated: 17 Sep 2020 08:40 by ADMIN
Release 2.17.0
René
Created on: 06 Nov 2019 08:03
Category: Grid
Type: Feature Request
10
Search Panel
Please add a Search Panel to the Blazor Grid.  Behaviour should be the same as the Search Panel in the Grid for .NET Core.
6 comments
ADMIN
Marin Bratanov
Posted on: 17 Sep 2020 08:40

I also made a feature request for this where you can Follow its status: https://feedback.telerik.com/blazor/1485012-allow-searchbox-to-work-with-other-data-types

 

Regards,
Marin Bratanov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

ADMIN
Marin Bratanov
Posted on: 17 Sep 2020 08:37

Hello,

The SearchBox of the grid works with string fields as per its documentation: https://docs.telerik.com/blazor-ui/components/grid/filtering#toolbar-search-box

You can add a search box in the grid toolbar that lets the user type their query and the grid will look up all visible string columns with a case-insensitive Contains operator, and filter them accordingly.

 

Regards,
Marin Bratanov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

René
Posted on: 17 Sep 2020 07:08
I haven't tried yet but since Aditya mentioned that the search panel is ignoring number based fields I'm assuming searching for enum values (the text not the index) is not working either?
Searching for enum values would be a great addition if not available yet.
Aditya
Posted on: 16 Sep 2020 23:49

I see Searchbox is available in just released 2.17.0 version, but it only searches on text based columns, which doesn't make total sense.

If the user searched for a number based field value (say Employee ID), the grid becomes empty, which is going to confuse the user thinking that there is no matching employee ID.

Can you please confirm when will number based fields be supported in Search?

René
Posted on: 07 Nov 2019 07:48

Hello Marin,

yes, I'm looking for this feature: https://demos.telerik.com/aspnet-core/grid/search-panel

The filter-row is not sufficient because it only looks in a single column.

For now I'm using a workaround like the one you described below.

ADMIN
Marin Bratanov
Posted on: 06 Nov 2019 19:05

Hello,

If I understand correctly, you are looking for this feature: https://demos.telerik.com/aspnet-core/grid/search-panel. Could you confirm this for me?

For the time being, the closest one is the filter row: https://demos.telerik.com/blazor-ui/grid/filter-row.

You can also try using a regular textbox and in its ValueChanged handler to filter the grid data source yourself according to the desired custom logic and fields. Here's a basic example:

<TelerikTextBox ValueChanged="@( (string s) => MyValueChangeHandler(s) )"></TelerikTextBox>

<TelerikGrid Data=@GridData FilterMode="Telerik.Blazor.GridFilterMode.None" Pageable="true" Height="400px">
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Name) />
        <GridColumn Field=@nameof(Employee.AgeInYears) Title="Age" />
        <GridColumn Field=@nameof(Employee.HireDate) Title="Hire Date" />
        <GridColumn Field=@nameof(Employee.IsOnLeave) Title="On Vacation" />
    </GridColumns>
</TelerikGrid>

@code {
    string searchString { get; set; }

    private void MyValueChangeHandler(string theUserInput)
    {
        GridData = AllData.Where(empl => empl.Name.ToLowerInvariant().Contains(theUserInput.ToLowerInvariant())).ToList();
    }

    private List<Employee> AllData { get; set; }
    public List<Employee> GridData { get; set; }

    protected override void OnInitialized()
    {
        AllData = new List<Employee>();
        var rand = new Random();
        for (int i = 0; i < 100; i++)
        {
            AllData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                AgeInYears = rand.Next(10, 80),
                HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20)),
                IsOnLeave = i % 3 == 0
            });
        }

        GridData = AllData;
    }

    public class Employee
    {
        public int? EmployeeId { get; set; }
        public string Name { get; set; }
        public int? AgeInYears { get; set; }
        public DateTime HireDate { get; set; }
        public bool IsOnLeave { get; set; }
    }
}

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor