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



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 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!

The cost of enterprise mobility solutions said...

its a interesting programing... Nice article

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.