WebGrid in ASP.NET MVC

We can define WebGrid as displays 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 and asynchronous updates via AJAX.

The main properties in webgrid are:

    Source – Where your data come from. Usually the model passed by the controller action.

    DefaultSort – Here you can define how the data will be sorted. Just inform the column name here.

    RowsPerPage – Quantity of records that will be shown on table.

    CanPage – Allow the paging.

    CanSort – Allow the sorting by clicking on column title.

 SelectedFieldName-Gets the full name of the query-string field that is used to specify the selected row of the WebGrid instance.

In this article I am explaining how to use WebGrid in asp .net mvc 4 application.First I am going to create a Model  name as Product. 

Product.cs 

public class Product     {         public string Id { get; set; }         public string Name { get; set; }         public string Description { get; set; }         public long Quantity { get; set; }     }

I am using  Razor view engine and My  InventoryController contain following action: 

InventoryController.cs

public ActionResult WebgridSample()         {        ObservableCollection<Product> inventoryList = new    ObservableCollection<Product>();             inventoryList.Add(new Product { Id = "P101", Name = "Computer", Description = "All type of computers", Quantity = 800 });             inventoryList.Add(new Product { Id = "P102", Name = "Laptop", Description = "All models of Laptops", Quantity = 500 });             inventoryList.Add(new Product { Id = "P103", Name = "Camera", Description = "Hd  cameras", Quantity = 300 });             inventoryList.Add(new Product { Id = "P104", Name = "Mobile", Description = "All Smartphones", Quantity = 450 });             inventoryList.Add(new Product { Id = "P105", Name = "Notepad", Description = "All branded of notepads", Quantity = 670 });             inventoryList.Add(new Product { Id = "P106", Name = "Harddisk", Description = "All type of Harddisk", Quantity = 1200 });             inventoryList.Add(new Product { Id = "P107", Name = "PenDrive", Description = "All type of Pendrive", Quantity = 370 });             return View(inventoryList);         }

In my  WebgridSample View I am creating a webgrid and  specify the columns in the call to GetHtml. 

WebgridSample.cshtml:

@{     var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5, selectionFieldName:  "selectedRow",ajaxUpdateContainerId: "gridContent");    grid.Pager(WebGridPagerModes.NextPrevious);}

WebGrid helper allows us to add a class names to style the table, header, footer, row and alternating row elements.

<style type="text/css">         .webGrid { margin: 4px; border-collapse: collapse; width: 500px;  background-color:#FCFCFC;}         .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: #389DF5}     </style>

Adding the columns to grid for specifying the column order  ,name and field to bind.

<div id="gridContent">         @grid.GetHtml(tableStyle: "webGrid",                 headerStyle: "header",                 alternatingRowStyle: "alt",                 selectedRowStyle: "select",                 columns: grid.Columns(                 grid.Column("Id", format: (item) => item.GetSelectLink(item.Id)),                 grid.Column("Name", " Name"),                 grid.Column("Description", "Description", style: "description"),                 grid.Column("Quantity", "Quantity")          )) </div>

For navigating the selected item I used format parameter in Id column. The format parameter of the Column method allows us to customize the rendering of a data item.

grid.Column("Id", format: (item) => item.GetSelectLink(item.Id))

The below code display the selected row in a html code block, and for that I created a instance of the  model Product.

@{     InventoryManagement.Models.Product product = new InventoryManagement.Models.Product();     }           @if (grid.HasSelection)          {              product = (InventoryManagement.Models.Product)grid.Rows[grid.SelectedIndex].Value;              <b>Id</b> @product.Id<br />              <b>Name</b>  @product.Name<br />              <b>Description</b> @product.Description<br />              <b>Quantity</b> @product.Quantity<br />  }

 For avoiding page refresh while pagination we can add ajax  parameter  ajaxUpdateContainerId and wrap the grid markup with a DIV element. Here we can assign the div id as  ajaxUpdateContainerId . 

 ajaxUpdateContainerId: "gridContent"

 Add a reference to jquery .

<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>



If you want to select one item from webgrid and want to show it in a separate page, you can use action link in particular grid column. So when you select the item the selected item will pass to the action which will redirect to the page by retrieving with corresponding record.In mcv we can see @html.ActionLink for redirect to action.
The parameter using in actionlink are linktext,action name,controller name,route value, html arguments.

grid.Column("Detail", format: @<text>@Html.ActionLink("Select", "Submit",                 new { QtId = item.QtId }) </text>),