Our blazing fast Grid component built with pure JavaScript


Post by caspernh »

Hi,

I'm trying to setup a grid with a date column in it. I was able to display the data and in the right format.

attch1.jpg
attch1.jpg
attch1.jpg (34 KiB) Viewed 527 times

If I want to filter this column and on it, the date picker pops up but it does not display the "month" and "year" (attch2).

attch2.jpg
attch2.jpg
attch2.jpg (60.41 KiB) Viewed 527 times

When I click on the "month" or "year" fields they display correctly (attch3).

attch3.jpg
attch3.jpg
attch3.jpg (61.41 KiB) Viewed 527 times

However when I select a date to use as filter, the grid returns "no records to display".

This is the code for the column:

{field: 'updated_at',  type : 'date', text: 'Senest opdateret', autoWidth: 1,  editor : false, format : 'DD-MM-YYYY'}

What am I missing??


Post by alex.l »

Looks like some CSS is missing.
See in our online examples how should it look like https://bryntum.com/examples/grid/filterbar/
Please check with our guides and Vue examples (check examples/frameworks/vue folder in the sources you downloaded) if you imported the theme correctly (check App.scss file)
https://bryntum.com/docs/grid/guide/Grid/customization/styling

All the best,
Alex


Post by caspernh »

Hi, thanks for your answer.

I checked and updated my files according to what you said and the display part is working. Now the date picker displays the month and year correctly.

1.jpg
1.jpg (38.7 KiB) Viewed 521 times

But still when I select a date I got "No records to display"

2.jpg
2.jpg (27 KiB) Viewed 521 times

This is how I define the fields type inside the store:

store: {
                    readUrl: 'diagnoses/index-data',
                    createUrl: 'diagnoses/submit',
                    autoLoad: true,
                    fields : [
                        { type : 'date', name : 'updated_at' },
                        { type : 'date', name : 'created_at' }
                    ]
                },

And how I create the column:

{field: 'updated_at',  type : 'date', text: 'Senest opdateret', autoWidth: 1,  editor : false, format : 'DD-MM-YYYY'}

It seems that the date picker is not able to filter the dates correctly.

I have compared with the example you have in:

https://bryntum.com/examples/grid/filterbar/

But I can not see what may I been doing wrong.


Post by alex.l »

Yes, it's working in our examples with configs you shared.
Could you please attach a runnable test case? And please share an example of JSON you used. Maybe the problem in something else.

All the best,
Alex


Post by caspernh »

Ok, I have seen that in your example you use

data : DataGenerator.generateData(100)

When you use DataGenerator the dates come back as objects, my grid is being fed by a database and the dates come as strings.

So I used:

const
    DATE_FORMAT = 'YYYY-MM-DD',
    serializeDate = (value) => DateHelper.parse(value, DATE_FORMAT);
store: {  
readUrl: 'diagnoses/index-data', createUrl: 'diagnoses/submit', autoLoad: true, fields : [ { type : 'date', name : 'updated_at', dateFormat : DATE_FORMAT, serialize : serializeDate }, { type : 'date', name : 'created_at', dateFormat : DATE_FORMAT, serialize : serializeDate } ] },

from this forum:

https://forum.bryntum.com/viewtopic.php?p=69243

And now it is working, but it says in that thread that it is a workaround. Is there a "nicer" way to do this?


Post by alex.l »

The post you mentioned is about another problem, which is fixed, but it helped you as well.

When you use DataGenerator the dates come back as objects, my grid is being fed by a database and the dates come as strings.

Strings are also okay, since JSON files cannot store Date instance. But it should be a proper (standard) Date string.
You should use the format emitted by Date.toJSON method: "2022-04-02T10:10:22.674Z"

Or at least define dateFormat for the model field to let it know how to parse it https://bryntum.com/docs/grid/api/Core/data/field/DateDataField
https://bryntum.com/docs/grid/api/Core/data/field/DateDataField#config-format

All the best,
Alex


Post Reply