Click here to Skip to main content
13,550,950 members
Click here to Skip to main content
Add your own
alternative version


27 bookmarked
Posted 25 Feb 2007
Licenced CPOL

Formatting TABLE items in a GridView or DataList through declarative syntax

, 25 Feb 2007
Rate this:
Please Sign up or sign in to vote.
The article explores a solution to maintain formatting when using HTML TABLE rows inside ItemTemplate tag for a GridView or a DataList.


When displaying multiple records in a GridView or a DataList the control renders an HTML Table element for the complete control and individual <TR> elements for each row. The format options selected in the Visual Studio Properties window for item, alternate items, etc., are rendered as attributes and styles for the TABLE, TR, and TD elements. This poses a typical problem when we try to fit a table inside a GridView or DataList control's item templates. To illustrate this issue, let us look at a business case.


Say we are building a directory application (like yellow pages) and have records of different companies which have to be displayed in the following format, changing the background color for alternate items.

Business Requirement

The data used to illustrate the problem is shown below by placing a GridView on the page and simply databinding to the available DataSource.

Simple databind


Since there are multiple rows required for each row inside the GridView, it is obvious we have to set AutoGenerateColumns="False" and add an ItemTemplate with TABLE layout to get the desired effect.


Since a table is introduced into each row of the DataView, columns of every table have their own alignment. This problem can be seen with the address line stretching the table in the second row. See the code and results below.


The trick is to remove the <TABLE> tag inside the ItemTemplate. This will carry over the column alignment through all rows of the GridView. But once we do this, the GridView header and alternate items have a problem. The style for the alternate items do not propagate to the inner <TR> elements we have created. The figure below shows the problem.


To overcome this issue, remove the header. Anyhow we are not dealing with individual columns here; if that is the case, we will not even be here! Next determine what to do with the alternate items in the code. In our case, to have a different color for alternate items, use Container.ItemIndex and determine the even rows. Apply the required styles to the even rows. Use Container.ItemIndex for DataList and Contrainer.DisplayIndex for GridView. The final code for GridView is shown below. For DataList, this code is even simpler because you do not need the <Columns> tag and the <asp:TemplateField> tags.


From the above code, the desired effect is achieved as shown below:



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Sriram Chitturi
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

Suggestionme pareshan Pin
Nirmesh Gandhi19-Jan-15 23:02
memberNirmesh Gandhi19-Jan-15 23:02 
QuestionHow do you accomplish this in code behind? Pin
j1mcmahon26-Nov-07 9:14
memberj1mcmahon26-Nov-07 9:14 
QuestionEditItemTemplate Pin
Sameer Goel21-Jun-07 1:08
memberSameer Goel21-Jun-07 1:08 
Generalthank you Pin
tec4382-Mar-07 4:43
membertec4382-Mar-07 4:43 
QuestionWhy not a DataList? Pin
Mike Ellison26-Feb-07 5:19
memberMike Ellison26-Feb-07 5:19 
AnswerDataList also has the same problem. Pls see comment near the end of article. Pin
Sriram Chitturi26-Feb-07 9:23
memberSriram Chitturi26-Feb-07 9:23 
GeneralRe: DataList also has the same problem. Pls see comment near the end of article. Pin
Mike Ellison26-Feb-07 9:51
memberMike Ellison26-Feb-07 9:51 
GeneralRe: DataList also has the same problem. Pls see comment near the end of article. Pin
Sriram Chitturi26-Feb-07 14:15
memberSriram Chitturi26-Feb-07 14:15 
Generalit will be goodif u provide the c# coding clearly Pin
noothiswaroopkumar26-Feb-07 1:03
membernoothiswaroopkumar26-Feb-07 1:03 
AnswerPlease let me know the piece of C# code you did not understand in the article Pin
Sriram Chitturi26-Feb-07 1:58
memberSriram Chitturi26-Feb-07 1:58 
GeneralRe: Please let me know the piece of C# code you did not understand in the article Pin
ag4667727-Feb-07 1:31
memberag4667727-Feb-07 1:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03-2016 | 2.8.180515.1 | Last Updated 25 Feb 2007
Article Copyright 2007 by Sriram Chitturi
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid