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
• Use the Grid SearchBox

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

1. Subscribe to the Grid OnStateChanged event.
2. In the handler, check if the user has just changed the SearchBox value. args.PropertyName will be "SearchFilter".
3. Obtain the current Grid state with GetState().
4. See if the Search CompositeFilterDescriptor is populated. This means the SearchBox is not empty.
5. Iterate the search filter descriptors and change the Operator.
6. 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; }
    }
}

See Also

• Search the Grid in Numeric and Date Model Fields
• Search the Grid in Hidden Fields
• Search the Grid on Button Click
• Format or Bold Search Results in the Grid