Filter from external components?

[Keith A Price]

I have a sidebar with checkboxes and textboxes and would like to filter the Grid based on those selections.

Is there a way to do that other than filtering the datasource?

And if we need to filter the datasource, how do we update the grid display? 

[Jeevakanth Palaniappan]

Hi Keith, 

Greetings from Syncfusion support. 

We have checked your query and you can filter the grid externally by using the FilterByColumnAsync method of the grid. It will filter the data and will display the filtered data in the grid. 

Please refer the Syntax and the example below for your reference. 

https://blazor.syncfusion.com/documentation/datagrid/filtering 

 

Syntax: 

// 

        // Summary: 

        //     Filters grid row by column name with the given options. 

        // 

        // Parameters: 

        //   fieldName: 

        //     Specifies the field name to be filtered. 

        // 

        //   filterOperator: 

        //     Sepcifies the filter operator. 

        // 

        //   filterValue: 

        //     Specifies the filter value. 

        // 

        //   predicate: 

        //     Specifies predicate/condition such as AND/OR while filtering multiple value. 

        // 

        //   matchCase: 

        //     Specifies the match case. 

        // 

        //   ignoreAccent: 

        //     Specifies the ignore accent. 

        // 

        //   actualFilterValue: 

        //     Specifies the actual value. 

        // 

        //   actualOperator: 

        //     Specifies the actual type. 

        // 

        // Returns: 

        //     System.Threading.Tasks.Task. 

        [AsyncStateMachine(typeof(SfGrid<>.<FilterByColumnAsync>d__928))] 

        public Task FilterByColumnAsync(string fieldName, string filterOperator, object filterValue, string predicate = null, bool? matchCase = null, bool? ignoreAccent = null, object actualFilterValue = null, object actualOperator = null); 

Example 

 

Get back to us if you have any other queries. 

Regards, 

Jeevakanth SP. 

[Stefan Limpert]

Hi Jeevakanth,

i did not get the right configuration/settings to do this with my Grid. Could you show me an example to get through this.?

Regards

Stefan

[Monisha Saravanan]

Hi Stephan,

Greetings from Syncfusion support.

We suspect that you need to filter the Grid by using external components. We have prepared an sample based on your shared information. Here we have filtered the Grid by using external components ( checkbox). By using the value change event we have filtered the Grid programmatically by using FilterByColumnAsync method. Kindly refer the attached code snippet and sample for your reference.  

 

<SfCheckBox @bind-Checked="isChecked" Label="Change" ValueChange="@((args)=>onChange(args))"  TChecked=bool></SfCheckBox>

 

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

    <GridColumns>

...

    </GridColumns>

</SfGrid>

 

@code{

    private bool isChecked = false;

    private async Task onChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)

    {

        if (args.Checked == true)

        {

            await Grid.FilterByColumnAsync("CustomerID", "contains", "ANANTR");

        }

        else

        {

            await Grid.ClearFilteringAsync();

 

        }

    }}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-63225675.zip

Kindly get back to us if you have further queries.

Regards,

Monisha

[Stefan Limpert]

Hi Monisha,

thank you for the example which i appreciated.

This is a good way to filter values from the outside after the grid appears, wich I will definitly use this for some other cases.

My question is: Is it also a way to set a filter this way on its initalization?

What i need is a kind of prefiltering the grid to show only the needed rows, but with giving the user the chance to modify the filter anytime, so filtering the data source is no option.

What is your suggestion?

Regards

Stefan

[Stefan Limpert]

Hi Monisha,

in addition to your last answer: Could you please show me your example with a ButtonGroup instead of the checkbox? I searched in the forum, but i never found a good solution. I want to set external filter buttons to set filters for a grid column with a group of buttons based on List of values i tried this but doesnt work.

<SfButtonGroup CssClass="e-flat">
        @if (Stockwerke is not null)
        {
            @foreach (var floor in Stockwerke)
            {
                <ButtonGroupButton Content="@floor.Beschreibung" Name="@floor.Id.ToString()" SelectedChanged="@(() => cstf(floor.Id))"></ButtonGroupButton>
            }
        }
    </SfButtonGroup>


    <SfGrid ...>
    .
    .
    .


    public IEnumerable<StockwerkModel> Stockwerke = new List<StockwerkModel>();
    class StockwerkModel
    {
    	public int Id {get;set;}
    	public string Beschreibung {get;set;}
    }


    protected override async Task OnInitializedAsync()
    {
       Stockwerke = new List<StockwerkModel>(){new StockwerkModel(){Id=1,Beschreibung="First Floor"},...};
    }


    private void cstf(int args)
    {
      if(args > 0)
      {
await Grid.FilterByColumnAsync("FloorID", "equals", args.toString());
      }
      else
      {
await Grid.ClearFilteringAsync();
      }
    }

It didnt reach the cstf method, i hope you can tell me, what i'm doing wrong here.

Regads

Stefan

[Monisha Saravanan]

Hi Stefan,

Thanks for the update.

We have prepared an sample as per your requirement. We have performed filtering by using SfButtonGroup. Kindly check the attached sample for your reference.

<SfButtonGroup Mode="Syncfusion.Blazor.SplitButtons.SelectionMode.Single">

                                <ButtonGroupButton  SelectedChanged="@((e) => { if(e) {  Grid.FilterByColumnAsync("CustomerID", "contains", "ANANTR"); }})">

                                    Filter

                                </ButtonGroupButton>

                                 <ButtonGroupButton  SelectedChanged="@((e) => { if(e) {  Grid.ClearFilteringAsync(); }})">

                                    ClearFilter

                                </ButtonGroupButton>

                              

                            </SfButtonGroup>

Here we have performed filtering on SelectedChanged method.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp11329849944.zip

Note: Kindly check index.razor and FetchData.razor

Kindly get back to us if you have further queries.

Regards,

Monisha

[Stefan Limpert]

Dear Monisha,

after some modifications in my code to fit it in, it works perfectly. The solution in fetchdata.razor was exactly what i needed. Many thanks for this additional example. We're thought the same way. :-)

The main reason why my code was not running, i missed to set the SelectionMode. :-(

<SfButtonGroup Mode="Syncfusion.Blazor.SplitButtons.SelectionMode.Single">

Also to set the variable CanFilter to control and avoid a EndlessLoop was very clever.

private bool CanFilter = true;
    private async Task onChange(bool args, string value)
    {
        if (value.Contains("Filter") && CanFilter)
        {
            CanFilter = false; //avoid Endless loop
            await Grid.FilterByColumnAsync("CustomerID", "contains", "ANANTR");
            CanFilter = true;

I also found a way to set a filter on initialization, like i was query earlier, so you don't have to answer on this anyway.

But it seems it is a little tricky to set a filter to a boolean field. I tried this in your fetchdata example.

I added a boolean field to the Orders class and added a GridColumn

<GridColumn Field=@nameof(Order.Loaded) Type="ColumnType.Boolean" EditType="EditType.BooleanEdit" DisplayAsCheckBox="true" HeaderTextAlign="TextAlign.Center" HeaderText="Loaded" Width="120"></GridColumn>

then i tried to filter it

protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender)
        {
            await Grid.FilterByColumnAsync("CustomerID", "contains", "BLONP"); //this works
            await Grid.FilterByColumnAsync("Loaded", "equals", true); //this doesnt work...why?
        }
    }

The weird thing is, in the grid the filter is set, but not active, not before you press the filter button.

Perhaps booleans has to filter on a special way?

Regards

Stefan

Attachment: FetchData_22521e43.zip

[Monisha Saravanan]

Hi Stefan,

Thanks for the update.

We have checked your query and we suggest you to to use equal operator to filter the checkbox column. Kindly refer the below code snippet and modified sample for your reference.

protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        if(firstRender)

        {

            //await Grid.FilterByColumnAsync("CustomerID", "contains", "BLONP"); //this works

            await Grid.FilterByColumnAsync("Loaded", "equal", true);

        }

    }

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1593831767.zip

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

Kindly get back to us if you have further queries.

Regards,

Monisha

[Stefan Limpert]

Hi Monisha,

oh Bugger! Shame on me. This was a real beginner mistake. I readed the docs maybe three times and never saw it.

Thank you for your patience.

Have a nice day

Regards

Stefan

[Monisha Saravanan]

Hi Stefan,

Welcome. Kindly get back to us if you have further queries. As always we will be happy to assist you.

Regards,

Monisha