Our blazing fast Grid component built with pure JavaScript


Post by m.kiriejevas »

Hello,

Data from backend returned:

{
"data":
    [
        {
        "date": "2022-10-15",
        "id": "2"
        },
        {
        "date": "2022-10-18",
        "id": "6",
        },
        {
        "date": "2022-10-15",
        "id": "5",
        }
    ],
"success": true,
"total": 3
}

Localization:

    NumberFormat : {
        locale   : 'lt',
        currency : 'EUR'
    },
    DateHelper : {
        locale         : 'lt',
        parsers : {
            L  : 'YYYY-MM-DD',
            LT : 'HH:mm'
        },
    }

Grid config:

features : {
        sort  : ['date'],
        filter : true,
    },

columns : [
    { text : 'Id', field : 'id', editor : false, hidden : true },
    { text : 'Data', field : 'date', type : 'date', format: 'YYYY-MM-DD', editor: false, alwaysWrite: true },
],

When applying filter to the grid column it does not work.
Please see more details in the screenshots:

Screenshot_1.png
Screenshot_1.png (16.98 KiB) Viewed 940 times

Strange thing observed that the date column filter tooltip shows not localized date and shows with time and timezone.

What is the recommended way working with Date/DateTime fields in Bryntum products? Or maybe there is a simple solution to the filtering issue described above?

Thanks!


Post by marcio »

Hey m.kiriejevas,

Perhaps you could look into our filtering demos to check if one suits you better?

https://www.bryntum.com/examples/grid/fieldfilters/
https://www.bryntum.com/examples/grid/filterbar/
https://www.bryntum.com/examples/grid/filtering/

Best regards,
Márcio


Post by m.kiriejevas »

Hello, marcio,
thank you for reply.
I have already studied examples before writing to forum.
First example does not have data column :(
In second example there is no ability to filter date interval :(
So i am left with third example which i have tried implementing already and stuck to the problem have described.
Please see another case description based filtering example.
First of all add format property to "When" column configuration:

{ text : 'When', field : 'start', width : 200, type : 'date', format : 'YYYY-MM-DD' },

That's it, let's see what happens (firstly we enter date, secondly we try to enter using datepicker):

Screenshot_1.png
Screenshot_1.png (197.09 KiB) Viewed 900 times

By the way - similar issue ( https://github.com/bryntum/support/issues/3654 ) was already registered for filterBar feature, but somehow it was not completely fixed :( Please see the same issue with filterBar:

{ text : 'When', field : 'start', flex : 1, type : 'date', format : 'YYYY-MM-DD' },
Screenshot_11.png
Screenshot_11.png (151.47 KiB) Viewed 900 times
marcio wrote: Thu Nov 17, 2022 10:53 pm

Perhaps you could look into our filtering demos to check if one suits you better?

https://www.bryntum.com/examples/grid/fieldfilters/
https://www.bryntum.com/examples/grid/filterbar/
https://www.bryntum.com/examples/grid/filtering/


Post by marcio »

Hey,

Thanks for the detailed report, I created a ticket to investigate/fix it https://github.com/bryntum/support/issues/5615

Best regards,
Márcio


Post by vgarapati_veeva »

Hello,

I am also noticing issues with the date column filter when I provide my own DateHelper parsers for L and LT. The issue I am running into appears to be the same issue reported below.

I was hoping to see if I could get an update on the status of corresponding Github issue https://github.com/bryntum/support/issues/5615.

m.kiriejevas wrote: Thu Nov 17, 2022 12:56 am

Hello,

Data from backend returned:

{
"data":
    [
        {
        "date": "2022-10-15",
        "id": "2"
        },
        {
        "date": "2022-10-18",
        "id": "6",
        },
        {
        "date": "2022-10-15",
        "id": "5",
        }
    ],
"success": true,
"total": 3
}

Localization:

    NumberFormat : {
        locale   : 'lt',
        currency : 'EUR'
    },
    DateHelper : {
        locale         : 'lt',
        parsers : {
            L  : 'YYYY-MM-DD',
            LT : 'HH:mm'
        },
    }

Grid config:

features : {
        sort  : ['date'],
        filter : true,
    },

columns : [
    { text : 'Id', field : 'id', editor : false, hidden : true },
    { text : 'Data', field : 'date', type : 'date', format: 'YYYY-MM-DD', editor: false, alwaysWrite: true },
],

When applying filter to the grid column it does not work.
Please see more details in the screenshots:
Screenshot_1.png

Strange thing observed that the date column filter tooltip shows not localized date and shows with time and timezone.

What is the recommended way working with Date/DateTime fields in Bryntum products? Or maybe there is a simple solution to the filtering issue described above?

Thanks!


Post by m.kiriejevas »

In my case one part of issue was solved declaring field as date type in store itself:

    store : {
        fields         : [
            { name : 'date', type : 'date', format : 'YYYY-MM-DD' },
        ],
     }

But this part of issue was not resolved "Strange thing observed that the date column filter tooltip shows not localized date and shows with time and timezone."

Hope it helps.


Post by alex.l »

I've opened another ticket here https://github.com/bryntum/support/issues/5872 for the problem with tooltip formatting.
You can subscribe on ticket updates to be notified when it gets a milestone to know target release when it planned to be fixed.

All the best,
Alex


Post by vgarapati_veeva »

I still see the issue even with the type set to "date", but let me spend some more time looking into this.

I will create a new post with more information of my configuration if I continue to see issues.


Post Reply