How to do filter by date range in mudblazor Table- Blazor?

Question

I am new to Blazer. I have a invoice ( mudblazor) Table. I want to do filter by date range.

<MudTable Dense="true" Hover="true" Bordered="true" Striped="true" Loading="@loading"
    ServerData="@(new Func<TableState, Task<TableData<InvoiceVm>>>(GetServerData))" @ref="_table">
    <ToolBarContent >
        <MudText Typo="Typo.h6"> Invoice List</MudText>
        <MudSpacer />
         <MudDateRangePicker Label="Start and end date" @onchange="@OnSearch" @bind-DateRange="dateRange" DateFormat="yyyy-MM-dd" />
    </ToolBarContent>
     // removed rest of the code
</MudTable>


@code {
    private MudTable<InvoiceVm> _table;
    private PaginatedQuery paginatedQuery = new PaginatedQuery();

    @* public DateTime? DateTime { get; set; } *@
    private bool loading = true;
    List<InvoiceVm> invoiceList = new List<InvoiceVm>();

    private DateRange dateRange = new DateRange();


    private async Task<TableData<InvoiceVm>> GetServerData(TableState state)
    {
        paginatedQuery.PerPage = state.PageSize;
        paginatedQuery.Page = state.Page + 1;
        paginatedQuery.SortBy = state.SortDirection == SortDirection.Descending ?
        state.SortLabel + " desc" :
        state.SortLabel;

        string path = $"/api/invoice?perPage={paginatedQuery.PerPage}&page={paginatedQuery.Page}&SortBy={ paginatedQuery.SortBy}";

        if (dateRange.Start != null || dateRange.End != null)
        {
            loading = true;
            paginatedQuery.Start = dateRange.Start;
            paginatedQuery.End = dateRange.End;

            path = path + $"&start={paginatedQuery.Start}&end={paginatedQuery.End}";

        }

        loading = true;

        var response = await
        _httpClient.GetFromJsonAsync<PaginatedData<List<InvoiceVm>>>
            (path);

        loading = false;
        return new TableData<InvoiceVm>() { Items = response.Data, TotalItems = response.MetaData.TotalCount };

    }

    private void OnSearch()
    {
         _table.ReloadServerData();
    }

My problem is when I change the date range, the api is not called. GetServerData is not fired. I think OnSearch also not called.

How can I do filter a table by date range using mudblazor ? Please help me to do filter.

Answer 1

You are using @onchange, which is a standard HTML event and most likely not triggered by the MudBlazor component's value being changed, and/or the expected onchange delegate does not match the OnSearch function.

In Blazor, when you @bind-Something in a component, it means the component has 2 properties: Something and SomethingChanged. You can just as well use them separately. The @bind- syntax is just a shortcut.

So if we split the @bind-DateRange in 2, and call the OnSearch function in the Changed event:

<MudDateRangePicker Label="Start and end date" DateRange="dateRange" DateRangeChanged="@(value => { dateRange = value; OnSearch(); })" DateFormat="yyyy-MM-dd" />