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. Image for the cookie policy date
  1. Home
  2. Forum
  3. jQuery
  4. How to pass date to grid column

How to pass date to grid column

Hi,
I'm receiving a json with a date in ISO 8601 (..."mydate":"2016-07-27T00:00:00-03:00"...) and loading the grid with it. My grid has a column like this:
{ field: "fecha", headerText: "Fecha XX", editType: "datepicker", editParams: { locale: "es-AR", buttonText: "Hoy", dateFormat: "dd/MM/yyyy" }, format: "{0:dd/MM/yyyy}", width: 100 }

The problem is that dates in the grid shows like "2016-07-27T00:00:00-03:00" and not formatted to "dd/MM/yyyy". I have to set anything else? or maybe pass the date in other format?

Thanks!

19 Replies
MS Mani Sankar Durai Syncfusion Team October 3, 2016 09:29 AM UTC

Hi Ignacio, 
 
 
Thanks for contacting Syncfusion support. 
 
We have analyzed your query and we are able to reproduce the reported issue. The cause of an issue is, the Date column value is in string format, so we need to pass the JSON object to ej.parseJSON method to convert the Date column value as Date object. So we suggest you to use ej.parseJSON function when binding the data to the grid to avoid this issue. 
 
Please refer the below code example 

<body> 
.. 
    <script type="text/javascript"> 
        $(function () { 
             $("#Grid").ejGrid({ 
                dataSource: ej.parseJSON([{ "EmployeeID": 1, "StartDate": "2016-01-01T00:00:00-03:00" }, { "EmployeeID": 2, "StartDate": "2016-01-01T00:00:00-03:00" }, { "EmployeeID": 3, "StartDate": "2016-01-01T00:00:00-03:00" }, { "EmployeeID": 4, "StartDate": "2016-01-01T00:00:00-03:00" }]), 
…                columns: [ 
… 
                ], 
            }); 
        }); 
    </script> 


Please refer the below screen shot, 

 
We have also prepared a sample that can be available from the below link, 


Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


IG Ignacio October 3, 2016 12:24 PM UTC

Great! thank you very much! It works. i didn't know about that method.

MS Mani Sankar Durai Syncfusion Team October 4, 2016 08:32 AM UTC

Hi Ignacio, 

Thanks for your feedback, 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai 


KS Kalai Sirajeddine March 14, 2018 09:28 AM UTC

Hi,
I'm using sql data with viewbag and one of my grid column is a datetime, but I only want date to be visibe in grid so I added format: "{0:MM/dd/yyyy}" 
Still displaying "2018-03-11T23:00:00" like I didn't added format

I also add editType: "datepicker" , but after  editing to 03/14/2018 for example and refreshing page I got "2018-03-13T23:00:00".
Is there a way to control the time part and make it not controlling the day?

Regards,
Kalai Sirajeddine

RS Renjith Singh Rajendran Syncfusion Team March 15, 2018 10:46 AM UTC

Hi Kalai, 

We have analyzed your query. We have provided the solution for this query in our previous update as to use the ej.parseJSON method to convert the Date column value as Date object. We suspect that you are using MVC platform. We have prepared a sample based on your requirement which could be downloaded from the link below, 

Note : If the ej.parseJSON is not used then we are able to reproduce the reported issue. So we suggest you to use the ej.parseJSON. 

Please refer the code example below, 

[GridFeatures.cshtml] 
 
<div id="FlatGrid"></div> 
<script type="text/javascript"> 
    $(function () { 
            var productId = @Html.Raw(Json.Encode(ViewBag.datasource)); 
 
            $("#FlatGrid").ejGrid({ 
                dataSource: ej.parseJSON(productId), 
                columns: [ 
                        ... 
                        { field: "OrderDate", headerText: "Order Date", format: "{0:dd/MM/yyyy}",  width: 130 } 
                ] 
            }); 
        }); 
</script> 
 
[GridController.cs] 
 
private void BindDataSource() 
        { 
            int code = 10000; 
            for (int i = 1; i < 10; i++) 
            { 
                order.Add(new Orders(code + 1, "TOMSP", i + 0, 2.3 * i, "Münster", "Toms Spezialitäten", "2016-01-01T00:00:00-03:00", "Germany", "44087", false)); 
                ... 
               code += 5; 
            } 
 
        } 

Please refer the screenshot below, 

 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


KS Kalai Sirajeddine March 15, 2018 11:13 AM UTC

Hi Renjith,
Sorry for the inconvenience caused, taught that ej.parseJSON would work only with static data.
Working fine in display part
Still facing the issue when I refresh, date goes back one day before (think its due to time difference between countries) 

Regards,
Kalai Sirajeddine 

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team March 19, 2018 12:37 PM UTC

Hi Kalai, 

DataTime will be parsed in the client-end after retrieved from the server-end. While parsing the DateTime, the conversion will be based on the client time zone. To overcome this problem, you can set the timezone offset from UTC in hours using the ej.serverTimeZoneOffset which has been explained in the following Help Document. 


<script type="text/javascript"> 
            var serverTimeZoneDiff = -4.0  // if your server is in EDT time zone (UTC -4.0) (in hours) 
            var clientSideTimeZoneDiff = new Date().getTimezoneOffset() / 60; // get client time zone difference and convert it to hours; 
            ej.serverTimezoneOffset = serverTimeZoneDiff + clientSideTimeZoneDiff; 
            $(function () { 
                var dm = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders" }); 
                $("#Grid").ejGrid({ 
                    dataSource: dm, 
                    allowPaging: true, 
                    load:onLoad, 
                    columns: ["OrderID", "EmployeeID", "CustomerID", "OrderDate", "Freight"] 
                }); 
            }); 
       function onLoad(args) { 
        //on parsing the dataSource 
        //Dates will be coverted to original timeZone 
        this.model.dataSource = ej.parseJSON(this.model.dataSource); 
      }  
</script> 
 
If you are using different Timezone other than this, please share us the code example so that we can provide you response. 
 
Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 



KS Kalai Sirajeddine March 19, 2018 03:51 PM UTC

Hi Farveen,
Thanks for help, I get what ej.serverTimezoneOffset actually do but still couldn't make it work
When I added it, grid is no more visible and when trying to inspect, I get "Uncaught ReferenceError: ej is not defined at..." and it point this lane :
ej.serverTimezoneOffset = serverTimeZoneDiff + clientSideTimeZoneDiff; 


Regards,
Kalai Sirajeddine

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team March 20, 2018 04:22 PM UTC

Hi Kalai, 

We suspect that you have not referred the script files in your sample project property. So we suggest you to follow the procedures mentioned in the documentation.   


After following the above solution still facing the problem, please share us the following details. 

1. Complete Grid code example(both in server and client side). 

2. If possible provide an issue reproducing sample or hosted link. 

3. Screenshot/Video Demo to replicate the issue. 

The provided information will be helpful to provide you response as early as possible. 

Regards, 

Farveen sulthana T 


KS Kalai Sirajeddine March 21, 2018 10:51 AM UTC

Hi Farveen,
Didn't understand the procedures mentioned, so i just added the <!DOCTYPE html> in ej.web.all.min.js and didn't work
I've sended an image describing the issue
Grid code:
<div id="grid"></div>
<script id="Add" type="text/x-jsrender">
    <a class="e-addnewitem e-toolbaricons e-icon e-addnew" />
</script>
<script>
    var toolbar = @Html.Raw(Json.Serialize(ViewBag.toolbar));
    var serverTimeZoneDiff = -4.0;
    var clientSideTimeZoneDiff = new Date().getTimezoneOffset() / 60;
    ej.serverTimezoneOffset = serverTimeZoneDiff + clientSideTimeZoneDiff; 
    $(function () {
        $("#grid").ejGrid({
            dataSource: ej.DataManager({
                json: ej.parseJSON(@Html.Raw(Json.Serialize(ViewBag.datasource))),
                adaptor: "remoteSaveAdaptor",
                 updateUrl: "/Admin/Update",
                 insertUrl: "/Admin/Insert",
                 removeUrl: "/Admin/Delete"
            }),
            toolbarClick: "toolbarClick",
            load: onLoad,
            recordDoubleClick: "editRecord",
            allowResizeToFit: true,
            isResponsive: true,
            allowScrolling: true,
            scrollSettings: {
                width: "100%",
            },
            allowPaging: true,
            pageSettings: {
                pageCount: 5,
                pageSize: 20,
            },
            allowSorting: true,
            allowFiltering: true,
            columns: [
                { field: "Code", headerText: "7 CHARS", isPrimaryKey: true, isIdentity: true, allowEditing: false },
                { field: "Name", headerText: "Application" },
                { field: "Description", headerText: "Description", visible: false },
                { field: "Fonctionalities", headerText: "Fonctionnalités", visible: false },
                { field: "ReleaseDate", headerText: "Date création", editType: "datepicker", format: "{0:MM/dd/yyyy}"}
            ],
            editSettings: {
                allowAdding: true,
                allowEditing: true,
                allowDeleting: true,
            },
            toolbarSettings: {
                showToolbar: true,
                customToolbarItems: ej.parseJSON(toolbar),
                toolbarItems: ["delete","edit"]
            }
        });
                 });
     function editRecord(args) {
        window.location.rel='nofollow' href = '@Url.Action("ApplicationForm", "Admin")';
    }
     function onLoad(args) {
         this.model.dataSource = ej.parseJSON(this.model.dataSource);
     }
     function toolbarClick(args) {
         if (args.itemName == "Add") {
             editRecord();
         }
     }
</script>
server-side view:
public ActionResult Application()
        {
            List<CustomToolbarItem> tool = new List<CustomToolbarItem>();
            tool.Add(new CustomToolbarItem() { TemplateID = "#Add", Text = "Add", Tooltip = "Add" });
            SerializeObject ser = new SerializeObject();
            var prop = ser.SerializeToJson(tool);
            ViewBag.toolbar = prop;
            ViewBag.datasource = _context.Application.ToList();
            return View();
        }

Attachment: date_issue_1965f010.7z

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team March 22, 2018 04:40 PM UTC

Hi Kalai, 

We suspect that script files may not be referred properly on your sample project. Please ensure that you have referred the script files as like below given sample 

1. Share your Layout.cshtml page. 

2. Provide us issue reproducing sample or reproduce the issue in the above sample and revert us back. 

The provided information will be helpful to provide you response as early as possible. 

Regards, 

Farveen sulthana T 



KS Kalai Sirajeddine March 23, 2018 09:34 AM UTC

Hi Farveen,
I can't run mvc project, I usually use js or core
"ensure that you have referred the script files" , do you mean I should copy layout header content?
Also, since I don't know what reference is needed I cant really reproduce the issue in a working sample.
Heres my layout header:
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - ProduitYasmine</title>

    <environment names="Development">
        <link rel="stylesheet" rel='nofollow' href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" rel='nofollow' href="~/css/site.css" />
        
<link rel='nofollow' href="@Url.Content("~/lib/syncfusion-javascript/Content/ej/web/default-theme/ej.web.all.min.css")" rel="stylesheet" />
<script src="@Url.Content("~/lib/jquery/dist/jquery.js")"></script>
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" rel='nofollow' href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
              asp-fallback-rel='nofollow' href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" rel='nofollow' href="~/css/site.min.css" asp-append-version="true" />
        
<link rel='nofollow' href="@Url.Content("~/lib/syncfusion-javascript/Content/ej/web/default-theme/ej.web.all.min.css")" rel="stylesheet" />
<script src="@Url.Content("~/lib/jquery/dist/jquery.js")"></script>
    </environment>    
</head>

Regards,
Kalai Sirajeddine

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team March 26, 2018 04:51 PM UTC

v
Hi Kalai, 

We have prepared the ASP.Net core sample and referred the script files on the Index.cshtml page. Please refer to the sample:- 


Index.cshtml 
<script src="~/lib/jquery/dist/jquery.js"></script> 
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> 
<script src="~/lib/jsrender/jsrender.js"></script> 
 <script src="~/lib/jquery.validation/dist/jquery.validate.js"></script> 
<script type="text/javascript" src="https://cdn.syncfusion.com/16.1.0.24/js/web/ej.web.all.js"></script> 
 
<script src="~/lib/ej.culture.pl-PL.js"></script> 
<script src="~/lib/ej.culture.pl-PL.min.js"></script> 
 
<div class="row"> 
    <div class="col-md-12"> 
         
        <ej-grid id="FlatGrid" allow-paging="true" locale="pl-PL" allow-grouping="true"> 
            <e-datamanager url="/Home/DataSource" batch-url="/Home/BatchUpdate" adaptor="UrlAdaptor" /> 
            .  . . 
            </e-columns> 
        </ej-grid> 
                 
                

Please ensure that you have followed the steps in the above sample. 

After following the sample still facing the issue, please share us the issue reproducing sample or hosted link to find the cause of the issue. 

Regards, 

Farveen sulthana T 


KS Kalai Sirajeddine March 28, 2018 08:38 AM UTC

Hi Farveen,
Thanks for the script files, I had issue to make them work but now i got no more the error that ej is not defined.
However, I'm still facing the same issue, date goes back by one day before it's sended to DB
I noticed that whatever the date I put like 03/28/2018 it would be saved as 03/27/2018 22:00:00, always at same hour.
since my date format is "{0:MM/dd/yyyy}", I expected it to be 03/28/2018 00:00:00 , but it goes back 2 hours earlier.

Regards,
Kalai Sirajeddine

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team March 30, 2018 01:33 AM UTC

Hi Kalai, 

Have you applied the solution provided in the previous update regarding ServerTimeZone problem. If so please share that issue reproducing sample 

1. Also share your TimeZone details. 

2. Screenshot to demonstrate how DateTime column works on clientend and serverend. 

3. Have you faced the problem while on performing any operations such as Editing or Filtering etc. 

Regards, 

Farveen sulthana T 


KS Kalai Sirajeddine March 30, 2018 03:07 PM UTC

Hi Farveen,
" the solution provided in the previous update regarding ServerTimeZone problem"
You mean ej.parseJSON on datasource, yes I applied it.
Timezone: UTC/GMT + 1hour

"Have you faced the problem while on performing any operations such as Editing or Filtering etc."
Actually I tried editing and that's when I did notice the problem
I sended 2 screenshot of edited date 03/30/2018 and current value going to be saved in DB.

Regards,
Kalai Sirajeddine.

Attachment: datetime_issue_6a38a1ce.7z

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team April 2, 2018 01:01 PM UTC

Hi Kalai, 

While checking your screenshot, you are facing issue while on Asp.net core platform on performing editing operation you are facing this reported Timezone problem. We suspected that this problem occurs by default on ASP.Net core sample due to variance on Timezone. To resolve the problem, we need to parse dates in startup.cs  page as like given below.  
 
public void ConfigureServices(IServiceCollection services)  
        {  
            // Add framework services.  
            services.AddMvc().AddXmlSerializerFormatters()  
            .AddJsonOptions(x =>  
             {  
                 x.SerializerSettings.DateParseHandling = Newtonsoft.Json.DateParseHandling.None;  
              x.SerializerSettings.DateTimeZoneHandling = Newtonsoft.Json.DateTimeZoneHandling.Local;
                x.SerializerSettings.ContractResolver = null;              
     });  
            services.AddCors(options => options.AddPolicy("AllowAll", p => p.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod()));  
        }  


Please refer to the Link :-  
 
After following the above solution, still facing the problem please share us the following information given below:-  
 
1.  Share us Grid code example (both in server and client Side).  
 
2. Share us the Video Demo/Screenshot.  
 
3. If possible provide an issue reproducing sample or hosted link.  
 
The provided details will helps us to analyze and provide you solution as early as possible.   
 
Regards,  
 
Farveen sulthana T  


KS Kalai Sirajeddine April 2, 2018 02:58 PM UTC

Hi Farveen,
Thanks for help, just added those two lines in startup.cs and all working fine, it's saving the date value at 00:00:00

Regards,
Kalai Sirajeddine

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team April 3, 2018 09:11 AM UTC

Hi Kalai, 
  
Thanks for your update. We are glad to know that your reported problem has been resolved. Please get back to us if you need any further assistance. 
  
Regards, 
  
Farveen sulthana T 


Loader.
Up arrow icon