We Keep Coding

How to display data into gridview depending on the data provided?

I'm creating a class schedule viewer that's populating data from the database. I'm using gridview but the way that I've got it is that it just displays each cell in one singlular large column. I want the format of
9 10 11 12 13 14 15 16 17 18
Mon
Tues
Wed
Thurs
Fri
This is how my data is formatted for one cell:
<asp:GridView ID="GridView2" ShowHeader="false" GridLines="None" AutoGenerateColumns="false" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table style="border: 1px solid #A55129; background-color: #FFF7E7">
<tr>
<td style="width: 200px">
<table>
<tr>
<td>
<b>Class Code:</b>
</td>
<td>
<asp:Label ID="lblcode"
runat="server"
Text='<%#Eval("classCode") %>'>
</asp:Label>
</td>
</tr>
<tr>
<td>
<b>Day:</b>
</td>
<td>
<asp:Label ID="lblday"
runat="server"
Text='<%#Eval("day") %>'>
</asp:Label>
</td>
</tr>
<tr>
<td>
<b>Start Period:</b>
</td>
<td>
<asp:Label ID="lblstart"
runat="server"
Text='<%#Eval("periodStart") %>'>
</asp:Label>
</td>
</tr>
<tr>
<td>
<b>End Period:</b>
</td>
<td>
<asp:Label ID="lblend"
runat="server"
Text='<%#Eval("periodEnd") %>'>
</asp:Label>
</td>
</tr>
<tr>
<td>
<b>Teacher:</b>
</td>
<td>
<asp:Label ID="lblteacher"
runat="server"
Text='<%#Eval("teacherName") %>'>
</asp:Label>
</td>
</tr>
</table>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
The above code displays one set of data from the database. But I have hundreds of these so you can imagine that the total format is one very long single column.
Can someone suggest how I can get gridview to display my suggested format and with the data in their respective cells e.g. Geography on Monday, starting at 9, ending at 11 will show up along the Monday row, over the 9 and 10 columns?

Honestly, I am not sure if GridView is the best (or a good) candidate for such a task. I would go with Ajax & Jquery oriented solution but not sure how comfortable you are with them. Here are several ASP.NET projects that might give you an idea:
http://code.daypilot.org/65101/timetable-tutorial-asp-net-c-vb-net
http://code.daypilot.org/34377/shift-scheduling-tutorial-asp-net-sql-server-c-vb-net

Boundfield in a new row

I have a gridview with BoundField columns and I would like to insert a new row specifically for this BoundField.
Is this something that is possible to do?
The code is as follows:
<asp:GridView ID="grdAgreements" runat="server" AutoGenerateColumns="false" Width="100%"
AllowSorting="false" AlternatingRowStyle-BackColor="White"
HeaderStyle-BackColor="White" HeaderStyle-ForeColor="GrayText"
Font-Names="Arial" Font-Size="11" DataKeyNames="AgreementId" OnRowCreated="grdAgreements_RowCreated" >
<rowstyle height="24" />
<Columns>
<asp:BoundField HeaderText="Agreement Number" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" DataField="AgreementNumber" SortExpression="AgreementNumber" ItemStyle-Width="110" ItemStyle-Font-Names="Arial" />
<asp:BoundField HeaderText="Description" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" DataField="Description" SortExpression="Description" ItemStyle-Width="100" ItemStyle-Font-Names="Arial" />
<asp:BoundField HeaderText="Start Date" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" DataField="StartDate" SortExpression="StartDate" ItemStyle-Width="125" ItemStyle-Font-Names="Arial" />
<asp:BoundField HeaderText="End Date" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" DataField="EndDate" SortExpression="EndDate" ItemStyle-Width="200" ItemStyle-Font-Names="Arial" />
<asp:BoundField HeaderText="Site Number" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" DataField="SiteNumber" SortExpression="SiteNumber" ItemStyle-Width="200" ItemStyle-Font-Names="Arial" />
</Columns>
<EmptyDataTemplate>
There are no agreements to display.
</EmptyDataTemplate>
</asp:GridView>
What I would like to happen is that instead of the BoundField I would like to have the SiteNumber databound to a new row that I could stick in a div or panel.
How would I go about doing this?

Let me know if I am not understanding it right but if you want to customize the layout of the field you can use TemplateField instead of BoundField
<asp:TemplateField HeaderText="SiteNumber" SortExpression="SiteNumber">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("SiteNumber") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
But if you are thinking of moving that particular column in to a new row then you will have to look into other databound controls like ListView or Repeater as GV markup isn't that customizable.

As per the usual time constraints I didn't go through and figure out the best way to use the Listview for my needs but I did figure a way to get the layout that I was looking for using styled tables within a TemplateField and ItemTemplate. The following code is what I came up with and hopefully this will help someone else looking for a similar solution.
If time constraints are not on your plate I highly suggest looking further into the Listview control.
P.S. The css I used was a huge PITA to get everything styled perfect but it was definitely worth it IMHO.
And this was all within a GridView BTW
<asp:TemplateField>
<ItemTemplate>
<div class="EquipmentTable1" >
<table >
<tr>
<td>
Customer Equipment
</td>
<td>
Contract
</td>
<td >
Contract Number
</td>
<td>
Modality
</td>
</tr>
<tr>
<td>
<%--TODO link this to the customer equipment record pulled from the services web portal guide part 1 document--%>
<%# Eval("CustomerEquipmentID") %>
</td>
<td >
<%--Link to the agreement page and
pass in the agreement id as a query string to do a lookup of the agreement--%>
<%# Eval("AgreementID") %>
</td>
<td>
<%# Eval("AgreementLineID") %>
</td>
<td>
<%# Eval("ModalityID") %>
</td>
</tr>
</table>
</div>
<div class="EquipmentTable2" >
<table >
<tr>
<td>
Product
</td>
<td >
Model Number
</td>
<td>
Room Number
</td>
<td>
Date Installed
</td>
</tr>
<tr>
<td >
<%# Eval("Product") %>
</td>
<td>
<%# Eval("ModelNumber") %>
</td>
<td>
<%# Eval("RoomNumber") %>
</td>
<td>
<%# Eval("DateInstalled") %>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:TemplateField>

The TargetControlID of 'HoverMenuExtender2' is not valid. A control with ID 'cable' could not be found

When I am applying the column ID into targetconrtolID of Hovermenuextender its not working and error coming is
The TargetControlID of 'HoverMenuExtender2' is not valid. A control with ID 'cable' could not be found.
I need to display my sub menu on the column ending
the code written is here
<cc1:HoverMenuExtender ID="HoverMenuExtender2" runat="server" PopupControlID="ProjectMenu" TargetControlID="cable" PopupPosition="Bottom" >
</cc1:HoverMenuExtender>
<td align="center" style="border: medium solid White" class="style5" id="cable">
<asp:LinkButton ID="lblmenudashboard" runat="server" Font-Bold="False" Font-Underline="False"
ForeColor="white" OnClick="lblmenudashboard_Click">Dashboard</asp:LinkButton>
</td>
<asp:Panel ID="ProjectMenu" runat="server" Visible="true" Width="210px">
<table cellpadding="0" cellspacing="0" class="style8" align="center">
<tr>
<td align="center">
<asp:LinkButton ID="lblsubMenu_Star" runat="server" Font-Bold="False" Font-Underline="False"
ForeColor="white"> Project0</asp:LinkButton>
</td>
</tr>
<tr>
<td align="center">
<asp:LinkButton ID="lblsubMenu_Udaan" runat="server" Font-Bold="False" Font-Underline="False"
ForeColor="white"> Project1</asp:LinkButton>
</td>
</tr>
</table>
</asp:Panel>
I have applied the scriptManager. Also Let me know how can I select that hovermenu so that I can open tab from their itself.

Twitter Bootstrap and ASP.NET GridView

I am having aproblem using Twitter Bootstrap from my ASP.NET application. When I use the table table-striped css class to my asp:GridView control, it treats the Header of the table as a Row.
My GridView
ASP.NET MarkUp
<asp:GridView ID="dgvUsers" runat="server"
CssClass="table table-hover table-striped" GridLines="None"
AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="UserID" HeaderText="ID" Visible="false" />
<asp:BoundField DataField="Username" HeaderText="Username" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" />
</Columns>
<RowStyle CssClass="cursor-pointer" />
</asp:GridView>
Result
<table id="cphMainContent_dgvUsers" class="table table-hover table-striped"
cellspacing="0" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Username</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
</tr>
<tr class="cursor-pointer">
<td>user1</td>
<td>Test</td>
<td>User 1</td>
</tr>
<tr class="cursor-pointer">
<td>user2</td>
<td>Test</td>
<td>User 2</td>
</tr>
<tr class="cursor-pointer">
<td>user3</td>
<td>Test</td>
<td>User 3</td>
</tr>
</tbody>
</table>
It should be like this
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
How can I make the header of my asp:GridView be treated as a Header by Twitter Bootstrap?
My code is in C#, framework 4, build in VS2010 Pro.

You need to set useaccessibleheader attribute of the gridview to true and also then also specify a TableSection to be a header after calling the DataBind() method on you GridView object. So if your grid view is mygv
mygv.UseAccessibleHeader = True
mygv.HeaderRow.TableSection = TableRowSection.TableHeader
This should result in a proper formatted grid with thead and tbody tags

There are 2 steps to resolve this:
Add UseAccessibleHeader="true" to Gridview tag:
<asp:GridView ID="MyGridView" runat="server" UseAccessibleHeader="true">
Add the following Code to the PreRender event:
Protected Sub MyGridView_PreRender(sender As Object, e As EventArgs) Handles MyGridView.PreRender
Try
MyGridView.HeaderRow.TableSection = TableRowSection.TableHeader
Catch ex As Exception
End Try
End Sub
Note setting Header Row in DataBound() works only when the object is databound, any other postback that doesn't databind the gridview will result in the gridview header row style reverting to a standard row again. PreRender works everytime, just make sure you have an error catch for when the gridview is empty.

Just for the record, I got borders in the table and to get rid of it I needed to set following properties in the GridView:
GridLines="None"
CellSpacing="-1"

Add property of show header in gridview
<asp:GridView ID="dgvUsers" runat="server" **showHeader="True"** CssClass="table table-hover table-striped" GridLines="None"
AutoGenerateColumns="False">
and in columns add header template
<HeaderTemplate>
//header column names
</HeaderTemplate>

How To give Pagination to asp:DataList

This is my ASPX code, however, I can't see any way to do Pagination
<asp:DataList ID="dlProjectImages" runat="server" RepeatColumns="3"
RepeatLayout="Table" RepeatDirection="Horizontal" BorderWidth="0px"
HorizontalAlign="Center" >
<ItemStyle />
<ItemTemplate>
<table border="0" cellpadding="0" border="0" align="center" valign="top">
<tr>
<td width="16" align="center" valign="top"></td>
<td width="169" height="132" align="center" valign="middle" class="top-links01">
<a href="Project_Details.aspx?id_Project=<%# Eval("id_Project")%>&type=<%= Request.Params["type"]%>&activity=<%=Request.Params["activity"]%>">
<img id="findme" alt="" height="114" src="<%# Eval("Thumbnail_Image") %>" title="Click To View Project Details" border="0" /></a>
</td>
<td width="16" align="center" valign="top"></td>
</tr>
<tr>
<td align="center" valign="top" colspan="3">
<asp:Label ID="lblProject_name" Font-Bold="true" Text='<%# Eval("Project_Name") %>' CssClass="top-links01" runat="server"></asp:Label><br />
</td>
</tr>
<tr>
<td colspan="3" align="center"><img src="/images/clear.gif" border="0" height="20px" /></td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
What am I missing that will allow me to do pagination?

You can use PagedDataSource to page a data-list. See this article which explain the same in detail.
On the related note, why not use ListView instead - it can be used with DataPager for paging and offers complete control over the markup generated.

Mayu,
I don't think you can do pagination using DataList. You either have to implement it manually by following the article link mentioned by VinayC or switch to GridView as it does pagination for you.
Look at this MSDN documentation