using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcApplication4.Models { public class Person { public int id { get; set; } public string name { get; set; } public int age { get; set; } public List<Person> GetPersons() { return new List<Person>() { new Person() { id=1, name="Andre", age=10} ,new Person() { id=2, name="Bennie", age=20} ,new Person() { id=3, name="Roel", age=30} ,new Person() { id=4, name="Jeroen", age=40} ,new Person() { id=5, name="Arjan", age=50} ,new Person() { id=6, name="PietJan", age=60} ,new Person() { id=7, name="Alex", age=70} ,new Person() { id=8, name="Wim", age=80} ,new Person() { id=9, name="Jan", age=90} ,new Person() { id=10, name="Coby", age=100} ,new Person() { id=11, name="Marjan", age=110} }; } } }
See the result:
Now let’s disable paging by setting the canPage property to false in the grid initialization:
@model IEnumerable<MvcApplicationDemo.Models.Person> @{ ViewBag.Title = "Index"; var grid = new WebGrid(source: Model, canSort: true, canPage: false); } <h2>Index</h2> <p> @Html.ActionLink("Create New", "Create") </p> @grid.GetHtml(columns: grid.Columns( grid.Column(header: "", style: "text-align-center", format: (item) => new HtmlString(Html.ActionLink("Edit", "Edit", new { id = item.id }).ToString() + " | " + Html.ActionLink("Details", "Details", new { id = item.id }).ToString() + " | " + Html.ActionLink("Delete", "Delete", new { id = item.id }).ToString())), grid.Column("name"), grid.Column("age") )) @{ if (!string.IsNullOrWhiteSpace(grid.SortColumn)) { <script type="text/javascript"> $('thead > tr > th > a[href*="sort=@grid.SortColumn"]').parent().append('@(grid.SortDirection == SortDirection.Ascending ? "^" : "v")'); </script> } }
And paging is gone:
Now we set the canPage property back to true and set the property pagesize to 3:
var grid = new WebGrid(source: Model, canSort: true, canPage: true, rowsPerPage: 3);
Try sorting the grid and see the paging and sorting work well together.
We have some other properties that can become handy: TotalRowCount and PageCount.
Add the following to your index.cshtml:
PageCount:@Html.Encode(grid.PageCount) <br /> TotalRowCount:@Html.Encode(grid.TotalRowCount)