Automatically show FilterBar if a filter is persisted

[Bernd Parchmann]

Hi,

I want to automatically show the FilterBar (AllowFiltering binding) if a filter is persisted (EnablePersistence=true).

I set the value of the binding to true if the grid has persisted a filter but the FilterBar is enabled if I leave and reenter the component.

Which events I have to use to rerender the grid that it shows the FilterBar?

Greetings!

[Renjith Singh Rajendran]

Hi Bernd, 

 

Greetings from Syncfusion support. 

 

We are not clear about exact issue or the scenario you are facing the issue. We need the following details to further proceed on this scenario. Kindly get back to us with the following details for better assistance. 

 

1. Share a simple issue reproducing sample based on your scenario for us to validate.
2. Share a video demo showing a detailed explanation of the requirement or the problem you are facing.
3. Share with us a detailed explanation of your complete requirement.
4. Share the complete Grid rendering codes and model class codes.
5. Are you dynamically switching the AllowFiltering property value? If so, share the complete codes you are using.

 

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

 

Regards, 

Renjith R 

[Bernd Parchmann]

Thats the grid: (removed the colums for space)

<SfGrid @ref="@gridParameter" TValue="LoHiParameter" Height="100%" ShowColumnMenu="true" @bind-AllowFiltering="@ParameterComponentParameterAdaptor.ShowFiltering" @bind-AllowGrouping="@ParameterComponentParameterAdaptor.ShowGrouping" AllowPaging="true" AllowSorting="true" AllowReordering="true" AllowResizing="true" RowHeight="38" AllowSelection="true" ID="parameterGridParameterComponent" EnablePersistence="true">

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

               <GridEvents TValue="LoHiParameter" RowSelected="@RowSelected" DataBound="@DataBoundHandler" OnActionComplete="@ActionComplete"/>

            </SfDataManager>

            <GridEditSettings AllowEditing="true" Mode="@Syncfusion.Blazor.Grids.EditMode.Normal" />

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

            <GridPageSettings PageSizes="@DefaultPageSizes" PageSize="20" />

            <SfToolbar>

               <ToolbarItems>

                  <ToolbarItem Align="ItemAlign.Center">

                     <Template>

                        @{

                           var filtered = gridParameter?.FilterSettings?.Columns;

                           if (filtered != null && filtered.Any())

                           {

                              <a style="margin-top: 12px; color: #ff2d37; font-size:smaller;">Filter active!</a>

                           }

                        }

                     </Template>

                  </ToolbarItem>

                  <ToolbarItem Text="Filtering" Type="ItemType.Input" Align="ItemAlign.Right">

                     <Template>

                        <SfCheckBox @bind-Checked="@ParameterComponentParameterAdaptor.ShowFiltering" Label="Filter" LabelPosition="LabelPosition.Before" />

                     </Template>

                  </ToolbarItem>

                  <ToolbarItem Text="Grouping" Type="ItemType.Input" Align="ItemAlign.Right">

                     <Template>

                        <SfCheckBox @bind-Checked="@ParameterComponentParameterAdaptor.ShowGrouping" Label="Group" LabelPosition="LabelPosition.Before" />

                     </Template>

                  </ToolbarItem>

               </ToolbarItems>

            </SfToolbar>

         </SfGrid>

method to enable filter bar

      public async void AutoEnableFilterFeature<T>(SfGrid<T> grid, CustomAdaptor<T> adaptor)

         where T : ILoHi

      {

         if (grid != null)

         {

            var filtered = grid.FilterSettings?.Columns;

            if (filtered != null && filtered.Any())

               adaptor.ShowFiltering = true;

         }

      }

This method should enable the filter bar. Where should this method be called? Tested in many events: OnParameterSet, DataBound, ... The best result is that the checkbox in the ToolBar is checked but the FilterBar is not visible; its just visible if the component (or control) is rerendered again (ex: leave and reenter page

[Renjith Singh Rajendran]

Hi Bernd, 

 

Based on this scenario, we suggest you to fetch the persist data using GetPersistData in OnActionComplete event handler and store this persist data. Now based on this persisted data enable the AllowFiltering inside OnInitialized. We have prepared a sample and video showing the working of the suggestion from our side. Please download and refer the attachments from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/persistsample-84678941 

Video : https://www.syncfusion.com/downloads/support/directtrac/general/ze/persistencefilterbardynamic184156771 

 

Please refer the codes below, 

 

 

<SfGrid TValue="Order" @ref="UsersGrid" ... AllowFiltering="@ShowFilter" ... EnablePersistence="true"> 

   <GridEvents TValue="Order" OnActionComplete="ActionComplete"></GridEvents> 

    ... 

</SfGrid> 

 

    [Inject] 

    public AppStateService AppStateService { get; set; } 

   public bool ShowFilter { get; set; } = false; 

 

   ... 

   public async void ActionComplete(ActionEventArgs<Order> args) 

    { 

        //This event will be triggered for every Data operations 

        //store the persist data 

        AppStateService.TimeGridPersistData = await this.UsersGrid.GetPersistData(); 

    } 

    protected override void OnInitialized() 

    { 

        //based on the persist data enable the AllowFiltering dynamically based on whether filtersettings is persisted 

        if(AppStateService.TimeGridPersistData != null){ 

            dynamic PersistProp = JsonSerializer.Deserialize<Dictionary<string, object>>(AppStateService.TimeGridPersistData.ToString()); 

            dynamic _statek = JsonSerializer.Deserialize<GridFilterSettings>(PersistProp["filterSettings"].ToString()); 

            if (_statek.Columns != null)           //based on the filter columns enable ShowFilter 

            { 

                ShowFilter = true; 

            } 

        } 

        ... 

   } 

 

 

Please refer the above suggestion and check this from your side and get back to us if you need further assistance. 

 

Regards, 

Renjith R 

[Bernd Parchmann]

I dont understand your proposal!

I dont have problems to get or set the value for "ShowFilter" binding! This is working fine!

The problem is that when the component is rendered and the control is shown, the ShowFilter property has the value 'true' but the FilterBar isnt visible... 

[Bernd Parchmann]

maybe I found the reason why its not working...

It seems that on the first render the controller cannot filter the data if a filter is persisted?

I got an exception when I call the PerformFiltering method in the controller:

internal IQueryable<T> Filter<T>(IQueryable<T> loHis)      {

         if (dataManagerRequest != null && dataManagerRequest.Where != null && dataManagerRequest.Where.Any()) {

            loHis = DataOperations.PerformFiltering(loHis, dataManagerRequest.Where, dataManagerRequest.Where[0].Condition);

         }

         return loHis;

      }

If I set EnablePersistence=false then the issue is not occuring and filtering is working fine!

[Renjith Singh Rajendran]

Hi Bernd, 

 

Query : I dont understand your proposal! I dont have problems to get or set the value for "ShowFilter" binding! This is working fine! 

We suspected that, based on your scenario, the ShowFilter bool variable is enabled when you enable it by checking the for any filtering applied in Grid. But the AllowFiltering property of Grid is not enabled. This is why the filterbar is not shown and persisted filtering information also not applied in grid. So to overcome this scenario, we have suggested the solution from our previous update to enable the ShowFilter bool variable inside OnIntialized method. So that AllowFiltering property of grid will also be enabled when enabling ShowFilter. 

 

We suggest you to check this case(whether AllowFiltering is enabled/not when set ShowFilter bool variable to true) from your side by using the below code and let us know the details. After you enable ShowFilter based on the filter persisted data in Grid using the codes in AutoEnableFilterFeature method. 

 

 

<div>@isFilterEnabled</div> 

<SfButton OnClick="OnClick">Enable Filter</SfButton> 

 

    public bool isFilterEnabled{ get; set; } 

    public void OnClick() 

    { 

        isFilterEnabled = UsersGrid.AllowFiltering; 

    } 

 

 

If AllowFiltering is not enabled in your application also(after checking using above codes), then our initially explained case in this update has caused these filtering not applied and filterbar not shown problems in your application also. So kindly use the suggestion provided in our previous update to overcome these scenarios. 

 

Or if AllowFiltering is enabled in your application when enabling ShowFilter using the codes used in AutoEnableFilterFeature method. Then we need the following details to proceed further. Kindly share with us the following details if we have misunderstood your requirement or if you are facing any difficulties with our suggested solution. 

 

1. Share the video demo explaining the requirement or replication of your exact problem.
2. Share a simple issue reproducing sample based on your scenario for us to validate.
3. Share with us a step by step detailed explanation of your complete requirement.

 

Kindly check this from your side based on our suggestion and share with us the requested details to proceed further. 

 

Query : maybe I found the reason why its not working...It seems that on the first render the controller cannot filter the data if a filter is persisted? 

When using custom way of binding in grid, you can customize the entire grid data related actions based on your requirement by overriding the Read/ReadAsync method. So if the above explained is not your case, then we suggest you to modify your customized filtering action based on the query values to overcome the reported exception. If you face any difficulties in overcoming this scenario, then kindly share with us a simple issue reproducing sample based on your scenario along with a video showing the replication of the problem and exception details to proceed further. 

 

Regards, 

Renjith R 

[Bernd Parchmann]

Thx for the update! I guess I understand now what you mean!

But there is still a problem: 

On my project your proposal is not working after restarting the project! The reason is I cannot read the PersistedData of the grid in the OnInitzilized method because the grid object is null at this point!

[Bernd Parchmann]

I guess I got it:

I am using the OnAfterRenderAsync method to read and set the persisted data!

Thx for your help!

PS: Is there an equivalent to TreeGrid?

[Renjith Singh Rajendran]

Hi Bernd, 

 

Query 1 : I guess I got it:I am using the OnAfterRenderAsync method to read and set the persisted data! Thx for your help! 

From your update, we suspect that you have achieved the requirement related to DataGrid component from your side. If so, then we are glad to hear that you have achieved your requirement. 

 

Query 2 : PS: Is there an equivalent to TreeGrid? 

Could you please confirm are you expecting the same requirement as like we have provided in our previous update for TreeGrid component also? Kindly confirm this requirement, based on your requirement confirmation we shall proceed further with this sceanrio in TreeGrid. 

 

Regards, 

Renjith R