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>
Related
I am developing a telerik radgrid on aspx. I simply want to add a row above the column headers, to show how columns are logically related. For example, 4 columns display data for 2014, and 4 columns for 2015.
I have the column headers, and the data, of course. I just need this additional info. Thanks.
Once you begin customizing the header, you lose the ability to automatically build the table. You will have to customize main header, the subheaders, and the columns.
The following page on Telerik's website has an example of how to create a header template with a double row header. Below is the code example from that page.
<telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" AutoGenerateColumns="false">
<MasterTableView>
<Columns>
<telerik:GridBoundColumn HeaderText="ContactName" DataField="ContactName" UniqueName="ContactName">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn UniqueName="TemplateColumn">
<HeaderTemplate>
<table id="Table1" cellspacing="1" cellpadding="1" width="300" border="1">
<tr>
<td colspan="2" align="center">
<b>Address</b>
</td>
</tr>
<tr>
<td width="50%">
<b>City</b>
</td>
<td width="50%">
<b>Postal code</b>
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table id="Table2" cellspacing="1" cellpadding="1" width="300" border="1">
<tr>
<td width="50%">
<%# DataBinder.Eval(Container.DataItem"City") %>
</td>
<td width="50%">
<%# DataBinder.Eval(Container.DataItem"PostalCode") %>
</td>
</tr>
</table>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
I tried to using Datalist and Something goes wrong I cant solve it !
On the Output... why the extra row is created after each row??
what's my fault?
Look at my codes :
<asp:DataList ID="DataList1" runat="server" DataKeyField="Id" DataSourceID="SqlDataSource1" Width="233px">
<HeaderTemplate>
<table>
<tr>
<th>Id</th>
<th>Title</th>
<th>InTheater</th>
<th>Spam</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>`
I just dealt with this problem myself. I solved it by removing the <tr> in the template. So instead of
<tr>
<th>Id</th>
<th>Title</th>
<th>InTheater</th>
<th>Spam</th>
</tr>
I used
<th>Id</th>
<th>Title</th>
<th>InTheater</th>
<th>Spam</th>
I don't know why it adds the extra rows but this was the solution I found.
Posting for others looking for the answer.
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.
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
I am using Gridview in my application. Grid view is binded with the data from the database with some header text. Now what i would like to have is when i scroll the grid view i would like to show the headers while moving the gridview how can i do this
This is what i wrote McArthey
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="StyleSheet2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="pnlWrapper" runat="server" Height="300px" ScrollBars="Vertical" BorderWidth="1px">
<asp:GridView ID="gvTheGrid" runat="server" GridLines="Both" CellPadding="3" CssClass="gvTable" AutoGenerateColumns="false" AllowSorting="true">
<columns>
<asp:BoundField DataField="id" HeaderText="id" HeaderStyle-Width="60" ItemStyle-Width="60" />
</columns>
</asp:GridView>
</asp:Panel>
</div>
</form>
</body>
</html>
stylesheet is as follows
TABLE.gvTable
{
table-layout:fixed;
}
TABLE.gvTable TH
{
position:relative;
border-top-width:0px;
border-bottom-color:Black;
background-color:#F5DEB3;
}
This is my sample source when i run and click on view source
<div id="pnlWrapper" style="border-width:1px;border-style:solid;height:300px;overflow-y:scroll;">
<div>
<table class="gvTable" cellspacing="0" cellpadding="3" rules="all" border="1" id="gvTheGrid" style="border-collapse:collapse;">
<tr>
<th scope="col" style="width:60px;">id</th>
</tr><tr>
<td style="width:60px;">10</td>
</tr><tr>
<td style="width:60px;">10</td>
</tr><tr>
<td style="width:60px;">10</td>
</tr><tr>
Header shown when page loads
No header when scrolls down
There is an example here that works on IE8.
This was very useful to me since we are moving to IE8 here at work and I needed to get this working.
There are a few tricks with using this solution. It expects to use the <thead> and <tbody> tags which are not rendered by default in the GridView. In order to render them, you'll need to add something along the lines of the following which was suggested earlier by another.
// will add <thead> and <tbody>
gvTheGrid.HeaderRow.TableSection = TableRowSection.TableHeader;
I have an example solution working here based upon that link that I sent via email.
The simple solution is to wrap the content of ItemTemplate (You can use Template Column) using .
<ItemTemplate>
<div style="height:100px; overflow:scroll">
.....
</div>
</ItemTemplate>
Take a look at CodeProject article : Scrollable GridView.
Here's how we've done it.
create an asp panel with a given height and specify vertical scrollbars
put the gridview inside the panel and give it a class of
myGridView
in CSS create the following styles
TABLE.myGridView
{
table-layout:fixed;
}
TABLE.myGridView TH
{ position:relative; }
Specify the widths of each asp:BoundField like this:
HeaderStyle-Width="85" ItemStyle-Width="85"
Here is an example of the code behind:
<asp:Panel ID="pnlWrapper" runat="server" Height="300px" ScrollBars="Vertical" BorderWidth="1px">
<asp:GridView ID="gvTheGrid" runat="server" GridLines="Both" CellPadding="3" CssClass="gvTable" AutoGenerateColumns="false" AllowSorting="true">
<columns>
<asp:BoundField DataField="C" HeaderText="C" HeaderStyle-Width="60" ItemStyle-Width="60" />
</columns>
</asp:GridView>
</asp:Panel>
Here is the CSS:
TABLE.gvTable
{
table-layout:fixed;
}
TABLE.gvTable TH
{
position:relative;
border-top-width:0px;
border-bottom-color:Black;
background-color:#F5DEB3;
}
Here is the generated HTML:
<div id="ctl00_MainContent_pnlWrapper" style="border-width:1px;border-style:solid;height:300px;overflow-y:scroll;">
<div>
<table class="gvTable" cellspacing="0" cellpadding="3" rules="all" border="1" id="ctl00_MainContent_gvTheGrid" style="background-color:WhiteSmoke;border-collapse:collapse;">
<tr style="font-size:Medium;">
<th scope="col" style="width:60px;">Select One</th>
<th scope="col" style="width:60px;">Number</a></th>
<th scope="col" style="width:60px;">Address</a></th>
<th scope="col" style="width:200px;">Phone</a></th>
</tr>
</table>
</div>
</div>
You can see the classes for the CSS match between the code/generated source.
HTH