We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Set date format globally

Thread ID:

Created:

Updated:

Platform:

Replies:

128479 Jan 25,2017 05:36 AM Feb 2,2017 12:01 AM JavaScript 7
loading
Tags: ejGrid
Wouter
Asked On January 25, 2017 05:36 AM

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

Saravanan Arunachalam [Syncfusion]
Replied On January 26, 2017 03:26 AM

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. 
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
Replied On January 26, 2017 09:37 AM

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):
Dates

Saravanan Arunachalam [Syncfusion]
Replied On January 27, 2017 01:29 AM

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 
                } 
            } 
        }           
 
Note: columns.format is common for both number and date columns. 
Regards, 
Saravanan A. 


Wouter
Replied On January 27, 2017 04:08 AM

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 [Syncfusion]
Replied On January 30, 2017 01:35 AM

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> 
 
 
Regards, 
Pavithra S. 
  
  
 
  
  
  
  


Wouter
Replied On February 1, 2017 09:50 AM

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 [Syncfusion]
Replied On February 2, 2017 12:01 AM

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. 
 
 
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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;