Add GreaterThan and LessThan Filter method to Blazorise DataGrid component?

[JLfarhan]

Is your feature request related to a problem? Please describe.
I'm using Blazorise DataGrid component. The currently supported filtering methods include the following:

• Contains
• StartsWith
• EndsWith
• Equals
• NotEquals

However, I have a need to filter a column with numeric values using Greater Than and Less Than operators (filter methods). Is there a way to add new Filter methods to Blazorise DataGrid component? For example, add GreaterThan and LessThan filter methods for DataGridNumericColumn?

Describe the solution you'd like
I would like DataGrid Filter methods to include GreaterThan and LessThan methods. At a minimum, I'm expecting that there is an example or documentation of extending the filter component to add the additional filter methods.

Additional context

I am using Blazorise.DataGrid version 1.3.0.
Edit: I am loading data from External source, so my filtering will be on the server side: https://blazorise.com/docs/extensions/datagrid/binding-data/large-data

[stsrki]

It's not a bad idea, but the problem could be that our filter methods are generic enum that is shared for all column types. Not sure how we could extend on that. @David-Moreira any idea?

---

At a minimum, I'm expecting that there is an example or documentation of extending the filter component to add the additional filter methods.

Yes, you can do that already. Use the CustomFilter callback to filter column value however you like. The CustomFilter is a delegate with contract as:

/// <summary>
/// Represents the function for the <see cref="DataGridColumn{TItem}"/> custom filtering.
/// </summary>
/// <param name="itemValue">An item value in a column cell for which the filter is executed.</param>
/// <param name="searchValue">Searching value.</param>
/// <returns>True it the value has passed the filter operation.</returns>
public delegate bool DataGridColumnCustomFilter( object itemValue, object searchValue );

It can be used as(might need adjusting casts):

CustomFilter="@((value, search) => (int)value >= (int)search)"

[JLfarhan]

Thank you for your response. I am using Menu Mode filtering. Some of my columns in the grid are numeric and some are just text. For the numeric columns, I want to give them Equal, Not Equal, Less Than and Greater Than filter options. For the text columns, I want to give them the default filters available in Data Grid. However, using custom filters, is there a way to customize the Menu (Menu Mode Filters) based on the type of column, so that columns will get filters based on the type of data (numeric vs. text).

[David-Moreira]

@stsrki is on the right path with the current DataGrid capabilities.

I will get back to you with a more concrete example once I get the time. But it should be possible to customize it to your liking, it just takes a bit more work.

A combination of the feature
Menu Mode Filtering : Template & the feature Custom Filtering

You modify the template with your own filtering capabilities, it can be your own defined enum, and then on the custom filter you filter based on your own filtering capabilities. However I'm not sure how easy it will be to implement it such that it can be generic enough for your use case. I.E having numeric filters applied to every numeric column, etc...

EDIT: With steps for a numeric filter for example
1. Generalized Template that you apply to these columns that have a NumericFilter enum for example.
2. Generalized Custom Filter delegate that you apply to these same columns
2.1 Here, it's where it gets tricky, I could see you using the version of the delegate that has access to the row (model)
private bool OnCustomFilter( Employee model ) and then having the contextual filters set in the model itself, but I can see you not wanting to "dirty" your model with this, but it would probably be easy to get it to work, in theory at least.
2.2 Alternatively you could specialize the DataGridColumn with your own, and then have a field that tracks the current NumericFilter enum and an internally set CustomFilter on this specialized column that looks at the internal field

https://blazorise.com/docs/extensions/datagrid/features/filtering

@stsrki I do think it's interesting if we explore in providing better & expected contextual filtering mechanism for the numeric, date, etc columns...
Although I'm also not yet sure how we would extend it internally. :D

@JLfarhan if you end up figuring out a solution before I take a more concrete look at this, please let us know your findings. :)

[JLfarhan]

@David-Moreira Thanks for your detailed response and direction. I will explore it further on my end too and share what I find. Due to lack of time (with other responsibilities), I might not be able to explore a generic solution. I might just build a custom template for a couple of numeric columns using <FilterTemplate> and CustomFilter , and use DataGridFilterMode.Default instead of DataGridFilterMode.Menu in the interest of time. However, this use case is expected to come up in the future and a long-term solution would still help.

[mtbayley]

The new filter menu is great. Adding ability to filter by numeric or DateTime values would make this even better.

[David-Moreira]

Hello,

Here's a very quick dirty example, I just focused on making it work, I didn't bother too much with details, data types, etc... just an example, you'll have to adapt the code, to make it more reusable, more elegant, etc... But I think this might be an acceptable starting point:

<DataGrid @ref="dataGrid"
          TItem="Employee"
          Data="@employeeList"
          Responsive
          Filterable
           FilterMode="DataGridFilterMode.Menu" CustomFilter="MyCustomFilter">
     <DataGridColumns>
         <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="First Name" Editable="false" FilterMethod="DataGridFilterMethod.StartsWith"></DataGridColumn>
         <DataGridColumn Field="@nameof( Employee.LastName )" Caption="Last Name" Editable="false"></DataGridColumn>
         <DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Editable Data="EmployeeData.Genders" ValueField="(x) => ((Gender)x).Code" TextField="(x) => ((Gender)x).Description" />
     </DataGridColumns>
     <FilterMenuTemplate>
         <Row>
             <Column ColumnSize="ColumnSize.Is4">
                 <Select TValue="MyFilter" SelectedValue="@_filterTracker.GetColumnFilterValue(context.Column.Field)" SelectedValueChanged="e => { _filterTracker.SetColumnFilter(context.Column, e); }">
                     <SelectItem TValue="MyFilter" Value="@MyFilter.Contains">Contains</SelectItem>
                     <SelectItem TValue="MyFilter" Value="@MyFilter.StartsWith">Starts With</SelectItem>
                     <SelectItem TValue="MyFilter" Value="@MyFilter.EndsWith">Ends With</SelectItem>
                     <SelectItem TValue="MyFilter" Value="@MyFilter.Equals">Equals</SelectItem>
                     <SelectItem TValue="MyFilter" Value="@MyFilter.NotEquals">Not Equals</SelectItem>
                     <SelectItem TValue="MyFilter" Value="@MyFilter.GreaterThan">GreaterThan</SelectItem>
                     <SelectItem TValue="MyFilter" Value="@MyFilter.LessThan">LessThan</SelectItem>
                 </Select>
             </Column>

             <Column ColumnSize="ColumnSize.Is4">
                 <TextEdit Text="@_filterTracker.GetColumnSearchValue(context.Column.Field)" TextChanged="@((newValue) => _filterTracker.SetColumnSearchValue(context.Column, newValue))" />
             </Column>

             <Column ColumnSize="ColumnSize.Is4">
                 <Button Clicked="context.Filter" Color="Color.Primary"><Icon Name="IconName.Filter"></Icon> Filter</Button>
                 <Button Clicked="context.ClearFilter" Color="Color.Light"><Icon Name="IconName.Clear"></Icon> Clear</Button>
             </Column>
         </Row>
     </FilterMenuTemplate>
 </DataGrid>
 @code {
    private DataGrid<Employee> dataGrid;
    private List<Employee> employeeList = new() {
        new(){ FirstName = "David", LastName = "Moreira", Gender = "M" } ,
        new (){ FirstName = "MLaden", LastName = "Macanovic", Gender = "M" }   };

    private FilterTracker<Employee> _filterTracker = new();

    public class FilterTracker<T>
    {
        public List<ColumnFilter<T>> columnFilters { get; set; }
        public void SetColumnFilter( DataGridColumn<T> column, MyFilter myFilter )
        {
            columnFilters ??= new();

            var columnFilter = columnFilters.FirstOrDefault( x => x.Column.Field == column.Field );
            if ( columnFilter is null )
            {
                columnFilters.Add( new()
                    {
                        Column = column,
                        SelectedFilter = myFilter
                    } );
            }
            else
            {
                columnFilter.SelectedFilter = myFilter;
            }
        }

        public void SetColumnSearchValue( DataGridColumn<T> column, string searchValue )
        {
            columnFilters ??= new();

            var columnFilter = columnFilters.FirstOrDefault( x => x.Column.Field == column.Field );
            if ( columnFilter is null )
            {
                columnFilters.Add( new()
                    {
                        Column = column,
                        SearchValue = searchValue
                    } );
            }
            else
            {
                columnFilter.SearchValue = searchValue;
            }
        }

        public ColumnFilter<T> GetColumnFilter( string fieldName )
            => columnFilters?.FirstOrDefault( x => x.Column.Field == fieldName );

        public MyFilter GetColumnFilterValue( string fieldName )
            => GetColumnFilter( fieldName )?.SelectedFilter ?? MyFilter.Contains;

        public string GetColumnSearchValue( string fieldName )
            => GetColumnFilter( fieldName )?.SearchValue;



    }
    public class ColumnFilter<T>
    {
        public DataGridColumn<T> Column;
        public string SearchValue;
        public MyFilter SelectedFilter { get; set; } = MyFilter.Contains;
    }

    public enum MyFilter
    {
        Equals, NotEquals, Contains, StartsWith, EndsWith, GreaterThan, LessThan
    }

    private bool MyCustomFilter( Employee row )
    {
        return _filterTracker.columnFilters is null
            ? true
            : _filterTracker.columnFilters.All( EvaluateColumnFilter );
    }

    private bool EvaluateColumnFilter( ColumnFilter<Employee> columnFilter )
    {
        Console.WriteLine( $"Evaluating... {columnFilter.Column.Field}" );
        Console.WriteLine( $"Filter to apply... {columnFilter.SelectedFilter}" );
        //You might need some reflection based or expression based getter to get the value of the corresponding field dynamically
        //Do whatever boolean logic you need to do here
        return true;
    }
}

[stsrki]

@David-Moreira wanna write the blog post describing this solution?

[David-Moreira]

@David-Moreira wanna write the blog post describing this solution?

Well sure, it should only be a temporary fix but I guess it will help people looking for this. I'll improve the example and write the post later.

[stsrki]

Thanks

[JLfarhan]

Hello,

Here's a very quick dirty example, I just focused on making it work, I didn't bother too much with details, data types, etc... just an example, you'll have to adapt the code, to make it more reusable, more elegant, etc... But I think this might be an acceptable starting point:

<DataGrid @ref="dataGrid"
          TItem="Employee"
          Data="@employeeList"
          Responsive
          Filterable
           FilterMode="DataGridFilterMode.Menu" CustomFilter="MyCustomFilter">
     <DataGridColumns>
         <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="First Name" Editable="false" FilterMethod="DataGridFilterMethod.StartsWith"></DataGridColumn>
         <DataGridColumn Field="@nameof( Employee.LastName )" Caption="Last Name" Editable="false"></DataGridColumn>
         <DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Editable Data="EmployeeData.Genders" ValueField="(x) => ((Gender)x).Code" TextField="(x) => ((Gender)x).Description" />
     </DataGridColumns>
     <FilterMenuTemplate>
         <Row>
             <Column ColumnSize="ColumnSize.Is4">
                 <Select TValue="MyFilter" SelectedValue="@_filterTracker.GetColumnFilterValue(context.Column.Field)" SelectedValueChanged="e => { _filterTracker.SetColumnFilter(context.Column, e); }">
                     <SelectItem TValue="MyFilter" Value="@MyFilter.Contains">Contains</SelectItem>
                     <SelectItem TValue="MyFilter" Value="@MyFilter.StartsWith">Starts With</SelectItem>
                     <SelectItem TValue="MyFilter" Value="@MyFilter.EndsWith">Ends With</SelectItem>
                     <SelectItem TValue="MyFilter" Value="@MyFilter.Equals">Equals</SelectItem>
                     <SelectItem TValue="MyFilter" Value="@MyFilter.NotEquals">Not Equals</SelectItem>
                     <SelectItem TValue="MyFilter" Value="@MyFilter.GreaterThan">GreaterThan</SelectItem>
                     <SelectItem TValue="MyFilter" Value="@MyFilter.LessThan">LessThan</SelectItem>
                 </Select>
             </Column>

             <Column ColumnSize="ColumnSize.Is4">
                 <TextEdit Text="@_filterTracker.GetColumnSearchValue(context.Column.Field)" TextChanged="@((newValue) => _filterTracker.SetColumnSearchValue(context.Column, newValue))" />
             </Column>

             <Column ColumnSize="ColumnSize.Is4">
                 <Button Clicked="context.Filter" Color="Color.Primary"><Icon Name="IconName.Filter"></Icon> Filter</Button>
                 <Button Clicked="context.ClearFilter" Color="Color.Light"><Icon Name="IconName.Clear"></Icon> Clear</Button>
             </Column>
         </Row>
     </FilterMenuTemplate>
 </DataGrid>
 @code {
    private DataGrid<Employee> dataGrid;
    private List<Employee> employeeList = new() {
        new(){ FirstName = "David", LastName = "Moreira", Gender = "M" } ,
        new (){ FirstName = "MLaden", LastName = "Macanovic", Gender = "M" }   };

    private FilterTracker<Employee> _filterTracker = new();

    public class FilterTracker<T>
    {
        public List<ColumnFilter<T>> columnFilters { get; set; }
        public void SetColumnFilter( DataGridColumn<T> column, MyFilter myFilter )
        {
            columnFilters ??= new();

            var columnFilter = columnFilters.FirstOrDefault( x => x.Column.Field == column.Field );
            if ( columnFilter is null )
            {
                columnFilters.Add( new()
                    {
                        Column = column,
                        SelectedFilter = myFilter
                    } );
            }
            else
            {
                columnFilter.SelectedFilter = myFilter;
            }
        }

        public void SetColumnSearchValue( DataGridColumn<T> column, string searchValue )
        {
            columnFilters ??= new();

            var columnFilter = columnFilters.FirstOrDefault( x => x.Column.Field == column.Field );
            if ( columnFilter is null )
            {
                columnFilters.Add( new()
                    {
                        Column = column,
                        SearchValue = searchValue
                    } );
            }
            else
            {
                columnFilter.SearchValue = searchValue;
            }
        }

        public ColumnFilter<T> GetColumnFilter( string fieldName )
            => columnFilters?.FirstOrDefault( x => x.Column.Field == fieldName );

        public MyFilter GetColumnFilterValue( string fieldName )
            => GetColumnFilter( fieldName )?.SelectedFilter ?? MyFilter.Contains;

        public string GetColumnSearchValue( string fieldName )
            => GetColumnFilter( fieldName )?.SearchValue;



    }
    public class ColumnFilter<T>
    {
        public DataGridColumn<T> Column;
        public string SearchValue;
        public MyFilter SelectedFilter { get; set; } = MyFilter.Contains;
    }

    public enum MyFilter
    {
        Equals, NotEquals, Contains, StartsWith, EndsWith, GreaterThan, LessThan
    }

    private bool MyCustomFilter( Employee row )
    {
        return _filterTracker.columnFilters is null
            ? true
            : _filterTracker.columnFilters.All( EvaluateColumnFilter );
    }

    private bool EvaluateColumnFilter( ColumnFilter<Employee> columnFilter )
    {
        Console.WriteLine( $"Evaluating... {columnFilter.Column.Field}" );
        Console.WriteLine( $"Filter to apply... {columnFilter.SelectedFilter}" );
        //You might need some reflection based or expression based getter to get the value of the corresponding field dynamically
        //Do whatever boolean logic you need to do here
        return true;
    }
}

Thank you, I appreciate your help. I couldn't get this to work as I am using server-side filtering/sorting and OnReadData(DataGridReadDataEventArgs<T> e) gives me null "SearchValue" for the columns I am trying to filter using the above code. I do see the new filter menu with Greater Than and Less Than options. But as expected, the code requires more work for my use case. Perhaps another feature request, but it would be nice to send the filter method in DataGridReadDataEventArgs so that the right method can be applied when using server-side filtering.

[David-Moreira]

The code I posted is a generalized example as a temporary fix. You will have to adapt it and probably fix any bugs if any.

The example given is for static data, not readdata, althought it should work similarly, prioritized getting the search value from a new ColumnFilter<T>. So might have forgotten to set the internal column SearchValue, since we are overriding it ourselves anyway, no wonder it might not show up in the arguments for readdata.

[David-Moreira]

Example updated:

The following example should be ready to run, and actually have working filters, where we can see Greater and Lesser than in action for a numeric column and also working together with a regular column filter.

So it's a nice place to start. As for ReadData, it's just a matter of using the data in the FilterTracker from the example below:

<DataGrid @ref="dataGrid"
          TItem="FilterExample"
          Data="@exampleList"
          Responsive
          Filterable
           FilterMode="DataGridFilterMode.Menu" CustomFilter="MyCustomFilter">
     <DataGridColumns>
         <DataGridColumn Field="@nameof( FilterExample.Name )" Caption="Name" />
         <DataGridNumericColumn Field="@nameof(FilterExample.Count)" Caption="Count" />
     </DataGridColumns>
     <FilterMenuTemplate>
         <Row>
             <Column ColumnSize="ColumnSize.Is4">
                 <Select TValue="MyFilter" SelectedValue="@_filterTracker.GetColumnFilterValue(context.Column.Field)" SelectedValueChanged="e => { _filterTracker.SetColumnFilter(context.Column, e); }">
                     <SelectItem TValue="MyFilter" Value="@MyFilter.Contains">Contains</SelectItem>
                     <SelectItem TValue="MyFilter" Value="@MyFilter.StartsWith">Starts With</SelectItem>
                     <SelectItem TValue="MyFilter" Value="@MyFilter.EndsWith">Ends With</SelectItem>
                     <SelectItem TValue="MyFilter" Value="@MyFilter.Equals">Equals</SelectItem>
                     <SelectItem TValue="MyFilter" Value="@MyFilter.NotEquals">Not Equals</SelectItem>
                     @if (context.Column.ColumnType == DataGridColumnType.Numeric)
                     {
                         <SelectItem TValue="MyFilter" Value="@MyFilter.GreaterThan">GreaterThan</SelectItem>
                         <SelectItem TValue="MyFilter" Value="@MyFilter.LessThan">LessThan</SelectItem>
                     }
                </Select>
            </Column>
            <Column ColumnSize="ColumnSize.Is4">
                <TextEdit Text="@_filterTracker.GetColumnSearchValue(context.Column.Field)" TextChanged="@((newValue) => _filterTracker.SetColumnSearchValue(context.Column, newValue))" />
            </Column>

            <Column ColumnSize="ColumnSize.Is4">
                <Button Clicked="context.Filter" Color="Color.Primary"><Icon Name="IconName.Filter"></Icon> Filter</Button>
                <Button Clicked="@(() => { _filterTracker.ClearColumnFilter(context.Column); context.ClearFilter.InvokeAsync(); })" Color="Color.Light"><Icon Name="IconName.Clear"></Icon> Clear</Button>
            </Column>
        </Row>
    </FilterMenuTemplate>
</DataGrid>
@code {
    public class FilterExample
    {
        public string Name { get; set; }
        public int Count { get; set; }
    }

    private DataGrid<FilterExample> dataGrid;
    private List<FilterExample> exampleList = new() { new() { Name = "Example 1", Count = 4 }, new() { Name = "Example 2", Count = 9 }, new() { Name = "Example 3", Count = 12 }, new() { Name = "Example 4", Count = 50 }, new() { Name = "Example 5", Count = 1 } };

    private FilterTracker<FilterExample> _filterTracker = new();

    public class FilterTracker<T>
    {
        public List<ColumnFilter<T>> columnFilters { get; set; }

        public void ClearColumnFilter( DataGridColumn<T> column )
        {
            columnFilters ??= new();

            var columnFilter = columnFilters.FirstOrDefault( x => x.Column.Field == column.Field );
            if (columnFilter is not null)
            {
                columnFilters.Remove( columnFilter );
            }
        }

        public void SetColumnFilter( DataGridColumn<T> column, MyFilter myFilter )
        {
            columnFilters ??= new();

            var columnFilter = columnFilters.FirstOrDefault( x => x.Column.Field == column.Field );
            if (columnFilter is null)
            {
                columnFilters.Add( new()
                    {
                        Column = column,
                        SelectedFilter = myFilter
                    } );
            }
            else
            {
                columnFilter.SelectedFilter = myFilter;
            }
        }

        public void SetColumnSearchValue( DataGridColumn<T> column, string searchValue )
        {
            columnFilters ??= new();

            var columnFilter = columnFilters.FirstOrDefault( x => x.Column.Field == column.Field );
            if (columnFilter is null)
            {
                columnFilters.Add( new()
                    {
                        Column = column,
                        SearchValue = searchValue
                    } );
            }
            else
            {
                columnFilter.SearchValue = searchValue;
            }
        }

        public ColumnFilter<T> GetColumnFilter( string fieldName )
            => columnFilters?.FirstOrDefault( x => x.Column.Field == fieldName );

        public MyFilter GetColumnFilterValue( string fieldName )
            => GetColumnFilter( fieldName )?.SelectedFilter ?? MyFilter.Contains;

        public string GetColumnSearchValue( string fieldName )
            => GetColumnFilter( fieldName )?.SearchValue;

    }
    public class ColumnFilter<T>
    {
        public DataGridColumn<T> Column;
        public string SearchValue;
        public MyFilter SelectedFilter { get; set; } = MyFilter.Contains;
    }

    public enum MyFilter
    {
        Equals, NotEquals, Contains, StartsWith, EndsWith, GreaterThan, LessThan
    }

    private bool MyCustomFilter( FilterExample row )
    {
        return _filterTracker.columnFilters is null
            ? true
            : _filterTracker.columnFilters.All( x => EvaluateColumnFilter( x, row ) );
    }

    private bool EvaluateColumnFilter( ColumnFilter<FilterExample> columnFilter, FilterExample row )
    {
        Console.WriteLine( $"Evaluating... {columnFilter.Column.Field}" );
        Console.WriteLine( $"Filter to apply... {columnFilter.SelectedFilter}" );
        Console.WriteLine( $"Search for... {columnFilter.SearchValue}" );


        //You might need some reflection based or expression based getter to get the value of the corresponding field dynamically
        //Do whatever boolean logic you need to do here
        //We opted to use the DataGrid.Utils.FunctionCompiler.CreateValueGetter to create a dynamic getter for the field and using a simple comparer with the new GreaterThan and LessThan comparisons.
        var columnFieldGetter = DataGrid.Utils.FunctionCompiler.CreateValueGetter<FilterExample>( columnFilter.Column.Field );
        var columnValue = columnFieldGetter( row );

        return CompareFilterValues( columnValue.ToString(), columnFilter.SearchValue, columnFilter.SelectedFilter );

    }

    private bool CompareFilterValues( string searchValue, string compareTo, MyFilter filterMethod )
    {
        switch (filterMethod)
        {
            case MyFilter.StartsWith:
                return searchValue.StartsWith( compareTo, StringComparison.OrdinalIgnoreCase );
            case MyFilter.EndsWith:
                return searchValue.EndsWith( compareTo, StringComparison.OrdinalIgnoreCase );
            case MyFilter.Equals:
                return searchValue.Equals( compareTo, StringComparison.OrdinalIgnoreCase );
            case MyFilter.NotEquals:
                return !searchValue.Equals( compareTo, StringComparison.OrdinalIgnoreCase );
            case MyFilter.GreaterThan:
                if (int.TryParse( searchValue, out var parsedSearchValue ) && int.TryParse( compareTo, out var parsedCompareToValue ))
                {
                    return parsedSearchValue > parsedCompareToValue;
                }
                return false;
            case MyFilter.LessThan:
                if (int.TryParse( searchValue, out var parsedSearchValueLessThan ) && int.TryParse( compareTo, out var parsedCompareToValueLessThan ))
                {
                    return parsedSearchValueLessThan < parsedCompareToValueLessThan;
                }
                return false;
            case MyFilter.Contains:
            default:
                return searchValue.IndexOf( compareTo, StringComparison.OrdinalIgnoreCase ) >= 0;
        }
    }
}