HOW TO USE WEBGRID SHORING AND PAGING IN MVC

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
Mvc  Mvc3  Mvc2  Mvc4  Mvc5 
 925  View(s)
Ratings:
Rate this:
I want  to use   shoring and  paging  in mvc How to use this Please Help me.
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to use webGrid shoring and paging in mvc

    We can define WebGrid to display data on a web page using an HTML table element. It renders tabular data in a very simple manner with support for custom formatting of columns, paging, sorting.

    The main properties in WebGrid are:

    • Source – Where your data comes from. Usually the model passed by the controller action.
    • DefaultSort – Here you can define how the data will be sorted. Just provide the column name here.
    • RowsPerPage – Number of records that will be shown on table.
    • CanPage – Allows paging.
    • CanSort – Allows sorting by clicking on column title.

    Index.cshtml

    @model IList<ForumMVC.Employee>
    @{
        ViewBag.Title = "Index";
    }
    @{
        var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5,
        selectionFieldName: "selectedRow",ajaxUpdateContainerId: "gridContent");
            grid.Pager(WebGridPagerModes.NextPrevious);}

    <h1>Employee List </h1>
     
    <div id="gridContent">
        @grid.GetHtml(tableStyle: "webGrid",
                headerStyle: "header",
                alternatingRowStyle: "alt",
                selectedRowStyle: "select",
                columns: grid.Columns(
                grid.Column("Emp_ID", "Emp_ID"),
                grid.Column("Emp_Name", " Emp_Name"),
                grid.Column("Emp_Sal", "Emp_Sal", style: "Emp_Sal"),
                grid.Column("Location", "Location")
         ))
     
    </div>
    <style type="text/css">
        .webGrid { margin: 4px; border-collapse: collapse; width: 500px;  background-color:#B4CFC3;}
        .header { background-color: #C1D4E6; font-weight: bold; color: #FFF; }
        .webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
        .alt { background-color: #E4E9F5; color: #000; }
        .gridHead a:hover {text-decoration:underline;}
        .description { width:auto}
        .select{background-color: #71857C}
    </style>

    HomeController

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using ForumMVC;
    using System.Data.Entity;
    namespace ForumMVC.Controllers
    {
        public class HomeController : Controller
        {
            forumEntitiesa db = new forumEntitiesa();
            public ActionResult Index()
            {
                List<Employee> Emplst = db.Employee.ToList();
                return View(Emplst);
            }
        }
    }

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!