Formatted Date not working inside Grid Column

[Foulont Gaetan]

Hello,

I'm trying to render à grid with date but it's not working. 

$scope.data = [

{

"TitreDate_auto": "2019-01-08T15:20:00Z",

"TitreHeure_auto": "2019-01-08T15:20:00Z",

"TitreDateheure": "2019-01-16T15:25:00Z",

"id": "A7F16837-43AF-4811-9256-031BC09A32EC",

"status": "publish",

"isDraft": false,

"isTerminated": false

}

]

        var gridObj = new ej.grids.Grid(

            {

                allowPaging: true,

                dataSource: $scope.data,

                allowFiltering: true,

                allowSorting: true,

                filterSettings: { type: 'Excel' },

                columns: [

                    {

                        "field": "TitreDate_auto",

                        "headerText": "Titre Date",

                        "type": "datetime"

                    },

                    {

                        "field": "TitreHeure_auto",

                        "headerText": "Titre Heure",

                        "type": "datetime"

                    },

                    {

                        "field": "TitreDateheure",

                        "headerText": "Titre Date heure",

                        "type": "datetime"

                    },

                    {

                        "field": "VIEW",

                        "width": 40,

                        "headerText": "",

                        "template": "<button></button>",

                        "allowFiltering": false

                    },

                    {

                        "field": "DUPLICATE",

                        "width": 45,

                        "headerText": "",

                        "template": "<button></button>",

                        "allowFiltering": false

                    },

                    {

                        "field": "DELETE",

                        "width": 40,

                        "headerText": "",

                        "template": "<button></button>",

                        "allowFiltering": false

                    }

                ],

                queryCellInfo: $scope.queryCellInfo,

                rowDataBound: $scope.rowBound,

            });

        gridObj.appendTo("#gridContent");

And here the result :

How can I render the date properly ?

thx

[Pavithra Subramaniyam]

Hi Foulont, 

 

Thanks for contacting Syncfusion support. 

 

We have prepared the sample to reproduce the reported issue at our end. But unfortunately, this issue was not reproduced in our sample. So we have attached that sample in the below link for your reference. 

 

Sample link: https://stackblitz.com/edit/xuso1z-uwwzk9?file=index.js  

 

So could you please provide the below details that will be helpful for us to provide a better solution as early as possible , 

 

1. Do you have customized the data for the “Titre Date” column in in your “queryCellInfo” or “rowDataBound” event
2. Please reproduce the issue in the above sample if possible.
3. Share the code for the “queryCellInfo” and “rowDataBound” event you have used.

 

Regards, 

Pavithra S. 

[Foulont Gaetan]

Hello,

Thanks for your response.

But when I try to set excel filtering and format date it's not working.

You could see inside this editor :

https://stackblitz.com/edit/xuso1z-rh8op7

[Pavithra Subramaniyam]

Hi Foulont, 

We have validated the defect you have initiated with us. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our subsequent patch release which will be rolled out on end of January, 2019. You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through https://www.syncfusion.com/feedback/4220/date-value-has-not-been-formatted-in-excel-filter  

 

Regards, 

Pavithra S. 

 

[Foulont Gaetan]

Hello,

Thank for your response. I will wait for this resolution ;)

Another question how to get the translation for the whole grid including excel filter in my culture fr ? 

[Pavithra Subramaniyam]

Hi Foulont, 

 

You can translate the Grid default text content by defining the locale value and translation object of Localization library. Please refer to the below code example and Documentation link. 

 

[index.js] 

ej.base.L10n.load({ 

        'fr': { 

            'grid': { 

                'EmptyRecord': Aucun enregistrement à afficher', 

                'Filter': 'Filtre', 

                'cancel': 'Annuler', 

                'StartsWith':'Commence avec' 

                 .  .  . 

            }, 

            'pager': { 

                .  .  . 

            } 

        } 

    }); 

    var grid = new ej.grids.Grid({ 

        dataSource: data, 

        locale: ‘fr’, 

        allowGrouping: true, 

        allowPaging: true, 

        pageSettings: { pageSize: 6 }, 

        columns: [ 

            { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, 

            { field: 'CustomerID', headerText: 'Customer ID', width: 150 }, 

            { field: 'ShipCity', headerText: 'Ship City', width: 150 }, 

            { field: 'ShipName', headerText: 'Ship Name', width: 150 } 

        ], 

        height: 220 

    }); 

    grid.appendTo('#Grid'); 

 

Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/global-local/#localization  

 

Regards, 

Pavithra S. 

 

[Foulont Gaetan]

Thanks for your reply. 

Where can I find a full json with all translate data ? Or do I need to translate all by my hand ?

[Pavithra Subramaniyam]

Hi Foulont, 

 

You can find the locale translation json for various language from the below link. 

 

https://github.com/syncfusion/ej2-locale/  

 

To load translation object in Essential JS 2 components, you can load locale object in L10.load function from ej.base. For example, In the below code snippet we have loaded the locale file for Arabic culture. 

 

    ej.base.setCulture('fr'); 

    var ajax = new ej.base.Ajax('/src/fr.json', 'GET', true); 

    ajax.onSuccess = function (value) { 

        //Assigning locale text value for Essential JS 2 components 

        ej.base.L10n.load(value); 

    }; 

    ajax.send(); 

 

 

Regards, 

Pavithra S. 

[Foulont Gaetan]

Hello, 

Cool thanks it's working like a charm :)

.

Another problem not in excel filter but in formatted datetime inside grid.

It'snot showing my formatted datetime dd/MM/yyyy hh:mm  inside the grid.

See the code below : https://stackblitz.com/edit/xuso1z-tushvx

[Logesh Rajappa]

Hi Foulont, 

Greetings from Syncfusion. 

Query:  It'snot showing my formatted datetime dd/MM/yyyy hh:mm  inside the grid. 

 

We have analyzed your query and to apply custom format to the grid column, we suggest to provide the format property as an object as mentioned in the below code example and sample. 

  

[.ts] 

... 

{ 

      field: "TitreDateheure", 

      headerText: "Titre Date heure", 

      type:'datetime', 

      format: {format: 'dd/MM/yyyy hh:mm', type: 'datatime'}, 

      width: 55 

    }, 

... 

 

Sample: https://stackblitz.com/edit/xuso1z-u7h6o4?file=index.js  

 

Please get back to us for further assistance. 

 

Regards, 

Logesh Rajappa