Datepicker within Grid fails when value = null

[Stephan Schrade]

Hi support,

I'm using a date picker within a grid to set a start and an end date.

The format is set to 'dd.MM.yyy' and everything is displayed correct as long as there is a standard value in the data. But when there is a null Value or an empty string in at least one of the date values, suddenly the format is wrong.

The data is:

{

    "result": [

        {

            "coursepartpersonid": 1,

            "fullname": "Adrian Mengedoht",

            "persontypecaption": "Teilnehmer",

            "birthyear": 2001,

            "statecaption": "freigeschaltet",

            "coursepartdayid": 3,

            "datefrom": null,

            "dateto": null,

            "accommodationtype": 1,

            "accommodationroom": "227"

        },

        {

            "coursepartpersonid": 2,

            "fullname": "Alexander Kremer",

            "persontypecaption": "Teilnehmer",

            "birthyear": 2004,

            "statecaption": "freigeschaltet",

            "coursepartdayid": 7,

            "datefrom": "2021-08-14T00:00:00+02:00",

            "dateto": "2021-08-21T00:00:00+02:00",

            "accommodationtype": 1,

            "accommodationroom": ""

        },

        {

            "coursepartpersonid": 15,

            "fullname": "Alex Winter",

            "persontypecaption": "Referent / Trainer",

            "birthyear": "1970",

            "statecaption": "freigeschaltet",

            "coursepartdayid": 9,

            "datefrom": "2021-08-14T00:00:00+02:00",

            "dateto": "2021-08-21T00:00:00+02:00",

            "accommodationtype": 1,

            "accommodationroom": ""

        }

    ],

    "count": 3

}

The code of the grid is:

    columns: [

        { field: 'coursepartdayid', headerText: 'ID', width: 50, textAlign: 'Right', visible: false, isPrimaryKey: true },

        { field: 'fullname', headerText: 'Name', width: 120, textAlign: 'Left', allowEditing: false},

        { field: 'persontypecaption', headerText: 'Typ des Teilnehmers', width: 120, textAlign: 'Left', allowEditing: false},

        { field: 'birthyear', headerText: 'Jahrgang', width: 120, textAlign: 'Left', allowEditing: false},

        { field: 'datefrom', headerText: 'Datum von', editType: 'datepickeredit', format: 'dd.MM.yyyy', edit: {params: { min: '2021-08-14T00:00:00+02:00', max: '2021-08-21T00:00:00+02:00', format: 'dd.MM.yyyy', firstDayOfWeek: 1,}}, width: 150, textAlign: 'Left', allowEditing: true},

        { field: 'dateto', headerText: 'Datum bis', editType: 'datepickeredit', format: 'dd.MM.yyyy', edit: {params: { min: '2021-08-14T00:00:00+02:00', max: '2021-08-21T00:00:00+02:00', format: 'dd.MM.yyyy', firstDayOfWeek: 1,}}, width: 150, textAlign: 'Left', allowEditing: true},

        { field: 'accommodationtype', headerText: 'Type Übernachtung', width: 100, textAlign: 'Left',

                editType: 'dropdownedit', foreignKeyField: "typeno", foreignKeyValue: "typecaption", dataSource: accommodationtypeData,

                edit: {params: {query:new ej.data.Query(), dataSource: accommodationtypeData, fields: {value: 'typeno', text: 'typecaption'},

                placeholder: 'Wähle Typ der Übernachtung'}}},

        { field: 'accommodationroom', headerText: 'Zimmer Übernachtung', width: 120, textAlign: 'Left', allowEditing: true},

    ],

Two screenshots are attached to this post.

What can I do to get the correct display?

Regards,

Stephan

Attachment: GridwithDatepickerProblem_52efe18.zip

[Pavithra Subramaniyam]

Hi Stephan, 

Thanks for contacting Syncfusion support. 

In EJ2 Grid while the ‘column.type’ property is not provided then the type is automatically assumed from the first record. In your case the first record has the null value for that datetime column, and the type is not provided, so the format is not applied properly.  To overcome the reported behavior, you need to set the ‘column.type’ property. Please refer to the below code example and documentation link for more information. 

  

{ field: 'datefrom', headerText: 'Datum von', editType: 'datepickeredit', format: 'dd.MM.yyyy',  type:"date"}, 

 

Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/columns/#column-type 

Please get back to us if you need further assistance on this. 

Regards, 

Pavithra S 

[Stephan Schrade]

Hi,

many thanks for your quick answer.

This works perfect!

Thank you very much.

Regards,

Stephan

[Pavithra Subramaniyam]

Hi Stephan, 

It's great to hear that the provided solution works! Please get back to us if you need any further assistance on this. We are always happy to assist you! 

Regards, 

Pavithra S