Toggle rows created using Repeater Control ASP.NET - 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();
});
})

Related

ASP.NET Edit every record in Datalist

I currently have a DataList control, with the ItemTemplate and EditItemTemplate defined.
<asp:DataList ID="UserMatrixDataList" runat="server" RepeatColumns = "1" CellSpacing = "6" RepeatLayout="Table" BorderWidth="5">
<ItemTemplate>
<table class="table">
<col width="130">
<col width="800">
<tr>
<td >
<strong>Level</strong>
</td>
<td>
<asp:Label ID="lblLevel" runat="server" Text='<%# Eval("Level")%>'></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
<EditItemTemplate>
<table class="table">
col width="130">
<col width="800">
<tr>
<td >
<strong>Level</strong>
</td>
<td>
<asp:Textbox ID="txtLevel" runat="server" Text='<%# Eval("Level")%>'></asp:Textbox>
</td>
</tr>
</table>
</EditItemTemplate>
</asp:DataList>
After I do a Databind(), may I ask how can I set all records in the datalist to EditMode?

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>

UpdatePanel alignment issue inside the Table

I am using UpdatePanel control in the middle of the page for partial postback of Address Type radio button change. Everything works fine but I am struggling with alignment issue. The controls inside the UpdatePanel do not align with outside controls. How could I solve this issue? Please let me know.
<table id="tblEdit" class="cssclass1" cellpadding="3" runat="server">
<tr>
<td class="cssclass1" align="right">
Title
</td>
<td>
<telerik:RadTextBox ID="textbox1" runat="server" Width="280px" ReadOnly="true"
BackColor="LightGray" />
</td>
<td align="right">
<asp:Label CssClass="cssclass1" ID="LblFirstName" runat="server">First Name</asp:Label>
</td>
<td align="left">
<telerik:RadTextBox ID="txtFirstName" runat="server" MaxLength="30">
</telerik:RadTextBox>
<asp:Image ID="Image1" ImageUrl="../../../images/requiredfield.gif" AlternateText="Required Field"
runat="server"></asp:Image><asp:HiddenField ID="hfCaseEntityId" runat="server" />
</td>
</tr>
<tr>
<td colspan="4">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<tr>
<td class="cssclass1" align="right">
Address Type
</td>
<td align="left">
<asp:RadioButtonList ID="AddressType" runat="server" RepeatDirection="Horizontal" OnSelectedIndexChanged="AddressType_SelectedIndexChanged" AutoPostBack="true" >
<asp:ListItem Value="1" Selected="True">Home</asp:ListItem>
<asp:ListItem Value="2">Work</asp:ListItem>
</asp:RadioButtonList>
</td>
<td class="cssclass1" align="right">
</td>
<td align="left">
</td>
</tr>
<tr>
<td align="right">
<asp:Label CssClass="cssclass1" ID="LblHomeStreet1" runat="server">Address</asp:Label>
</td>
<td align="left">
<telerik:RadTextBox ID="txtHomeStreet1" runat="server" MaxLength="40" >
</telerik:RadTextBox>
<asp:Image ID="Image10" ImageUrl="../../../images/requiredfield.gif" AlternateText="Required Field"
runat="server"></asp:Image>
</td>
<td align="right">
<asp:Label CssClass="cssclass1" ID="LblHomeStreet2" runat="server">Street 2</asp:Label>
</td>
<td align="left">
<telerik:RadTextBox ID="txtHomeStreet2" runat="server" MaxLength="40" Width="280px">
</telerik:RadTextBox>
</td>
</tr>
<tr>
<td align="right">
<asp:Label CssClass="cssclass1" ID="LblHomeCity" runat="server">City</asp:Label>
</td>
<td align="left">
<telerik:RadTextBox ID="txtHomeCity" runat="server" MaxLength="30">
</telerik:RadTextBox>
</td>
<td align="right">
<asp:Label CssClass="cssclass1" ID="LblHomeState" runat="server">State</asp:Label>
</td>
<td align="left">
<telerik:RadTextBox ID="txtHomeState" runat="server" MaxLength="30">
</telerik:RadTextBox>
</td>
</tr>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
Your HTML is invalid. The first line in your <ContentTemplate> is a <tr>, however, it looks like you are trying to include another <table> there. You might want to look into cellpading=0 and cellspacing=0 on your inner table. Also, you could add a CSSClass to your UpdatePanel to do any additional formatting.

Why the <DIV> CSS applied for Repeater Control get Distorted when placed in UpdatePanel?

i am new to AJAX i am trying to update a Repeater Control When user Click on Search Button which is out side the updatePanel using Trigger event of UpdatePanel the CSS get Distorted when Repeater Control is Placed inside UpdatePanel Whhen the Update Panel is Removed Then the CSS is applied perfectly why does it happen?
Code:
<div class="jqueryresultsBackground">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Repeater ID="ResultsRepeater" runat="server">
<HeaderTemplate>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<table align="center" width="100%">
<tr>
<td align="left" class="searchResFieldName" width="40%">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/deleted.png"
Style="z-index: 1; position: absolute; margin-left: -5px;"
Visible='<%# DeletedImageVisibility(Eval("IsActive"))%>' />
<br />
<%# Eval("UnicodeFullName")%>
</td>
<td width="10%">
Col1
</td>
</tr>
</table>
</td>
<td width="10%">
Col2
</td>
<td width="10%">
Col3
</td>
<td width="8%">
Col4
</td>
<td width="5%">
Col5
</td>
<td width="10%">
Col6
</td>
</tr>
<tr>
<td align="left" class="searchResFieldName" width="35%">
<%# Eval("EnglishFullName")%>
</td>
<tr>
<td align="left">
<%# Eval("HouseNumber")%>
<br />
<%# Eval("UnicodeAddress")%>
</td>
<td>
<b><%# Eval("ConstituencyNumber")%></b>
</td>
<td>
<b><%# Eval("PartNumber")%></b>
</td>
<td>
<b><%# Eval("SerialInPart")%></b>
</td>
<td>
<b><%# Eval("Age")%></b>
</td>
<td>
<b><%# Eval("Sex")%></b>
</td>
<td>
<b><%# Eval("CardNo")%></b>
</td>
</tr>
<tr>
<td>
<%# Eval("Address")%>
</td>
<tr>
<td>
</td>
<td align="left" class="searchResPrabhag" colspan="7">
</td>
</tr>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<hr />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
<tr>
<td>
</td>
</tr>
</table>
</FooterTemplate>
</asp:Repeater>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SearchButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:HiddenField ID="CurrentPageHiddenField" runat="server" />
</div>
Your HTML is broken... The HeaderTemplate is closing your table.

Modal popup extender not displaying popup

I have inherited some code using an ASP modal popup extender and for some reason it has now decided to stop working. Am I missing anything here? I'm not too fluent with AJAX / ASP.Net right now so im struggling to diagnose what is going wrong here.
So firstly the javascript method that displays the modal
function ShowModalRemoveEvent(ID, EventID, InstructorID, InstructorName)
{
alert("Hi");
var modal = $find('ModalPopupExtender1');
modal.show();
document.getElementById("txtID").value = ID;
document.getElementById("txtEventID").value = EventID;
document.getElementById("txtInstructorID").value = InstructorID;
document.getElementById("txtInstructorName").value = InstructorName;
}
I know this is being called because of the alert. So I would assume the prpblem is either in finding the ModalPopupExtender1 or the modal.show() line.
Here is the code for my modal popup extender
<asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="Panel4" runat="server" Style="display: none" CssClass="ModalBackground">
<table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="7%" class="cellAlertHeader">
<img src="../../../images/Ops/window_delete.png" style="width: 18px; height: 18px" alt=""/>
</td>
<td width="93%" class="cellAlertHeader">
<b>Cancel Instructor Event</b>
</td>
</tr>
</table>
<table width="100%">
<tr>
<td width="5%">
<td width="95%">
<asp:TextBox ID="txtID" Style="display: none" runat="server" CssClass="TextboxTitle"></asp:TextBox>
<asp:TextBox ID="txtEventID" Style="display: none" runat="server" CssClass="TextboxTitle"></asp:TextBox>
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="95%">
<asp:TextBox ID="txtInstructorID" Style="display: none" runat="server" BorderStyle="None"
CssClass="TextboxTitle"></asp:TextBox>
<asp:TextBox ID="txtInstructorName" Style="font-size: 12px" runat="server" BorderStyle="None"
CssClass="TextboxTitle" BorderWidth="0"></asp:TextBox>
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="95%">
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="95%">
<asp:Label ID="Label2" runat="server" Text="Are you sure you want to remove this Event?"
CssClass="TextboxTitle"></asp:Label>
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="95%">
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="95%">
<asp:Button ID="ButtonConfirmRemove" runat="server" Text="Confirm" CssClass="buttonshort" />
<asp:Button ID="ButtonCancel" runat="server" Text="Cancel" CssClass="buttonshort" />
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="95%">
</td>
</tr>
</table>
</asp:Panel>
<asp:Button runat="server" ID="dummyButton" Style="display: none" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1"
runat="server"
PopupControlID="Panel4"
TargetControlID="dummyButton"
BackgroundCssClass="ModalBGOpacity"
CancelControlID="ButtonCancel"
OnCancelScript="HideModalPopup()">
</cc1:ModalPopupExtender>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="dummyButton" />
</Triggers>
</asp:UpdatePanel>
Try getting the rendered id of your control, like that.
var modal = $find('<%=ModalPopupExtender1.CliendID%>');

Resources