New to Telerik UI for Blazor? Download free 30-day trial

Format or Bold Grid Search Results

Environment

Product Grid for Blazor,
TreeList for Blazor

Description

I am using the Grid SearchBox. How to format the Grid cell values to bold the search keyword? Is there a suitable event to format the search strings in the cells?

How to highlight matching search results in the Grid cells?

Solution

The following approach is valid for both the Grid and the TreeList.

  1. Define column templates for all string columns in the Grid.
  2. Inside the column template, obtain the search string from the Grid state:
  3. Insert HTML tags inside the column template that will format or style the cell content:
    • Use some string manipulation or replacement.
    • Render the cell content with a MarkupString, otherwise the Blazor framework will encode the tags and the user will see them.
    • Decide how you want to handle letter casing during string replacement.

Format or highlight Grid search results

@using Telerik.DataSource

<TelerikGrid @ref="@Grid"
             Data="@GridData"
             TItem="@GridModel"
             Pageable="true"
             OnStateChanged="@( (GridStateEventArgs<GridModel> args) => OnGridStateChanged(args) )">
    <GridToolBar>
        Type a letter or a number: <GridSearchBox />
    </GridToolBar>
    <GridColumns>
        <GridColumn Field="@nameof(GridModel.Text1)">
            <Template>
                @{
                    GridModel item = context as GridModel;

                    if (!String.IsNullOrEmpty(SearchBoxValue))
                    {
                        @(new MarkupString(item.Text1.Replace(SearchBoxValue,
                            $"<strong>{SearchBoxValue}</strong>",
                            StringComparison.InvariantCultureIgnoreCase)))
                    }
                    else
                    {
                        @item.Text1
                    }
                }
            </Template>
        </GridColumn>
        <GridColumn Field="@nameof(GridModel.Text2)">
            <Template>
                @{
                    GridModel item = context as GridModel;

                    if (!String.IsNullOrEmpty(SearchBoxValue))
                    {
                        @(new MarkupString(item.Text2.Replace(SearchBoxValue,
                            $"<strong>{SearchBoxValue.ToUpperInvariant()}</strong>",
                            StringComparison.InvariantCultureIgnoreCase)))
                    }
                    else
                    {
                        @item.Text2
                    }
                }
            </Template>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

<style>
    td strong {
        color: red;
        background: yellow;
    }
</style>

@code {
    List<GridModel> GridData { get; set; }
    TelerikGrid<GridModel> Grid { get; set; }
    string SearchBoxValue { get; set; }

    void OnGridStateChanged(GridStateEventArgs<GridModel> args)
    {
        if (args.PropertyName == "SearchFilter")
        {
            CompositeFilterDescriptor searchDescriptor = Grid.GetState().SearchFilter as CompositeFilterDescriptor;
            string searchString = (searchDescriptor?.FilterDescriptors.FirstOrDefault() as FilterDescriptor)?.Value.ToString();

            SearchBoxValue = searchString ?? String.Empty;
        }
    }

    protected override void OnInitialized()
    {
        GridData = new List<GridModel>();
        var rnd = new Random();

        for (int i = 1; i <= 300; i++)
        {
            GridData.Add(new GridModel()
            {
                Id = i,
                Text1 = $"{(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)} {(i * 11)}",
                Text2 = $"{(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)} {(i * 22)}"
            });
        }
    }

    public class GridModel
    {
        public int Id { get; set; }
        public string Text1 { get; set; }
        public string Text2 { get; set; }
    }
}

See Also

In this article