1. Home
  2. Forum
  3. Blazor
  4. MultiSelect in Grid Filter does not save selected filter items

MultiSelect in Grid Filter does not save selected filter items

Hi, I am trying to use a MultiSelect component as my Filter Template in my Data Grid Column.

Whenever I select some filter items in the MultiSelect, after filtering out those items, if I come back to the MultiSelect component, it does not save those chosen filtered items. 

As you can see in the video, I chose 'Bulzi Admin' & 'Damage_Control' as my filter choices under 'Groups', but it clears those items when I move back into the filter.

Question 1:

How can I make MultiSelect save the chosen filter items in a Data Grid Column Filter Template?

pt1


pt2



Question 2:

I want the Filter operation for FilterType.Menu in my 'Groups' column to only have the operation 'Equal To' and nothing else. How can I make this the only operation for the Filter Menu?

Thank you.


Attachment: Multiselect_bug_b519d8ff.zip

13 Replies
RN Rahul Narayanasamy Syncfusion Team June 30, 2021 02:00 PM UTC

Hi Kenney, 

Greetings from Syncfusion. 

Query: MultiSelect in Grid Filter does not save selected filter items 

We have validated your query and you want to maintain the selected values of the MultiSelect component which is rendered in FilterTemplate. You need to assign the values to the multi select component for maintaining the values. Find the below code snippets and sample for your reference. 

 
<SfGrid @ref="Grid" DataSource="@Orders" AllowFiltering="true" AllowPaging="true" Height="375"> 
    <GridEvents OnActionBegin="ActionBeginHandler" TValue="Order"></GridEvents> 
    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.CheckBox"></GridFilterSettings> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" FilterSettings="@(new FilterSettings{Type = Syncfusion.Blazor.Grids.FilterType.Menu })" Width="150"> 
            <FilterTemplate> 
                <SfMultiSelect TValue="string[]" TItem="Customer" Mode="VisualMode.CheckBox" ID="CustomerID" Value="@FilteredValues.ToArray()" 
                               Placeholder="Customer" DataSource="@LocalData"> 
                    <MultiSelectFieldSettings Text="Text" Value="Text"></MultiSelectFieldSettings> 
                    <MultiSelectEvents ValueChange="OnChange" TValue="string[]" TItem="Customer"></MultiSelectEvents> 
                </SfMultiSelect> 
            </FilterTemplate> 
        </GridColumn> 
        . ..  
    </GridColumns> 
</SfGrid> 
 
@code{ 
    SfGrid<Order> Grid; 
    public List<Order> Orders { get; set; } 
    bool IsClearFilter { get; set; } 
    List<string> FilteredValues = new List<string>();    // for maintaining filtered values 
 
    . . . 
 
    public async Task OnChange(MultiSelectChangeEventArgs<string[]> args) 
    { 
        if(args.Value?.Length > 0) 
        { 
            FilteredValues = args.Value.ToList(); 
            await Grid.FilterByColumn("CustomerID", "equal", args.Value.ToList(), "or"); 
        } else 
        { 
            FilteredValues = new List<string>(); 
            IsClearFilter = true; 
            await Grid.ClearFiltering(); 
        } 
    } 
    public void ActionBeginHandler(ActionEventArgs<Order> args) 
    { 
        if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Filtering)) 
        { 
            if (args.CurrentFilteringColumn == null) 
            { 
                FilteredValues = new List<string>(); 
                IsClearFilter = false; 
            } 
        } 
    } 
} 


Reference: 


Please let us know if you have any concerns. 

Regards, 
Rahul 


KP Kenney Phan June 30, 2021 09:37 PM UTC

Hi, there is a problem in your solution:


After selecting a value in the MultiSelect component, and clicking outside of the component, the data grid column 'Groups' is filtered correctly. However, if I click 'Filter' with the same value still selected in the MultiSelect, the data grid will filter again and removes the top record.


Question:

Why does the data grid filter twice after filtering through the MultiSelect and then pressing 'Filter' on the FilterType.Menu? And how do I prevent this from filtering twice?

I've attached a video on the problem.

Thank you


Attachment: multiselect_bug2_3d06f839.zip


RN Rahul Narayanasamy Syncfusion Team July 1, 2021 12:56 PM UTC

Hi Kenney, 

Thanks for the update. 

We have validated your query with the provided details and checked the reported problem. We could not able to reproduce the problem at our end. After selecting the value in multi select component and performed the filtering, then we have selected the first record and again filtered the same values. The top record was not removed from the Grid. Find the below sample and video for your reference. 



If you are still facing the problem, then could you please share more details. It will be helpful to validate and provide a  better solution. 

  • Reproduce the problem in the provided sample and revert back to us.
  • Full Grid code snippets.
  • Share a simple reproduceable sample if possible.

Regards, 
Rahul 


KP Kenney Phan July 1, 2021 08:16 PM UTC

Hi, I reproduced a similar problem in the provided sample. As you can see in the video, the filter is glitchy and is filtering the wrong items. The multiselect filter was filtering 'ALFKI' when the selected filtered item was 'ANANTR'. This seems to occur when I first remove 'ALFKI' from the selected filtered list and selected 'ANANTR' after.


I am having similar problems in my filter because it is not filtering correctly.


Attachment: Multiselect_filter_wrong_items_2198bbac.zip

RN Rahul Narayanasamy Syncfusion Team July 2, 2021 01:06 PM UTC

Hi Kenney, 

Thanks for sharing the details. 

We have validated your query with the provided details and we are able to reproduce the reported case at our end. The problem occurs due to sample level changes in the provided sample. We have unwantedly called ClearFiltering method while clicking clear icon in Multiselect dropdown. We have modified the sample to work correctly. 

We have removed the Grid.ClearFiltering line in ValueChange event of MultiSelect while removing the values using  Multiselect dropdown clear icon. After removing the value in multi select dropdown, if you want to clear the filtering we suggest you to use Clear button in the Filter dialog. Find the below code snippets, sample and video for your reference. 

public async Task OnChange(MultiSelectChangeEventArgs<string[]> args) 
    { 
        if(args.Value?.Length > 0) 
        { 
            FilteredValues = args.Value.ToList(); 
            await Grid.FilterByColumn("CustomerID", "equal", FilteredValues, "or"); 
        } else 
        { 
            FilteredValues = new List<string>(); 
            //await Grid.ClearFiltering();   //removed this line 
        } 
    } 



Please let us know if you have any concerns. 

Regards, 
Rahul 

 


KP Kenney Phan July 3, 2021 12:03 AM UTC

Hi, thank you for your help.


I also want to filter the multi-select ONLY when the 'Filter' button is pressed and NOT when the user clicks outside of the multi-select component.


Question:

How do I filter ONLY when the 'Filter' button is pressed and not when the user clicks outside of the multi-select component?


Thank you


RN Rahul Narayanasamy Syncfusion Team July 5, 2021 12:59 PM UTC

Hi Kenney, 

Thanks for the update. 

Query: How do I filter ONLY when the 'Filter' button is pressed and not when the user clicks outside of the multi-select component? 

We have validated your query and you want to perform filtering operation while clicking the Filter button in the Filter dialog. You can customize the operation as like your requirement since it is rendered in Template. Here, we have modified the sample based on your requirement. 

Perform filtering operation in OnActionBegin event(with a boolean variable) instead of ValueChange event of the MultiSelect component. Find the below code snippets and sample for your reference. 

 
<SfGrid @ref="Grid" DataSource="@Orders" AllowFiltering="true" AllowSorting="true" GridLines="GridLine.Both" AllowPaging="true" Height="375"> 
    <GridEvents OnActionBegin="ActionBeginHandler" TValue="Order"></GridEvents> 
    . . . 
    <GridColumns> 
        . . . 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" FilterSettings="@(new FilterSettings{Type = Syncfusion.Blazor.Grids.FilterType.Menu })" Width="150"> 
            <FilterTemplate> 
                <SfMultiSelect TValue="string[]" TItem="Customer" Mode="VisualMode.CheckBox" ID="CustomerID" Value="@FilteredValues.ToArray()" 
                               Placeholder="Customer" DataSource="@LocalData"> 
                    <MultiSelectFieldSettings Text="Text" Value="Text"></MultiSelectFieldSettings> 
                    <MultiSelectEvents ValueChange="OnChange" TValue="string[]" TItem="Customer"></MultiSelectEvents> 
                </SfMultiSelect> 
            </FilterTemplate> 
        </GridColumn> 
        . ..  
    </GridColumns> 
</SfGrid> 
 
@code{ 
    SfGrid<Order> Grid; 
    public List<Order> Orders { get; set; } 
    List<string> FilteredValues = new List<string>(); 
 
    . . . 
    bool IsFilterValueChange { get; set; } 
    public async Task OnChange(MultiSelectChangeEventArgs<string[]> args) 
    { 
        if(args.Value?.Length > 0) 
        { 
            FilteredValues = args.Value.ToList(); 
            IsFilterValueChange = true; 
            //await Grid.FilterByColumn("CustomerID", "equal", FilteredValues, "or");  //remove this line here 
        } else 
        { 
            FilteredValues = new List<string>(); 
            //await Grid.ClearFiltering();   //remove this line 
        } 
    } 
    public async Task ActionBeginHandler(ActionEventArgs<Order> args) 
    { 
        if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Filtering)) 
        { 
            if (IsFilterValueChange) 
            { 
                IsFilterValueChange = false; 
                args.Cancel = true;    
                await Grid.FilterByColumn("CustomerID", "equal", FilteredValues, "or"); 
            } 
            if (args.CurrentFilteringColumn == null) 
            { 
                FilteredValues = new List<string>(); 
            } 
        } 
    } 
} 


Reference: 

Please let us know if you have any concerns. 

Regards, 
Rahul 



KP Kenney Phan July 7, 2021 06:05 PM UTC

Hi thank you this worked.


However, there is a bug when popping off items from the filtered item list. 

If I filter CustomerName by 'ALFKI' or 'ANANTR', I get the filtered list for both of those items.

However, if I remove 'ANANTR' after that, it will not provide me with the filtered list of only 'ALFKI' and shows the same

unmodified filtered list.

I have demonstrated this issue in the attached video.


Question:

How do I implement filtering the list as I pop off the various filter items from the filter list?


Thank you.



Attachment: multi_select_filter_does_not_pop_15f32919.zip

RN Rahul Narayanasamy Syncfusion Team July 8, 2021 01:51 PM UTC

Hi Kenney, 

Thanks for the update. 

Query: However, if I remove 'ANANTR' after that, it will not provide me with the filtered list of only 'ALFKI' and shows the same unmodified filtered list. 

We have validated your query and we are able to reproduce the reported case. We have modified the sample to work based on the mentioned case. Find the below code snippets and sample for your reference. 

@code{ 
    SfGrid<Order> Grid; 
    public List<Order> Orders { get; set; } 
    List<string> FilteredValues = new List<string>(); 
 
    . . . 
    bool IsFilterValueChange { get; set; } 
    public async Task OnChange(MultiSelectChangeEventArgs<string[]> args) 
    { 
        if(args.Value?.Length > 0) 
        {; 
            FilteredValues = args.Value.ToList(); 
            IsFilterValueChange = true; 
        } else 
        { 
            FilteredValues = new List<string>(); 
            IsFilterValueChange = true; 
        }     
   } 
    public async Task ActionBeginHandler(ActionEventArgs<Order> args) 
    { 
        if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Filtering)) 
        { 
            if (IsFilterValueChange) 
            { 
                IsFilterValueChange = false; 
                args.Cancel = true; 
                await Grid.ClearFiltering(); 
                await Grid.FilterByColumn("CustomerID", "equal", FilteredValues, "or"); 
            } 
            if (args.CurrentFilteringColumn == null) 
            { 
                FilteredValues = new List<string>(); 
            } 
        } 
    } 
} 


Please let us know if you have any concerns. 

Regards, 
Rahul 
 


KP Kenney Phan July 9, 2021 05:34 AM UTC

Hi thank you for your help.


One last thing:

I want my filter operators to only display "Equal" & "Not Equal" for CustomerID column. So remove all other filter operators (Greater Than, Greater Than Or Equal, Less Than, Less Than Or Equal)


Question: How to keep only "Equal" & "Not Equal" filter operators for the CustomerID column? Thank you.




RN Rahul Narayanasamy Syncfusion Team July 12, 2021 08:35 AM UTC

Hi Kenney, 

Thanks for the update. 

Query: Question: How to keep only "Equal" & "Not Equal" filter operators for the CustomerID column? 

We have validated your query and you want only Equal and Not Equal operators for CustomerID column. You can achieve this requirement by setting the filter operators in OnActionBegin event with RequestType as FilterBeforeOpen. Find the below code snippets and sample for your reference. 

 
<SfGrid @ref="Grid" DataSource="@Orders" AllowFiltering="true" AllowSorting="true" GridLines="GridLine.Both" AllowPaging="true" Height="375"> 
    <GridEvents OnActionBegin="ActionBeginHandler" TValue="Order"></GridEvents> 
    . . . 
</SfGrid> 
 
@code{ 
    SfGrid<Order> Grid; 
    public List<Order> Orders { get; set; } 
    . . . 
    public class Operators 
    { 
        public string Value { get; set; } 
        public string Text { get; set; } 
    } 
    public async Task ActionBeginHandler(ActionEventArgs<Order> args) 
    { 
        if (args.RequestType == Syncfusion.Blazor.Grids.Action.FilterBeforeOpen) 
        { 
            if (args.ColumnName == "CustomerID") 
                args.FilterOperators = new List<object>() {  
                    new Operators() { Text = "Equal", Value = "equal" },  
                    new Operators() { Text = "Not Equal", Value = "notequal" } }; 
        } 
        if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Filtering)) 
        { 
            . . . 
        } 
    } 



Please let us know if you have any concerns. 

Regards, 
Rahul 


KP Kenney Phan July 14, 2021 05:57 PM UTC

Hi Rahul, 

Thank you for your help so far.


Your implementation works for MultiSelect Dropdown, but it is not working for single DropDownList. 

I have modified the sample project to include a bool "isSent" to describe if the order has been sent or not. The column contains a custom filter template with a DropDownList component.


I have set the only filter operator to "Equals", but it will still include "Equals" and "Not Equals" as the filter operators for the 'isSent' column.


Question:

How do I create custom filter operators for the DropDownList component? 


Thank you


Attachment: DropDownList_filter_operator_4cb6d987.zip

RN Rahul Narayanasamy Syncfusion Team July 15, 2021 11:40 AM UTC

Hi Kenney, 

Thanks for the update. 

Query: I have modified the sample project to include a bool "isSent" to describe if the order has been sent or not - I have set the only filter operator to "Equals", but it will still include "Equals" and "Not Equals" as the filter operators for the 'isSent' column. 

We have checked your query and we have confirmed it as a bug and logged the defect report “Not able to customize the filter operators for boolean type column” for the same. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our upcoming bi-weekly release which is expected to be rolled out on or before mid of August, 2021.   
      
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.   
     

Until then we appreciate your patience.  

Regards, 
Rahul 



Loader.
Up arrow icon