DataGrid with TextBox as FilterTemplate

Good morning,
I would like to use a DataGrid with LoadData and with simple filtering but having the raise event on the valuechange event of the search textBox instead on a delay; so I'm trying to use a FilterTemplate with a RadzenTextBox inside but when I call the grid Reload method the LoadData event is triggered without my filter value.
Instead in I use the RadzenDropDown as in the site sample it works.

Below my code.

HTML:

<RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" AllowPaging="true" AllowSorting="true" PageSize="3" @ref="datagrid1"
                Count="@(customerDTOs == null ? 0 : (int)customerDTOs.TotalCount)" LoadData="@LoadData"
                Data="@customerDTOs" TItem="CustomerDTO"
                FilterMode="FilterMode.Simple" LogicalFilterOperator="LogicalFilterOperator.And" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterDelay="500">
    <Columns>
<!-- This filter works -->
        <RadzenDataGridColumn TItem="CustomerDTO" Property="Id" Title="ID label" FilterValue="@id" FilterOperator="FilterOperator.Equals">
            <FilterTemplate>
                <RadzenDropDown @bind-Value="@id" TextProperty="Text" ValueProperty="Value" Style="width:100%"
                                Change="@(args => OnChange(args, "DropDown"))"
                                Data="@(customerDTOs == null ? new List<CustomerDTO>(): customerDTOs.Select(s =>new { Text = s.Id, Value = s.Id }))" />
            </FilterTemplate>
        </RadzenDataGridColumn>

<!-- this filter DOES NOT work -->
        <RadzenDataGridColumn TItem="CustomerDTO" Property="Code" Title="Code" FilterOperator="FilterOperator.Equals" FilterValue="@currentTOC">
            <FilterTemplate>
                <RadzenTextBox @bind-Value="@currentTOC" Change="@OnChange"></RadzenTextBox> 
            </FilterTemplate>
        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

C# Code

private RadzenDataGrid<CustomerDTO> datagrid1;

        string id;
        string currentTOC;
        int count = 0;

        List<CustomerDTO> customerDTOs;
        List<CustomerDTO> fullCustomerDTOs = new List<CustomerDTO>()
{
        new CustomerDTO { Id = "1", Name = "aaaaaaaa", Address = "via bla bla 1", Code ="ABC" },
        new CustomerDTO { Id = "2", Name = "aaaaaakkkk", Address = "via bla bla 1", Code ="DEF" },
        new CustomerDTO { Id = "3", Name = "bbbbbbbb", Address = "via dei matti 0", Code ="GHI" },
        new CustomerDTO { Id = "4", Name = "aaaaaaaa", Address = "via dei matti 0", Code ="JKL" },
        new CustomerDTO { Id = "5", Name = "aaaaaakkkk", Address = "via dei matti 0", Code ="MNO" },
        new CustomerDTO { Id = "6", Name = "bbbbbbbb", Address = "via dei matti 0", Code ="PQR" },
        new CustomerDTO { Id = "7", Name = "aaaaaaaa", Address = "via bla bla 1", Code ="STU" },
        new CustomerDTO { Id = "8", Name = "aaaaaakkkk", Address = "via dei matti 0", Code ="WXY" },
        new CustomerDTO { Id = "9", Name = "bbbbbbbb", Address = "via bla bla 1", Code ="Z12" },
        new CustomerDTO { Id = "10", Name = "aaaaaaaa", Address = "via dei matti 0", Code ="345" },
    };

        async Task OnChange(object value, string name)
        {
            await datagrid1.Reload();
        }

        protected void LoadData(LoadDataArgs args)
        {
// Here args contains the filter coming from the DropDown but not the filter coming from the TextBox
            count = fullCustomerDTOs.Count;
}
}

Hi @davide.n,

This is indeed strange. The FilterValue for the second column is not set however I'm not sure why - I'll try to find what's going on and I'll post here my findings.

Here is a workaround until we find what's going on:


<RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" AllowPaging="true" AllowSorting="true" PageSize="3" @ref="datagrid1"
                Count="@count" LoadData="@LoadData"
                Data="@customerDTOs" TItem="CustomerDTO"
                FilterMode="FilterMode.Simple" LogicalFilterOperator="LogicalFilterOperator.And" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterDelay="500">
    <Columns>
        <RadzenDataGridColumn TItem="CustomerDTO" Property="Id" Title="ID label" FilterValue="@id" FilterOperator="FilterOperator.Equals">
            <FilterTemplate>
                <RadzenDropDown @bind-Value="@id" TextProperty="Id" ValueProperty="Id" Style="width:100%"
                                Change="@OnChange" Data="@customerDTOs" />
            </FilterTemplate>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="CustomerDTO" Property="Code" Title="Code" FilterValue="@currentTOC" FilterOperator="FilterOperator.Equals">
            <FilterTemplate>
                <RadzenTextBox @bind-Value="@currentTOC" Change="@(args => { context.FilterValue = args; OnChange(args);})"></RadzenTextBox> 
            </FilterTemplate>
        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>
@code {
    private RadzenDataGrid<CustomerDTO> datagrid1;

    string id;
    string currentTOC;
    int count = 0;

    List<CustomerDTO> customerDTOs;
    List<CustomerDTO> fullCustomerDTOs = new List<CustomerDTO>()
        {
            new CustomerDTO { Id = "1", Name = "aaaaaaaa", Address = "via bla bla 1", Code ="ABC" },
            new CustomerDTO { Id = "2", Name = "aaaaaakkkk", Address = "via bla bla 1", Code ="DEF" },
            new CustomerDTO { Id = "3", Name = "bbbbbbbb", Address = "via dei matti 0", Code ="GHI" },
            new CustomerDTO { Id = "4", Name = "aaaaaaaa", Address = "via dei matti 0", Code ="JKL" },
            new CustomerDTO { Id = "5", Name = "aaaaaakkkk", Address = "via dei matti 0", Code ="MNO" },
            new CustomerDTO { Id = "6", Name = "bbbbbbbb", Address = "via dei matti 0", Code ="PQR" },
            new CustomerDTO { Id = "7", Name = "aaaaaaaa", Address = "via bla bla 1", Code ="STU" },
            new CustomerDTO { Id = "8", Name = "aaaaaakkkk", Address = "via dei matti 0", Code ="WXY" },
            new CustomerDTO { Id = "9", Name = "bbbbbbbb", Address = "via bla bla 1", Code ="Z12" },
            new CustomerDTO { Id = "10", Name = "aaaaaaaa", Address = "via dei matti 0", Code ="345" },
        };

    async Task OnChange(object value)
    {
        await datagrid1.Reload();
    }

    protected void LoadData(LoadDataArgs args)
    {
        customerDTOs = fullCustomerDTOs;
        count = fullCustomerDTOs.Count;
    }

    public class CustomerDTO
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
        public string Code { get; set; }
    }
}

Hi, any news about the fix?

Thanks in advance.

Have you tried the workaround I’ve posted? I don’t have anything new to share.

Yes the workaround seems to work.
I thought that there will be a fix of the component, sorry.

We will provide fix as soon as we know what’s going on and how to fix it.