The sort, group, and page functions are not working on my grid. I have the code below and attached a picture of what happens when I try to group. It's probably something simple but I'm not seeing it.
Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")">
<link rel="stylesheet" href="@Url.Content("~/Content/kendo.default.min.css")">
<script src="@Url.Content("~/Scripts/jquery-1.7.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kendo.web.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>
My MVC Application</h1>
</div>
<div id="logindisplay">
Welcome <strong>@User.Identity.Name</strong>!
</div>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
@RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
View:
@model IEnumerable<QRC.Models.Milestone>
@{
ViewBag.Title = "Column_Reordering";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
Column_Reordering</h2>
@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.ID).Sortable(true).Filterable(false).Groupable(false);
columns.Bound(o => o.Name).Sortable(true).Filterable(true).Groupable(true);
columns.Bound(o => o.Sequence).Sortable(true).Filterable(false).Groupable(false);
columns.Bound(o => o.TemplateType).Sortable(true).Filterable(true).Groupable(true);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Groupable()
.Reorderable(reorder => reorder.Columns(true))
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.ID);
model.Field(p => p.ID).Editable(false);
})
.PageSize(20)
.Read(read => read.Action("GetMilestonesJson", "Kendo")))
)
Controller:
public ActionResult GetMilestonesJson()
{
Milestone viewModel = new Milestone();
viewModel.Milestones = new QuerySvc.QuerySvcClient().GetMilestones(this.xLMContext.Worker, null);
var kendoResult = new DataSourceResult()
{
Data = viewModel.Milestones.Select(p => new { ID = p.ID, Name = p.Name, Sequence = p.Sequence, TemplateType = p.TemplateType }),
Total = viewModel.Milestones.Count()
};
return Json(kendoResult);
}
Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")">
<link rel="stylesheet" href="@Url.Content("~/Content/kendo.default.min.css")">
<script src="@Url.Content("~/Scripts/jquery-1.7.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kendo.web.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>
My MVC Application</h1>
</div>
<div id="logindisplay">
Welcome <strong>@User.Identity.Name</strong>!
</div>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
@RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
View:
@model IEnumerable<QRC.Models.Milestone>
@{
ViewBag.Title = "Column_Reordering";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
Column_Reordering</h2>
@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.ID).Sortable(true).Filterable(false).Groupable(false);
columns.Bound(o => o.Name).Sortable(true).Filterable(true).Groupable(true);
columns.Bound(o => o.Sequence).Sortable(true).Filterable(false).Groupable(false);
columns.Bound(o => o.TemplateType).Sortable(true).Filterable(true).Groupable(true);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Groupable()
.Reorderable(reorder => reorder.Columns(true))
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.ID);
model.Field(p => p.ID).Editable(false);
})
.PageSize(20)
.Read(read => read.Action("GetMilestonesJson", "Kendo")))
)
public ActionResult GetMilestonesJson()
{
Milestone viewModel = new Milestone();
viewModel.Milestones = new QuerySvc.QuerySvcClient().GetMilestones(this.xLMContext.Worker, null);
var kendoResult = new DataSourceResult()
{
Data = viewModel.Milestones.Select(p => new { ID = p.ID, Name = p.Name, Sequence = p.Sequence, TemplateType = p.TemplateType }),
Total = viewModel.Milestones.Count()
};
return Json(kendoResult);
}