Bind ASP.NET GridView to a Custom Object or Collection with Paging and Sorting

I find a lot of users asking how to bind a GridView to a Custom Class with Paging and Sorting enabled. Here’s some sample code that shows that:

MarkUp

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Bind GridView to Custom Class by DevCurry.com</title>
</head>
<body>
<form id="form1" runat="server">
<div>
 <asp:GridView ID="gvCustom" runat="server" AutoGenerateColumns="false"
        AllowPaging="true" PageSize="5" OnPageIndexChanging="gvPaging">
      <Columns>
        <asp:BoundField DataField="EmpID" HeaderText="EmployeeID" />
        <asp:BoundField DataField="EmpFName" HeaderText="FirstName" />
        <asp:BoundField DataField="EmpLName" HeaderText="LastName" />
        <asp:BoundField DataField="EmpAge" HeaderText="Age" />
      </Columns>
 </asp:GridView>
</div>
</form>
</body>
</html>

Code Behind

using System;
using System.Collections.Generic;
using System.Web.UI.WebControls;
using System.Data;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        BindEmployees();
    }


    private void BindEmployees()
    {
        // Bind Employees to GridView
        gvCustom.DataSource = GetEmpList();
        gvCustom.DataBind();
    }


    // Method to Populate Employees
    protected List<Employee> GetEmpList()
    {
        List<Employee> empList = new List<Employee>()
        {
            new Employee(1, "Martha", "Bill", 35),
            new Employee(2, "Rajeev", "Singh", 47),
            new Employee(3, "Linda", "Penelope", 42),
            new Employee(4, "Steve", "Hotchner", 36),
            new Employee(5, "Rossi", "Gellar", 55),
            new Employee(6, "Annie", "Prentice", 35)
        };

        return empList;
    }



    // Paging a GridView
    protected void gvPaging(object sender, GridViewPageEventArgs e)
    {
        gvCustom.PageIndex = e.NewPageIndex;
        gvCustom.DataBind();
    }
}


public class Employee
{
    public int EmpID { get; set; }
    public string EmpFName { get; set; }
    public string EmpLName { get; set; }
    public int EmpAge { get; set; }


    // Constructor
    public Employee(int Id, string fName, string lName, int age)
    {
        this.EmpID = Id;
        this.EmpFName = fName;
        this.EmpLName = lName;
        this.EmpAge = age;
    }
}

Note: When binding the GridView to a Custom object or collection, you need to explicitly handle Paging and Sorting events for the GridView, else you will get the error

The GridView fired event PageIndexChanging which wasn't handled

The GridView fired event Sorting which wasn't handled

Sorting is a little tricky here and I would recommend you to read David Fowler’s excellent article to enable sorting on your GridView DataControls 101 Part 2: Why you should love Datasource controls

OUTPUT

Read some GridView Tips and Tricks over here

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

3 comments:

Phillips said...: awesome article. this is something we have always experimented and never found a complete solution. I will pass this to my team! Many thanks!; November 11, 2010 at 8:36 AM
The cost of enterprise mobility solutions said...: its a interesting programing... Nice article; November 12, 2010 at 2:29 AM
asp.net ecommerce development said...: Thanks you very much for this code, I was in search for this since from many days and finally I got it from this post. Now I can implement this in my project.
Thanks! Keep posting.; November 17, 2010 at 9:24 PM