ASP.NET Get Gridview Label Text in Javascript - asp.net

I have muliple rows in my grid for hours. I have a common label for the same lblFromTime.
I need to get the label text bound in each row from javascript.
Could someone offer me a solution?
I tried the following code but it doesn't return the text.
var gvRowCount = ('<%= gvTimeSlots.Rows.Count%>');
for (i = 0; i <= gvRowCount; i++)
{
var fromTime = document.getElementById('ContentHead_MainContent_gvTimeSlots_lblFromTime_i');
alert(fromTime.value);
}

I tried out a sample like this
ASPX Code
<asp:GridView ID="gv" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="check">
<ItemTemplate>
<asp:Label ID="lbl" runat="server" Text='<%#Eval("iso") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
the Gridview generated the following HTML -
<table cellspacing="0" rules="all" border="1" id="gv" style="border-collapse:collapse;">
<tr>
<th scope="col">check</th>
</tr>
<tr>
<td>
<span id="gv_ctl02_lbl">ab</span>
</td>
</tr>
<tr>
<td>
<span id="gv_ctl03_lbl">ab</span>
</td>
</tr>
<tr>
<td>
<span id="gv_ctl04_lbl">ab</span>
</td>
</tr>
</table>
as you can see for my case the span id started from 2.
so i tried the following javascript
for(i=2;i<5;i++) console.log(document.getElementById('gv_ctl0'+i+'_lbl').innerHTML);
and the result was
ab
ab
ab
I tried it out in chrome and firefox(firebug). both are working fine.

Related

Gridview is loading multiple times

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;

Apply style to a <td> in repeater control

I need to apply style and highlight the header coloumn which is sorted..
Sorting is handled in rptMyTable_ItemCommand event.. i cant use gridview as the layout of displaying data is not a regular table.
in javascript we have something like
document.getElementById('lbCol1Header').parentNode.style = 'sortedColumnCSS'
how to do this in codebehind?
<table border="0" cellpadding="5" cellspacing="0" width="100%" class="myCSS">
<asp:Repeater ID="rptMyTable" runat="server" OnItemCommand="rptMyTable_ItemCommand">
<HeaderTemplate>
<tr style="font-weight: bolder">
<td>
<asp:LinkButton ID="lbCol1Header" Text="Col1" runat="server" CommandName="sortCol1" />
</td>
<td>
<asp:LinkButton ID="lbCol2Header" Text="Col2" runat="server" CommandName="sortCol2" />
</td>
<td>
<asp:LinkButton ID="lbCol3Header" Text="Col3" runat="server" CommandName="sortCol3" />
</td>
<td>
<asp:LinkButton ID="lbCol4Header" Text="Col4" runat="server" CommandName="sortCol4" />
</td>
<td>
<asp:LinkButton ID="lbCol5Header" Text="Col5" runat="server" CommandName="sortCol5" />
</td>
<td>
<asp:LinkButton ID="lbCol6Header" Text="Col6" runat="server" CommandName="sortCol6" />
</td>
<td>
</td>
<td>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
//Table Data......with nested tables and divs
.
.
.
.
.
</ItemTemplate>
</asp:Repeater>
<tr style="font-weight: bolder">
// doing paging operations here...
</tr>
</table>
In Design Page:
<tr class='<%# StyleSheet(DataBinder.Eval(Container.DataItem, "Y"))%>'>
for Linkbutton :
<asp:LinkButton ID="lbCol1Header" Text="Col1" runat="server" CommandName="sortCol1" CssClass='<%# StyleSheet(DataBinder.Eval(Container.DataItem, "Y"))%>' />
In code Page:
public static string StyleSheet(object objText1)
{
string val = string.Empty;
if (objText1.ToString() == "Y")
{
val = "trbind";
}
return val;
}
This is one of the way to apply style the in tr tag while in runtime based on the data.Similar you can try for the label also.
write the style trbind in stylesheet.
You could use .CssClass property in the rptMyTable_ItemCommand event I guess.
lbCol1Header.CssClass = "sortedColumnCSS";
If you want to apply the css class to you should give ID and add runat="server".
<td ID="tdCol1Header" runat="server">
<asp:LinkButton ID="lbCol1Header" Text="Col1" runat="server" CommandName="sortCol1" />
</td>
And to add the css class from your code behind.
tdCol1Header.Attributes("class") = "CssClass";

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;
}
}

Conditional display of table rows in a listview itemtemplate

I seen similar questions asked various places, but haven't really found an answer to this that works for me yet. Basically, I have a ListView where I want to hide table rows if a particular value in the data binding if a particular condition is true (most often if the value of the item is null or empty string). I've tried making the tr runat="server" and setting the condition on the visible property, but this returns a runtime error "The server tag is not well formed." Here's what I'm trying to do:
<asp:ListView runat="server" ID="FullInfoListView">
<LayoutTemplate>
<table class="tablestripe" width="100%">
<asp:Placeholder runat="server" ID="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr valign="top" class="eventrow1">
<td colspan="2">
<h3><%# Eval("FirstName") Eval("LastName") %></h3>
</td>
</tr>
<tr valign="top" runat="server" Visible="<%# (bool)Eval("PhotoVis") %>">
<td colspan="2">
<img src="~/Userphoto/thumb/<%# Eval("NetworkLogin") %>.jpg" />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
You have to have single quotes around the Visible setter:
<tr valign="top" runat="server" Visible='<%# (bool)Eval("PhotoVis") %>'>
<td colspan="2">
<img src='~/Userphoto/thumb/<%# Eval("NetworkLogin") %>.jpg' />
</td>
</tr>
You could wrap the row in a PlaceHolder:
<asp:PlaceHolder ID="PlaceHolder1" runat="server" Visible='<%# (bool)Eval("PhotoVis") %>'>
<tr valign="top">
<td colspan="2">
<img src='~/Userphoto/thumb/<%# Eval("NetworkLogin") %>.jpg' />
</td>
</tr>
</asp:PlaceHolder>
EDIT: Included single quotes around image src attribute
Try setting style="display:none" instead of using Visible.

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