[Solved] AJAX Refresh Not Formatting Grid Correctly

[Jon]

Greetings,

I have recently run across an issue with the telerik MVC grid using AJAX binding.  Essentially, when the grid first populates on the HTTP GET, it renders correctly.  See below (please excuse the squished look of the images):



If I then press the refresh button (bound to an AJAX Select function) I get the following results (note the funky date values and lowered case booleans):



I am using build 2011.1.324 of the telerik controls.  I have included the code for the grid as well as my controller actions which are basically identical with the exception of the return values and a few parameters.

Here are my controller actions:

// GET: /Administration/User/

public virtual ActionResult Index()

{

    var memberSvc = new MembershipService();

    var members = from user in memberSvc.GetAllUsers(0, 50)

             select new MembershipUserModel(user);

 

    return View(members);

}

/// <summary>
/// action method used by Telerik control for paging
/// </summary>

/// <param name= "pageIndex">The page you are on</param>

/// <param name= "pageSize">The number of records to return</param>

/// <returns>the action result</returns>

[GridAction]

public virtual ActionResult Paging(int? pageIndex, int? pageSize)

{

    var memberSvc = new MembershipService();

    var members = from user in memberSvc.GetAllUsers(pageIndex ?? 0, pageSize ?? 50);

              select new MembershipUserModel(user);

 

    return View(new GridModel<MembershipUserModel>

    {

        Data = members

    });

}

And my Grid:

@model IEnumerable<MDGov.Dnr.Portal.Models.MembershipUserModel>
@(Html.Telerik().Grid<MDGov.Dnr.Portal.Models.MembershipUserModel>(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(u => u.UserName);
        columns.Bound(u => u.Email);
        columns.Bound(u => u.IsApproved).Title("Approved").Format("{0}").Width(85);
        columns.Bound(u => u.IsOnline).Title("On Line").Format("{0}").Width(85);
        columns.Bound(u => u.IsLockedOut).Title("Locked Out").Format("{0}").Width(85);
        columns.Bound(u => u.LastLoginDate).Format("{0:MM/dd/yyyy}").Title("Last Login");
        columns.Bound(u => u.CreationDate).Format("{0:MM/dd/yyyy}").Title("Created");
        columns.Bound(u => u.LastPasswordChangedDate).Format("{0:MM/dd/yyyy}").Title("Updated");
    })
    .DataBinding(dataBinding => dataBinding.Ajax()
        .Select("Paging", "Users")
        )
        .Pageable(paging => paging.PageSize(10)
            .Style(GridPagerStyles.NextPreviousAndNumeric)
            .Position(GridPagerPosition.Bottom))
        .Sortable(sorting => sorting.Enabled(true))
        .Scrollable(scrolling => scrolling.Enabled(true))
        .Filterable(filtering => filtering.Enabled(true))
        .Selectable()
        .ClientEvents(events => events.OnRowSelected("onRowSelected"))
        .RowAction(row => { row.Selected = row.DataItem.ProviderUserKey.Equals(ViewData["ProviderUserKey"]); })
)
<script type="text/javascript"><!--
    function onRowSelected(e) {
        var url = "Users/Edit?userName=" + e.row.cells[0].innerHTML;
        window.location.href = url;
    }
--></script>

Any ideas/suggestions?

Thanks,
Jon L

[Atanas Korchev]

Hello Jon,

 The problem with the boolean fields is expected. In .NET boolean is serialized as uppercase (True/False) whereas in JavaScript it is lowercase (true/false). 

 However I am not sure why the dates are formatted as 1/1/1. It seems that for some reason DateTime.MinValue has been serialized from your action method instead of the right date. Could this be the problem?

Regards,
Atanas Korchev
the Telerik team

[Jon]

Ok... what a strange issue.  I think I can take care of the case for the true/false values.  Thanks for clearing that up.

As for the dates, I found what was causing the issue but i'm still puzzled as to why it's happening... I have a membershipusermodel class which inherits from the ASP.NET membershipuser.  I have a few of the membershipuser properties hidden by the new 
keyword as shown below:

new public string CreationDate
{
    get { return _user.CreationDate.ToString("M/d/yyyy h:mm:ss tt"); }
}
new public string LastLoginDate
{
    get { return GetFormattedDate(_user.CreationDate, _user.LastLoginDate, "Never Active"); }
}
new public string LastLockoutDate
{
    get { return GetFormattedDate(new DateTime(1754, 1, 1), _user.LastLockoutDate, "Never Locked out"); }
}
new public string LastPasswordChangedDate
{
    get { return GetFormattedDate(_user.CreationDate, _user.LastPasswordChangedDate, "Never Changed Password"); }
}
private static string GetFormattedDate(DateTime date, DateTime date2Compare, string msg)
{
    return date < date2Compare ? date2Compare.ToString("M/d/yyyy h:mm:ss tt") : msg;
}

and if I look at the JSON result in firebug, I can see that those date properties are being returned as DataTime values (DateTime.MinValue to be exact) instead of formatted strings.  So digging a little deeper, I removed the inheritance in my class and voila!  the values came back correctly.  It looks like something is not respecting the new keyword, and is trying to return the actual membershipuser DateTime properties (which are not set because my class hides them).

I think I can get by without using inheritance in this case, but I feel like this is somewhat abnormal behavior.  If you hide a property, it should be hidden everywhere...

Anyway, thanks for the help.

-Jon L