I have a grid that is not paging correctly. When I click on next page nothing happens.
Here is my code.
_layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/Site.css")
@Styles.Render("~/Content/kendo/2012.2.710/kendo.common.min.css")
@Styles.Render("~/Content/kendo/2012.2.710/kendo.default.min.css")
@Scripts.Render("~/Scripts/jquery-1.7.1.min.js")
@Scripts.Render("~/Scripts/kendo/2012.2.710/kendo.web.min.js")
@Scripts.Render("~/Scripts/kendo/kendo.aspnetmvc.min.js")
</head>
<body>
<h2>Benchmarks</h2>
<header>
<div id="logindisplay">
Hello, @User.Identity.Name!
</div>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
</ul>
</nav>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
</body>
</html>
@model IEnumerable<Benchmarks.Models.Benchmark>
<script src="~/Scripts/kendo/2012.2.710/kendo.pager.min.js"></script>
@(Html.Kendo().Grid(Model) //The grid will be bound to the Model which is the Products table
.Name("productGrid") //The name of the grid is mandatory. It specifies the "id" attribute of the widget.
.Columns(columns =>
{
columns.Bound(p => p.HydrantNumber);
columns.Bound(p => p.Street1);
columns.Bound(p => p.Street2);
columns.Bound(p => p.Location);
columns.Bound(p => p.Quadrant);
columns.Bound(p => p.Description);
columns.Bound(p => p.Elevation);
columns.Bound(p => p.OrderNumber);
columns.Bound(p => p.RevisionMonth);
columns.Bound(p => p.RevisionYear);
columns.Bound(p => p.Remark);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable(pageable => pageable.PageSizes(true).PageSizes(new int[] {15,20,25}))
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Create(update => update.Action("EditingInline_Create", "Grid"))
.Read(read => read.Action("EditingInline_Read", "Grid"))
.Update(update => update.Action("EditingInline_Update", "Grid"))
.Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
)
)
Here is my code.
_layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/Site.css")
@Styles.Render("~/Content/kendo/2012.2.710/kendo.common.min.css")
@Styles.Render("~/Content/kendo/2012.2.710/kendo.default.min.css")
@Scripts.Render("~/Scripts/jquery-1.7.1.min.js")
@Scripts.Render("~/Scripts/kendo/2012.2.710/kendo.web.min.js")
@Scripts.Render("~/Scripts/kendo/kendo.aspnetmvc.min.js")
</head>
<body>
<h2>Benchmarks</h2>
<header>
<div id="logindisplay">
Hello, @User.Identity.Name!
</div>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
</ul>
</nav>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
</body>
</html>
======================================================
index.cshtml@model IEnumerable<Benchmarks.Models.Benchmark>
<script src="~/Scripts/kendo/2012.2.710/kendo.pager.min.js"></script>
@(Html.Kendo().Grid(Model) //The grid will be bound to the Model which is the Products table
.Name("productGrid") //The name of the grid is mandatory. It specifies the "id" attribute of the widget.
.Columns(columns =>
{
columns.Bound(p => p.HydrantNumber);
columns.Bound(p => p.Street1);
columns.Bound(p => p.Street2);
columns.Bound(p => p.Location);
columns.Bound(p => p.Quadrant);
columns.Bound(p => p.Description);
columns.Bound(p => p.Elevation);
columns.Bound(p => p.OrderNumber);
columns.Bound(p => p.RevisionMonth);
columns.Bound(p => p.RevisionYear);
columns.Bound(p => p.Remark);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable(pageable => pageable.PageSizes(true).PageSizes(new int[] {15,20,25}))
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Create(update => update.Action("EditingInline_Create", "Grid"))
.Read(read => read.Action("EditingInline_Read", "Grid"))
.Update(update => update.Action("EditingInline_Update", "Grid"))
.Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
)
)
1 Answer, 1 is accepted
0
Steve
Top achievements
Rank 1
Rank 1
answered on 27 Sep 2012, 08:40 PM
Ok so how come my pager looks like this?? I understand nobody wants to help but im still having issues with the mvc grid.