Some More 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 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. [Update: The 3rd part of the GridView Tips and Tricks can be found over here: For this article, we would be using the following template to populate the GridView.

The web.config holding the connection will look similar to the following: ... 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 section of your GridView <%# Container.DataItemIndex + 1 %> 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: 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 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: http://www.dotnetcurry.com/ShowArticle.aspx?ID=147 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. Note: You can also add style to the EmptyDataText by using the EmptyDataRowStyle property. 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 to display an image. Some More 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. [Update: The 3rd part of the GridView Tips and Tricks can be found over here: GridView Tips and Tricks using ASP.NET - Part III ] For this article, we would be using the following template to populate the GridView.

The web.config holding the connection will look similar to the following: ... 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 section of your GridView <%# Container.DataItemIndex + 1 %> 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: http://www.dotnetcurry.com/ShowArticle.aspx?ID=147 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. Note: You can also add style to the EmptyDataText by using the EmptyDataRowStyle property. 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 to display an image. Tip 9: Highlight a Row in GridView without a PostBack Check my article on the same over here: http://www.dotnetcurry.com/ShowArticle.aspx?ID=123 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 emp = newSystem.Collections.Generic.List(); 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) = NewSystem.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. If you liked the article, Subscribe to my RSS Feed or Subscribe Via Email