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.
Related
I have an ASP web form that includes divs, checkboxes, textboxes, buttons and dropdowns. Backend is c#.
I have an "Add" button at the bottom that when clicked, I want it to duplicate my form below the existing one.
Other than copying my form multiple times and toggling visibility based on a button click, is there some way I can put my form in a class and call on it based on the button click? Or any other way? Would think gridview is an option but I use divs within the form which is not allowed in gridview.
For Example:
<form id="form" runat="server">
<asp:ScriptManager ID="MainScriptManager" runat="server" />
<asp:UpdatePanel ID="updatepnl" runat="server">
<ContentTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
<asp:Button ID="add" runat="server" Text="Add" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
The Add button can be moved outside of the update panel if necessary. But I would like to duplicate the form below the original via clicking the Add button. Would also be handy if I could have a remove option as well.
This is the only related post I've found so far on SO, not my exact issue, but close.
If I give focus to the first textbox on my page and then press TAB repeatedly until I reach the last control on my page the tab order works flawlessly, every control is given focus in the correct order.
BUT...
If I am actually filling out the form and I select a value in ANY dropdownlist, when I press TAB after selecting the value focus is given to the first textbox on my page rather than the next control after said dropdownlist.
I created a control that includes a label, a dropdownlist and an imagebutton because this list is used multiple times throughout my application. The control looks like this:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="OrganizationList.ascx.cs" Inherits="MyApp.Web.Controls.OrganizationList" %>
<%# Register src="UpdateProgress.ascx" tagname="UpdateProgress" tagprefix="uc1" %>
<%# Register src="Address.ascx" tagname="Address" tagprefix="uc2" %>
<asp:UpdatePanel ID="OrganizationUpdatePanel" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div style="margin: 0px;">
<div class="label"><asp:Label ID="Prompt" runat="server"></asp:Label>:</div>
<div class="field"><asp:DropDownList ID="Organizations" runat="server" Width="205" AutoPostBack="True" DataTextField="Name" DataValueField="Id"></asp:DropDownList> <asp:ImageButton id="AddOrganization" runat="server" ImageAlign="AbsMiddle" ToolTip="Add a new organization" onclick="AddOrganization_Click" /></div>
</div>
<asp:HiddenField ID="DummyButton" runat="server" />
<ajax:ModalPopupExtender ID="AddOrganizationModalPopupExtender" runat="server" BackgroundCssClass="modalBackground" CancelControlID="Cancel" DropShadow="true" PopupControlID="NewOrganization" RepositionMode="RepositionOnWindowResizeAndScroll" TargetControlID="DummyButton"></ajax:ModalPopupExtender>
<asp:Panel ID="NewOrganization" runat="server" CssClass="modalPopUp" Width="500">
<asp:Panel ID="OrganizationModalContent" runat="server" CssClass="modalContent" GroupingText="Add Organization" style="text-align: left; vertical-align: top;" Width="490">
<table border="0" cellpadding="2" cellspacing="0" width="100%">
<tr><td colspan="2"><asp:ValidationSummary ID="OrganizationValidationSummary" runat="server" CssClass="ValidationSummary" ValidationGroup="NewOrg" /></td></tr>
<tr><td class="label"><asp:RequiredFieldValidator ID="NameRequired" runat="server" ControlToValidate="Name" Display="Dynamic" ErrorMessage="Please provide the organization's name." SetFocusOnError="true" ValidationGroup="NewOrg">*</asp:RequiredFieldValidator>Organization Name:</td>
<td><asp:TextBox ID="Name" runat="server" MaxLength="100" Width="200"></asp:TextBox></td></tr>
<tr><td class="label"><asp:RequiredFieldValidator ID="PhoneRequired" runat="server" ControlToValidate="Phone" Display="Dynamic" ErrorMessage="Please provide the organization's phone number." SetFocusOnError="true" ValidationGroup="NewOrg">*</asp:RequiredFieldValidator>Phone:</td>
<td><ajax:MaskedEditExtender ID="PhoneMaskedEditExtender" runat="server" ClearTextOnInvalid="true" InputDirection="LeftToRight" Mask="(999)999-9999" MaskType="Number" MessageValidatorTip="true" PromptCharacter="_" TargetControlID="Phone"></ajax:MaskedEditExtender>
<asp:TextBox ID="Phone" runat="server" MaxLength="10" Width="200"></asp:TextBox></td></tr>
<tr><td class="label">Fax:<br />(optional)</td>
<td><ajax:MaskedEditExtender ID="FaxMaskedEditExtender" runat="server" ClearTextOnInvalid="true" InputDirection="LeftToRight" Mask="(999)999-9999" MaskType="Number" MessageValidatorTip="true" PromptCharacter="_" TargetControlID="Fax"></ajax:MaskedEditExtender>
<asp:TextBox ID="Fax" runat="server" MaxLength="10" Width="200"></asp:TextBox></td></tr>
<tr><td colspan="2"><uc2:Address ID="Address" runat="server" /></td></tr>
<tr><td colspan="2" style="text-align: right;"><asp:HiddenField ID="TypeOfList" runat="server" /><asp:Button ID="Submit" runat="server" CausesValidation="true" Text="Submit" onclick="Submit_Click" ValidationGroup="NewOrg" /><asp:Button ID="Cancel" runat="server" Text="Cancel" /></td></tr>
</table>
</asp:Panel>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<uc1:UpdateProgress ID="OrganizationUpdateProgress" runat="server" AssociatedUpdatePanelId="OrganizationUpdatePanel" />
Here's the TabIndex property on my control:
public short TabIndex
{
get { return Organizations.TabIndex; }
set { Organizations.TabIndex = value; AddOrganization.TabIndex = (short)(value + 1); }
}
Here's one of the references to the control on the parent page:
<uc3:OrganizationList ID="ReportedBy" runat="server" FieldLabel="Reported By" ListType="ReportedBy" TabIndex="105" />
Not sure what else you might want/need to see.
Browsers: IE8, IE9, IE10, FF 29.0.1
We've had some issues with IE versions above 9, so I added a HTTP Response Header to emulate IE9
My users claim that they primarily TAB to navigate in my app, so this is actually a higher priority bug than I expected. I don't know why the TabIndex is ignored once a value is selected.
Any ideas would be greatly appreciated.
UPDATE:
I do have 1 dropdownlist that is just an out-of-the-box dropdownlist, not a user control. That one works correctly. I can select a value in that list and then press TAB and the focus moves to the next control. So, can anyone help me figure out what is "wrong" with my user control that is causing this bug?
These two posts helped me figure out what I needed to do:
A postback via update panel resets TabIndex?
Accessing ToolKitScriptManager/ScriptManager from custom control
I added a SelectedIndexChanged event handler to my DropDownList in my control and set the focus back to the DropDownList. Here's the code:
protected void Organizations_SelectedIndexChanged(object sender, EventArgs e)
{
DropDownList ddl = (DropDownList)sender;
ScriptManager scriptMgr = ScriptManager.GetCurrent(Page);
scriptMgr.SetFocus(ddl);
}
Here's the control on the .aspx page:
<asp:DropDownList ID="Organizations" runat="server" Width="205" OnSelectedIndexChanged="Organizations_SelectedIndexChanged" AutoPostBack="True" DataTextField="Name" DataValueField="Id"></asp:DropDownList>
2014.05.22 UPDATE:
In my custom control I have an image button (+) named AddOrganization. In testing the fix yesterday we discovered that if a user clicked the '+' to add a new organization...after they saved the organization...the new value would get auto-selected (as expected) but the tabbing would get reset again. So I had to modify my button click event handler:
protected void Submit_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
// Do stuff...save organization
// update the list
BindOrganizationList();
// select the new value
Organizations.SelectedIndex = Organizations.Items.IndexOf(Organizations.Items.FindByText(OrganizationName.Text.ToUpper().Trim()));
// reset the form
ResetOrganizationForm();
OrganizationUpdatePanel.Update();
// set focus back to the dropdownlist
ScriptManager scriptMgr = ScriptManager.GetCurrent(Page);
scriptMgr.SetFocus(Organizations);
}
else
{
// Display friendly validation messages to user
}
}
Basically I have this situation
Page >
Update Panel >
User Control >
List View >
User Control (Within item template) >
Update Panel
When I click on a button within the inner most update panel, I want the content of the update panel to update. This isn't happening. However, the click handler is being hit fine asynchronously. The update panel just doesn't want to update.
Code - I've created a simple test web app that replicates the problem, and shared it on my google drive: UpdatePanelInListViewTest.zip, but here's the markup:
Page:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="ajaxParent" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<uc1:ListUserControl ID="ListUserControl1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
List User Control:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="ListUserControl.ascx.cs" Inherits="UpdatePanelInListViewTest.ListUserControl" %>
<%# Register src="MiniWidget.ascx" tagname="MiniWidget" tagprefix="uc1" %>
<asp:ListView ID="lstTest" runat="server">
<ItemTemplate>
Item
<uc1:MiniWidget ID="MiniWidget1" runat="server" />
</ItemTemplate>
</asp:ListView>
Mini Widget User Control
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="MiniWidget.ascx.cs" Inherits="UpdatePanelInListViewTest.MiniWidget" %>
<asp:UpdatePanel ID="ajaxWidget" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:LinkButton ID="lnkTest" runat="server" onclick="lnkTest_Click">Test</asp:LinkButton>
<asp:Label ID="lblTest" runat="server" Text=""></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
I've tried different permutations of this; i.e. having the button outside the panel and adding a trigger etc but I just cannot get it to update.
It appears that because the user control is within an item template of the parent list view it causes the update panel to not update for some reason...
The problem is to do with when you call the databind method within ListUserControl.
Moving lstTest.DataBind(); so that it executes within the Page_Load rather than the Page_PreRender fixes the issue for your simple test web app.
have u tried:
<asp:UpdatePanel ID="ajaxPanel" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnTest" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="btnTest" runat="server" Text="Test" onclick="btnTest_Click" />
</ContentTemplate>
</asp:UpdatePanel>
Here is my designer code
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
</br>Product Name:<%#DataBinder.Eval(Container.DataItem,"ProductName") %>
</br>Quantity:<%#DataBinder.Eval(Container.DataItem,"Quantity") %>
</ItemTemplate>
</asp:Repeater>
</asp:Content>
When I run the program, the repeater details like product name and Quantity details will hidden it and only display when I use the mouse to highlight it.
Since you have set the background color of the body of the HTML document, then the repeater is just inserting text on top of that background, thus it is inheriting the background color of the body.
To control the background color of the Product Name and Quantity, put them inside of ASP.NET Label controls and then use CssClass to control their background color, like this:
<ItemTemplate>
<br/>
<asp:Label id="Label1" runat="server" CssClass="WhiteBackground"
Text="Product Name: " />
<asp:Label id="LabelProductName" runat="server" CssClass="WhiteBackground"
Text='<%#DataBinder.Eval(Container.DataItem,"ProductName") %>' />
<br/>
<asp:Label id="Label2" runat="server" CssClass="WhiteBackground"
Text="Quantity: " />
<asp:Label id="LabelQuantity" runat="server" CssClass="WhiteBackground"
Text='<%#DataBinder.Eval(Container.DataItem,"Quantity") %>'
</ItemTemplate>
CSS:
.WhiteBackground {
background-color: white;
}
I have two tab panels, and in each of these there is a user control.
<asp:Label ID="lblWarning" runat="server"></asp:Label>
<asp:TabContainer ID="tabContainer" runat="server">
<asp:TabPanel ID="tab1" runat="server">
<contenttemplate>
<uc3:YYY ID="userControl1" runat="server" />
</asp:TabPanel>
<asp:TabPanel ID="tab2" runat="server">
<contenttemplate>
<uc1:XXX ID="userControl2" runat="server" />
</contenttemplate>
</asp:TabPanel>
</asp:TabContainer>
Now consider that I have a required field validator in one of my user controls, and there is a label in the main page as you see. When I clicked a button in main page, I want to display required field validator's error message in my main page's label(lblWarning).
Is this possible or not, and if yes, how?
Thank you all...
In the end, I could not solve this problem, and I have written a javascript alert function for displaying the required filed validators message.