When working with large amounts of data in an ASP.NET web application, it is often necessary to display this data in a table format for easy viewing. The GridView control is a popular choice for this, as it allows for easy sorting and pagination of data. However, when using a custom data source, such as a SQL query or a custom collection, sorting the columns can be a bit trickier. In this article, we will explore how to sort columns in an ASP.NET GridView with a custom data source.
To begin with, let's create a simple GridView control on our web page. We will use a custom data source to populate this grid, so we need to set the DataSource property to our custom data source. For the sake of this article, let's use a custom collection named "EmployeeCollection" which contains information about employees in a company. Our GridView will have columns for Employee ID, Name, Department, and Salary. The code for our GridView will look like this:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="EmployeeCollection">
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" SortExpression="EmployeeID" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="Department" HeaderText="Department" SortExpression="Department" />
<asp:BoundField DataField="Salary" HeaderText="Salary" SortExpression="Salary" />
</Columns>
</asp:GridView>
Next, we need to define our custom data source, the EmployeeCollection, in the code-behind. This collection will contain a list of Employee objects, each with properties for EmployeeID, Name, Department, and Salary. We will also populate this collection with some dummy data for demonstration purposes.
public class Employee
{
public int EmployeeID { get; set; }
public string Name { get; set; }
public string Department { get; set; }
public double Salary { get; set; }
}
public class EmployeeCollection : List<Employee>, IDataSource
{
public EmployeeCollection()
{
// Populate the collection with dummy data
this.Add(new Employee() { EmployeeID = 1, Name = "John Smith", Department = "Marketing", Salary = 50000 });
this.Add(new Employee() { EmployeeID = 2, Name = "Jane Doe", Department = "Sales", Salary = 60000 });
this.Add(new Employee() { EmployeeID = 3, Name = "Tom Johnson", Department = "IT", Salary = 70000 });
}
public event EventHandler DataSourceChanged;
public void RaiseDataSourceChangedEvent(EventArgs e)
{
if (DataSourceChanged != null)
{
DataSourceChanged(this, e);
}
}
public System.Collections.ICollection GetView(System.Web.UI.DataSourceSelectArguments selectArguments)
{
// Return the collection to the GridView for binding
return this;
}
}
Now that we have our GridView and custom data source set up, we can work on sorting the columns. By default, the BoundField columns in the GridView are not sortable when using a custom data source. To enable sorting, we need to handle the Sorting event of the GridView and implement the sorting logic ourselves. The Sorting event is raised when the user clicks on a column header to sort the data. In our case, we will use a simple switch statement to determine which column was clicked and then call the Sort method on our custom collection, passing in the appropriate property to sort by.
protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
{
EmployeeCollection employeeCollection = (EmployeeCollection)GridView1.DataSource;
switch (e.SortExpression)
{
case "EmployeeID":
employeeCollection.Sort((x, y) => x.EmployeeID.CompareTo(y.EmployeeID));
break;
case "Name":
employeeCollection.Sort((x, y) => x.Name.CompareTo(y.Name));
break;
case "Department":
employeeCollection.Sort((x, y) => x.Department.CompareTo(y.Department));
break;
case "Salary":
employeeCollection.Sort((x, y) => x.Salary.CompareTo(y.Salary));
break;
}
// Rebind the gridview with the sorted data
GridView1.DataSource = employeeCollection;
GridView1.DataBind();
}
And that's it! We now have a fully functional GridView with sorting capabilities using a custom data source. You can also add pagination to the GridView by setting the AllowPaging property to true and specifying the number of items per page. This will create a pager at the bottom of the GridView, allowing the user to navigate through the pages.
In conclusion, sorting columns in an ASP.NET GridView with a custom data source
