Programmatic Date Range Filtering (Between) in SfTreeGrid fails to apply multiple predicates

[Tim Rühl]

Hi Syncfusion Team,

I am trying to implement a programmatic "Between" date filter (Date Range) for a SfTreeGrid in Blazor. While this logic is straightforward in a regular SfGrid, I am unable to get it working in the SfTeeGrid.

When trying to apply two filter conditions (Greater Than AND Less Than) to the same column programmatically, the second filter is either ignored or overwrites the first one.

A major obstacle is the Uid ​attribute. In the SfTreeGrid, the Uid of the TreeGridColumn seems to be required for the filter to map correctly, but the property is marked as internal, making it impossible to assign it to a new TreeGridFilterColumn object in C#.

I have already tried multiple solutions suggested in other forums, which didn't lead to any success: (note that these solutions are for the SfGrid not the SfTreeGrid) 
Filter custom date ranges in Grid column using date range picker
Filter | React - EJ 2 | Grid | Syncfusion

An Examble:

// Resetting existing filters for the column

InvoiceGridRef.FilterSettings.Columns.RemoveAll(c => c.Field == nameof(BI_Invoice.InvoiceDate));

// Attempting to get the Uid via GetColumnsAsync

var allColumns = await InvoiceGridRef.GetColumnsAsync();

var dateColumnUid = allColumns.FirstOrDefault(c => c.Field == nameof(BI_Invoice.InvoiceDate))?.Uid;

// This is where it fails because Uid is internal

// and the mapping between TreeGridFilterColumn and PredicateModel is inconsistent.

InvoiceGridRef.FilterSettings.Columns.Add(new TreeGridFilterColumn

{

    Field = nameof(BI_Invoice.InvoiceDate),

    Operator = Operator.GreaterThanOrEqual,

    Predicate = "and",

    Value = startDate.Value.Date

    // Uid = dateColumnUid // <--- Cannot assign this!

});

InvoiceGridRef.FilterSettings.Columns.Add(new TreeGridFilterColumn

{

    Field = nameof(BI_Invoice.InvoiceDate),

    Operator = Operator.LessThanOrEqual,

    Value = endDate.Value.Date,

    Predicate = "and"

    // Uid = dateColumnUid // <--- Cannot assign this!

});

await InvoiceGridRef.RefreshAsync();

What is the officially recommended way to programmatically apply a "Between" filter (two predicates on one column) specifically for the SfTreeGrid?

How can I map these filters to the correct column if the Uid is inaccessible?

Is there a way to trigger a complex filter via FilterByColumnAsync that supports multiple conditions at once? I see that the declaration has an option for the predicate, however i can't figure out, whether this is of any use to me.

Best regards,

Tim Rühl

[Shek Mohammed Asiq Abdul Jabbar]

Hi Tim Rühl,

Greetings from Syncfusion Support.

We understand that your requirement is to apply a date range filter in SfTreeGrid (Blazor). This can be achieved by using a FilterTemplate and manually applying the filter logic for the column.

You can use the SfDateRangePicker inside the FilterTemplate and apply the filtering programmatically, as shown in the example below.

<TreeGridColumn Field="InvoiceDate"

                HeaderText="Invoice Date"

                Type="ColumnType.Date"

                Format="MM/dd/yyyy"

                Width="260"

                TextAlign="TextAlign.Right">

 

    <FilterTemplate>

        <button class="e-btn e-primary" @onclick="OpenDialog">

            Select Date Range

        </button>

    </FilterTemplate>

 

</TreeGridColumn>

 

@code {

    private void OpenDialog() => ShowDialog = true;

    private void CloseDialog() => ShowDialog = false;

 

    /* ================= APPLY FILTER & CLOSE DIALOG ================= */

    private async Task ApplyFilter()

    {

        if (StartDate == default || EndDate == default)

            return;

 

        //  Clear previous filters

        await TreeGrid.ClearFilteringAsync();

 

        //  FROM date

        await TreeGrid.FilterByColumnAsync(

            nameof(InvoiceModel.InvoiceDate),

            "greaterthanorequal",

            StartDate,

            "and"

        );

 

        //  TO date (inclusive)

        await TreeGrid.FilterByColumnAsync(

            nameof(InvoiceModel.InvoiceDate),

            "lessthanorequal",

            EndDate.Date.AddDays(1).AddSeconds(-1),

            "and"

        );

 

        // ✅ CLOSE DIALOG (THIS IS WHAT YOU NEEDED)

        ShowDialog = false;

    }

 

 }

                           

Sample:

https://blazorplayground.syncfusion.com/rDrRZfVwJoAwpFNn

This approach allows you to filter records between a selected start date and end date, ensuring that the entire end date is included in the filter range.

If you have any questions or would like assistance customizing this behavior further, please let us know. We are happy to help.

Regards

Shek

[Tim Rühl]

Hi Shek,

Thank you for providing the sample code.

I have implemented the solution exactly as described in my local application. However, the provided approach does not work in my environment. The second call to FilterByColumnAsync consistently overwrites the first filter instead of combining them into a range.

The fundamental issue appears to be the hosting model. Your provided sample uses Blazor WebAssembly. My application is running on Blazor Server.

Please provide a solution specifically designed for Blazor Server. Ideally, I need a way to apply both the start and end date filters in a single, atomic operation. This would prevent multiple SignalR roundtrips and ensure that the filter descriptors are not overwritten.

I look forward to an updated example that demonstrates how to pass a combined list of filter criteria for a single column, ensuring compatibility with the Blazor Server runtime.

Regards,

Tim Rühl

[Shek Mohammed Asiq Abdul Jabbar]

HiTim Rühl,

We appreciate your patience and understanding.

We attempted to use a FilterTemplate to render the DatePicker component and apply date‑range filtering based on TreeGrid and DatePicker events. However, while implementing this workaround, we encountered issues when filtering records using a date range in the TreeGrid date column.

After further validation, we have identified the reported issue “Filtering issue on date range filtering does not return records in TreeGrid date column” as a bug.

Thank you for taking the time to report this issue and for helping us improve our product.

At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle) and will include the fix in our upcoming patch release which is expected to be rolled out on May 19, 2026. Until then we appreciate your patience.

You can now track the status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. 

https://www.syncfusion.com/feedback/73943/filtering-issue-on-date-range-filtering-does-not-return-records-in-treegrid-date

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

Regards,

Shek

[Shek Mohammed Asiq Abdul Jabbar]

Hi Tim Rühl,

We appreciate your patience and understanding.

We have fixed the bug “Filtering issue on Date range filtering does not return records in TreeGrid date column” and the fix has been rolled out in our latest weekly release (v 33.2.7). So, upgrade to our latest version to resolve the problem.

Root cause:

[TreeGrid.FilterSettings.Columns] via [FilteringEventArgs] handler, the changes are never synced to [GridParent.FilterSettings.Columns]. The Grid's filtering operates on its own columns, so manually added TreeGrid columns are ignored.

Solution:

Passed a parameter to the internal method ensures the FilterSettings column in Grid is updated.

Sample:

https://blazorplayground.syncfusion.com/rDLnXILtgBFediQi

Please get back to us if you need any further assistance.

Regards,

Shek