DataGrid FilterBar search by multiple columns

[iftixar hamidov]

Hi. I am showing a certain number of rows in the grid. For example, 25 rows. I use Syncfusion.Blazor.Grids.FilterType.FilterBar for the search. In the ActionBeginHandler event, if the RequestType is Syncfusion.Blazor.Grids.Action.Filtering, then I create my own filter and add 25 rows suitable for this filter. I get the data. Then I call ClearFilteringAsync(), empty the filter and bind the grid again. In this way, I only bring 25 rows from the database and the search can be made across the entire database. Now my problem is this. When the user presses enter for each search, I only get the value written in the last column in the filter bar. I want to get the search values ​​written in all columns in the filterbar. How can I do this?

I am sending the sample project in the attachment. Please run the project. On the screen that opens, type 1 in the ID column and Name1 in the Name column. You will see that it will bring you two rows. Because it only applies the filter I wrote in the Name column. This is also normal. Because I used CurrentFilterObject. But I want to do something like that. I can get both the filters I wrote in the ID and Name columns at the same time.

Thanks

You can download project from this link: https://drive.google.com/file/d/1ba3FYpPW0QNQ41s_akIfJt_NrReUitcW/view?usp=drive_link

Attachment: SyncDataGridFiltering_a8887864.rar

[Prathap Senthil]

Hi iftixar hamidov,

Based on your requirements, we would like to clarify that filtering works only after entering a value and pressing the Enter button. At that point, only the current column will be filtered, and the action begins event with the request type 'filtering' is triggered, showing the details of the currently filtered column. Without pressing the Enter button, the column filter does not work. Therefore, it is not feasible to filter multiple columns simultaneously based on your requirements. Thank you for your understanding.

Reference: https://blazor.syncfusion.com/documentation/datagrid/filter-bar

Note: we would like to inform you that when using args.Cancel = true;, there is no need to use the ClearFilteringAsync() method. When the Cancel property is set to true, it cancels the grid filtering action. This is the default behavior.

Alternatively, we suggest using the stored filter values in an external list variable when performing filters for each column and then handling the filter values based on your requirements at your end, Kindly refer to the code snippet below for your reference.

   public List<string> FilterValues { get; set; } = new List<string>();

 

   public async Task ActionBeginHandler(ActionEventArgs<MyData> args) {

 

       try {

 

           if ( args.RequestType == Syncfusion.Blazor.Grids.Action.Filtering ) {

 

 

               if ( args.CurrentFilteringColumn == null ) {

                   await this.LoadData("");

               }

               else {

                   var filterObj = args.CurrentFilterObject;

 

                   string columnName = filterObj.Field;

 

                   string filter = "";

 

                   if ( filterObj != null && filterObj.Value != null ) {

 

                       Type valueType = filterObj.Value.GetType();

 

                       if ( valueType == typeof(string) ) {

                           filter = $"{columnName}='{filterObj.Value.ToString()}'";

                       }

                       else {

                           filter = $"{columnName}={filterObj.Value.ToString()}";

                       }

 

                       args.Cancel = true;

 

                       if ( Grid != null ) {

                       //    await Grid.ClearFilteringAsync();

                       }

 

                       FilterValues.Add(filter);

                       await this.LoadData(filter);

 

                          

                   }

               }

           }

 

       }

Regards,
Prathap Senthil

[iftixar hamidov]

Thank you for your answer. So, can we do something like this? Can we catch the filter glass when it is lost focus from the search control of each column? If this is possible, let's add this filter to a list in a lost focus, put a search button above, and when this search button is clicked, we collect the filters in this list and perform the search. Is it possible to do this?

[Prathap Senthil]

Yes, based on your requirement, we suggest using a FilterTemplate with a custom component to get filter values using the value change event handler in the following way. Then, you can handle the filter values based on your requirements. Kindly refer to the code snippet and modified sample below for your reference.

 

<Syncfusion.Blazor.Buttons.SfButton OnClick="SearchValues">Search</Syncfusion.Blazor.Buttons.SfButton>

 

<SfGrid ID="grdDocs" TValue="MyData" DataSource="@Data" Width="100%" AllowFiltering="true" @ref="@Grid">

 

    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.FilterBar" Mode="Syncfusion.Blazor.Grids.FilterBarMode.OnEnter" ImmediateModeDelay="500"></GridFilterSettings>

 

    <GridEvents TValue="MyData" OnActionBegin="ActionBeginHandler"> </GridEvents>

 

    <GridColumns>

        <GridColumn Field=@nameof(MyData.ID) HeaderText="ID">

            <FilterTemplate>

                <SfNumericTextBox TValue="int"  @bind-Value="@NumericValue" ID="ID">

                    <NumericTextBoxEvents TValue="int" ValueChange="NumericTextBoxValueChange"></NumericTextBoxEvents>

                </SfNumericTextBox>

            </FilterTemplate>

        </GridColumn>

        <GridColumn Field=@nameof(MyData.Name) HeaderText="Name">

            <FilterTemplate>

                <SfTextBox ID="Name" @bind-Value="Name" ValueChange="@ValueChangeHandler1"></SfTextBox>

            </FilterTemplate>

        </GridColumn>

        <GridColumn Field=@nameof(MyData.SurName) HeaderText="SurName">

 

            <FilterTemplate>

                <SfTextBox ID="SurName" @bind-Value="SurName" ValueChange="@ValueChangeHandler2"> </SfTextBox>

            </FilterTemplate>

        </GridColumn>

    </GridColumns>

 

</SfGrid>

 

private void ValueChangeHandler1(ChangedEventArgs args)

{

     Name = args.Value;

}

private void ValueChangeHandler2(ChangedEventArgs args)

{

     SurName = args.Value;

}

 

 

public async Task NumericTextBoxValueChange(Syncfusion.Blazor.Inputs.ChangeEventArgs<int> args)

{

           

         IDValue = (int)args.Value;

 

         

 

}

 

   public async Task SearchValues()

   {

       var a = Name;

       var b = SurName;

       var c = IDValue;

   }

 

 

Reference:

https://blazor.syncfusion.com/documentation/datagrid/filter-bar#filter-bar-template-with-custom-component

Attachment: SyncDataGridFiltering_d1f30eb9.zip

[iftixar hamidov]

Thank you for your answer. This solution is not suitable for me. Because the data coming from the list page comes in a different structure from different views. I use expandobject. I solved it in a different way. In the ActionBeginHandler event, I add or update a list for that column with the last entered data. On button click. I am pulling the data from the database according to the column name and filter here. Finally, I solved the problem. You can close this thread. Thank you.

[Prathap Senthil]

Thanks for the update,

We are happy to hear that the reported issue has been resolved on your end. We will now be closing this thread.

[iftixar hamidov]

Thanks