Excel Filter: Unexpected Filtering Experience

[Mike-E]

Please see this location which featured a SfGrid control:

https://alpha.starbeam.one/market/licenses

Filter on the Name column and select Contains:

I want to display all rows where `non` occurs:

After missing the pop-up and selecting `OK` the results on the grid do not change.

I have placed a breakpoint on the CustomAdaptor and the Read method does not get called.  It only gets called if one of the entries in the above list are selected.

Expected: defined query is used to filter list upon selecting OK

Actual: list is only filtered if one of presented candidates is selected.

Thank you for any guidance/suggestions.

[Monisha Saravanan]

Hi Mike,

Greetings from Syncfusion support.

We suspect that you are trying to filter the Grid with multiple values when filtering using (non) variable. But we would like to inform that it is impossible to filter with multiple values  as per you requirement without selecting the value from the autocomplete dropdown. Filter in DataGrid will be performed based on the selected records and we can perform multiple selection by using predicates.  So it is not feasible to achieve your requirement at our end.

If we misunderstood your query or if you still face difficulties then kindly share the below details to validate the issue further at our end.

1. Share us the entire Grid code snippet.
2. Share us some more details about your requirement.
3. If possible share us an simple issue reproduceable sample.

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

Regards,

Monisha

[Mike-E]

Thank you for your reply Monisha.  You can actually see this in action here:

https://alpha.starbeam.one/market/licenses

Recording of how to duplicate this:

https://i.imgur.com/nLoZYbt.gif

It appears that all candidates appear in the search text box, when I want them to show in the grid.

Thank you for any further assistance you can provide.

[Monisha Saravanan]

Hi Mike,

We would like to inform that we have used autocomplete inside the filter popup so based on the chosen value it will perform filtering. If you wish to filter multiple values at the same time then we suggest you to handle the filter operation externally by preventing the inbuilt filtering.

After entering the desired values in the autocomplete popup and pressing enter key will trigger the action events and we can perform the external filtering by FilterByColumnsAsync method.

Note: If we didn’t select any value from autocomplete popup then it will not trigger the action events on pressing ok button. So kindly try using enter key after updating the values.

Kindly check the below attached code snippet for your reference.

 

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

    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>

    <GridEvents OnActionBegin="ActionBegin" TValue="Order"></GridEvents>

    <GridColumns>

        ...

    </GridColumns>

</SfGrid>

 

@code {

    public async Task ActionBegin(ActionEventArgs<Order> args)

    {

        if(args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Filtering) && IsFilter)

        {

            IsFilter = false;

            args.Cancel = true;

            Grid.FilterByColumnAsync("CustomerID", "equal", new List<string> { "BOLID", "BLONP" });

 

        }

    }

}

Please let us know if you have any concerns.

Regards,

Monisha

[Mike-E]

>Note: If we didn’t select any value from autocomplete popup then it will not trigger the action events on pressing ok button. So kindly try using enter key after updating the values.

PERFECT!  That's exactly what I am looking for!  However, it's not obvious and I am concerned that other users will encounter the same confusion. 🤔

Basically, I would like to remove the auto-complete dropdown list altogether and perform the Enter on the OK button press.  Is this possible?

[Monisha Saravanan]

Hi Mike,

We have prepared an JavaScript solution for your requirement. Kindly check the attached sample and code snippet for your reference.

Here we have checked the values entered in the autocomplete popup in the click event and if it is ‘non’ then we have called an C# method. And we can perform filtering in the called method. If the input value is not ‘non’ then it will work as default.

 

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

  <GridFilterSettings Type ="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>

  <GridEvents OnActionBegin="ActionBegin" TValue="Order"></GridEvents>

</SfGrid>

 

@code{

    public List<Order> Orders { get; set; }

    SfGrid<Order> Grid;

    public bool IsFilter { get; set; } = true;

    public async Task ActionBegin(ActionEventArgs<Order> args)

    {

        if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.FilterBeforeOpen))

 

        {

            var dotNetReference = DotNetObjectReference.Create(this);

            await Runtime.InvokeAsync<string>("detail", dotNetReference);

        }

      

    }

    [JSInvokable("Filter")]                           

    public void Filter()

    {

     

        Grid.FilterByColumnAsync("CustomerID", "equal", new List<string> { "BOLID", "BLONP" });

                 

    }

 

   }

 

var dotnetInstance;

 

function detail(dotnet) {

    dotnetInstance = dotnet;

   // dotnet instance to invoke C# method from JS

}

 

 

document.addEventListener('click', function (args) {

    if (document.getElementsByClassName('e-autocomplete')[0]._blazorDeferredValue == 'non') {

        if (args.target.outerText == 'OK') {

          

 

                dotnetInstance.invokeMethodAsync('Filter');

           

        }

    }

       

    })

 

 

Please let us know if you have any concerns.

Regards,

Monisha

Attachment: BlazorApp1_f64bb4b8.zip

[Mike-E]

Thank you very much for the custom solution and for taking the time to do that, Monisha.  Unfortunately, that does seem a little involved.  I am wondering why AutoComplete is enabled by default and why it is even enabled at all for this scenario.  I cannot think of any filter control I have used where the "contains" filter uses an autocomplete dropdown to help complete the query.  

The purpose of "contains" after all is to provide a substring of a query, not the entire query as autocomplete is enforcing, does this make sense?

Usually for this, I have a query in mind and I type a few letters and press OK (or Enter in this case -- which works perfectly).

The expectation is that AutoComplete would be disabled by default or there would be a way to disable it by property/flag easily.  There would definitely not be any javascript involved in such a scenario. :)

Is there a way we could consider this as a feature request?

I appreciate your consideration.

[Monisha Saravanan]

Hi Mike,

Thanks for the update.

From your query we suspect that you are trying to disable the inbuilt SfAutocomplete component. If so we suggest you to use FilterTemplate feature of DataGrid and we can use our required component inside FilterTemplate. This will help to override the inbuilt input component (AutoComplete). Kindly refer the below attached code snippet for your reference.

 

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

    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>

    <GridEvents OnActionBegin="ActionBegin" TValue="Order"></GridEvents>

    <GridColumns>

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

            <FilterTemplate>

                <SfDropDownList Placeholder="OrderID" ID="OrderID" @bind-Value="@((context as PredicateModel<int?>).Value)" TItem="Order" TValue="int?" DataSource="@(Orders)">

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

                </SfDropDownList>

            </FilterTemplate>

        </GridColumn>

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

             <FilterTemplate>

                <Syncfusion.Blazor.Inputs.SfTextBox ID="CustomerID" @bind-Value="@((context as PredicateModel<string>).Value)"></Syncfusion.Blazor.Inputs.SfTextBox>

            </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 List<Order> Orders { get; set; }

    public SfGrid<Order> Grid;

    public bool IsFilter = true;

    public async Task ActionBegin(ActionEventArgs<Order> args)

    {

        if(args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Filtering) && IsFilter)

        {

            // handle filtering when values entered is non

 

        }

    }

    }

Kindly get back to us if you face any difficulties.

Regards,

Monisha