Search Grid by StartsWith Filter Operator
Environment
| Product | Grid for Blazor |
Description
How to search the Grid items, so that the results start with the search value?
If users search for "AA", I only want to see items starting with AA, like AAB and AAC. The Grid should not return results like BAAC, SLAA, etc.
Solution
There are two ways to quickly search Grid items with a starts with filter operator:
Use the Grid Filter Row
By default, the GridSearchBox searches in string values with a contains filter. The easiest way to search by starts with filter is to use the built-in row filter with a configured default filter operator.
Filter Grid columns with a "StartsWith" operator
@using Telerik.DataSource
<TelerikGrid Data="@GridData"
Pageable="true"
FilterMode="@GridFilterMode.FilterRow">
<GridColumns>
<GridColumn Field="@nameof(GridItem.ID)" Filterable="false" />
<GridColumn Field="@nameof(GridItem.Text)" DefaultFilterOperator="@FilterOperator.StartsWith" />
</GridColumns>
</TelerikGrid>
@code {
List<GridItem> GridData { get; set; }
protected override void OnInitialized()
{
GridData = new List<GridItem>();
var rnd = new Random();
for (int i = 0; i < 100; i++)
{
GridData.Add(new GridItem()
{
ID = i + 1,
Text = $"{(char)(i % 26 + 65)} {(char)(rnd.Next(1, 26) + 64)} " + (i + 1)
});
}
base.OnInitialized();
}
public class GridItem
{
public int ID { get; set; }
public string Text { get; set; }
}
}
Use the Grid SearchBox
- Subscribe to the Grid OnStateChanged event.
- In the handler, check if the user has just changed the SearchBox value.
args.PropertyNamewill be"SearchFilter". - Obtain the current Grid state with
GetState(). - See if the Search
CompositeFilterDescriptoris populated. This means the SearchBox is not empty. - Iterate the search filter descriptors and change the
Operator. - Reset the Grid state with
SetStateAsync().
Search in Grid columns with a "StartsWith" operator
@using Telerik.DataSource
<TelerikGrid @ref="@Grid"
Data="@GridData"
Pageable="true"
OnStateChanged="@( (GridStateEventArgs<GridItem> args) => OnStateChanged(args) )">
<GridToolBarTemplate>
<GridSearchBox />
</GridToolBarTemplate>
<GridColumns>
<GridColumn Field="@nameof(GridItem.Id)" />
<GridColumn Field="@nameof(GridItem.Text1)" Title="Search: starts with letter" />
<GridColumn Field="@nameof(GridItem.Text2)" Title="Search: ends with number" />
</GridColumns>
</TelerikGrid>
@code {
TelerikGrid<GridItem> Grid { get; set; }
List<GridItem> GridData { get; set; }
async Task OnStateChanged(GridStateEventArgs<GridItem> args)
{
// if the user changed the SearchBox value
if (args.PropertyName == "SearchFilter")
{
var state = Grid.GetState();
var searchFD = state.SearchFilter as CompositeFilterDescriptor;
// if a search filter is applied
if (searchFD?.FilterDescriptors.Count > 0)
{
foreach (FilterDescriptor fd in searchFD.FilterDescriptors)
{
// change the filter operator for all or some searchable columns
if (fd.Member == nameof(GridItem.Text1))
{
fd.Operator = FilterOperator.StartsWith;
}
if (fd.Member == nameof(GridItem.Text2))
{
fd.Operator = FilterOperator.EndsWith;
}
}
await Grid.SetStateAsync(state);
}
}
}
protected override void OnInitialized()
{
GridData = new List<GridItem>();
var rnd = new Random();
for (int i = 0; i < 100; i++)
{
GridData.Add(new GridItem()
{
Id = i + 1,
Text1 = $"{(char)(i % 26 + 65)} {(char)(rnd.Next(1, 26) + 64)} " + (i + 1),
Text2 = $"{(char)(rnd.Next(1, 26) + 64)} " + (i + 1) * rnd.Next(2, 9)
});
}
base.OnInitialized();
}
public class GridItem
{
public int Id { get; set; }
public string Text1 { get; set; }
public string Text2 { get; set; }
}
}