Develop Reference

Set focus to child in web user control

I've created a web user control for phone number entry that has 3 text boxes for the area-code, number, and extension. The text boxes are in a table for positioning and the table is inside a span. In the page that uses the control I have <asp:Label ID="Label6" runat="server" AssociatedControlID="uxPhoneNumber">Phone</asp:Label>
What I want to do is set the focus to the area-code input when the associated label is clicked on. Does the web user control get the focus when the label is clicked, or can I change the html in the ascx so this works? I have tried adding onfocus() to the <span> tag, and the <table> tag so I can use a javascript to set the focus, but the event is not raised. If I move the onfocus() event to the first input it fires and my script runs
Here is the complete ascx code.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="PhoneNumber.ascx.cs" Inherits="CustomControls.PhoneNumber" %>
<span id="uxPhoneNumberControl" runat="server" style="display: inline-block;" onfocus="setInitialFocus()">
<asp:Table ID="uxPhoneNumberTable" runat="server">
<asp:TableRow runat="server">
<asp:TableCell runat="server">
<telerik:RadMaskedTextBox ID="uxAreaCode" runat="server" Columns="3" Mask="###" CssClass="span1" Skin="" MaxLength="3"></telerik:RadMaskedTextBox>
</asp:TableCell>
<asp:TableCell runat="server">
<telerik:RadMaskedTextBox ID="uxPhoneNumber" runat="server" Mask="###-####" Skin="" Columns="10" CssClass="input-mini" MaxLength="8"></telerik:RadMaskedTextBox>
</asp:TableCell>
<asp:TableCell runat="server">
<asp:Label ID="uxExtensionLabel" runat="server" Text="Ext." AssociatedControlID="uxExtension" CssClass="controls-label"></asp:Label>
</asp:TableCell>
<asp:TableCell runat="server">
<telerik:RadMaskedTextBox ID="uxExtension" runat="server" Columns="5" Mask="#####" Skin="" CssClass="span1"></telerik:RadMaskedTextBox>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<asp:HiddenField ID="uxPhoneEntity" runat="server" />
</span>

Try attaching a jQuery click event to the span and then setting focus to the input, like this:
$(document).ready(function(){
$('#uxPhoneNumberControl').on('click',function(){
$("#InputID").focus();
});
});
Note: I have put a general name of InputID in the focus() call, because I am not able to tell what ID or class you are using to uniquely identify the area code input control you want to set focus towards.

Your setInitialFocus() function should look something like this:
function setInitialFocus()
{
var area = document.getElementById("<%=uxAreaCode.ClientID%>");
area.focus();
return true;
}
This locates the uxAreaCode object and forces it to take focus.

Microsoft JScript runtime error: 'clientUploadComplete' is undefined

My user control code throws javascript error.
If I don't include uplNewRequestCreation in the main page, everything works as expected. All the server and client side file upload functions are triggered. The reason for including the update panel in main page is to avoid full page postback.
I have tried several solutions from online sources but none helped.
added scriptmanagerproxy to user control page
defined the javascript in code behind page_load - this solution worked, but it did not trigger
OnUploadedComplete="uplFile1_UploadedComplete"
added file upload user control as trigger to the main update panel and changed updatemode to conditional
Error message: After the FileUpload.ascx.cs is initialized, following error message is shown.
Microsoft JScript runtime error: 'clientUploadComplete' is undefined
I appreciate your help very much!
Thanks!!!!
Here's my code structure.
User control
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="FileUpload.ascx.cs"
Inherits="QTrack2.UserControls.FileUpload" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<script type="text/javascript">
function clientUploadComplete(sender, args) {
document.getElementById('<%= btnTrigger.ClientID %>').click();
}
</script>
<div style="float: left; margin-left: 0px;">
<asp:GridView ID="grdUploadControls" runat="server" AutoGenerateColumns="False" OnRowDataBound="grdUploadControls_RowDataBound"
CssClass="uploadTable" Caption="CIQ Files Required To Be Uploaded">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblCIQType" CssClass="Label" runat="server" Text='<%#Eval("Key")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="false">
<ItemTemplate>
<asp:Label ID="isReqlblCIQType" CssClass="Label" runat="server" Text='<%#Eval("Value")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ControlStyle-CssClass=" ">
<ItemTemplate>
<asp:AsyncFileUpload ID="uplFile1" runat="server" OnUploadedComplete="uplFile1_UploadedComplete"
CompleteBackColor="#E5FFE5" ErrorBackColor="#F4ADAE" Width="300" UploaderStyle="Modern"
ClientIDMode="AutoID" OnClientUploadComplete="clientUploadComplete"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:HiddenField ID="hdnFileSavePath" runat="server" Value="" />
<br />
</div>
<div style="float: left; margin-left: 20px; height: 40%; width: 650px; overflow: auto;
padding-right: 20px;">
<%-- <asp:UpdatePanel ID="upnlFileDisplayHolder" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnTrigger" />
</Triggers>
<ContentTemplate>--%>
<asp:GridView ID="grdFileDisplay" runat="server" AutoGenerateColumns="false" CssClass="uploadTable"
OnRowDataBound="grdFileDisplay_RowDataBound" Caption="CPM Files Currently Uploaded">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblFileType" CssClass="Label" runat="server" Text='<%#Eval("Value")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblFileName" CssClass="Label" runat="server" Text='<%#Eval("Key")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnDeleteFile" CssClass="button" runat="server" Text="Remove" OnClick="btnDeleteFile_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div>
<asp:Button ID="btnTrigger" runat="server" Text="fdkl" Style="display: none;" OnClick="btnTrigger_Click" />
</div>
<%-- </ContentTemplate>
</asp:UpdatePanel>--%>
</div>
<div style="clear: both">
</div>
Main page calling user control
<%# Page Title="New Request" Language="C#" MasterPageFile="~/Site.IM.master" AutoEventWireup="true"
CodeBehind="GenericNewRequest.aspx.cs" Inherits="QTrack2.CreatorPages.NewRequest.Scripts.Generic.GenericNewRequest" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%# Register TagPrefix="uc1" TagName="fileUploadUserControl" Src="~/UserControls/FileUpload.ascx" %>
<%# Register TagPrefix="uc2" TagName="ciqValidationUserControl" Src="~/UserControls/ciqValUserControl.ascx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
// This function is called whenever the user selects expected completion date from view # 3.
// This function checks if the selected date is less than currentDate and sets to the currentDate if true.
function checkSelectedDate(sender, args) {
if (sender._selectedDate < new Date()) {
var previouslySelectedDate = sender._textbox.value;
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel ID="uplNewRequestCreation" runat="server">
<ContentTemplate>
<asp:MultiView ID="mviewNewRequestCreation" runat="server" ActiveViewIndex="0">
<View #1>
.....
</View #1>
<View # 2>
<uc1:fileUploadUserControl ID="multUplUserCntrol1" runat="server" />
.....
</View # 2>
<View # 3>
....
</View #3>
</asp:MultiView>
</ContentTemplate>
</asp:UpdatePanel>

It is clear your Javascript function is not being registered within the update panel, you can do this:
Declare this function clientUploadComplete outside the User Control and outside the Update Panel.
Or also you can:
Call the document.getElementById('<%= btnTrigger.ClientID %>').click(); function not using a javascript function, something like this...
OnClientUploadComplete="document.getElementById('btnTrigger_clientName').click()"

Checkbox for images in an ASP.NET repeater control

I am working with ASP.NET. I am using a repeater to display images, and I also am using a check box for each image.
How can I select individual images and update their values as per image id?
My code is:
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<img ID="ImageZoom" runat="server"
src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %> '
style="display: inline; height:auto; left: 0pt; top: 0pt;
width:auto;" />
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:Repeater>

You could use javascript to implement this, something like this should do the trick:
Without jQuery
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<img ID="ImageZoom" runat="server"
onclick="imageClickHandler(this,event);"
src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %> '
style="display: inline; height:auto; left: 0pt; top: 0pt;
width:auto;" />
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:Repeater>
function imageClickHandler(s,e){
//do something with the current image that is being clicked on.
//The parameter 's' is a reference to the caller of this method and the 'e' contains
//event data
}
With jQuery
If your using jQuery, you could also try something like this:
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<img ID="ImageZoom" runat="server"
class="handled"
src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %> '
style="display: inline; height:auto; left: 0pt; top: 0pt;
width:auto;" />
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:Repeater>
<script type="text/javascript" src="jquery-1.7.3"></script>
$(function(){
$("img.handled").click(function(){
//alerts the id of the image thats being clicked on.
alert($(this).attr("id"));
});
});

Get the current bounded object in a ListView's ItemTemplate

I want to be able to get the current bound object in the ItemTemplate of a ListView control.
Here's an example of what I want to do:
<asp:ListView ID="UserList" runat="server">
<LayoutTemplate>
<asp:PlaceHolder ID="itemPlaceHolder" runat="server" />
</LayoutTemplate>
<ItemTemplate>
//How can I get the current bound object in here?
</ItemTemplate>
</asp:ListView>

You can access it via the DataItem:
<%# DataBinder.Eval(Container.DataItem, "myPropertyName")%>'
If you wanted a textbox for example:
<asp:Label ID="MyProp" runat="server" Text='<%#Eval("myPropertyName") %>' />
If you just want the full object:
<%# (MyType)Container.DataItem %>

Specify an item placeholder by setting a control's ID property to "itemPlaceholder"

I have only single "Default.aspx" page and a single ListView Control. Why am I getting this error. Never Happened before
"An item placeholder must be specified on ListView 'ListView1'. Specify an item placeholder by setting a control's ID property to "itemPlaceholder". The item placeholder control must also specify runat="server"."
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TesterConcepts._Default"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
onselecting="ObjectDataSource1_Selecting" SelectMethod="GetItemsCollection"
TypeName="TesterConcepts.CutomDataSource">
<SelectParameters>
<asp:Parameter Name="items" Type="Object" />
</SelectParameters>
</asp:ObjectDataSource>
<asp:ListView ID="ListView1" runat="server" DataSourceID="ObjectDataSource1"
onselectedindexchanged="ListView1_SelectedIndexChanged">
</asp:ListView>
</body>
</html>
doing this was not helpful even
<asp:ListView ID="ListView1" runat="server" DataSourceID="ObjectDataSource1"
OnSelectedIndexChanged="ListView1_SelectedIndexChanged"
ItemPlaceholderID="PlaceHolder1">
</asp:ListView>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
Now it throws this exception
"An item placeholder must be specified on ListView 'ListView1'. Specify an item placeholder by setting a control's ID property to "PlaceHolder1". The item placeholder control must also specify runat="server""

In ListView, Layout Template is the template which decides the Layout of the data display .
It should have an item placeholder tag with runat=”server” attribute.
Since the ListView's LayoutTemplate and ItemTemplate are each defined separately, we need some way to tell the LayoutTemplate, "Hey, for each record you are displaying, put the rendered item markup here." This is accomplished by adding a server-side control with the ID value specified by the ListView's ItemPlaceholderID property.
Ref - https://web.archive.org/web/20211020153238/https://www.4guysfromrolla.com/articles/122607-1.aspx
Hence U'll have to
1)Define a ItemsTemplate
2)Add a Placeholder in the LayoutTemplate
<tr runat="server" id="itemPlaceholder">
</tr>
or
<ItemTemplate>
<tr>
<td>
<asp:Label ID="MessageLabel" runat="server" Text='<%# Eval("Item") %>' />
</td>
<td>
<asp:Label ID="URLLabel" runat="server" Text='<%# Eval("URL") %>' />
</td>
</tr>
</ItemTemplate>
So the final Design will look like
<asp:ListView ID="NoticeItemsListView" runat="server">
<LayoutTemplate>
<table width="200px">
<tr>
<th>
Message
</th>
<th>
URL
</th>
</tr>
<tr runat="server" id="itemPlaceholder">
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="MessageLabel" runat="server" Text='<%# Eval("Item") %>' />
</td>
<td>
<asp:Label ID="URLLabel" runat="server" Text='<%# Eval("URL") %>' />
</td>
</tr>
</ItemTemplate>
</asp:ListView>

Inside your ListView you've to add a LayoutTemplate containing the PlaceHolder:
<asp:ListView ID="listview1" runat="server" ItemPlaceholderID="PlaceHolder1" >
<LayoutTemplate>
<asp:PlaceHolder ID="PlaceHolder1" runat="server" />
</LayoutTemplate>
<ItemTemplate>
...
</ItemTemplate>
</asp:ListView>

Looks like you need to define the placeholder element structure for the item elements which the query will return.
I'd suggest reading this article. A little old, but illustrates the concept.
https://web.archive.org/web/20211020153238/https://www.4guysfromrolla.com/articles/122607-1.aspx