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
TD elements. This poses a typical problem when we try to fit a table inside a
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.
The data used to illustrate the problem is shown below by placing a
GridView on the page and simply databinding to the available DataSource.
Since there are multiple rows required for each row inside the
GridView, it is obvious we have to set
and add an
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
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
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
and determine the even rows. Apply the required styles to the even rows. Use
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
From the above code, the desired effect is achieved as shown below: