We Keep Coding

Refresh partial page on user control text change event

I have one Usercontrol Textbox with some radio buttons.
I want to refresh some of these buttons when I change the usercontrol textbox value.
In short, when I select Specific button it displays RM row & for All radio button selection it hides RM row. After selecting RM & checking Client radio button, it again displays two radio button below. By checking any of radio it displays the grid data below. For Prospect & Closed button it displays grid data below after checking it.
For all radio all the functionality is same except RM selection.
My all functionality is working as expected just need to add one more addition in it.
Now I want to refresh 5 radio buttons(Client, Prospect, Closed, Client, Family) which are below RM user control screen when I change the RM name from usercontrol textbox.
I tried using update panel but it couldn't work as it got mess for me so reverted all that changes. My current working code is as below:
<script type="text/javascript">
$110 = $;
$110(document).ready(function () {
//intial setting of panel
rdoBtnShowHidePanels();
$110("#trClient").hide();
$110("#btnSendSms").hide();
$110("#trCommMode").hide();
$110("input[type='radio'][name='First']").attr('checked', false);
$110("input[type='radio'][name='SelectRM']").change(function () {
$110("#trClient").hide();
$110("#jqxContact").hide();
$110("#trCommMode").hide();
if ($110("input[type='radio'][id='RdoSpecific']").is(":checked") == true) {
$110("input[type='radio'][name='First']").attr('checked', false);
$110("input[type='radio'][name='a']").attr('checked', false);
$110("#trRM").show();
$("input[id$=mcscRMSearch_txtSearch]").val('');
$110("input[type='radio'][name='First']").change(function () {
if ($110("input[type='radio'][id='RdoSpecific']").is(":checked") == true) {
if (ValidateRMSelection() == true) {
$110("#trRM").show();
if ($110("input[type='radio'][id='rdoClientAll']").is(":checked") == true) {
$110("#trClient").show();
$110("input[type='radio'][name='a']").change(function () {
$110("#hdnType").val("C");
$110("#jqxContact").show();
var getselectedrowindexes = $110('#jqxContact').jqxGrid('getselectedrowindexes');
$110('#jqxContact').jqxGrid('unselectrow', getselectedrowindexes);
$110('#jqxContact').jqxGrid('clearselection');
if ($110("input[type='radio'][id='RdoSpecific']").is(":checked") == true) {
BindGridBasedOnRadioButtons();
}
$110("#trCommMode").show();
return;
})
}
else {
$110("#hdnType").val("P");
$110("input[type='radio'][id='rdoclient']").prop("checked", false);
$110("input[type='radio'][id='rdofamily']").prop("checked", false);
$110("#trClient").hide();
$110("#jqxContact").show();
var getselectedrowindexes = $110('#jqxContact').jqxGrid('getselectedrowindexes');
$110('#jqxContact').jqxGrid('unselectrow', getselectedrowindexes);
$110('#jqxContact').jqxGrid('clearselection');
if ($110("input[type='radio'][id='RdoSpecific']").is(":checked") == true) {
BindGridBasedOnRadioButtons();
}
$110("#trCommMode").show();
return;
}
}
else {
alert("Select RM");
$110("#trClient").hide();
$110("#trCommMode").hide();
$110("#jqxContact").hide();
return;
}
}
})
}
else {
$110("#trRM").hide();
$110("#trCommMode").hide();
$110("input[type='radio'][name='First']").attr('checked', false);
$110("input[type='radio'][name='a']").attr('checked', false);
$110("input[type='radio'][name='First']").change(function () {
if ($110("input[type='radio'][id='rdoClientAll']").is(":checked") == true) {
$110("#jqxContact").hide()
$110("#trClient").show();
$110("input[type='radio'][name='a']").change(function () {
$110("#hdnType").val("C");
$110("#jqxContact").show();
var getselectedrowindexes = $110('#jqxContact').jqxGrid('getselectedrowindexes');
$110('#jqxContact').jqxGrid('unselectrow', getselectedrowindexes);
$110('#jqxContact').jqxGrid('clearselection');
BindGridBasedOnRadioButtons1();
$110("#trCommMode").show();
return;
})
}
else {
$110("#hdnType").val("P");
$110("input[type='radio'][id='rdoclient']").prop("checked", false);
$110("input[type='radio'][id='rdofamily']").prop("checked", false);
$110("#trClient").hide();
$110("#jqxContact").show();
var getselectedrowindexes = $110('#jqxContact').jqxGrid('getselectedrowindexes');
$110('#jqxContact').jqxGrid('unselectrow', getselectedrowindexes);
$110('#jqxContact').jqxGrid('clearselection');
BindGridBasedOnRadioButtons1();
$110("#trCommMode").show();
return;
}
})
}
})
<form id="Form1" method="post" runat="server">
<asp:ScriptManager ID="scmPhoneBook" runat="server">
</asp:ScriptManager>
<table id="Table1" cellspacing="1" cellpadding="0" width="100%" border="0">
<tr>
<td class="clsTitle" align="center" style="height: 25px">Contacts
</td>
</tr>
<tr>
<td class="clstd" align="left" style="width: 100%" colspan="2">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="clstdnext" align="left" style="width: 100%" colspan="2">
<asp:RadioButton ID="RdoSpecific" runat="server" GroupName="SelectRM" Text="Specific"></asp:RadioButton>
<asp:RadioButton ID="RdoAll" runat="server" GroupName="SelectRM" Text="All"></asp:RadioButton>
</td>
</tr>
<tr id="trRM">
<td class="clstd" width="2%">RM
</td>
<td class="clstd" width="98%">
<mwimcs:MultiColumnSearchControl
runat="server"
ID="mcscRMSearch"
CssClass="clsTextbox"
Width="300"
ControlType="137"
DataTextField="usr_name"
DataValueField="usr_id"
Top="-15px" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="clstdnext" align="left" style="width: 100%" colspan="2">
<asp:RadioButton ID="rdoClientAll" runat="server" GroupName="First" Text="Client"></asp:RadioButton>
<asp:RadioButton ID="RdoProspect" runat="server" GroupName="First" Text="Prospect"></asp:RadioButton>
<asp:RadioButton ID="RdoClosed" runat="server" GroupName="First" Text="Closed"></asp:RadioButton>
</td>
</tr>
<tr id="trClient">
<td class="clstd" align="left" style="width: 100%" colspan="2">
<asp:RadioButton ID="rdofamily" runat="server" GroupName="a" Text="Family"></asp:RadioButton>
<asp:RadioButton ID="rdoclient" runat="server" GroupName="a" Text="Client"></asp:RadioButton>
</td>
</tr>
<tr>
<td valign="top">
<div id="jqxContact"></div>
<asp:Panel ID="PnlClient" runat="server" Width="100%">
</asp:Panel>
</td>
<asp:DataGrid ID="dgCompany" runat="server" Width="100%" AutoGenerateColumns="False"
AllowSorting="True" AllowPaging="True" PageSize="25">
</asp:DataGrid>
</tr>
</table>
<br />
<table width="100%" cellpadding="0" cellspacing="1" border="0">
<tr height="10px">
<td class="clsLabel_err" colspan="2">
<asp:Label ID="lblErrorMsg" runat="server" CssClass="clsLabel_err"></asp:Label>
</td>
</tr>
<tr style="width: 100%" id="trCommMode">
<td class="clstdnext" style="width: 25%">Communication Mode:</td>
<td class="clstdnext" align="left" valign="middle">
<asp:RadioButtonList ID="rbtnlistSmsMail" runat="server" RepeatDirection="Horizontal"
Font-Names="Verdana" Font-Size="11px">
<asp:ListItem>
SMS
</asp:ListItem>
<asp:ListItem>
E-Mail
</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td colspan="2" id="pnlEmailDtls" runat="server">
<asp:Panel ID="pnlpnlEmailDtls" runat="server" Width="100%">
<table id="Table3" cellspacing="1" cellpadding="0" width="100%" border="0">
<tr>
<td class="clstd" style="width: 25%">Email From</td>
<td class="clsTd" style="width: 80%">
<cc1:MultiColumnComboBox ID="mmcEmail" runat="server" CssClass="clstd" HeaderCSS="clsReportTitle"
ItemsCSS="clstdnext" VerticalScrolling="True" DownArrowButtonCSS="clsButton"
DownArrowImageURL="url(Images/downarrow.gif)" DownArrowButtonHeight="12" DownArrowButtonWidth="20"
TextBoxCSS="clsTextbox">
<Columns>
<cc1:Column ColumnWidth="" DataField="email" KeyColumn="True" HeaderText="Email"></cc1:Column>
<cc1:Column ColumnWidth="" DataField="smtp" KeyColumn="False" HeaderText="SMTP"></cc1:Column>
</Columns>
</cc1:MultiColumnComboBox>
</td>
</tr>
<tr>
<td class="clstdnext" style="width: 20px">Subject</td>
<td class="clstdnext" style="width: 80px">
<asp:TextBox ID="txtSubject" runat="server" CssClass="clsTextbox" Width="327px">
</asp:TextBox>
</td>
</tr>
<tr>
<td class="clstd">Attachment 1)
</td>
<td class="clstd">
<input class="clsTextbox" id="fileupload1" style="width: 250px" type="file" size="48" runat="server"
name="fileupload1" />
</td>
</tr>
<tr>
<td class="clstdnext">Attachment 2)
</td>
<td class="clstdnext">
<input class="clsTextbox" id="fileupload2" style="width: 250px" type="file" size="48" runat="server"
name="fileupload2" />
</td>
</tr>
<tr>
<td class="clstd">Attachment 3)
</td>
<td class="clstd">
<input class="clsTextbox" id="fileupload3" style="width: 250px" type="file" size="48" runat="server"
name="fileupload3" />
</td>
</tr>
<tr>
<td class="clsReportTitle" align="center" style="width: 100%" colspan="2">Message
</td>
</tr>
<tr>
<%--<TD width="100%" colSpan=2>
<asp:TextBox id=txtMessage runat="server" CssClass="clsTextbox" Width="100%" TextMode="MultiLine" Height="250px"></asp:TextBox></TD>--%>
<td align="left" class="clstd" colspan="2">
<ftb:FreeTextBox ID="FreeTextBox1" EnableHtmlMode="false" ToolbarLayout="ParagraphMenu, FontFacesMenu, FontSizesMenu, FontForeColorsMenu,FontForeColorPicker, FontBackColorsMenu, FontBackColorPicker, Bold, Italic, Underline,Strikethrough, Superscript, Subscript|InsertImageFromGallery, CreateLink, Unlink, JustifyLeft, JustifyRight, JustifyCenter, JustifyFull,BulletedList, NumberedList, Indent, Outdent,Cut, Copy, Paste, Delete, Undo, Redo,Save,InsertRule, InsertDate,InsertTime,Preview"
Height="300px" runat="server" Width="100%">
</ftb:FreeTextBox>
</td>
</tr>
<tr>
<td style="width: 100%" class="clstd_btn" colspan="2">
<%--<input id="BtnSendEmail" type="button" class="clsButton" value="Send"/>--%>
<asp:Button ID="BtnSendEmail" runat="server" OnClientClick="return ValidationBeforeEmailSendClick();" CssClass="clsButton" Text="Send"></asp:Button>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td colspan="2" id="pnlSmsDtls" runat="server">
<asp:Panel ID="pnlpnlSmsDtls" runat="server" Width="100%">
<table cellspacing="1" cellpadding="0" width="100%" border="0">
<tr>
<td class="clstd" style="width: 25%">SMS Type
</td>
<td class="clstd">
<asp:DropDownList ID="ddlSmsType" CssClass="clsCombobox" runat="server">
<asp:ListItem Value="0">---Select---</asp:ListItem>
<asp:ListItem Value="1">Upcoming maturity/due date</asp:ListItem>
<asp:ListItem Value="2">New product offerings</asp:ListItem>
<asp:ListItem Value="3">Pick of the day</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="2" class="clstdnext">SMS Text
</td>
</tr>
<tr>
<td colspan="2" class="clstdnext" style="height: 40px">
<asp:TextBox ID="txtSmsText" runat="server" CssClass="clsTextbox" TextMode="MultiLine"
Width="100%" Height="100px">
</asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2" class="clstd_btn">
<input type="button" id="btnGo" value="Save" class="clsButton" />
<%--<asp:Button ID="btnGo" runat="server" CssClass="clsButton" Text="Save" />--%>
<asp:Button ID="btnSendSms" runat="server" CssClass="clsButton" Text="Send SMS"
Width="72px"></asp:Button>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
<input type="hidden" id="hdnType" />
</form>
Its argent... kindly please help.
Thanks in advance.

Why no CSS showing after printing using Window.Print()?

I want to print one particular div in my page. And to do so I am using the following code:
<script type="text/javascript">
function printDiv(divID) {
var DocumentContainer = document.getElementById(divID);
var WindowObject = window.open('', 'PrintWindow', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');
WindowObject.document.writeln('<!DOCTYPE html>');
WindowObject.document.writeln('<html><head>');
WindowObject.document.writeln('<style type="text/css" media="all">.labelalign {float: right !important;}.design {font-size: 16px;}.design1 {font-size: 15px;}.td {background-color: #A4A4A4;}</style>');
WindowObject.document.writeln('</head><body>');
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.writeln('</body></html>');
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}
</script>
<asp:Button ID="Btnpdfprint" runat="server" Text="Print to PDF" OnClientClick="javascript:printDiv('mydiv')" />
HTML Table:
<table style="width: 899px;" align="center" cellpadding="4" cellspacing="3">
<tr>
<td style="width: 50%;">
<%-- <asp:Label ID="lblcandidateid" runat="server" Text="Label" CssClass="design1" ></asp:Label>--%>
</td>
<td style="width: 50%">
<%--<asp:Image ID="candidateimg" runat="server" ImageUrl="img/avatar1_small.jpg" ImageAlign="Right" Width="90px" Height="83px" />--%></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2"><b class="design" style="background-color: #A4A4A4;">Personal Details</b>
<%-- <asp:Label ID="txtcandidatename" runat="server" Text="Label" CssClass="design1">
</asp:Label>--%>
</td>
</tr>
<tr>
<td><b class="design">Name: </b><asp:Label ID="txtcandidatename" runat="server" CssClass="design1" Text="Label"></asp:Label>
</td>
<td><b class="design">Nationality: </b><asp:Label ID="txtnationality" runat="server" CssClass="design1" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td><b class="design">Languages: </b><asp:Label ID="txtlanguage" runat="server" Text="Label" CssClass="design1"></asp:Label>
</td>
<td><b class="design">Current Address: </b><asp:Label ID="txtcurrentaddress" runat="server" CssClass="design1" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td><b class="design">Marital Status: </b><asp:Label ID="txtmaritalstatus" runat="server" Text="Label"></asp:Label>
</td>
<td><b class="design">Date of Birth: </b><asp:Label ID="txtdob" runat="server" Text="Label" CssClass="design1"></asp:Label>
</td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2" style="background-color: #A4A4A4;"><b class="design">Career Objective</b></td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="txtcandidateobjective" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2" style="background-color: #A4A4A4;"><b class="design">Career Profile</b></td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="txtcareerprofile" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2"><b class="design">Key Areas of Expertise</b></td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="txtskills" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2"><b class="design">Professional Experience</b></td>
</tr>
<tr>
<td>
<asp:Label ID="txtcompanyname" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
<td>
<asp:Label ID="txtdate" runat="server" Text="Label" CssClass="design1" align="right"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2"><i class="design">
<asp:Label ID="txttitle" runat="server" Text="Label" CssClass="design1"></asp:Label></i>
</td>
</tr>
<tr>
<td colspan="2"><b class="design"><i>Key Responsibilities</i></b></td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="txtkeyresponsibilities" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td colspan="2"><b class="design"><i>Key Achievements</i></b></td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="txtkeyachievements" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2"><b class="design">Education</b></td>
</tr>
<tr>
<td colspan="2"><b class="design">Education: </b>
<asp:Label ID="txteducation" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td colspan="2"><b class="design">Location: </b>
<asp:Label ID="txtlocation" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td colspan="2"><b class="design">Major: </b>
<asp:Label ID="txtmajor" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td colspan="2"><b class="design">Year of Passing: </b>
<asp:Label ID="txtpassing" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2"><b class="design">Certification</b></td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="txtcertification" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2"><b class="design">References</b></td>
</tr>
<tr>
<td>Will be presented upon request</td>
</tr>
</table>
I am getting like this into the printing window:
But this is my original design:
But when it prints it is not taking any CSS style specified for each label or TD. Please help me on this. Thanks.

Try creating the sytle element using document.createElement('style').
function printDiv(divID) {
var DocumentContainer = document.getElementById(divID);
var WindowObject = window.open('', 'PrintWindow', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');
var style = document.createElement('style');
var css = '.labelalign {float: right !important;}.design {font-size: 16px;}.design1 {font-size: 15px;}.td {background-color: #A4A4A4;}';
WindowObject.document.writeln('<!DOCTYPE html>');
WindowObject.document.writeln('<html><head>');
WindowObject.document.writeln('</head><body>');
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.writeln('</body></html>');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head = WindowObject.document.head || WindowObject.document.getElementsByTagName('head')[0];
head.appendChild(style);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}

Ok , here is your working code , i have added test table with small test style , updated to your html
<Button ID="Btnpdfprint" runat="server" Text="Print to PDF" OnClick="printDiv('mydiv')" />click</button>
<script type="text/javascript">
function printDiv(divID) {
var DocumentContainer = document.getElementById(divID);
var WindowObject = window.open('', 'PrintWindow', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');
WindowObject.document.writeln('<!DOCTYPE html>');
WindowObject.document.writeln('<html><head>');
WindowObject.document.writeln('<style type="text/css" media="all">#mydiv{color:red;font-size:30px; background-color: #1a4567 !important;-webkit-print-color-adjust: exact; }</style>');
WindowObject.document.writeln('</head><body>');
WindowObject.document.writeln('<div id="mydiv"><table><tr><td>table for test</td></tr></table></div>');
WindowObject.document.writeln('</body></html>');
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}
</script>
notes : i just replaced this line WindowObject.document.writeln(DocumentContainer.innerHTML);
with the html directly
and i have added small css attribute to the style
-webkit-print-color-adjust: exact;

Showing a repeater in a popup div on hover

l would like to show the following repeater in a popup div . the repeater being bind to a data table at the back end (Vb.net code)
l would like to show it as part of the data-content on hover for the following image
<div class="widget-canvas">
<asp:Repeater ID="Rptjobs" runat="server">
<HeaderTemplate>
<table id="tblClients2" align="center" cellpadding="2" cellspacing="0" border="0" width="260px">
<tr>
<td>JOBDESCRIPTION</td>
<td>TOTAL</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr >
<td valign="top" >
<%#DataBinder.Eval(Container.DataItem, "JOBDESCRIPTION")%>
</td>
<td valign="top" >
<a style="padding-left:10px;" href="" class ="dashtext"> <%#DataBinder.Eval(Container.DataItem, "TOTAL")%></a>
</tr>
<br />
</ItemTemplate>
<AlternatingItemTemplate>
<tr >
<td valign="top">
<%#DataBinder.Eval(Container.DataItem, "JOBDESCRIPTION")%>
</td>
<td valign="top" >
<a style="padding-left :10px;" href="" class ="dashtext"> <%#DataBinder.Eval(Container.DataItem, "TOTAL")%></a>
</tr>
</AlternatingItemTemplate>
FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<td><img src="Images/preview.png" style="width:18px; height:18px;" class="popTertiary" rel="popover" data-original-title=<%#DataBinder.Eval(Container.DataItem, "CURRENTSTATUS")%> data-content=""></td>

Grouping images to display in LightBox

I have an ASP.Net web page and have created a custom control that's soul purpose is to be a list "item" displayed in the main page's panel (asp:Panel), here is that list control:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="cListItem.ascx.cs" Inherits="CatPro.Presentation.UserControls.CatalyticItem" %>
<script src="../Scripts/jquery-1.10.2.min.js"></script>
<script src="../Scripts/lightbox-2.6.min.js"></script>
<link href="../Css/lightbox.css" rel="stylesheet" />
</style>
<table class="MainFrame" border="1" runat="server">
<tr>
<td runat="server">
<table class="MainFrame">
<tr>
<td class="CatImageColumn" rowspan="5">
<asp:DataList ID="DataList1" runat="server"
RepeatColumns="5"
RepeatDirection="Horizontal"
RepeatLayout="Flow">
<ItemTemplate>
<a id="ImageLink" href='<%# Eval((string)Container.DataItem) %>' data-lightbox="image-1">
<img id="Img1" src="<%# (string)Container.DataItem %>" width="150" height="150">
</a>
</ItemTemplate>
</asp:DataList>
</td>
<td class="LinkHeader" colspan="5">
<asp:LinkButton ID="hyperlinkDescription" runat="server" Font-Bold="True" Font-Size="X-Large">Item Description Link</asp:LinkButton>
</td>
<td class="LinkHeader">
</td>
</tr>
<tr>
<td class="FirstRowLabel">
<asp:Label ID="lblYear" runat="server" Text="Year"></asp:Label>
</td>
<td class="FirstRowText">
<asp:Label ID="txtYear" runat="server"></asp:Label>
</td>
<td class="SecondRowLabel">
<asp:Label ID="lblRasCategory" runat="server" Text="RAS Category:"></asp:Label>
</td>
<td class="SecondRowText">
<asp:Label ID="txtRASCategory" runat="server"></asp:Label>
</td>
<td class="ThirdRowLabel">
<asp:Label ID="lblValue89" runat="server" Text="Value:" ForeColor="Green"></asp:Label>
</td>
<td class="ThirdRowText">
<asp:Label ID="txtValue89" runat="server" ForeColor="Green">$0</asp:Label>
</td>
</tr>
<tr>
<td class="FirstRowLabel">
<asp:Label ID="lblMake" runat="server" Text="Make:"></asp:Label>
</td>
<td class="FirstRowText">
<asp:Label ID="txtMake" runat="server"></asp:Label>
</td>
<td class="SecondRowLabel">
<asp:Label ID="lblPMCategory" runat="server" Text="PowerMount Category:"></asp:Label>
</td>
<td class="SecondRowText">
<asp:Label ID="txtPMCategory" runat="server"></asp:Label>
</td>
<td class="ThirdRowLabel">
<asp:Label ID="lblValue100" runat="server" Text="Value:" ForeColor="Green"></asp:Label>
</td>
<td class="ThirdRowText">
<asp:Label ID="txtValue100" runat="server" ForeColor="Green">$0</asp:Label>
</td>
</tr>
<tr>
<td class="FirstRowLabel">
<asp:Label ID="lblModel" runat="server" Text="Model:"></asp:Label>
</td>
<td class="FirstRowText">
<asp:Label ID="txtModel" runat="server"></asp:Label>
</td>
<td class="SecondRowLabel">
<asp:Label ID="lblOENumber" runat="server" Text="OE Number:"></asp:Label>
</td>
<td class="SecondRowText">
<asp:Label ID="txtOENumber" runat="server"></asp:Label>
</td>
<td class="ThirdRowLabel"></td>
<td class="ThirdRowText"></td>
</tr>
<tr>
<td class="FirstRowLabel">
<asp:Label ID="lblSubModel" runat="server" Text="Sub Model:"></asp:Label>
</td>
<td class="FirstRowText">
<asp:Label ID="txtSubModel" runat="server"></asp:Label>
</td>
<td class="SecondRowLabel">
</td>
<td class="SecondRowText">
</td>
<td class="ThirdRowLabel"> </td>
<td class="ThirdRowText"> </td>
</tr>
</table>
</td>
For every record returned from a database call, one of these controls is added to the main page's Panel control. Each item may have more than 1 image, so i store them in a asp:DataList in the code behind:
string[] images = listCImages.Select(c => c.ImagePath).ToArray();
DataList1.DataSource = images;
DataList1.DataBind();
Ideally, i would like to display the first image in the data set on the control, then when clicked have the LightBox control display the related image collection (by clicking through the set in the LightBox window).
This is the section that uses the LightBox control i'm having issues setting up
<asp:DataList ID="DataList1" runat="server"
RepeatColumns="5"
RepeatDirection="Horizontal"
RepeatLayout="Flow">
<ItemTemplate>
<a id="ImageLink" href='<%# Eval((string)Container.DataItem) %>' data-lightbox="image-1">
<img id="Img1" src="<%# (string)Container.DataItem %>" width="150" height="150">
</a>
</ItemTemplate>
</asp:DataList>
I can load and display a single image with no issue, but my attempts to perform the above mentioned has not been so simple. Is this the right approach? What alterations should i make to get the desired outcome?

I've temporarily solved this by doing somewhat of a hack (a sloppy method in my opinion)...
I first dynamically created my display image:
//Create a HyperLink control
HyperLink linkWrapper = new HyperLink();
linkWrapper.ID = catId.ToString();
//assign a lightbox attribute
linkWrapper.Attributes.Add("rel", string.Format("lightbox[{0}]", catId.ToString()));
linkWrapper.Attributes.Add("title", string.Format("Image(s) for {0}", catId.ToString()));
//The path to my local image
linkWrapper.NavigateUrl = imagePath;
//next, create a display image
Image mainImage = new Image();
mainImage.Height = 128;
mainImage.Width = 128;
mainImage.ID = "img_" + catId.ToString();
mainImage.ImageUrl = imagePath;
//wrap the link around the image
linkWrapper.Controls.Add(mainImage);
//dynamically add display control to td cell
CatImages.Controls.Add(linkWrapper);
Then, if there were any other associated images, i added them like:
foreach (catImage cat in listCatImages) //custom generic list iteration
{
//create a HyperLink control
HyperLink hl = new HyperLink();
hl.Attributes.Add("rel", string.Format("lightbox[{0}]", catalyticConverterId.ToString()));
hl.Attributes.Add("title", "My Cats");
hl.NavigateUrl = cat.ImagePath;
//add just the link to the td cell
CatImages.Controls.Add(hl);
}
Now, when i click on the "Display Image", LightBox picks up the image group and allows me to navigate through them (and the links are not visible).

Javascript with ASP:TextBox inside Repeater

Okay so I've got a little problem with combining my own Javascript with the ASP server controls.
The picture: I've got a couple of ASP:TextBoxes on my page who are created by a repeater. My goal is to sum all the values the user types into these textboxes. This must happen whenever the user changes something to the content of the textboxes. (On the bottom of the page I got a little price calculator, which works with server side code but I want to make it more dynamic, I'm talking about txtTeam and txtPart)
<asp:Content ID="Content3" ContentPlaceHolderID="contentPlaceHolder" runat="Server">
<script type="text/javascript">
</script>
<div id='inputDiv'>
<h1>
Students per team</h1>
<table>
<tr>
<td>
Team
</td>
<td>
Actual
</td>
<td>
Maximum
</td>
</tr>
<asp:Repeater ID="Repeater2" runat="server" DataSourceID="odsTeams">
<ItemTemplate>
<tr>
<td id='td<%# Eval("team_id") %>'>
<%# Eval("name") %>
</td>
<td id='txtTeam<%# Eval("team_id") %>'>
<asp:TextBox ID="txtTeam" runat="server"></asp:TextBox>
<asp:RangeValidator EnableClientScript="true" ID="rgvTeams" runat="server" ErrorMessage="*"
MinimumValue="0" MaximumValue='<%# Eval("st_max") %>' ControlToValidate="txtTeam"></asp:RangeValidator>
</td>
<td id='lblTeam<%# Eval("team_id") %>'>
<asp:Label runat="server">
<%# Eval("st_max") %>
</asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
<asp:ObjectDataSource ID="odsTeams" runat="server" OldValuesParameterFormatString="original_{0}"
SelectMethod="GetTeamsByDelegationID" TypeName="ERASTableAdapters.tbl_teamTableAdapter"
OnSelecting="odsTeams_Selecting">
<SelectParameters>
<asp:Parameter Name="delegation_id" Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource>
<h1>
Additional Participants</h1>
<table>
<tr>
<td>
Category
</td>
<td>
Actual
</td>
<td>
Maximum
</td>
</tr>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="odsParticipantsCat">
<ItemTemplate>
<tr>
<td id='<%# Eval("participant_category_id") %>'>
<%# Eval("name") %>
</td>
<td id='txtPart<%# Eval("participant_category_id") %>'>
<asp:TextBox ID="txtPart" runat="server" Enabled='<%# getMax(Eval("key").ToString()) > 0 %>'></asp:TextBox>
<asp:RangeValidator EnableClientScript="true" ID="rgvPart" runat="server" ErrorMessage="*"
MinimumValue="0" MaximumValue='<%# getMax(Eval("key").ToString())%>' ControlToValidate="txtPart"></asp:RangeValidator>
</td>
<td id='lblPart<%# Eval("participant_category_id") %>'>
<asp:Label runat="server">
<%# getMax(Eval("key").ToString())%>
</asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
<asp:ObjectDataSource ID="odsParticipantsCat" runat="server" OldValuesParameterFormatString="original_{0}"
SelectMethod="GetAdditionalParticipantCategories" TypeName="ERASTableAdapters.tbl_participant_categoryTableAdapter">
</asp:ObjectDataSource>
</table>
</div>
<h1>
Advance to be paid</h1>
<table>
<tr>
<td>
Number of participants
</td>
<td>
Days
</td>
<td>
Price
</td>
<td>
Total
</td>
</tr>
<tr>
<td runat="server" id="tdNumberPart1">
0
</td>
<td runat="server" id="tdDays1">
0
</td>
<td runat="server" id="tdPrice1">
0
</td>
<td runat="server" id="tdTotal1">
0
</td>
</tr>
<tr>
<td runat="server" id="tdNumberPart2">
0
</td>
<td>
N/A
</td>
<td runat="server" id="tdPrice2">
0
</td>
<td runat="server" id="tdTotal2">
0
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td runat="server" id="tdGrandTotal" style="font-weight: bold">
0
</td>
</tr>
</table>
<asp:Button runat="server" ID="btnConfirm" Text="Confirm" OnClick="btnConfirm_Click"
Style="height: 29px" />
<asp:Label runat="server" ID="lblInfo"></asp:Label>

Give your tables ids, eg <table id="students"> and <table id="additional">. Then, iterate the rows, find the input element in each row, and sum the values as you go:
function sumTable(id)
{
var count = 0;
var studentTable = document.getElementById(id);
for (var i=1; i in studentTable.rows; i++)
{
var r = studentTable.rows[i];
var input = r.getElementsByTagName("input")[0];
var n = parseFloat(input.value);
if (isFinite(n)) count += n;
}
return count;
}
var totalParticipants = sumTable("students") + sumTable("additional");

Using a library like jquery you can easily select all input boxes within a particular div (say your repeater div) or you can add a class specifically to those input boxes and grab them that way.
Attach the function call to the onblur method so that when they move away from the textboxes you can sum them up.