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

Search in hidden fields of the Grid

Environment

Product Grid for Blazor

Description

I want to customize the Grid Toolbar Searchbox, so it also searches in the hidden fields of the Grid and not only in the visible ones. How to achieve that?

Solution

By default, the Grid looks in all string fields in its currently visible columns. You can customize the SearchBox, so the Grid will search only in certain columns. However, the search will still be based on the visible fields provided to the Fields parameter of the GridSearchBox.

If you want to search in the hidden fields of the Grid, do the following:

  • Use the Grid with an OnRead handler.
  • In the OnRead handler, check if there is a filter applied.
  • The applied filter must be of type CompositeFilterDescriptor. Plain FilterDescriptors at root level (args.Request.Filters) are generated by the filter row. The composite filter descriptor has a FilterDescriptors property, which holds a collection plain single-field FilterDescriptors. Each of them targets one of the visible columns.
  • Obtain the search string from the Value property of any of the descriptors in the above collection.
  • Add one additional FilterDescriptor to the above collection that targets the hidden column.

Here is an example:

@using Telerik.DataSource.Extensions
@using Telerik.DataSource

<TelerikGrid Data="@CurrentGridData" TotalCount="@CurrentGridTotalCount"
             OnRead="@GridReadHandler"
             FilterMode="@GridFilterMode.FilterRow">
    <GridToolBar>
        <strong style="color:#900">Search for "secret#", where # is the ID number:</strong>
        <span class="k-toolbar-spacer"></span>
        <GridSearchBox DebounceDelay="200"></GridSearchBox>
    </GridToolBar>
    <GridColumns>
        <GridColumn Field="@nameof(GridItem.ID)" />
        <GridColumn Field="@nameof(GridItem.Name)" />
        <GridColumn Field="@nameof(GridItem.Secret)" Visible="false" />
    </GridColumns>
</TelerikGrid>

@code {

    private int CurrentGridTotalCount { get; set; }

    public List<GridItem> GridData { get; set; } = new List<GridItem>();
    public List<GridItem> CurrentGridData { get; set; } = new List<GridItem>();

    protected override Task OnInitializedAsync()
    {
        for (int j = 1; j <= 9; j++)
        {
            GridData.Add(new GridItem() { ID = j, Name = "Name " + j, Secret = "Secret" + j });
        }

        return base.OnInitializedAsync();
    }

    private async Task GridReadHandler(GridReadEventArgs args)
    {
        // check if we have any filtering at all
        if (args.Request.Filters.Count > 0)
        {
            foreach (var rootFilterDescriptor in args.Request.Filters)
            {
                // row filters are FilterDescriptors; search and menu filters are CompositeFilterDescriptors
                if (rootFilterDescriptor.GetType() == typeof(CompositeFilterDescriptor))
                {
                    var searchDescriptor = rootFilterDescriptor as CompositeFilterDescriptor;
                    var searchString = (searchDescriptor.FilterDescriptors[0] as FilterDescriptor).Value.ToString();

                    // add a descriptor for each hidden column that you want to search in
                    searchDescriptor.FilterDescriptors.Add(new FilterDescriptor()
                    {
                        Member = "Secret",
                        MemberType = typeof(string),
                        Value = searchString,
                        Operator = FilterOperator.Contains
                    });
                }
            }
        }

        var result = GridData.ToDataSourceResult(args.Request);
        CurrentGridData = (result.Data as IEnumerable<GridItem>).ToList();
        CurrentGridTotalCount = result.Total;
    }

    public class GridItem
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string Secret { get; set; }
    }
}
In this article
Not finding the help you need? Improve this article