Problem to clear date filter by datagrid reset

[Andy]

Hi guys,

I've a problem of clearing the date filter, which was set using the filter API via a button (Filter Date).
When clearing all filters using the (Clear All Filter) button, this is retained and even changed.
The 'Clear All Filter Button' uses the method Reset() of the Datagrid

@using Radzen;

<div class="row">
    <div class="col-md-12">
        <RadzenButton Click="FilterWithDate" Text="Filter Date" />
        <RadzenButton Click="ClearAllFilter" Text="Clear All Filter" />
    </div>
    <div class="col-md-12">
        <RadzenDataGrid @ref="ProjectGrid" AllowFiltering="true" AllowPaging="false" AllowSorting="true" Data="@projectList" FilterMode="FilterMode.Advanced"
                TItem="TestProject" LogicalFilterOperator="LogicalFilterOperator.And" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive">
            <Columns>
                <RadzenDataGridColumn TItem="TestProject" Property="Name" Title="Name" />
                <RadzenDataGridColumn TItem="TestProject" Property="Created" Title="Erstellt am" />
                <RadzenDataGridColumn TItem="TestProject" Property="Creator" Title="Erstellt von" />

                <RadzenDataGridColumn TItem="TestProject" Property="Type" Title="Projekt-Typ">
                    <Template>
                        @context.Type.ToString()
                    </Template>
                </RadzenDataGridColumn>
                <RadzenDataGridColumn TItem="TestProject" Property="IsFinished" Title="Fertig?" Width="10%" TextAlign="TextAlign.Center" >
                    <Template>
                        <RadzenCheckBox @bind-Value="context.IsFinished" Disabled="true" />
                    </Template>
                    <EditTemplate Context="project">
                        <RadzenCheckBox @bind-Value="project.IsFinished" />
                    </EditTemplate>
                </RadzenDataGridColumn>
                <RadzenDataGridColumn TItem="TestProject" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="10%">
                    <Template Context="project">
                        <RadzenButton Icon="edit" Size="ButtonSize.Medium" ></RadzenButton>
                        <RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="close" Size="ButtonSize.Medium" ></RadzenButton>
                    </Template>
                    <EditTemplate Context="project">
                        <RadzenButton Icon="save" Size="ButtonSize.Medium" ></RadzenButton>
                        <RadzenButton Icon="cancel" Size="ButtonSize.Medium" ButtonStyle="ButtonStyle.Secondary" ></RadzenButton>
                        <RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="close" Size="ButtonSize.Medium" ></RadzenButton>
                    </EditTemplate>
                </RadzenDataGridColumn>
            </Columns>
        </RadzenDataGrid>
    </div>
</div>

@code {
    protected RadzenDataGrid<TestProject> ProjectGrid;
    protected List<TestProject> projectList = new List<TestProject>();

    protected override async Task OnInitializedAsync()
    {
        this.projectList.Add(new TestProject("Testprojekt1", true, "FilteredUser", 1, DateTime.Today.AddDays(3)));
        this.projectList.Add(new TestProject("Testprojekt2", false, "FilteredUser", 1, DateTime.Today.AddDays(2)));
        this.projectList.Add(new TestProject("Testprojekt3", true, "FilteredUser", 2, DateTime.Today.AddDays(1)));
        this.projectList.Add(new TestProject("Testprojekt4", false, "NonFilteredUser", 1, DateTime.Today));
        this.projectList.Add(new TestProject("Testprojekt5", true, "NonFilteredUser", 1, DateTime.Today.AddDays(-1)));
        this.projectList.Add(new TestProject("Testprojekt6", false, "NonFilteredUser", 2, DateTime.Today.AddDays(-2)));
    }

    protected void FilterWithDate()
    {
        if (ProjectGrid != null)
        {
            #pragma warning disable BL0005 // Component parameter should not be set outside of its component.
            var column = ProjectGrid.ColumnsCollection.Where(c => c.Property == "Created").FirstOrDefault();
            if (column != null)
            {
                column.FilterValue = DateTime.Today.AddDays(-1);
                column.FilterOperator = FilterOperator.GreaterThanOrEquals;
                column.SecondFilterValue = DateTime.Today.AddDays(1);
                column.SecondFilterOperator = FilterOperator.LessThanOrEquals;
                column.LogicalFilterOperator = LogicalFilterOperator.And;
            }
            ProjectGrid.Reload();
            #pragma warning restore BL0005 // Component parameter should not be set outside of its component.
        }
    }

    protected void ClearAllFilter()
    {
        this.ProjectGrid.Reset();
    }

    public class TestProject {
        public string Name { get; set; }
        public DateTime Created { get; set; }
        public bool IsFinished { get; set; }
        public string Creator { get; set; }
        public int Type { get; set; }

        public TestProject(string name, bool isFinished, string creator, int type, DateTime created)
        {
            this.Name = name;
            this.Created = created;
            this.IsFinished = isFinished;
            this.Creator = creator;
            this.Type = type;
        }
    }
}

[Andy]

Hi, unfortunately I can't find a workaround for the problem. Even if i clear the filter manually, it won't be filtering the next time using the api.

I've even looked through the code, but i can't find a wrong line, in the method Reset().

Can one help me?

[enchev]

You can set to null FilterValue/SecondFilterValue exactly in the same way as for filter:

[Andy]

Hi @enchev
Thanks for your replay. This works if i've set the a filter with the API.
I've changed the content of ClearAllFilter() to

    protected void ClearAllFilter()
    {
        //this.ProjectGrid.Reset();

        var columnsCollection = this.ProjectGrid.ColumnsCollection.ToList();
        foreach (var column in columnsCollection) 
        {
            column.FilterValue = null;
            column.FilterOperator = FilterOperator.Equals;
            column.SecondFilterValue = null;
            column.SecondFilterOperator = FilterOperator.Equals;
            column.LogicalFilterOperator = LogicalFilterOperator.And;
        }
        #pragma warning restore BL0005
    }

But if I set a filter by using the gui / filter-dialog as in the picture shown and want to clear them by using the API (ClearAllFilter-Method) it won't work. The manually set filter is not cleared.

Do the two types of filters work alone and not together?

[enchev]

There is a missing Reset() in my code. It should be:

protected void ClearAllFilter()
{
        var column = ProjectGrid.ColumnsCollection.Where(c => c.Property == "Created").FirstOrDefault();
        if (column != null)
        {
            column.FilterValue = null;
            column.SecondFilterValue = null;
        }
        ProjectGrid.Reset();
        ProjectGrid.Reload();
}

Our Blazor components will keep internal state of parameters similar to FilterValue, etc. in order to be able to apply values both runtime and bind them. More info can be found here:

Tab Selected is not correct

I think the Blazor documentation article that I linked explains it very well. It contains an example which uses both Expanded property and private In short Blazor renders components upon change and set the parameter properties. If the component keeps the state it gets overwritten. This bit us hard in the early days. Hence there is Selected and IsSelected. Basically you use either SelectedIndex or the Selected property of a tab (but not both) to set the selected tab (setting Selected overrides S…

[Andy]

Thanks for the information, but even deleting the filters by setting FilterValue/SecondFilterValue and Reset() doesn't solve my problem. Here is a short record of my problem:

1st step: Setting date filter with the API
2nd step: Delete all filters (iteration over all FilterValue / SecondFilterValue / FilterOperator / SecondFilterOperator as well as with the Reset method)
3th step: Set date filter with the API --> SecondFilterOperator can no longer be set via API

The problem is triggered by the reset method.
However, I would like to provide my users with a button where both the filters set via the GUI and the filters set via the API are cleared.
We use the filters a lot and currently the entire component always has to be reloaded when setting the date filter.

My actually ClearAllFilter-Method

    protected void ClearAllFilter()
    {
        #pragma warning disable BL0005
        var columnsCollection = this.ProjectGrid.ColumnsCollection.ToList();
        foreach (var column in columnsCollection) 
        {
            column.FilterValue = null;
            column.FilterOperator = default(FilterOperator);
            column.SecondFilterValue = null;
            column.SecondFilterOperator = default(FilterOperator);
            column.LogicalFilterOperator = default(LogicalFilterOperator);
        }
        #pragma warning restore BL0005
        this.ProjectGrid.Reset();
        this.ProjectGrid.Reload();
    }

Can you reproduce the problem?

[enchev]

We've changed how filters will be cleared on Reset(), it will be part of our next update before the end of the week:

Fixed DataGrid will not clear all filters on Reset()

[Andy]

Thanks for your help.
I'll try