Gridview is loading multiple times - asp.net

I have a gridview which is working fine (i.e. it is loading 4 rows) with bound controls. this grid view has 4 rows:
Ex: <asp:BoundField HeaderText="Classification" DataField="ClassType" />
but when I changed the gridview with itemtemplate then my gridview is loading 4 times
Structure:-
Gridview
- template field
-- Item template
<%# Eval("ClassType")%>
on code behind I am loading this via: (on page_load)
gvResultSet.DataSource = ds.Tables[0];
gvResultSet.DataBind();
Code
<asp:GridView ID="gvResultSet" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table class="tb">
<thead>
<tr>
<th>
Classification
</th>
</tr>
</thead>
<tbody>
<tr class="record">
<td>
<%# Eval("ClassType")%>
</td>
</tr>
</tbody>
</table>
</ItemTemplate>
</asp:TemplateField>

Set gridview's property AutoGenerateColumns="false". This will solve your issue.
Update
My Recommendation is to use Repeater Control.
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table class="tb">
<thead>
<tr>
<th>
Status
</th>
<th>
Name
</th>
<th>
Start Time
</th>
<th class="date">
End Time
</th>
<th>
MAX Date found
</th>
<th>
Classification
</th>
<th class="last">
Read Description
</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr class="record">
<td>
<div class="toggle enabled">
</div>
</td>
<td class="overflow">
<%# Eval("Name")%>
</td>
<td class="overflow">
12/23/2014 6:20:47
</td>
<td>
12/23/2014 6:27:21
</td>
<td class="date">
12/23/2014
</td>
<td>
<%# Eval("ClassType")%>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody> </table>
</FooterTemplate>
</asp:Repeater>

It would be much simpler this way
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" CssClass="tb">
<Columns>
<asp:TemplateField HeaderText="Classification">
<ItemTemplate><%# Eval("ClassType")%></ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle CssClass="record" />
</asp:GridView>
If you want header inside th, do this after DataBind
gvResultSet.DataBind();
gvResultSet.HeaderRow.TableSection = TableRowSection.TableHeader;

Related

Adding more than 1 column to ListView (ASP.NET)

I am creating a webpage that is listing the names of places using ASP.NET. I am using a data source to read the data from a database file. The list view is displaying all the data in one column. What I am trying to do is add 7 rows of data and then as soon as the 7th row has been added, add another column, and then continue writing the data in the new created column. Here is my code:
<asp:ListView runat="server" DataSourceID="cwDataSource">
<ItemTemplate>
<tr style="">
<td>
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</td>
<td>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</td>
<td>
VIEW STORE PAGE
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr>
<td>
&nbsp
</td>
</tr>
<tr>
<td>
&nbsp
</td>
</tr>
<tr runat="server">
<td runat="server">
<table ID="itemPlaceholderContainer" runat="server" border="0" style="">
<tr runat="server" style="">
<td>COLUMN #</td>
</tr>
<tr>
<td>
&nbsp
</td>
</tr>
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr>
<td>
&nbsp
</td>
</tr>
<tr>
<td>
&nbsp
</td>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
Example of what the output should look like (The 'VIEW STORE PAGE' is just a link):
COLUMN 1 COLUMN 2
A.ADDED VIEW STORE PAGE H.ADDED VIEW STORE PAGE
B.ADDED VIEW STORE PAGE I.ADDED VIEW STORE PAGE
C.ADDED VIEW STORE PAGE J.ADDED VIEW STORE PAGE
D.ADDED VIEW STORE PAGE K.ADDED VIEW STORE PAGE
E.ADDED VIEW STORE PAGE L.ADDED VIEW STORE PAGE
F.ADDED VIEW STORE PAGE M.ADDED VIEW STORE PAGE
G.ADDED VIEW STORE PAGE N.ADDED VIEW STORE PAGE
Any help would be appreciated.
I got it working:
<asp:DataList ID="cwDataList" runat="server" DataSourceID="cwDataSource" RepeatDirection=Vertical RepeatColumns=2 style="text-align: center">
<ItemTemplate>
<table style="width: 500px;">
<tr style="">
<td align="left" style="width: 250px; height: 18px">
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</td>
<td align="left" style="width: 250px; height: 18px">
VIEW STORE PAGE
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>

set header in repeater to visible.false

using a repeater to display a list, if the list returns empty the table will be blank, so I have displayed a message 'table is empty' but i also want to set the visibility of the table header to false, is there a property for tis?
repeater.header or something?
Thanks
EDIT: for those who cant program in the dark
<asp:Repeater id="rptSelectedUtilities" runat="server">
<HeaderTemplate>
<table class="detailstable FadeOutOnEdit">
<tr>
<th style="width:200px;">Utility</th>
<th style="width:200px;">Contacted</th>
<th style="width:200px;">Comment</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<th style="width:200px;"><%# Eval("Name") %></th>
<th style="width:200px;"><asp:CheckBox ID="chkMyCheck" runat="server" Checked='<%# Convert.ToBoolean(Eval("Checked")) %>'/></th>
<th style="width:200px;"><%# Eval("Comment") %></th>
</tr>
<asp:Label id="labelTableEmpty" runat="server" Text="There are currently no items in this table." />
</ItemTemplate>
<FooterTemplate>
<asp:Label id="labelTableEmpty" runat="server" Text="There are currently no items in this table." />
</table>
</FooterTemplate>
</asp:Repeater>
thanks for any help
Alright, let's change this up a little. We are going to make the repeater invisible overall and then add another label to markup and make it visible when necessary. Replace the repeater code with this:
<asp:Repeater id="rptSelectedUtilities" runat="server">
<HeaderTemplate>
<table class="detailstable FadeOutOnEdit">
<tr>
<th style="width:200px;">Utility</th>
<th style="width:200px;">Contacted</th>
<th style="width:200px;">Comment</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<th style="width:200px;"><%# Eval("Name") %></th>
<th style="width:200px;"><asp:CheckBox ID="chkMyCheck" runat="server" Checked='<%# Convert.ToBoolean(Eval("Checked")) %>'/></th>
<th style="width:200px;"><%# Eval("Comment") %></th>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
and then after the repeater add this (you can of course change the wording):
<asp:Label id="labelTableEmpty" runat="server" Text="There are currently no items in this table." />
and then in OnPreRender in the web form we're going to write some code:
protected override void OnPreRender(EventArgs e)
{
if (rptSelectedUtilities.Items.Count == 0)
{
rptSelectedUtilities.Visislbe = false;
labelTableEmpty.Visible = true;
}
else
{
rptSelectedUtilities.Visislbe = true;
labelTableEmpty.Visible = false;
}
}

Access "th" in Listview

Is there a way to access the "th", in the code behind. I would like to add padding to the header depending on the item value.
<LayoutTemplate>
<table runat="server" >
<tr runat="server">
<td runat="server">
<table ID="itemPlaceholderContainer" runat="server" border="0" class="UserLayoutTbl">
<tr runat="server" style="">
<th runat="server" width="140" align="left">
Date</th>
<th runat="server" width="140" align="left">
Ref. No.</th>
<th runat="server" width="270" align="left">
Description</th>
<%-- <th runat="server" width="90" align="right" style = '<%# GetAmountLabelStyle() %>'>
Amount</th>--%>
<th id="Th1" runat="server" width="90" align="right">
Amount</th>
</tr>
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
First, give an ID to the element you want to change. After DataBind of the ListView, you can access the control by its ID using the FindControl method of the ListView. Then, you can convert the returned control to HtmlTableCell to proper handle it:
// thDate is the <th> ID
HtmlTableCell thDate = lstItems.FindControl("thDate") as HtmlTableCell;

Hide ListView table header from the code behind

I want to hide a column of ListView based on the role from the code behind. Here's the mark-up and the code:
<asp:ListView ID="lvTimeSheet" runat="server">
<LayoutTemplate>
<table id="TimeSheet">
<thead>
<tr>
<th id="thDelete" runat="server" Visible='<%# IsAdmin() %>'>
Select
</th>
</tr>
</thead>
<tbody>
<tr id="itemPlaceholder" runat="server" />
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<asp:CheckBox ID="cbMarkAsComplete" runat="server" onclick="selectMe(this)" Text=" Delete" />
</td>
</ItemTemplate>
</asp:ListView>
In the ListView layout template I have a <th> which has attribute id="thDelete" runat="server" Visible='<%# IsAdmin() %>' . In the code behind,
Public Function IsAdmin() As Boolean
If "user is admin" Then
Return True
Else
Return False
End If
End Function
But that column id="thDelete" is visible all the time. How do I go about hiding the column based on some condition from the code behind? Thank you for any input.
The tags with the attribute runat="server" can't allow inclusion <% %>. Try this:
<asp:ListView ID="lvTimeSheet" runat="server">
<LayoutTemplate>
<table id="TimeSheet">
<thead>
<% If IsAdmin() Then %>
<tr>
<th id="thDelete" runat="server">
Select
</th>
</tr>
<% End If %>
</thead>
<tbody>
<tr id="itemPlaceholder" runat="server" />
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<asp:CheckBox ID="cbMarkAsComplete" runat="server" onclick="selectMe(this)" Text=" Delete" />
</td>
</ItemTemplate>
</asp:ListView>
Please, try this:
<LayoutTemplate>
<table id="TimeSheet">
<thead>
<tr>
<th id="thDelete" runat="server" Visible='<%# If( IsAdmin().tostring()="True", "true", "false") %>'>
Select
</th>
</tr>
</thead>
<tbody>
<tr id="itemPlaceholder" runat="server" />
</tbody>
</table>
</LayoutTemplate>`

Toggle rows created using Repeater Control ASP.NET

I am creating a list of data using Repeater Control. Some of the rows might have other rows that should be toggled using the main row's clickable image.
Here, is the HTML part
<table cellpadding="2" cellspacing="0" width="100%">
<asp:Repeater ID="repeatLockers" runat="Server">
<HeaderTemplate>
<tr>
<td> </td>
<td>A</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr id="trItem" class="SomeParentClass" runat="server">
<td>
<img id="imgToggleHomeInfo" runat="server" alt="show/hide repetitves" src="icon_plus.gif"
style="cursor: pointer" />
</td>
<td>
<asp:Label ID="lbl" runat="server"></asp:Label>
</td>
</tr>
<tr id="trAddOnFee" runat="server" class="SomeClass" style="display: none;">
<td colspan="2">
<table cellpadding="4" cellspacing="2" width="100%">
<tr>
<td class="DgHeader">A</td>
<td class="DgHeader">B</td>
</tr>
<asp:Repeater ID="repeatRepetitives" runat="server">
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblA" runat="server"></asp:Label>
</td>
<td align="right">
<asp:Label ID="lblB" runat="server"></asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
How could I toggle the Rows with class as "SomeClass" inside on click of imgToggleHomeInfo" image on its parent row using Jquery?
I'd find the parent row of the image then toggle it's next sibling.
$(document).ready( function() {
$("[id$='imageToggleHomeInfo']").click( function() {
$(this).closest('tr').next().toggle();
});
})

Resources