Dates in grid subtracting one day

Question

There are a lot of threads on this, but not for my version of the grid control (ej5).

I have a date being sent into the control in the format "2020-04-15". The server and the client are on the same time zone.

The grid is subtracting one day from the date and displaying it like '14 apr 2020'. I need to prevent this, so it displays like '15 apr 2020'.

The code is below:

ej.grids.Grid.Inject(ej.grids.Resize);

ej.grids.Grid.Inject(ej.grids.Reorder);

ej.grids.Grid.Inject(ej.grids.Sort);

ej.grids.Grid.Inject(ej.grids.Search);

ej.data.DataUtil.serverTimezoneOffset = 0

// ej.serverTimezoneOffset = 0;

grid = new ej.grids.Grid({

dataSource: dataobj,

columns: [

{ field: "7", "headerText": "Notify Date", type: "dateTime", format: "d MMM y" },

{ field: "8", "headerText": "Due Date", type: "dateTime", format: "d MMM y" }

],

gridLines: 'Both',

height: [email protected],

allowPaging: dataobj.length > 100 ? true : false,

pageSettings: { pageSize: 100, pageCount: 8 },

allowTextWrap : true,

toolbar: [/*'Add', 'Edit', 'Delete', 'Update', 'Cancel',*/ 'Search'],

allowReordering: true,

allowResizing: false,

allowSorting: true,

rowSelected: rowSelected,

rowSelecting: rowSelecting

});

Rajapandi Ravi · Answer

Hi Jim, 

Greetings from syncfusion support. 

Based on your query we suspect that you are maintaining a data value as String in controller side. If you maintain date value as string you have to define type as ‘date’ in date column.  

Based on your query we have prepared a sample and maintain a datecolumn as string in controller side. In this sample the Grid does not subtracting the one day and it works fine from our end. So, we suggest you to use the type as “date” in date column to overcome the issue. Please refer the below code example and sample for more information. 





 
var grid = new ej.grids.Grid({ 
            dataSource: data, 
            allowPaging: true, 
            toolbar: ['Add'], 
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' }, 
            pageSettings: { pageSize: 15 }, 
            columns: [ 
                { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, isPrimaryKey: true }, 
                { 
                    field: 'EmployeeID',  
                    width: 140, headerText: 'Employee ID' 
                }, 
                { field: 'OrderDate', headerText: 'Order Date', type:'date', format: "d MMM y", width: 150 }, 
                { field: 'ShipCountry', headerText: 'Ship Country', width: 140 } 
            ] 
        }); 
 
        grid.appendTo('#Grid'); 
 





OrdersController.cs 
 
public static List<OrdersDetails> GetAllRecords() 
        { 
            if (order.Count() == 0) 
            { 
                int code = 10000; 
                for (int i = 1; i <= 1; i++) 
                { 
                    order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, "2020-04-15", "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6")); 
                    .  .  .  .  .  .  . 
               } 
            } 
            return order; 
        } 
 

Sample: https://www.syncfusion.com/downloads/support/forum/153365/ze/1533651084289222.zip 

Screenshot: 

  

Regards, Rajapandi R

Jim Oliver · Answer

I ran your test without changes and it displayed April 14.Attached the zip of the image file.How do I diagnose and solve this issue?Attachment: SyncfusionDateError_8c99f7bc.7z

Rajapandi Ravi · Answer

Hi Jim,

Thanks for the update

From validating your query, we suspect that reported problem was occurs based on the timezone conversion. By default in EJ2 Grid the dateTime is shown with respect to the user device’s time zone. If the grid handles the date of UTC format then we have converts this UTC time into user device’s time zone in the source which is finally displayed in the grid.

To overcome the problem we suggest you to define the Json string date format in controller in your application and then you have to set serverTimezoneOffset as 0 to display the UTC time which was defined in controller. Please refer the below code example and sample for more information.

$(function () {

var data = new ej.data.DataManager({

url: '/api/Orders',

adaptor: new ej.data.WebApiAdaptor(),

crossDomain: true

});

var elem;

var gridObj;

ej.data.DataUtil.serverTimezoneOffset = 0;

var grid = new ej.grids.Grid({

dataSource: data,

allowPaging: true,

toolbar: ['Add'],

editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' },

pageSettings: { pageSize: 15 },

columns: [

. . . . . .

{ field: 'OrderDate', headerText: 'Order Date', type:'date', format: "d MMM y", width: 150 }

. . . . . .

]

});

grid.appendTo('#Grid');

});

</script>

OrderDetails.cs

for (int i = 1; i <= 1; i++)

{

order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, "2020-04-15T00:00:00.000Z", "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));

code += 5;

}

Sample: https://www.syncfusion.com/downloads/support/forum/153365/ze/153365-857583035.zip

Regards,
Rajapandi R