Grid.ClearFiltering() should set column specific FilterTemplate dropdownlist values to their defaults

[David Adler]

I am using SyncFusion.Blazor v18.1.0.46

I have a grid in which I have filtering enabled and two of the columns are using dropdownlists to filter the grid using preset values. The display of the dropdownlists is working and populating as expected and the grid will filter by the selected values in either or both of the dropdownlists, as expected.

However, if I add the property ShowClearButton="true" on both of the dropdownlist controls and then filter the grid using properties in both dropdownlists, and after the grid filters, I click the X (clear button) for both, I get a null reference error from the DataManagerRequest. If I examine the error, I see that the DataManagerRequest has a non-null Where clause that has an "and" operator but the values on either side of the and are null. I would expect that if I cleared both dropdownlist controls, the DataManagerRequest where clause would be null.

Along these same lines, I have added a "Clear All" button to my component that calls the Grid's ClearFiltering() method and when I click that button, I also want to clear both dropdownlist filter controls. I have tried setting an @ref= on the dropdownlist controls and in the "Clear All" buttons onclick method, I call the dropdownlist .Clear() method for both dropdownlist controls along with the grid's "ClearFiltering() method but when I do that, I get the same null reference issue from the DataManagerRequest that I described above.

I am using a custom adapter (based upon SyncFusions custom adapter example) for the DataManager as the data is from EntityFramework in this instance.

Here is my DataManager line in my razor file;

SfDataManager @ref="@DataManager" AdaptorInstance="@typeof(DmUsersAdapter)" Adaptor="Adaptors.CustomAdaptor">

I have not tried this with my other grids yet that use the out of the box ODataV4Adapter against an OData API but the custom adapter has been working just find with the exception of this issue.

I have attached a screenshot of the null reference error and a quickwatch screenshot of the dm.Where object from VS2019. The associated stack trace is shown below;

at Syncfusion.Blazor.Data.QueryableOperation.PredicateBuilder[T](IQueryable`1 dataSource, List`1 whereFilter, String condition, ParameterExpression paramExpression, Type type)

at Syncfusion.Blazor.Data.QueryableOperation.PredicateBuilder[T](IQueryable`1 dataSource, List`1 whereFilter, String condition, ParameterExpression paramExpression, Type type)

at Syncfusion.Blazor.Data.QueryableOperation.PerformFiltering[T](IQueryable`1 dataSource, List`1 whereFilter, String condition)

at Syncfusion.Blazor.DataOperations.PerformFiltering[T](IEnumerable`1 dataSource, List`1 whereFilter, String condition)

at EII.CDWeb.Server.Services.Users.DmUsersAdapter.Read(DataManagerRequest dm, String key) in [REDACTED]EII.CDWeb.Server\Services\Users\DmUsersAdapter.cs:line 65

Any ideas?

Update 1: I think what is happening is that, clicking the Clear button for one dropdown is clearing all of the filters for the grid but not actually clearing the values for the second dropdownlist control. So that when I then click the clear button for the second dropdownlist control, the grid filter is already clear so it gets the null reference. I tested by typing in a filter string in one of the other columns that is using the normal text filtering (not a dropdownlist) and also selecting a value in one of the drowdownlist filtered columns. When I click the clear button in the dropdownlist, it also cleared the standard text filter in the other, non-dropdownlist,  column. 

Update 2: Ideally, I want to be able to do the following;

1. Select any combination of filter values from the respective dropdown lists in the filter column and have them correctly filter the list.
2. Click on the Clear button on the drobdown list only removes that specific filter. Any other filters remain in effect.
3. Clicking on all Clear buttons for all filter columns will restore the full unfiltered list.
4. Clicking on a separate "Clear All" button clears all applied filters in the grid and also clears the dropdownlist selections for the filter column dropdownlists.

Attachment: SyncFusion_Screenshots_b05bfe72.zip

[Vignesh Natarajan]

Hi David,  

 

Greetings from Syncfusion support.  

 

Query: “Click on the Clear button on the drobdown list only removes that specific filter. Any other filters remain in effect.” 

 

From your query we understand that you are facing issue while clearing the value from DropDownList control inside the filter bar template. And also you want to clear the filtering for particular column. We suggest you to achieve your requirement using ClearFiltering() method by passing the filed value as argument to clear particular column filtering.  

Refer the below code example.  

 

<SfGrid @ref="@Grid" TValue="Order" AllowFiltering="true" AllowPaging="true" Height="315"> 

        <SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager> 

        <GridColumns> 

            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

            <GridColumn Field=@nameof(Order.CustomerID) HeaderText="CustomerID" Width="150"> 

                <FilterTemplate> 

                    <SfDropDownList Placeholder="Customer Name" ID="CustomerID" ShowClearButton="true" Value="@((string)(context as PredicateModel).Value)" DataSource="@Dropdown" TValue="string" TItem="Data"> 

                        <DropDownListEvents ValueChange="@CustomerChange" TValue="string"></DropDownListEvents> 

                        <DropDownListFieldSettings Value="CustomerID" Text="CustomerID"></DropDownListFieldSettings> 

                    </SfDropDownList> 

                </FilterTemplate> 

            </GridColumn> 

            <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

            <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

            <GridColumn Field=@nameof(Order.FirstName) HeaderText="FirstName" Width="150"> 

                <FilterTemplate> 

                    <SfDropDownList Placeholder="First Name" ID="First" ShowClearButton="true" Value="@((string)(context as PredicateModel).Value)" DataSource="@Dropdown2" TValue="string" TItem="Data"> 

                        <DropDownListEvents ValueChange="@NameChange" TValue="string"></DropDownListEvents> 

                        <DropDownListFieldSettings Value="CustomerID" Text="CustomerID"></DropDownListFieldSettings> 

                    </SfDropDownList> 

                </FilterTemplate> 

            </GridColumn> 

        </GridColumns> 

    </SfGrid>. . . ..  . 

 

public void CustomerChange(@Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args)  {      if (args.Value == "All")      {          Grid.ClearFiltering();      }      else if(args.Value == null)      {          Grid.ClearFiltering(new string[] { "CustomerID" });      }      else      {          Grid.FilterByColumn("CustomerID", "contains", args.Value);      }  }   public void NameChange(@Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args)  {      if (args.Value == "All")      {          Grid.ClearFiltering();      }      else if (args.Value == null)      {          Grid.ClearFiltering(new string[] { "FirstName" });      }      else      {          Grid.FilterByColumn("FirstName", "contains", args.Value);       }  }

 

For your convenience we have prepared a sample which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/153824/ze/DataGrid-286392032  

 

Refer our API documentation for you reference 

 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html  

 

Kindly get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan