Quick Filters

The Quick Filter appears above a Grid and provides options for filtering data from it.

There are two ways to create Quick Filters

1. via the QuickFilterAttribute.
2. via TypeScript code.

Creating Quick Filters

Using Attributes

You can create Quick Filter by applying the [QuickFilter] attribute to a Property in a Column.cs file. Editors applied to the Column, via the Serenity Row Class will be used for the Filter.

[ColumnsScript("ExampleColumns")]
[BasedOnRow(typeof(Entities.ExampleRow))]
public class ExampleColumns
{
    public String NonQuickFilteredField { get; set; }

    [QuickFilter]
    public String QuickFilteredField { get; set; }

    [QuickFilter]
    public String AnotherQuickFilteredField { get; set; }
}

Using Code

To create a Quick Filter via Code you override the getQuickFilters() function in the Grid.ts file and return an array of Filters to create.

protected getQuickFilters(): Serenity.QuickFilter<Serenity.Widget<any>, any>[] {
    //Gets the Filters defined in the Columns or in parent grids.
    let filters = super.getQuickFilters();

    //Insert a new checkbox filter for seeing if the column DeletedOn (date) is not Null
    //Show or hide deleted items option
    filters.push({
        field: EntityRow.Fields.DeletedOn,
        type: Serenity.BooleanEditor,
        title: "Show Deleted",
        handler: h => {
            h.active = !!h.value;
            if (h.active) {
                h.request.Criteria = Serenity.Criteria.and(h.request.Criteria,
                ['is not null', [EntityRow.Fields.DeletedOn]]);
            } else {
                h.request.Criteria = Serenity.Criteria.and(h.request.Criteria,            
                ['is null', [EntityRow.Fields.DeletedOn]]);                
            }
        }
    });

    return filters;
}

Quick Filter Options

The quick filter options are configured via the QuickFilterOption attribute.

Options

How To's

Setting Default Filter Value

To set the default value for a Quick Filter, you must override the fields in the init function in the getQuickFilters function in aGrid.ts file.

protected getQuickFilters(): Serenity.QuickFilter<Serenity.Widget<any>, any>[] {
    //get the quick filters already defined via attributes
    let filters = super.getQuickFilters();

    //row fields
    let fld = OrderRow.Fields;

    Q.first(filters, x => x.field == fld.NameOfQuickFilterField).init = w => {
        //For enum lookups (value is string) and for bool yes, no drop downs
        (w as Serenity.EnumEditor).value = "1";

        //For lookups (value is string) 
        (w as Serenity.LookupEditor).value = "";
    };

    return filters;
}