This is a migrated thread and some comments may be shown as answers.

Ajax Bound Grid Sorting Problem

4 Answers 73 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Stephen
Top achievements
Rank 1
Stephen asked on 29 Apr 2014, 05:44 PM
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);
    }
}

4 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 01 May 2014, 07:28 AM
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:

Regards,
Vladimir Iliev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Stephen
Top achievements
Rank 1
answered on 01 May 2014, 01:45 PM
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>
0
Accepted
Atanas Korchev
Telerik team
answered on 05 May 2014, 07:26 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Stephen
Top achievements
Rank 1
answered on 05 May 2014, 01:54 PM
Duh.  Sorry about that. Spread a little too thin over here so I missed that.  Thanks!
Tags
Grid
Asked by
Stephen
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Stephen
Top achievements
Rank 1
Atanas Korchev
Telerik team
Share this question
or