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

image

Read some GridView Tips and Tricks over here

3 comments:

  1. PhillipsNovember 11, 2010 at 8:36 AM

    awesome article. this is something we have always experimented and never found a complete solution. I will pass this to my team! Many thanks!

    ReplyDelete
  2. The cost of enterprise mobility solutionsNovember 12, 2010 at 2:29 AM

    its a interesting programing... Nice article

    ReplyDelete
  3. asp.net ecommerce developmentNovember 17, 2010 at 9:24 PM

    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.

    ReplyDelete