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).
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).
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?
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.
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