Ajax Bound Grid Sorting Problem

[Stephen]

Hello,

I have an ajax bound grid and I have it set to be sortable.  But when I click a column heading all of the data in the grid disappears.  If I switch it to server binding the sorting works.  I need ajax binding because I am using a client detail template.  What am I missing??

Here is the view:

@model IEnumerable<PASS.ViewModels.Proposals.IndexViewModel>

@{
    ViewBag.Title = "My Proposals";
}

<h2>My Proposals</h2>

<br />
<p>@Html.ActionLink("Create New Proposal", "Create", null, new { @class="link-button" })</p>

@(Html.Kendo().Grid(Model)
    .Name("Proposals")
    .Columns(columns =>
    {
        columns.Bound(m => m.ID).Title("Proposal ID");
        columns.Bound(m => m.Title).ClientTemplate("<a href='" + Url.Action("Update", "Proposals") + "/#= ID #'>" + "#= Title #" + "</a>");
        columns.Bound(m => m.ProposalType).Title("Proposal Type");
        columns.Bound(m => m.PI);
        columns.Bound(m => m.User_Facility_ID).Title("User Facility");
    })
    .Sortable()
    .ClientDetailTemplateId("template")
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(m => m.ID))
        .Read(read => read.Action("Index", "Proposals"))
    ))

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<PASS.ViewModels.Proposals.TimeRequestsViewModel>()
        .Name("TimeRequests_#=ID#")
        .Columns(columns =>
        {
            columns.Bound(m => m.Cycle);
            columns.Bound(m => m.Status_Description).Title("Status");
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("GetTimeRequests", "Proposals", new { proposalID = "#=ID#" }))
        )
        .Sortable()
        .ToClientTemplate()
)
</script>

Here are the relevant controller methods:

public ActionResult Index()
{
    int user_id = Convert.ToInt32(((Claim)((ClaimsIdentity)Thread.CurrentPrincipal.Identity).FindFirst(a => a.Type.Equals("UserID"))).Value);

    using (var context = new PASSEntities())
    {
        var vm = (from a in context.Proposals
                  join b in context.Proposal_Minions on a.ID equals b.Proposal_ID into j
                  from c in j.DefaultIfEmpty()
                  where (a.PI_User_ID == user_id || a.Creator_User_ID == user_id || (c.User_ID == user_id && c.Can_Read))
                  select new IndexViewModel()
                  {
                      ID = a.ID,
                      Title = a.Title,
                      ProposalType = a.Proposal_Types.Description,
                      PI_User_ID = a.PI_User_ID,
                      PI = (from d in context.Pools
                            join e in context.Users on d.ID equals e.Pool_ID
                            where e.ID == a.PI_User_ID
                            select d.First_Name + " " + d.Last_Name).FirstOrDefault(),
                      User_Facility_ID = a.User_Facility_ID
                  }).Distinct().OrderByDescending(a => a.ID).ToList();

        return View(vm);
    }
}

public ActionResult GetTimeRequests(int proposalID, [DataSourceRequest]DataSourceRequest request)
{
    using (var context = new PASSEntities())
    {
        var vm = (from a in context.Beamtime_Requests.ToList()
                  where a.Proposal_ID == proposalID
                  select new TimeRequestsViewModel()
                  {
                      ID = a.ID,
                      Proposal_ID = a.Proposal_ID,
                      Cycle = a.Cycle.Description + " " + a.Cycle.Year.ToString(),
                      Cycle_Requested_ID = a.Cycle_Requested_ID,
                      Status = a.Status,
                      Status_Description = a.Beamtime_Request_Statuses.Description
                  }).ToList();

        DataSourceResult result = vm.ToDataSourceResult(request);
        return Json(result, JsonRequestBehavior.AllowGet);
    }
}

[Vladimir Iliev]

Hi Stephen,

Most probably the "kendo.aspnetmvc.min.js" script is not included to the page - could you please check if it's correctly loaded to the page? For more information about required scripts you can check the following article:

• JavaScript dependencies

Regards,
Vladimir Iliev
Telerik

 

 

[Stephen]

It is actually included in my _Layout file.  Is there another possibility?

<head>
    <meta http-equiv="x-ua-compatible" content="IE=Edge"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2014.1.415/kendo.web.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2014.1.415/kendo.aspnetmvc.min.js")"></script>
    <link href="@Url.Content("~/Content/kendo/2014.1.415/kendo.common.min.css")" rel="stylesheet" type="text/css">
    <link href="@Url.Content("~/Content/kendo/2014.1.415/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css">
    <link href="@Url.Content("~/Content/global.css")" rel="stylesheet" type="text/css">
    <link href="@Url.Content("~/Content/site.css")" rel="stylesheet" type="text/css">
</head>

[Atanas Korchev]

Hello Stephen,

Your grid doesn't seem to be properly configured for ajax binding. The "Index" method doesn't return a Json response formatted using the ToDataSourceResult method. You need to create a new action method which returns the data for the parent grid similar to GetTimeRequests.

Regards,
Atanas Korchev
Telerik

 

 

[Stephen]

Duh.  Sorry about that. Spread a little too thin over here so I missed that.  Thanks!