Our blazing fast Grid component built with pure JavaScript


Post by chris »

Hi, I am configuring a date column filter with a default value (first day of the month).

columns: [
{
    text: 'FROM DATE',
    field: 'fromDate',
    flex: 1,
    type: 'date',
    format: 'DD/MM/YYYY',
    filterable: {
        filterFn: ({ value, record }) => 
            DateHelper.isBefore(DateHelper.parse(value), DateHelper.parse(record.fromDate)),
        filterField : {
            value : firstDayOfMonth()
        }
    }
},
 

Th grid is linked to a store that has autoLoad = false.

When I then load the grid store calling grid.store.load(), the data is displayed but not filtered based on the default.

Changing the filter value manually after that works as expected.

I have tried to configure the filter value after loading the store, but this has no effect. Is there a way to programmatically set the filter value and for it then to refresh the grid and apply the filter?


Post by Animal »

If you want the store to be initially filtered configure it with a filter in it.

A filterable column will match itself up with a filter which exists on the store which has that column's field as its property.

I changed the grid filtering example to look like this:

import  '../_shared/shared.js'; // not required, our example styling etc.
import WidgetHelper from '../../lib/Core/helper/WidgetHelper.js';
import StringHelper from '../../lib/Core/helper/StringHelper.js';
import Grid from '../../lib/Grid/view/Grid.js';
import '../../lib/Grid/column/DateColumn.js';
import '../../lib/Grid/column/RowNumberColumn.js';
import '../../lib/Grid/feature/QuickFind.js';
import '../../lib/Grid/feature/Stripe.js';
import DataGenerator from '../../lib/Core/helper/util/DataGenerator.js';
import '../../lib/Grid/column/NumberColumn.js';

WidgetHelper.append([
    {
        type     : 'button',
        ref      : 'removeAll',
        color    : 'b-tool',
        icon     : 'b-fa-times',
        tooltip  : 'Remove all filters',
        onAction : () => grid.store.clearFilters()
    }
], { insertFirst : document.getElementById('tools') || document.body });

let grid = new Grid({

    appendTo : 'container',
    
    features : {
        filter    : { property : 'city', value : 'Paris' },
        stripe    : true,
        quickFind : true
    },

    columns : [
        { type : 'rownumber' },
        {
            text       : 'Name (custom filter: whole words)',
            field      : 'name',
            flex       : 1
        },
        { text : 'Age', field : 'age', width : 100, type : 'number', filterType : 'number' },
        { text : 'City', field : 'city' },
        { text : 'When', field : 'start', width : 200, type : 'date', filterable : true }, //<< filterable
        // This column has filtering turned off
        { text : 'Team (no filter)', field : 'team', flex : 1, filterable : false }
    ],

    store : {
        data : DataGenerator.generateData(100),
        filters : [{
            property : 'start', //<<<< Uses the 'start' field, so the column will pick it up
            value    : new Date(2019, 2, 1),
            operator : '<'
        }]
    }
});

And it popped into life looking like this:

Screenshot 2022-03-25 at 16.35.08.png
Screenshot 2022-03-25 at 16.35.08.png (67.52 KiB) Viewed 667 times

Post by chris »

Thanks, that works as you describe. The issue I have now is that I need a <= not a <, as it needs to include the date specified in the filter. So something like this:

	filters : [{
            property : 'toDate', 
            value    : lastDayOfTheMonth,
            operator : '<='
        }]

However this does not works as expected i.e. it still filters out the rows with the date specified (lastDayOfTheMonth).

If I then manually select the same date it works as expected as I have a customer filter function that adds a day to the data!

I can probably 'hack this' but reluctant for obvious reasons. :-)


Post by alex.l »

Tested it here https://lh/release/bryntum-suite/grid/examples/filtering/
this the next code changes:


features : {
    filter    : true,
[...]

store : {
    data : DataGenerator.generateData(100),
    filters : [{
        property : 'start',
        value    : new Date('2019-01-26'),
        operator : '<='
    }]

And I see it filtered correct. How to reproduce this problem? Do you see that in our online examples?

All the best,
Alex


Post by chris »

Hi Alex, Thanks - I found the problem. I was creating a new date that was the last day of the month. However I was not setting the time element, which defaults to 00:00 - so all records on that date were after that that time. Schoolboy error! ;-)

Mark


Post Reply