How to make filter row on DX Grid Table have custom filter options

Question

I'm trying to make the filter row on my table have a drop down menu with the following ways of filtering, "Begins with", "Contains", "Doesn't contain", "Ends with", "Equals", "Doesn't equal".

Example:

Filtering on my code works but doesn't do anything specific other than just be able to write a string.

My Table:

@page "/"
@using Data
@using Newtonsoft.Json
@using System.Net.Http.Json
@using System.Net.Http
@using System.Text
@using System.Web
@using Newtonsoft.Json.Linq
@using DevExpress.Blazor
@using GlobalVariables
@attribute [StreamRendering(true)]
@rendermode InteractiveServer


<DxGrid @ref = "Grid" Data="@BrandsData.list_brands" 
ShowSearchBox="true"
ShowFilterRow="true" 
FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
EditMode="GridEditMode.EditRow"
KeyboardNavigationEnabled="true"> 

    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="brand_code_365" Caption="Brand Code"/>
        <DxGridDataColumn FieldName="brand_name" Caption="Brand Name"/>
        <DxGridDataColumn FieldName="brand_secondary_code" Caption="Brand Secondary Code"/>
    </Columns>
      <ToolbarTemplate>
        <DxToolbar>
            <DxToolbarItem Text="Export to XLSX" Click="ExportXlsx_Click" />
            <DxToolbarItem Text="Export to XLS" Click="ExportXls_Click" />
            <DxToolbarItem Text="Export to CSV" Click="ExportCsv_Click" /> 
        </DxToolbar>
    </ToolbarTemplate>
</DxGrid>



@code {
    IEnumerable<object> Data { get; set; }
    IGrid Grid { get; set; }
    public Brands.Root BrandsData { get; set; } = new Brands.Root();

    protected override async Task OnInitializedAsync()
    {
        using var client = new HttpClient();
        var apiUrlWithToken = $"{GlobalVariables.ApiUrl}?token={GlobalVariables.Token}";
        var result = await client.GetStringAsync(apiUrlWithToken);
        BrandsData = JsonConvert.DeserializeObject<Brands.Root>(result);
        StateHasChanged();
    }
    async Task ExportXlsx_Click()
    {
        await Grid.ExportToXlsxAsync("ExportResult");
    }
    async Task ExportXls_Click()
    {
        await Grid.ExportToXlsAsync("ExportResult");
    }
    async Task ExportCsv_Click()
    {
        await Grid.ExportToCsvAsync("ExportResult");
    }

}

I have tried looking at the documentation but couldn't find a way to implement it, https://docs.devexpress.com/Blazor/404326/components/grid/data-shaping/filter-data/filter-data.

Answer 1

You can implement templates for both FilterRow and ColumnFilterMenu.

FilterRow: https://demos.devexpress.com/blazor/Grid/Filtering/FilterRow ColumnFilterMenu: https://demos.devexpress.com/blazor/Grid/Filtering/ColumnFilterMenu

Click on the 'View Source' button. You can see each filter custom implemented.