Custom Filters on data grid

[Ditchford]

Hello

I have a custom filter using a drop down like this:

<GridColumn Field=@nameof(TimeModel.CustomerName) MinWidth="120" Width="120" HeaderText="Customer">

                        <FilterTemplate>

                            <SfDropDownList PopupWidth="250" PlaceHolder="" ID="CustomerName" Value="@((string)(context as PredicateModel).Value)"                          DataSource="@Customers" TValue="string" TItem="ListItem2D">

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

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

                            </SfDropDownList>

                        </FilterTemplate>

</GridColumn>

I would like to convert this to a list view (with checkbox enabled) so that a user can select more than one customer.

I appreciate that I can do this 'out of the box', but I have found this filter option to be unreliable as the distinct list that the auto-magic filter builds is often incomplete.

Is there a way to have a FilterTemplate with a multi-select control.

Many thanks

[Vignesh Natarajan]

Hi Ditchford,  

 

Thanks for contacting Syncfusion support.  

 

Query: “Is there a way to have a FilterTemplate with a multi-select control.” 

 

We have analyzed your query and we suggest you to achieve your requirement by rendering the MultiSelect component in FilterTemplate of GridColumn. In the change event of the MultiSelect component we have called FilterByColumn to filter the selected values. Refer the below code example.  

 

<SfGrid @ref="@Grid" DataSource="@Orders" AllowFiltering="true" AllowPaging="true" Height="315"> 

    <GridColumns> 

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

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

            <FilterTemplate> 

                <SfMultiSelect TValue="string[]" Placeholder="e.g. VINET" ShowSelectAll="true" Mode="VisualMode.CheckBox" DataSource="@Dropdown"> 

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

                    <MultiSelectEvents ValueChange="OnChange" TValue="string[]"></MultiSelectEvents> 

                </SfMultiSelect> 

            </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> 

    </GridColumns> 

</SfGrid>  

@code{ 

    public void OnChange(@Syncfusion.Blazor.DropDowns.MultiSelectChangeEventArgs<string[]> args) 

    { 

        if (args.Value == null) 

        { 

            Grid.ClearFiltering("CustomerID"); 

        } 

        else 

        { 

            Grid.FilterByColumn("CustomerID", "equal", args.Value); 

        } 

    } 

} 

 

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

 

Sample: https://www.syncfusion.com/downloads/support/forum/158156/ze/DataGrid693745215  

 

Refer our UG and API documentation for your reference 

 

https://blazor.syncfusion.com/documentation/multiselect-dropdown/checkbox/  

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

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

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Ditchford]

Hey Vignesh 

Thanks, I have implemented that and it works well. One thing that is a bit odd from a usability point of view is that the ValueChange event does not fire until the user clicks away from the multi-select.  I tried changing the event, but there does not appear to be an event to use for OnSelect.  Also I think it is actually better to let the user choose several selections before the event fires....which is what your example does.

I would, however, prefer to have an apply button (rather than expecting the user to know that they need to click way from the list).  I have tried adding a template footer to your example so that I can place an apply button in the footer, but I get the following error.  Any ideas?

 

[Vignesh Natarajan]

Hi DitchFord,  

 

Thanks for the update.  

 

Query: “I have tried adding a template footer to your example so that I can place an apply button in the footer, but I get the following error.  Any ideas?” 

 

We are able to reproduce the reported issue at our end while preparing a sample using your code example. While using the Templates in MultiSelect component, ModelType property must be defined based on the type of DataSource.  

 

Refer the below code example.  

 

<SfGrid @ref="@Grid" DataSource="@Orders" AllowFiltering="true" AllowPaging="true" Height="315"> 

    <GridColumns> 

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

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

            <FilterTemplate> 

                <SfMultiSelect TValue="string[]" ModelType="typeof(Data)" Placeholder="e.g. VINET" ShowSelectAll="true" Mode="VisualMode.CheckBox" DataSource="@Dropdown"> 

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

                    <MultiSelectEvents ValueChange="OnChange" TValue="string[]"></MultiSelectEvents> 

                    <MultiSelectTemplates> 

                        <FooterTemplate Context="FooterContext"> 

                            Test 

                        </FooterTemplate> 

                    </MultiSelectTemplates> 

                </SfMultiSelect> 

            </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> 

    </GridColumns> 

</SfGrid> 

 

  

So kindly define the ModelType property of the MultiSelect component to resolve the reported issue.  

 

Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan 

[Ditchford]

Hello Vignesh

That's great, the project runs without error, but in my example below the footer is now not displayed.

Any ideas?

Thanks

[Vignesh Natarajan]

Hi Richard,  

 

Thanks for the update.  

 

Query: “the project runs without error, but in my example below the footer is now not displayed.” 

 

We have analyzed your query by preparing a sample using your code example. We are not able to reproduce the reported issue at our end. Please find the sample we have prepared using 18.3.0.35 Nuget package (Syncfusion.Blazor) along with Apply button in FooterTemplate to filter the column from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/158156/ze/DataGrid1885083928  

 

After referring the sample, if you are still facing the reported issue kindly get back to us with following details.  

 

1.  Share your updated Grid and MultiSelect code example along with details about the datasource.
2. Share the screenshot of the issue you are facing.
3. Share your Nuget (Syncfusion.Blazor) package version details.
4. If possible try to reproduce the reported issue in the provided sample and revert back to us.

 

Above requested details will be helpful for us to validate the reported query at our end and provide solution as early as possible.  

 

Regards, 

Vignesh Natarajan 

[Ditchford]

Hey Vignesh

Having real problems with this.  I see that your example works and I can recreate a sample that works.  I must have some conflict in my main project that is preventing this from working.  The problem I have is:

- If I fill the multiselect datasource on the OnInitAsync event of the page then the footer displays, but the multiselect list fails to fill (no console errors)

- If I fill the multiselect datasource on the Created event of the Multiselect filter then the datasource fills but the footer fails to display (no console errors)

I think I am going to take another approach as I have blown way too much time on this.  

Is there an event that fires when the user clicks on a checkbox in the multi-select, so that I can filter then (rather than waiting for the user to click off the control).

Thanks

[Ditchford]

Hello 

Any update on this?  Specifically:

Is there an event that fires when the user clicks on a checkbox in the multi-select, so that I can filter then (rather than waiting for the user to click off the control).

Thanks

[Maran Baskar]

Hi Ditchford, 

Greetings from Syncfusion Support. 

You can use OnValueSelect event in MultiSelect component to achieve your requirement, since OnValueSelect triggers for every click in checkbox. Please find the below code snippet for your reference. 

<SfMultiSelect TValue="string[]" ModelType="typeof(Order)" Placeholder="e.g. VINET" ShowSelectAll="true" Mode="VisualMode.CheckBox" DataSource="@Orders"> 

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

    <MultiSelectEvents OnValueSelect="valueSelect" TValue="string[]"></MultiSelectEvents> 

    <MultiSelectTemplates> 

        <FooterTemplate Context="FooterContext"> 

            Test 

        </FooterTemplate> 

    </MultiSelectTemplates> 

</SfMultiSelect> 

 

@code{ 

.................. 

.................. 

 

    private void valueSelect(SelectEventArgs args)  

    { 

        // perform your own filtering  

    } 

} 

 

Please get back to us, if you need further assistance. 

                            

Regards, 

Maran Baskar 

[Ditchford]

Hey

That's great, thank you.  There is something odd about the SelectEventArgs.  Do you have an example of how to extract the item selected Textfrom args in SelectEventArgs args so that I can the filtering.

Thank you

[Sevvandhi Nagulan]

Hi Ditchford, 

You can get the text from the SelectEventArgs using below mentioned code example. 

   private void valueSelect(SelectEventArgs args) 

    { 

        // perform your own filtering   

        var itemData = JsonConvert.DeserializeObject<GameFields>(args.ItemData != null ? args.ItemData.ToString() : ""); 

        var value = itemData.Text; 

 

    } 

Please find the sample below, 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiSelect-2098748913 

Regards, 

Sevvandhi N