How to use Grid.MVC

Grid.Mvc is a component which is help you to  create html table for displaying paging and shorting easily . this can be a download using  nuget package.i will explain step by step how to download and create this grid.

First step

Open nuget package manager console and type Install-Package Grid.Mvc -Version 3.0.0

after that install this make the following changes on your project

• Reference GridMvc.dll - base implementation of Grid.Mvc
• Adds Views/Shared/Grid.cshtml, Views/Shared/GridPager.cshtml - views for grid
• Adds Content/gridmvc.css - default style sheet for the grid
• Adds Scripts/gridmvc.js, Scripts/gridmvc.min.js - Grid.Mvc scripts.

Second step

Before displaying data in grid we have to create model .so we will crate sample model .


namespace Test.Models
{
    public class GridTest
    {
        int id;
        string name;
        string address;

        public int Id
        {
            get
            {
                return id;
            }

            set
            {
                id = value;
            }
        }

        public string Name
        {
            get
            {
                return name;
            }

            set
            {
                name = value;
            }
        }

        public string Address
        {
            get
            {
                return address;
            }

            set
            {
                address = value;
            }
        }
    }

}

Third step
now we will add some data to list using previous crated model.


        private readonly List<GridTest> user = new List<GridTest>()
        {
            new GridTest {Id=1,Name="Priyankara",Address="Gampaha" },
             new GridTest {Id=2,Name="Kasun",Address="Jala" },
             new GridTest {Id=3,Name="Hasintha",Address="Veyangoda" },
             new GridTest {Id=4,Name="Srinath",Address="Kadana" },
             new GridTest {Id=5,Name="Nihal",Address="Gampaha" },
             new GridTest {Id=6,Name="Asanga",Address="Gampaha" }

        };

Forth step 
now we will pass this user list to view .when we pass this we can pass either directly model or viewbag. in my case i will use viewbag to pass data.

        public ActionResult Index()
        {

            ViewBag.Grid = user;         
     
            return View();

        }

Fifth step
now add this code snippet in to index.cshtml.

     @Html.Grid((List<GridTest>)            ViewBag.Grid).Named("InvoiceGrid").Columns(columns =>
   {
       columns.Add(c => c.Id).Titled("Client ID").Filterable(true);
       columns.Add(c => c.Name).Titled("Name").Filterable(true);
       columns.Add(c => c.Address).Titled("Adress").Filterable(true);

       columns.Add()
      .Encoded(false)
      .Sanitized(false)
      .SetWidth(30)
      .RenderValueAs(c => Html.ActionLink("Edit", "Edit", new { id = c.Id }));


       columns.Add()
       .Encoded(false)
       .Sanitized(false)
       .SetWidth(30)
       .RenderValueAs(o => Html.CheckBox("checked", false));


       columns.Add()
        .Encoded(false)
        .Sanitized(false)
        .SetWidth(30)
        .RenderValueAs(x => Html.ActionLink("Delete", "Delete", new { id = x.Id }));

      

   }).WithPaging(3).Sortable(true)

now almost completed the code then run and show it .after you run you can see grid data with paging and shorting


Jkns