GridView Tips and Tricks using ASP.NET - Part II
The GridView control is quiet a handy control and is the most commonly used control when building an ASP.NET site. The more you work with it, the more you realize how powerful it can be while presenting data.
In one of our previous articles GridView Tips and Tricks using ASP.NET 2.0, we discussed ten of the most frequently asked questions about the GridView control. This article adds ten more tips and tricks to our collection, related to the GridView control.
For this article, we would be using the following template to populate the GridView.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>GridView Tips and Tricks Part 2</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CategoryID"
DataSourceID="SqlDataSource1" ShowFooter="true" AllowPaging="True" AllowSorting="True"
PageSize="5" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="CategoryID" InsertVisible="False" SortExpression="CategoryID">
<ItemTemplate>
<asp:Label ID="lblCategoryID" runat="server" Text='<%# Bind("CategoryID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CategoryName" SortExpression="CategoryName">
<EditItemTemplate>
<asp:TextBox ID="txtCategoryName" runat="server" Text='<%# Bind("CategoryName") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblCategoryName" runat="server" Text='<%# Bind("CategoryName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Description" SortExpression="Description">
<EditItemTemplate>
<asp:TextBox ID="txtDesc" runat="server" Text='<%# Bind("Description") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblDesc" runat="server" Text='<%# Bind("Description") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=SUPROTIM;Initial Catalog=Northwind;Integrated Security=True"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]"
UpdateCommand="UPDATE [Categories] SET [CategoryName] = @CategoryName, [Description] = @Description WHERE [CategoryID] = @CategoryID"/>
</div>
</form>
</body>
</html>
The web.config holding the connection will look similar to the following:
<configuration>
<appSettings/>
<connectionStrings>
<add name="NorthwindConnectionString" connectionString="Data Source =(local);Integrated Security = SSPI; Initial Catalog=Northwind;"/>
</connectionStrings>
...
</configuration>
Tip 1: Enable Disable Controls inside a GridView
There are at times when you have to disable controls on some rows, when a certain condition is satisfied. In this snippet, we will see how to disable editing for rows that have the CategoryName as ‘Confections’. Use the following code:
C#
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
if (e.Row.DataItem != null)
{
Label lblControl = (Label)e.Row.Cells[2].FindControl("lblCategoryName");
if(lblControl.Text == "Confections")
{
e.Row.Cells[0].Enabled = false;
}
}
}
}
VB.NET
Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
If Not e.Row.DataItem Is Nothing Then
Dim lblControl As Label = CType(e.Row.Cells(2).FindControl("lblCategoryName"), Label)
If lblControl.Text = "Confections" Then
e.Row.Cells(0).Enabled = False
End If
End If
End If
End Sub
Tip 2: Adding Arrows for Sorting Columns in a GridView
When you are sorting the columns in a GridView, it would be a nice to have feature, to display arrows which depict either an ascending or descending sort as shown below. Create a folder called ‘images’ and add two small images called up.gif and down.gif:
C#
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
foreach (TableCell cell in e.Row.Cells)
{
if (cell.HasControls())
{
LinkButton btnSort = (LinkButton)cell.Controls[0];
Image image = new Image();
if (btnSort.Text == GridView1.SortExpression)
{
if (GridView1.SortDirection == SortDirection.Ascending)
{
image.ImageUrl = "images/up.gif"; }
else
{
image.ImageUrl = "images/down.gif";
}
}
cell.Controls.Add(image);
}
}
VB.NET
Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.Header Then
For Each cell As TableCell In e.Row.Cells
If cell.HasControls() Then
Dim btnSort As LinkButton = CType(cell.Controls(0), LinkButton)
Dim image As Image = New Image()
If btnSort.Text = GridView1.SortExpression Then
If GridView1.SortDirection = SortDirection.Ascending Then
image.ImageUrl = "images/up.gif"
Else
image.ImageUrl = "images/down.gif"
End If
End If
cell.Controls.Add(image)
End If
Next cell
Tip 3: How to Add a Row Number to the Gridview
There are a couple of ways to do this. However I will share a very handy tip that was shared by XIII in the asp.net forums.
Just add the following tags to your <columns> section of your GridView
<asp:TemplateField>
<ItemTemplate>
<%# Container.DataItemIndex + 1 %>
</ItemTemplate>
</asp:TemplateField>
Tip 4: How to programmatically hide a column in the GridView
There are two conditions to be checked in the Page_Load to hide a columns in the GridView, let us say the 3rd column:
If ‘AutoGenerateColumns’ = True on the GridView
C#
GridView1.HeaderRow.Cells[2].Visible = false;
foreach (GridViewRow gvr in GridView1.Rows)
{
gvr.Cells[2].Visible = false;
}
VB.NET
GridView1.HeaderRow.Cells(2).Visible = False
For Each gvr As GridViewRow In GridView1.Rows
gvr.Cells(2).Visible = False
Next gvr
If ‘AutoGenerateColumns’ = False on the GridView
C#
GridView1.Columns[2].Visible = false;
VB.NET
GridView1.Columns(2).Visible = False
Tip 5: Handling Concurrency Issues in GridView
If you are using the SqlDataSource (or ObjectDataSource), you can use both the SqlDataSource.ConflictDetection and OldValuesParameterFormatString property to handle concurrency issues. These two properties together control how to perform updates and delete operations when the underlying data source changes, while the operation is being carried out. The original and modified versions of each column can be tracked using the two properties.
Read more about it over here.
Tip 6: How to transfer multiple values from GridView to a different page
Check my article over here:
Tip 7: Displaying Empty Data in a GridView
When there are no results returned from the GridView control’s data source, the short and simple way of displaying a message to the user, is to use the GridView’s EmptyDataText property.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CategoryID"
DataSourceID="SqlDataSource1" EmptyDataText="No data available"
ShowFooter="true" AllowPaging="True" AllowSorting="True"
PageSize="5" OnRowDataBound="GridView1_RowDataBound">
Tip 8: Displaying an Image in case of Empty Data in a GridView
As an alternative to using the EmptyDataText property, if you need to display an image or any HTML/ASP.NET control, you can use the EmptyDataTemplate. In this snippet below, we are using the image control in the <EmptyDataTemplate> to display an image.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CategoryID"
DataSourceID="SqlDataSource1" ShowFooter="true" AllowPaging="True" AllowSorting="True"
PageSize="5" OnRowDataBound="GridView1_RowDataBound">
<EmptyDataTemplate>
<asp:Image id="imgNoData"
ImageUrl="~/images/NoDataFound.jpg"
AlternateText="No data found"
runat="server"/>
</EmptyDataTemplate>
Tip 9: Highlight a Row in GridView without a PostBack
Check my article on the same over here:
Tip 10: How to Bind a List<> to a GridView
Let us see how to bind a List<> to a GridView. We assume that the ‘AutoGenerateColumns’ = True. We will create a class called Employees and bind it to the GridView with the help of a List<>.
Create a class called ‘Employees’
C#
public class Employee
{
private string enm;
private int ageofemp;
private string department;
public string EName
{
get
{
return enm;
}
set
{
enm = value;
}
}
public int Age
{
get
{
return ageofemp;
}
set
{
ageofemp = value;
}
}
public string Dept
{
get
{
return department;
}
set
{
department = value;
}
}
public Employee(string ename, int age, string dept)
{
this.enm = ename;
this.ageofemp = age;
this.department = dept;
}
}
VB.NET
Public Class Employee
Private enm As String
Private ageofemp As Integer
Private department As String
Public Property EName() As String
Get
Return enm
End Get
Set(ByVal value As String)
enm = value
End Set
End Property
Public Property Age() As Integer
Get
Return ageofemp
End Get
Set(ByVal value As Integer)
ageofemp = value
End Set
End Property
Public Property Dept() As String
Get
Return department
End Get
Set(ByVal value As String)
department = value
End Set
End Property
Public Sub New(ByVal ename As String, ByVal age As Integer, ByVal dept As String)
Me.enm = ename
Me.ageofemp = age
Me.department = dept
End Sub
End Class
Bind the ‘Employee’ data to the GridView using a List<>
C#
protected void Page_Load(object sender, EventArgs e)
{
System.Collections.Generic.List<Employee> emp = new System.Collections.Generic.List<Employee>();
emp.Add(new Employee("Jack", 22, "Marketing"));
emp.Add(new Employee("Anna", 28, "Advertising"));
emp.Add(new Employee("Linra", 23, "Advertising"));
emp.Add(new Employee("Jacob", 44, "Production"));
emp.Add(new Employee("Zinger", 28, "PPC"));
GridView1.DataSource = emp;
GridView1.DataBind();
}
VB.NET
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
Dim emp As System.Collections.Generic.List(Of Employee) = New System.Collections.Generic.List(Of Employee)()
emp.Add(New Employee("Jack", 22, "Marketing"))
emp.Add(New Employee("Anna", 28, "Advertising"))
emp.Add(New Employee("Linra", 23, "Advertising"))
emp.Add(New Employee("Jacob", 44, "Production"))
emp.Add(New Employee("Zinger", 28, "PPC"))
GridView1.DataSource = emp
GridView1.DataBind()
End Sub
Well that was a quick overview of some of the most frequently used features of the GridView control. I hope you liked the article and I thank you for viewing it.
