KENDO GRID Issue

Sagar Pallavi

Hi Team,

Good Afternoon. I am saving datatime in one page and displaying the saved details in Kendo Grid. This is working fine all the time. But when I move my changes to server that is located in US it is having display issue for users who are located in India but looks good for US users. Datetime convertion is happening. Kindly let me know how to fix this issue.

Many thanks in advance.

Regards,
SagarPallavi

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Accepted answer
There are many alternatives but, first, use the recommended approach by Telerik

suppose this is your GRID
@(Html.Kendo().Grid().Name("persons")
            .DataSource(dataSource => dataSource

                .Ajax()
                .Events(ev=>ev.RequestEnd("onRequestEnd")) // Note this
                .Model(model=>model.Id(m=>m.PersonID))
                    .Read(read => read.Action("GetPersons","Home"))
                    .Update(up=>up.Action("UpdatePerson","Home"))
            )
            .Filterable()
            .Columns(columns =>
            {
                columns.Bound(c => c.PersonID);
                columns.Bound(c => c.Name);
                columns.Bound(c => c.BirthDate);
                columns.Command(cmd => cmd.Edit());
            })
            .Groupable()
            .Pageable()
            .Sortable()
        )
now use this
"text/javascript">
    (function () {
        window.onRequestEnd = function(e) {
            if (e.response.Data && e.response.Data.length) {
                var data = e.response.Data;
                if (this.group().length && e.type == "read") {
                    handleGroups(data);
                } else {
                    loopRecords(data);
                }
            }
        }
        function handleGroups(groups) {
            for (var i = 0; i < groups.length; i++) {
                var gr = groups[i];
                offsetDateFields(gr); //handle the Key variable as well
                if (gr.HasSubgroups) {
                    handleGroups(gr.Items)
                } else {
                    loopRecords(gr.Items);
                }
            }
        }
        function loopRecords(persons) {
            for (var i = 0; i < persons.length; i++) {
                var person = persons[i];
                offsetDateFields(person);
            }
        }
        function offsetDateFields(obj) {
            for (var name in obj) {
                var prop = obj[name];
                if (typeof (prop) === "string" && prop.indexOf("/Date(") == 0) {
                    obj[name] = prop.replace(/\d+/, function (n) {
                        var offsetMiliseconds = new Date(parseInt(n)).getTimezoneOffset() * 60000;
                        return parseInt(n) + offsetMiliseconds
                    });
                }
            }
        }
    })();
Sagar Pallavi5y ago
Hi Sachin, Thanks for your guidance in this issue. I applied changes suggested by you referring to Kendo team that is using onRequestendevent however now time is always showing 4hrs ahead. Please suggest. We have users in India and London so please let me know how to fix this issue. Many thanks.Regards, SagarPallavi
Sachin Singh5y ago
I already said there are various ways, if you are just talking about formatting issues then use this
c => c.DateClumn).ClientTemplate("#= kendo.toString(kendo.parseDate(DateClumn), 'dd/MM/yyyy') #");
Sagar Pallavi5y ago
Thanks friends for sharing the response to my post. Since we are able to save the datetime properly in database and able to see the same value in the recordset while retriving that means only display is an issue hence is there away to display whatever we have it in recordset? Some how kendo grid is changing the format.

Please suggest.
Sachin Singh5y ago
Another option is to use UtcNow on server side
//DateColumn = DateColumn.UtcNow


public ActionResult GetPersons([DataSourceRequest] DataSourceRequest dsRequest)
        {
var res= (from a in _context.persons
select new Person{
DateTimeCol= DateTimeCol.UtcNow}).ToList();
            var result = res.ToDataSourceResult(dsRequest);
            return Json(result);
        }
Ganesan C5y ago
Hi,

Please refer the below links,

https://forums.asp.net/t/2143301.aspx?How+to+keep+web+server+timezone+and+browser+time+zone+in+same+zone+using+moment+js

https://stackoverflow.com/questions/29220467/how-to-convert-moment-js-date-to-users-local-timezone