Grouping data in the ASP.Net GridView

 Presenting a grouped data in the standard GridView is really a tough task to get it to a satisfactory level. If you ever worked in Spreadsheets to group the data, you may have seen that the merge functionality gives a very good presentation for the grouped data


1) As it is already explained in earlier articles several times, I am not going to explain again how to get the data and how to bind the data from database. So please refer to the DataControls section or GridView section for that matter.
2) Northwind database is used for samples, this database can be downloaded from MSDN
3) This sample is to explain how to have this merge functionality using row span attribute of the cell. So it may be a tough task to extend this task to get two or more columns to have this merge functionality.

RowSpan and ColSpan in HTML TD

In HTML TD we can use the COL span to spread a single ...

Read more here:   ASP.Net GridView Group Rows 

LinkButton in a GridView to delete

We can delete a row in a GridView several ways. But I am here to explain how to use a LinkButton to delete a row.  LinkButton is a fantastic control for raising a PostBack at the same time it is very flexible to style and format using style sheets and CSS.

DataBind the GridView

Note:  As it is already explained in earlier articles several times, I am not going to explain again how to get the data and how to bind the data from database. So please refer to the DataControls section or GridView walkthrough section for that matter.
I usually take the Northwind sample database for articles. So in this article I will be using the products table.

Use LinkButton inside a GridView

You can use the LinkButton inside a GridView with the help of TemplateField. Use the ItemTemplate in the TemplateField for displaying the LinkButton. To get the clicked row information in the code behind, LinkButton has two ...

Read more here:   LinkButton GridView 

Freeze GridView Header

Like spreadsheet processors GridView as well has the capability in displaying the data in the tabular format. But unfortunately there is no native support for this freezing functionality. Even worse there is no built in support for GridView scrolling. We need to write our own CSS to obtain scrolling.
I would like to share how this can be achieved with Styles and CSS for the fixed header GridView.

Important Note: Document Type will impact freezing

Document type will be playing a major role in this freezing functionality(fixed header gridview), as changing Document type to ‘strict’ will lead to undesirable effects. So keep it Transactional always

Bring the GridView to scroll first

As I said earlier there is no built in support for scrolling. So to enable scrolling we need to do few things.
1) Add a DIV surrounding the GridView. This is the one which is going to give scrolling to the GridView
2) to enable scr ...

Read more here:   Fixed Header GridView 

GridView Alphabetical Paging in BottomPagerRow

Sometimes the data will be more helpful if presented in a nice and user friendly manner. I have noticed this in the hierarchical GridView which I had explained earlier in previous articles. Like that, this paging also gives an excellent way to group and present the data on the screen. Whenever there is a need of alphabetical lists such as names, products, cities, you may try the Alphabetical Paging.

Wait! There is no built in support for Alphabetical Paging. So there is a need of this article with complete working source code. I have coded this as far as I can explain easily.Look at the screen shots to have a fair idea about how this suppose to work.

1) As it is already explained in earlier articles several times, I am not going to explain again how to get the data and how to bind the data from database. So please refer to the DataControls section or GridView section for that matter ...

Read more here:   GridView Alphabetical Paging 

Calendar in a GridView template

Unlike other controls, calendar is taking too much of space for its usage. In most of the applications calendar will be hidden just after selecting the date. Earlier days in classic asp, we used a popup to load it on demand (sometimes used inline as well).  Here in this sample we are going to use a calendar control inside a GridView’s TemplateField. To make it close to real time, I have added a Textbox and a button to pop the calendar.

Show Hide calendar

As already explained to reduce the space used by calendar, it is easier to toggle visibility using a JavaScript. Since the calendar control is going to be at each row, the respective control’s client ids have to be passed. Otherwise we can not access those controls from JavaScript.

Attach Client Events at RowDataBound

To pass the Client ID’s of all the required controls to JavaScript, the right place is the RowDataBound event. This event will be fired for every ...

Read more here: GridView Calendar 

Hierarchical GridView Using TemplateField

I usually choose a TreeView for this kind of hierarchical data or I choose ASP.Net menu. But there are some situations you may need to have various controls on each node. If this is your case then the Asp.Net Hierarchical GridView is right choice. But wait one moment, there is no   Hierarchical Grid  as we have in Classic VB.

However we can still get a Asp.Net Hierarchical GridView, by using a GridView inside another GridView’s TemplateField. This example I am using a label with ‘+’ (Plus) sign for expanding and a ‘-‘(Minus) sign for collapsing. This is handled by JavaScript. I have used CSS to style the label so the user will click on the (+) and (-) without further instructions.

Controls Used to form Hierarchical GridView

GridView1 : Outer GridView
btnShowHide : Basically a label with javascript click event

Read more here:   Asp.Net Hierarchical GridView 

Filter rows in Asp.Net Ajax GridView

When working in a large amount of data, filtering to get a subset is always essential. So I have written this code. Here I refer filter as filtering records at the application level not at the database level. Usually I put the data in the Viewstate or in session if the data is not too huge. Then apply the filter to get the data based on the filter.

1) As it is already explained in earlier articles, I am not going to explain again how to get the data and bind the data from database. So please refer to the DataControls section or GridView section for that matter.

2) Since this article is based on Ajax, without Ajax control kit the sample can not be even compiled. So please get the Ajax tool kit from the ASP.Net website.

DataView and RowFilter

As we use DataView for various DataBinding, I have opted to use DataView‘s RowFilter property over the DataTable‘s Select method. I don’t ...

Read more here:   Asp.Net Ajax GridView Filter 

GridView RowCommand

Unlike edit, delete, and Add there might be several functionalities we may need to perform on GridView or a specific GridView row. For custom tasks, don’t use the native command names as edit, update, cancel as GridView uses natively but we need to use custom command names in GridView RowCommand .

Accessing the Row for GridView RowCommand

Whenever there is a need of custom task for a specific row, we need that specific row. We can use the Event arguments to fetch the row using e.Row. Once the row in on hand, we can use the row to find the controls contained in that row using e.Row.FindControl ().

Getting Data Source Values for the row

To fetch the values in the DataSource (mostly DataTable), use e.Row.DataItem and issue an eval with the column name to get it. For e.g. DataBinder.Eval(e.Item.DataItem, "ColumnName")

Identify the right GridView RowCommand for right task

The command can be defined in the button in t ...

Using a DropDownList inside a GridView

Dropdowns are one of the most used basic controls just like a textbox. This article explains how to have a DropDownList inside a GridView. Basically the dropdowns have the AutoPostBack property to have a PostBack while selecting items. This can happen in GridView also, and can be implemented like in this article easily. But the understanding of SelectedIndexChanged plays an important role in writing applications with DropDownLists having PostBack.

DropDownList in Markup

Dropdown can be added to the mark up with the help of template columns. I usally keep the dropdown in the EditItemTemplate. But for easy explaining and easy understandings, I am keeping it under ItemTemplate.

Bind the DropDownList

As the DropDownList is inside the ItemTemplate, We have to get that using e.Row.FindControl(). This will give the control, and we can get the Data Source using a SQL Client and assign to the DataSo ...

GridView Edit Delete using SqlDataSource

SqlDataSource is a data control can be used to manage data such as edit, delete. With this article you may find it easier to maintain the data with SqlDataSource. This code doesn’t need any code behind code to edit or delete. And moreover wizards can be used to generate the Markup.

CommandField for enabling GridView Edit

For firing edit and delete commands we need a command button on each row. With the help of GridView CommandField it is much easier to get the command buttons on each row. The following two properties will bring the edit and delete button to the GridView.
ShowEditButton="True" will show the edit button. ShowDeleteButton="True" will show the delete button. 

You may leave the Auto Generate columns to true, but I liked to use the BoundField to define the columns to be shown. If you wish to make any column non editable then the ReadOnly="True" prevent bring the column ...

Read more here:   GridView Edit Using SqlDataSource 

Display Serial Number in GridView using RowIndex

Some times we need to display a Serial Number in a GridView  to identify each row. We can use RowIndex property of the GridView row to show serial number column.

There are few ways to do this. The method i explained in source code will work with any datasource. Thats why i purposely used a collection based datasource. If you are using DataTable you can do like this
<asp:Label ID="lblNo" runat="server"  ...

ASP.Net GridView Sorting using DataView and DataTable

Even though Sorting is available in the GridView, still a few things should be configured and coded for it to start working.The first configuration is AllowSorting = true, after this only the GridView knows that the sorting is required. Then SortExpression has to be specified as the respective column name for the column sorting is to respond. By configuring this we are saying the GridView to sort the column with the values for this field from the DataTable

GridView.Sorting Event

After configuring the above when you click on the sort link in the header of the respective column, an exception will be thrown that the Sorting event is not handled. In this event we need to sort the data using a DataView. DataView has a Sort which we can use to pass the expression.

Switch Ascending and descending


GridView Total using DataTable Compute Method

There are various way to calculate total in tht GridView Footer. But this method is for simple and easiest way to calculate. This method may not be useful if your total calculation involves very tedius and complex logic.

DataTable.Compute() Function

Actually compute can be used for aggregate functions such as Sum, Count, and Average etc... And you can specify filters as well. If you are calculating the number of products under a category, you can give the category filter in the filter criteria which is second parameter of the compute method

Improve Compute method along with expression

Expression can be a sum, multiplication etc... . If you have quantity and price as two columns, then expression can ...

Adding HyperLink column to GridView at runtime dynamically

Even there are various ways to add HyperLink to GridView, the following way I am going to explain is very clean and reusable. However may not simple if it is used in only one place. While considering its reusablity. It actually reduces a lot of duplication inside the code.

Adding HyperLink Column at design time to the GridView

While adding HyperLink column at design time is easier and you can attach attributes to the HyperLink directly at markup. There are times HyperLink has to be created at runtime. If this is the case then this article is written focused on that. However the following is the sample of “Adding HyperLink Column at design time

<asp:TemplateField >
add Hyperli ...

Freeze ASP.Net GridView Columns and Header with CSS

When working in large spreadsheet in excel I used to freeze the columns(including First Column) and rows. This is very useful when you want to compare the values in one column with other column values. And regarding header I always freeze it otherwise it is very hard to find what the values are referring to.

Like spreadsheet the GridView as well displaying the data in the tabular format. But unfortunately there is no support for this freezing functionality. What i dislike is, there is no built in support for GridView scrolling. we need to write our own CSS to control this.

So I started looking for an alternative while I found some and I wanted to derive a custom container control which can hold a GridView inside and you can specify the columns to freeze. But the developmen ...

Dynamic GridView Checkbox Column at runtime

Even there are various ways to add check boxes to the GridView, the following way I am going to explain is very neat and may not simple if it is used in only one place but consider reusing it. It actually reduces a lot of duplication inside the code.

Adding Checkbox Column at runtime dynamically to GridView

While adding CheckboxColumn at runtime, we need to consider following the same hierarchy as the TemplateField. So we must create a TemplateField.  Add respective templates such as ItemTemplate, EditItemTemplate, and HeaderTemplate. In our case we are trying only ItemTemplate for making explanations simpler. And adding these objects should happen at Form.Init Event.

After adding these objects, the main object is our custom template which is CheckBoxTemplate. This cla ...

GridView Custom Paging Using ObjectDataSource

Have you ever wondered how to present some large data (more than 10,000 rows) in the GridView? That’s where the GridView Paging comes to be helpful. Actually Paging enables the user to show data page by page. Tough GridView and normal DataTable Binding allows paging, natively DataTable binding will not allow fetching page by page out of the box.

GridView Custom Paging can be enabled

As I said earlier the GridView Custom Paging cannot be enabled out of the box, but there are other ways to implement it. ObjectDataSource can be used to fetch data page by page directly from DB.  This ObjectDataSource contains various properties and methods to invoke a custom TableAdapter there we can actually get the inputs from the GridView and fetch the rows respectively.

Differences between Native Paging And Gridview Custom Paging

You will know the difference whe ...

GridView Paging Using ASP.Net

Whenever we Load large amount of data into a gridview, depends on the hardware and network bandwidth it takes time to load the data completely into a web page. To avoid loading everything into the webpage in one go, we can show the entire data page by page known as GridView Paging . So that when the first time the grid is loaded, only the first page will be loaded with data. The no of records or no of rows will be loaded based on the configuration.

Enable pagination on GridView

As it says you need to specify the EnablePaging property to True to get GridView Paging . Once you have enabled using the  AllowPaging="true", The first page with 10(default value for GridView Paging ) rows will be displayed. And in the bottom(default position) you may see the page numbers as links. When you click on the numbers respective page has to be navigated with their ...

Read more here:   Asp .Net GridView Paging 

Asp.Net Gridview Css Templates

This article doesnot explain the "Hello World to Gridview". If you are looking for that, you may look for Simple GridView walkthrough in the ASP.Net 2.0 section. This articles main objective is to explain how to use a Gridview in real time applications. When a grid is used for managing data(create, update delete) just using the DataBound columns will not be of much help. In this case, we need to use the Templated Columns. This allows greater flexiblity in terms of using any controls for viewing and for editing. This allows to add validation controls to validate each action on the current row. But the same code is being re-used for this example for consistancy reasons.

TemplateField, ItemTemplate, EditItemTemplate

TemplateField object is used in place of the bound column. We are going to replace the bound column with TemplateField and its respective templates ItemTemplate and EditItemTe ...

ASP .Net GridView Walkthrough

In order to load the data from SQL server database we need to use ADO ..Net objects. One of the best object is SQLClient. So We may include the following namespaces in imports section to call the objects without specifying fully qualified names, If these name spaces are not used. We may need to call the classes as System.Data.Dataset but since we are going to import the Import System.Data we can simply call as Dim dsGrid As dataset

Connect To DataBase

Import System.Data
Import System.Data.SqlClient

Next step is to Get the connection to the database. Since we have already decided to use the SqlClient. We have to use SqlConnection to open a ...

Spam Bot Trap


Select Theme