Set date format globally

[Wouter]

Is it possible to set the date format globally for all components?

[Saravanan Arunachalam]

Hi Wouter, 

Thanks for contacting Syncfusion’s support. 

We understood from your query you need to render the ejDatePicker and ejGrid with Date column and both controls formatted with same date format (MM/dd/yyyy). You can achieved this requirement by using dateFormat property for ejDatePicker and format property for ejGrid control and please refer to the below online API reference link and online sample link. 

https://help.syncfusion.com/api/js/ejdatepicker#members:dateformat  

https://help.syncfusion.com/api/js/ejgrid#members:columns-format  

http://js.syncfusion.com/demos/web/#!/bootstrap/grid/defaultfunctionalities  

If it is not your requirement, please provide the following details. 

1.       Share the clear requirement details. 

2.       Share expected output screenshot 

Regards, 

Saravanan A. 

[Wouter]

Requirement: Set it once for every instance instead of setting the format for every column of every grid.

Example result (achieved with setting the format 4 times):

[Saravanan Arunachalam]

Hi Woter, 

The columns.format property used to format the number and date columns which is determined by its type and it is set based on the values of that columns. So, we can’t set the default format (globaly for date or number) for any one of the column specifically but we can set the format for the date columns programmatically by using actionBegin event and type property of Grid columns. Please refer to the below code example and jsplayground sample. 

$("#Grid").ejGrid({ 

                dataSource: data, 

                actionBegin: "onActionBegin", 

                 

                columns: [ 

                        { field: "OrderDate", headerText: "Order Date", width: 80, type: "date", textAlign: ej.TextAlign.Right, priority: 2 }, 

                        . . . 

                ] 

            }); 

function onActionBegin(args){ 

            if(this.initialRender) 

            { 

                var cols = this.model.columns;  

                for(var i=0;i<cols.length;i++){ 

                    if(cols[i].type == "date") // detect the date type column 

                        cols[i].format="{0:MM/dd/yyyy}"; // set the format for that column 

                } 

            } 

        }           

 

http://jsplayground.syncfusion.com/5l3dxryw  

Note: columns.format is common for both number and date columns. 

Regards, 

Saravanan A. 

[Wouter]

Thanks for your answer. However, I'm using a bit of a different setup: http://jsplayground.syncfusion.com/lbcm5tme and then it wont work. Is this solvable?

[Pavithra Subramaniyam]

Hi Woter, 

 

We have analyzed your sample and the cause of the issue is that you have set the dataSource and actionBegin event handler by setModel. 

 The event handler cannot set via the setModel of Grid control. So we suggest you to set the handler for actionBegin event While render 

 the Grid initially. Please refer the following code snippet and the sample given below. 

 

 

<div id="Grid" 

                     data-ej-columns="[{'field': 'OrderID', 'allowFiltering':false},{'field': 'ShipCity'},{'field': 'OrderDate','type':'date'},]" 

                     data-role="ejgrid" 

                     data-ej-actionbegin="onActionBegin" 

                     data-ej-allowpaging="true" 

                    data-ej-isresponsive="true" 

                     data-ej-allowfiltering="true" 

                     data-ej-filtersettings-filtertype="menu"></div> 

</div> 

 

Online sample link: http://jsplayground.syncfusion.com/zbzstx1t 

 

Regards, 

Pavithra S. 

  

  

 

  

  

  

  

[Wouter]

Thanks, your example works well. However it doesnt work if I initialize the grid like this:

                var dm = ej.DataManager({
                    url: "localhost:8080/myapi/p",
                    adaptor: new ej.UrlAdaptor(),
                    offline: false
                });

                $("#Grid").ejGrid({
                    dataSource: dm
                });

[Pavithra Subramaniyam]

Hi Wouter, 

 

We are sorry and we are unable to reproduce the issue at our end and we have created a separate sample as you mentioned. Please refer the following online sample link. 

 

Online sample link: http://jsplayground.syncfusion.com/evky0dbu 

 

And hence please share the following details to give response as early as possible. 

                  

·       If possible please reproduce the issue in the attached sample. 

·       If possible please share the host sample. 

Regards, 

Pavithra S.