Override the grid filter's datasource

[SZL]

Hi,

I have a grid and two columns has json datasource (cell value -> json string)

This required to format the chip items with colors (with template).

This part works fine, but the filter contains the original json datasource. 

The filter also works fine but the json confusing the user. 

Can I override the filter datasource with 'Name' values only?

Thank you very much!

[Prathap Senthil]

Hi Szl,

Based on your requirement, we would like to clarify that the filtering operation works based on the field value. If you want to render only a part of the name value from the entire JSON object, we suggest using a filter template to render a custom component that displays only the name value. Additionally, use the 'contains' operator to achieve your requirement. Kindly refer to the code snippet and sample below for your reference.

<SfGrid DataSource="@GridData" @ref="Grid" AllowFiltering="true" Height="273px">

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

    <GridEvents FilterDialogOpening="FilterDialogOpeningHandler" TValue="OrderData"></GridEvents> 
    <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="150"  FilterSettings="@(new FilterSettings{ })">

          <Template>

              @{

                  var data = (context as OrderData);

                  var json = JsonSerializer.Deserialize<CustomerInfo>(data.CustomerID);

              }

              <span style="background-color:@json.Color; color:white; padding:4px 8px; border-radius:4px;">

                  @json.Name

              </span>

          </Template>

          <FilterTemplate>

              @{

                  var customerNames = GridData

                  .Select(x => JsonSerializer.Deserialize<CustomerInfo>(x.CustomerID).Name)

                  .Distinct()

                  .ToList();

 

                  var type = customerNames;

              }

              <SfDropDownList TValue="string" TItem="string" DataSource="@customerNames"

                              Placeholder="Select Customer"

                              @bind-Value="@((context as PredicateModel<string?>).Value)">

              </SfDropDownList>

          </FilterTemplate>

      </GridColumn>

public async Task FilterDialogOpeningHandler(FilterDialogOpeningEventArgs args)

{

 

     if (args.ColumnName == "CustomerID")

     {

         args.FilterOperators = StringOperator;

     }

      

 }

public class Operators : Syncfusion.Blazor.Grids.IFilterOperator

{

     public string Value { get; set; }

     public string Text { get; set; }

}

List<Syncfusion.Blazor.Grids.IFilterOperator> StringOperator = new List<Syncfusion.Blazor.Grids.IFilterOperator> {

     

     new Operators() { Value= "contains", Text= "Contains" },

    

 };

Sample:
https://blazorplayground.syncfusion.com/embed/htVIDuiReXlnfHMa?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Reference:

https://blazor.syncfusion.com/documentation/datagrid/filter-menu#custom-component-in-filter-menu

https://blazor.syncfusion.com/documentation/datagrid/filter-menu#customizing-filter-menu-operators-list

Regards,
Prathap Senthil

[SZL]

Hi,

Thank you for the details and sample.

Almost good for me, but I need type substrings too into filter control, for example "Adm" need filter the Location-Admin item.

Therefore I changed the control in my project to combobox with custom value:

<FilterTemplate>
    @{
        var groupNames = GetUniqueGroupNames();
    }
    <SfComboBox TValue="string" TItem="string" DataSource="@groupNames"
                Placeholder="Select or type Group name"
                AllowFiltering="true"
                FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains"
                IgnoreCase="true"
                AllowCustom="true"
                ShowClearButton="true"
                @bind-Value="@((context as PredicateModel<string?>).Value)">
    </SfComboBox>
</FilterTemplate>

The first filter is working fine, but after this I cannot delete the filter text (clear button has no effect), cannot remove filter text with keyboard backspace etc. 

Thank you for help!

[Prathap Senthil]

Based on the reported issue, we suggest using a public string property to render the value on the SfComboBox using the bind-value attribute. This approach should help resolve the problem. Kindly refer to the code snippet and sample provided below for your reference.

<SfGrid DataSource="@GridData" @ref="Grid" AllowFiltering="true" Height="273px">

--------------------

    <GridColumns>

        <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="150" FilterSettings="@(new FilterSettings{ })">

 

            <FilterTemplate>

                @{

                    var predicate = context as PredicateModel<string?>;

                    predicate.Value = CustomerIDFilterValue;

                }

                  <SfComboBox TValue="string" TItem="string" DataSource="@customerNames"

                    Placeholder="Select or type Group name"

                    ID="CustomerID"

 

                    FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains"

                    IgnoreCase="true"

                    AllowCustom="true"

                    ShowClearButton="true"

                                @bind-Value="CustomerIDFilterValue"

                    </SfComboBox>

            </FilterTemplate>

        </GridColumn>

</SfGrid>

 

@code {

   

 

 

    public string CustomerIDFilterValue { get; set; }

 

 

    public List<string>  customerNames { get; set; }

}

Sample: https://blazorplayground.syncfusion.com/embed/BXVotOrTSTKUCebk?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[SZL]

Thank you the problem is gone.

Can we disable the filter combobox popup window during the typing only?

When I type "loc" and the popup open, after I press the ENTER it will use the first item in popup window for filter, instead of "loc" string.

(or disable any accept key in combo popup, should be selectable only with mouse).

Thank you very much!

[Prathap Senthil]

Yes, it's possible to disable the filter ComboBox popup while typing so that pressing ENTER will use the typed string for filtering rather than selecting the first item in the dropdown.

You can achieve this by implementing the following approach using the BeforeOpenEventArgs.Cancel property in the OnOpen event:

<SfGrid DataSource="@GridData" @ref="Grid" AllowFiltering="true" Height="273px">

------------                @{

                    var data = (context as OrderData);

                    var json = JsonSerializer.Deserialize<CustomerInfo>(data.CustomerID);

                }

                <span style="background-color:@json.Color; color:white; padding:4px 8px; border-radius:4px;">

                    @json.Name

                </span>

            </Template>

            <FilterTemplate>

                @{

                    var predicate = context as PredicateModel<string?>;

                    predicate.Value = CustomerIDFilterValue;

                }

                <SfComboBox TValue="string" TItem="string" DataSource="@customerNames"

                            Placeholder="Select or type Group name"

                            ID="CustomerID"

                            FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains"

                            IgnoreCase="true"

                            AllowCustom="true"

                            ShowClearButton="true"
                            AllowFiltering=”true”

                            @bind-Value="CustomerIDFilterValue">

                    <ComboBoxEvents TValue="string" TItem="string" OnOpen="OnOpen" Filtering="OnFilter"></ComboBoxEvents>

                </SfComboBox>

            </FilterTemplate>

        </GridColumn>

 

        <GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100" />

        <GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="100" />

    </GridColumns>

</SfGrid>

 

@code {

    public List<OrderData> GridData { get; set; }

    SfGrid<OrderData> Grid;

 

    protected override void OnInitialized()

    {

       

 

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

 

    public async Task OnOpen(BeforeOpenEventArgs args)

    {

        if (this.IsTyped)

        {

            args.Cancel = true;

        }

        else

        {

            args.Cancel = false;

        }

        this.IsTyped = false;

    }

 

    public void OnFilter(Syncfusion.Blazor.DropDowns.FilteringEventArgs args)

    {

        this.IsTyped = true;

    }

}

 

Sample: https://blazorplayground.syncfusion.com/embed/rNhIMXDizOGFhbdW?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

How this works:

A flag IsTyped tracks whether filtering is currently taking place
The OnFilter method sets the flag to true when filtering action starts
The OnOpen method cancels the dropdown opening (using args.Cancel = true) if filtering is active
After handling the open event, the flag is reset to prepare for the next filtering action

This approach allows users to type and filter without showing the dropdown, ensuring that pressing ENTER will use the typed string rather than selecting the first item from the dropdown.

[SZL]

Hi, 

Thank you, I see that works fine in demo, but I cannot make it work in my project (not understand why).

So I used this solution:

 <GridColumn Field="GroupNamesString" FilterSettings="@FilterSettingsMenu_Contains" HeaderText="Groups" Width="220">
     <Template>
         <GroupChipsForContract TItem="ContractViewDto"
                                Item="context as ContractViewDto"
                                GetGroupsJson="@(item => item?.GroupsJson)" />
     </Template>
 </GridColumn>

I used different model prop for column and different for inner visualization. That way the filter work fine with original filter controls.

Thank you for help! Have a nice day

[Prathap Senthil]

Thanks for the update,

We’re happy to hear that you’ve found another solution that resolves the issue on your end. However, if you still need assistance with the previous suggestion, we’ll need some additional clarification from your side.

Please provide the following details to help us proceed:

• To help us analyze the issue, could you provide a simple, reproducible sample that demonstrates the problem? This will allow us to identify the issue more effectively and provide a resolution.
• Could you please share with us your attempt to replicate the issue using the previous attached sample?

The information you provide will be very helpful in validating the reported query on our end and in providing a solution as quickly as possible. Thank you for your understanding.

[SZL]

Thank you, I tried create a sample application, but my original project is large and I not succeed to create a simplified version in relevant time, so at this time the another solution will be enough.

In any case, there is a high probability that my code will interfere with its operation.

So I not need any other assistance at this point, thank you very much!

[Prathap Senthil]

Thanks for the update ,

You’re welcome! Glad the alternative solution works for now. If you need help later or can share a minimal repro, We’ll be happy to help you.