Oct 19 2006

asp:repeater and css table gallery

Posted by admin under Controls

Ever seen CSS Table Gallery before?

Just found it yesterday and since I am pretty useless when it comes to design I bookmarked it in a hurry and then found that this is also the perfect reason as to why you shouldn't use asp.net dataview or datagrid for table rendering. Use repeaters - and you will have the control to generate the type of HTML expected by those lovely designs.

Lets start by creating the table - we will aim for a result (without styles at all) like this:

Not to pretty - but remember - we are only doing the serverside  at the moment so it SHOULD not look any better. BTW: I am using the emplyees table in database NORTHWIND (SQL Server). 

Now the code, ASPX first:



        <asp:Repeater ID="rptTable" runat="server" OnItemDataBound="rptTable_ItemDataBound">
            <HeaderTemplate>
		        <div id="itsthetable">
		        <table summary="Employee list" >
			        <caption><asp:Literal ID="litHeader" runat="server">Employees</asp:Literal></caption>
			        <thead>
				        <tr>
					        <th scope="col">Employee ID</th>
					        <th scope="col">Last Name</th>
					        <th scope="col">First Name</th>
					        <th scope="col">Title</th>
					        <th scope="col">Title of courtesy</th>
					        <th scope="col">Hire date</th>
					        <th scope="col">Birth date</th>
				        </tr>
			        </thead>	
			        <tbody>
            </HeaderTemplate>
            <ItemTemplate>
               <tr >
                    <th scope="row"><asp:Label ID="lblEmpId" runat="server"></asp:Label></th>
                    <td><asp:Label ID="lblLastName" runat="server"></asp:Label></td>
                    <td><asp:Label ID="lblFirstName" runat="server"></asp:Label></td>
                    <td><asp:Label ID="lblTitle" runat="server"></asp:Label></td>
                    <td><asp:Label ID="lblTitleOfCourtesy" runat="server"></asp:Label></td>
                    <td><asp:Label ID="lblHireDate" runat="server"></asp:Label></td>
                    <td><asp:Label ID="lblBirthDate" runat="server"></asp:Label></td>
		        </tr>
            </ItemTemplate>
            <AlternatingItemTemplate>
               <tr >
                    <th scope="row"><asp:Label ID="lblEmpId" runat="server"></asp:Label></th>
                    <td><asp:Label ID="lblLastName" runat="server"></asp:Label></td>
                    <td><asp:Label ID="lblFirstName" runat="server"></asp:Label></td>
                    <td><asp:Label ID="lblTitle" runat="server"></asp:Label></td>
                    <td><asp:Label ID="lblTitleOfCourtesy" runat="server"></asp:Label></td>
                    <td><asp:Label ID="lblHireDate" runat="server"></asp:Label></td>
                    <td><asp:Label ID="lblBirthDate" runat="server"></asp:Label></td>
		        </tr>
            </AlternatingItemTemplate>
            <FooterTemplate>
           			<tfoot>
				        <tr>
					        <th scope="row">Total</th>
					        <td colspan="6"><asp:Label ID="lblTotal" runat="server"></asp:Label></td>
				        </tr>
			        </tfoot>
					</tbody>		
		    </table>
		    </div>
			
            </FooterTemplate>
        </asp:Repeater>

So we are creating a repeater which will let us generate a table looking the way the css:es would like them to be.

And code behind - Page_Load:



rptTable.DataSource = Microsoft.ApplicationBlocks.Data.SqlHelper.ExecuteDataset("Server=(local);Database=northwind;User ID=sa;Password=whatever;Trusted_Connection=False",
             CommandType.Text, "select * from employees").Tables[0];
            
rptTable.DataBind();
...

And the ItemDataBound event:



    protected void rptTable_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Footer)
        {
            DataTable dt = rptTable.DataSource as DataTable;
            Label lblTotal = e.Item.FindControl("lblTotal") as Label;
            lblTotal.Text = dt.Rows.Count.ToString();
        }
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            DataRowView oRow = e.Item.DataItem as DataRowView;
            Label lblEmpId = e.Item.FindControl("lblEmpId") as Label;
            lblEmpId.Text = oRow["employeeid"].ToString();

            Label lblLastName = e.Item.FindControl("lblLastName") as Label;
            lblLastName.Text = oRow["lastname"].ToString();

            Label lblFirstName = e.Item.FindControl("lblFirstName") as Label;
            lblFirstName.Text = oRow["firstname"].ToString();

            Label lblTitle = e.Item.FindControl("lblTitle") as Label;
            lblTitle.Text = oRow["title"].ToString();

            Label lblTitleOfCourtesy = e.Item.FindControl("lblTitleOfCourtesy") as Label;
            lblTitleOfCourtesy.Text = oRow["TitleOfCourtesy"].ToString();

            Label lblHireDate = e.Item.FindControl("lblHireDate") as Label;
            lblHireDate.Text = Convert.ToDateTime(oRow["hiredate"]).ToShortDateString();

            Label lblBirthDate = e.Item.FindControl("lblBirthDate") as Label;
            lblBirthDate.Text = Convert.ToDateTime(oRow["BirthDate"]).ToShortDateString();

        }
    }

 Now - we just add this technique for dynamically selecting a CSS

 And the result look like this:

 

or when selecting another CSS:

Now just download the attached solution, change the database connection string - and download even more CSS files from CSS Table Gallery  and play on!

 And don't miss Part 2 where we add odd rows and mouse hovering.