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
}
}
Related
I have a repeater in which there is a Row which brings a value of Salary from a table. And there is a condition:
1)When user adds the salary value in a textbox, there are two radio buttons, YES and NO,
I want, whenever user selects the yes option, the salary value should be displayed in the repeater.
Please see the code for the Repeater and Textbox, Radiobuttons:-
<asp:Repeater ID="rep_Jobs" runat="server">
<ItemTemplate>
<h3 class="parag"><%# Eval("Position") %> - <%#Eval("Location") %></h3>
<div>
<table class="tab_table">
<tr class="a12">
<td style="font-weight:600;">Salary Range</td>
<%--<td><%#Eval("SalaryRange") %> lakhs per annum</td>--%>
<td><asp:Label ID="lblSalary" runat="server" Text='<%#Eval("SalaryRange") %>'></asp:Label></td>
</tr>
</tr>
</table>
<div class="btnDropbox"><a href='CareerApply.aspx?jobid=<%#Eval("JobId") %>'><b>Apply</b></a></div>
</div>
</ItemTemplate>
</asp:Repeater>
Textbox and Radiobutton code:-
<td>
<asp:TextBox CssClass="txtfld-popup" ID="txtSalaryRange" runat="server">
</asp:TextBox><span style="color: #CF060D;">lakhs per annum</span>
<asp:RequiredFieldValidator CssClass="error_msg" ID="reqSalaryRange" runat="server" ControlToValidate="txtSalaryRange" ErrorMessage="Please enter salary" SetFocusOnError="true"> </asp:RequiredFieldValidator>
<asp:RegularExpressionValidator CssClass="error_msg" ID="RegularExpressionValidator1" ControlToValidate="txtSalaryRange" runat="server" ErrorMessage="Invalid Salary" ValidationExpression="^(\d{1,3})(.\d{1,2})?$">
</asp:RegularExpressionValidator>
<asp:RadioButton ID="rbButtonYes" runat="server" Text="Show" GroupName="salary" />
<asp:RadioButton ID="rbButtonNo" runat="server" Text="Not Show" GroupName="salary" />
</td>
Note: The textbox of salary and Repeater is two different page. What should I do to show in repeater when the radiobutton is selected YES.
I tried with label on repeater and bringing value through querystring but couldn't achieved it.
Please help.
I don't want to show stepname. "Next" and "finish button" is enough for me. How to unvisible these?!
Second question's; after FinishButton's click, I want to redirect first step automatically. How to do?
<asp:Wizard runat="server" ID="MyWizard" OnNextButtonClick="MyWizard_NextButtonClick"
Width="440px" Height="200px" OnFinishButtonClick="MyWizard_FinishButtonClick">
<WizardSteps>
<asp:WizardStep ID="Wizardstep1" runat="server" StepType="auto">
</asp:WizardStep>
<asp:WizardStep ID="Wizardstep2" runat="server" StepType="auto">
</asp:WizardStep>
You can create your custom LayoutTemplate within Wizard control to hide step names. For example:
<LayoutTemplate>
<div>
<asp:PlaceHolder ID="headerPlaceHolder" runat="server" />
</div>
<div>
<asp:PlaceHolder ID="wizardStepPlaceholder" runat="server" />
</div>
<div>
<asp:PlaceHolder ID="navigationPlaceholder" runat="server" />
</div>
</LayoutTemplate>
Remeber that placeholders' id names matter. Placeholer responsible for displaying list of steps that you circled has id sideBarPlaceHolder (and you should not have any placeholder with this id inside LayoutTemlpate)
Second question:
You can have custom navigation template, for example:
<FinishNavigationTemplate>
<asp:Button ID="PreviousButton" runat="server" Text="Previous step" CausesValidation="false" CommandName="MovePrevious" />
<asp:Button ID="FinishButton" runat="server" Text="Finish" CausesValidation="true" CommandName="MoveComplete" OnCLick="FinishButton_Click" />
</FinishNavigationTemplate>
Note that these buttons have fixed CommandName (Wizard control expects this). You can try to use finish button's OnClick event to jump to the first step:
protected void FinishButton_Click(object sender, EventArgs e)
{
yourWizard.ActiveStepIndex = 0;
}
On my aspx page I have two fieldsets, each wrapped with an <asp:Panel DefaultButton="..."> that have their own <input type="submit"> buttons. Here's an abbreviated version...
<div id="content">...</div>
<asp:Panel runat="server" id="formPanel1" DefaultButton="form1SubmitButton">
<fieldset>
<asp:TextBox runat="server" id="textbox1"/>
<asp:TextBox runat="server" id="textbox2"/>
<asp:Button runat="server" id="form1SubmitButton" OnClick="form1SubmitButton_OnClick"/>
</fieldset>
</asp:Panel>
<asp:Panel runat="server" id="formPanel2" DefaultButton="form2SubmitButton">
<fieldset>
<asp:TextBox runat="server" id="textbox3"/>
<asp:TextBox runat="server" id="textbox4"/>
<asp:Button runat="server" id="form2SubmitButton" OnClick="form2SubmitButton_OnClick"/>
</fieldset>
</asp:Panel>
Only the last submit button form2SubmitButton will postback, the other button does nothing when clicked. I have simplified the code above but I should mention that each form, Panel included, is kept in a separate user control that is registered on the aspx.
UPDATE: After some more research I've figured out that the submits are not working because of validators on the another fieldset on the master page. That fieldset is for signing into the site, so it is needed. Thoughts?
As PCasagrande mentioned, make sure your validation groups match the default button and all validators. Specially for your logging part.
Example:
<asp:Panel ID="pnlUpdateInfo" runat="server" DefaultButton="btnUpdateInfo">
<ASP:TEXTBOX id="txtZip" runat="server"></ASP:TEXTBOX>
<asp:RequiredFieldValidator id="reqvalZipSignUp" runat="server"
ControlToValidate="txtZip" ValidationGroup="btnUpdateInfo" />
<asp:Button ID="btnUpdateInfo" runat="server" ValidationGroup="btnUpdateInfo" />
</asp:Panel>
Turns out it has to do with HTML5 constraint validation. I figured this out because in chrome, from the console, I was getting the error An invalid form control with name='...' is not focusable. This led me to this post. I added the html5 attribute formnovalidate="formnovalidate" to the submit buttons and everything works just fine (*tested in chrome v20.0.1132.57, firefox v14.0.1, IE9 v9.0.8112).
So to recap, here's the answer...
<asp:Button runat="server" id="submit1" OnClick="submit1_OnClick" text="Submit" formnovalidate="formnovalidate"/>
I am using a modal popup that contains a dropdown box. When the dropdown is changed I'm trying to retrieve data and assign it labels also within the modal. I observe the label values being set in the debugger but they do not show in the modal.
Modal/Panel Code:
<asp:Panel ID="pnlUpdate" runat="server" CssClass="modalPopup">
<div>
<asp:UpdatePanel runat="server" ID="upSubnetUpdate" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" ID="pnlLblSubnet" CssClass="searchLabel">Subnet:</asp:Label>
<asp:DropDownList runat="server" ID="ddlSubnet" OnSelectedIndexChanged="ddlSubnet_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList><br />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div>
<asp:Label runat="server" ID="lblIPStartUpdate"></asp:Label>
<asp:Label runat="server" ID="lblIPEndUpdate"></asp:Label>
<asp:Label runat="server" ID="lblGatewayUpdate"></asp:Label>
<asp:Label runat="server" ID="lblSubnetMaskUpdate"></asp:Label>
</div>
</asp:Panel>
Dropdown Code
protected void ddlSubnet_SelectedIndexChanged(object sender, EventArgs e)
{
SubnetInfo si = GetSubnetInfo(ddlSubnet.SelectedItem.Text);
lblIPStartUpdate.Text = si.IP_Start;
lblIPEndUpdate.Text = si.IP_End;
lblGatewayUpdate.Text = si.Gateway;
lblSubnetMaskUpdate.Text = si.Subnet_Mask;
}
I'm not sure if this is a page lifecycle issue or a limitation of the modal popup.
Thanks for the help!
You need to put the DropDown and the labels in an UpdatePanel. The dropdown is in an UpdatePanel, but it cannot update the labels if they're not in an UpdatePanel too.
First off, I am not dynamically creating any controls. This is the order I take to produce the error:
I have a listview on the page, when I click the edit link under the listview, I display a panel which is hidden by default. The panel has a few buttons on it along with some listboxes. When I click an item in the listbox or click one of the buttons, I get the following error:
Failed to load viewstate. The control tree into which viewstate is being loaded must match the control tree that was used to save viewstate during the previous request. For example, when adding controls dynamically, the controls added during a post-back must match the type and position of the controls added during the initial request.
Again, I am not creating anything dynamically, I am just hiding the panel with the controls by default and then displaying them, so I am not sure why I am getting this error.
Here is some code:
PAGE LOAD
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
Session["Albums"] = null;
Albums = AlbumCollection.GetAlbums(Common.GetUserName(),
ddlAlbumType.SelectedIndex);
lvwAlbums.DataSource = Albums;
lvwAlbums.DataBind();
}
}
When I click the edit link, this is the code that runs:
protected void lvwAlbums_RowEditing(object sender, ListViewEditEventArgs e)
{
this.AlbumId = int.Parse(
this.lvwAlbums.DataKeys[e.NewEditIndex].Values["AlbumId"].ToString());
this.AlbumName=
this.lvwAlbums.DataKeys[e.NewEditIndex].Values["AlbumName"].ToString();
Album album = new Album(this.AlbumId);
ViewState["AlbumId"] = this.AlbumId;
ViewState["AlbumName"] = this.AlbumName;
pnlAlbum.Visible = true; // This panel holds the controls
btnEditAlbum.Visible = true;
btnCancel.Visible = true;
EditAlbum(this.AlbumId);
this.lvwAlbums.EditIndex = e.NewEditIndex;
AlbumCollection.GetAlbums(Common.GetUserName(),ddlAlbumType.SelectedIndex);
}
If I click the cancel button, I get the error, but it also happens if click another button on the panel such as Add/Remove... Here is the code for the Cancel button:
pnlAlbum.Visible = false;
this.lvwAlbums.EditIndex = -1;
AlbumCollection.GetAlbums(Common.GetUserName(), ddlAlbumType.SelectedIndex);
Here is the aspx/html for the ListView:
<asp:ListView ID="lvwAlbums"
runat="server"
GroupItemCount="5"
DataKeyNames="AlbumId,AlbumName"
OnItemEditing="lvwAlbums_RowEditing"
OnItemCommand="lvwAlbums_ItemCommand"
OnItemDeleting="lvwAlbums_RowDeleting"
OnSelectedIndexChanging="lvwAlbums_SelectedIndexChanging"
OnPagePropertiesChanging="lvwAlbums_PagePropertiesChanging">
<EditItemTemplate>
<td>
<div>
<asp:TextBox ID="txtAlbumName" runat="server"
Text='<%# Eval("AlbumName").ToString().Trim() %>' />
<asp:LinkButton ID="lnkView" runat="server" Text="View" CommandName="View"
CommandArgument='<%# Eval("AlbumId") %>'>
</asp:LinkButton>
|
<asp:LinkButton ID="lnkEdit" runat="server" Text="Edit" CommandName="Edit"
CommandArgument='<%# Eval("AlbumId") %>'>
</asp:LinkButton>
|
<asp:LinkButton ID="lnkDelete" runat="server" Text="Delete" CommandName="Delete"
CommandArgument='<%# Eval("AlbumId") %>'>
</asp:LinkButton>
<br />
<span>Songs:
<%# Eval("total") %></span>
</div>
</td>
</EditItemTemplate>
<LayoutTemplate>
<asp:DataPager runat="server" ID="ItemDataPager" PageSize="20"
PagedControlID="lvwAlbums">
<Fields>
<asp:NumericPagerField ButtonType="Link" NumericButtonCssClass="pager" />
</Fields>
</asp:DataPager>
<table>
<tr>
<td>
<table>
<asp:PlaceHolder runat="server" ID="groupPlaceHolder"></asp:PlaceHolder>
</table>
</td>
</tr>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<asp:Literal ID="litAlbumName" runat="server"
Text='<%# Eval("AlbumName").ToString().Trim() %>' />
<br />
<asp:LinkButton ID="lnkView" runat="server" Text="View" CommandName="View"
CommandArgument='<%# Eval("AlbumId") %>'>
</asp:LinkButton>
|
<asp:LinkButton ID="lnkEdit" runat="server" Text="Edit" CommandName="Edit"
CommandArgument='<%# Eval("AlbumId") %>'>
</asp:LinkButton>
|
<asp:LinkButton ID="lnkDelete" runat="server" Text="Delete" CommandName="Delete"
CommandArgument='<%# Eval("AlbumId") %>'>
</asp:LinkButton>
<br />
<span>Songs:
<%# Eval("total") %></span>
</td>
</ItemTemplate>
</asp:ListView>
Here is the markup for the Panel:
<asp:Panel ID="pnlAlbum" runat="server" Visible="false">
<asp:ListBox ID="lstAvailableSongs" runat="server" SelectionMode="Multiple">
</asp:ListBox>
<asp:Button ID="btnAddAll" runat="server" Text="Add All" OnClick="btnAddAll_Click" />
<asp:Button ID="btnAdd" runat="server" Text="Add" OnClick="btnAdd_Click" />
<asp:Button ID="btnRemove" runat="server" Text="Remove" OnClick="btnRemove_Click" />
<asp:Button ID="btnRemoveAll" runat="server"
Text="Remove All"OnClick="btnRemoveAll_Click" />
<asp:ListBox ID="lstSelectedSongs" runat="server" SelectionMode="Multiple">
</asp:ListBox>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" />
<asp:Button ID="btnEditAlbum" runat="server"Text="Save"
ValidationGroup="CreateAlbum" OnClick="btnEditAlbum_Click" />
<asp:Button ID="btnSaveAs" runat="server" Text="Save As" ValidationGroup="CreateAlbum"
OnClick="btnSaveAs_Click" />
</asp:Panel>
Here is some extra info:
I put an update panel around one of the listboxes in the panel and when I clicked the edit link under a listview item, I received the following error:
Microsoft JScript runtime error: Sys.InvalidOperationException: Could not find UpdatePanel with ID 'ctl00_ctl00_InnerContent_MainContent_UpdatePanel4'. If it is being updated dynamically then it must be inside another UpdatePanel.
Putting an UpdatePanel around the whole asp.net panel resolved the issue above, but I still get the Failed to load viewstate error when clicking on Cancel or Add, etc...
First off, you probably need to rebind the ListView after setting the EditIndex. (honestly, I haven't used ListView at all, but this is how the other repeater controls work) What does "EditAlbum()" do?
Your code is a little odd... why do you have the same controls in your EditItemTemplate as in the ItemTemplate? Ie, the Edit button should only be in the ItemTemplate... Then EditItemTemplate should have a Save or Cancel button.
Bottom line... your control tree is different on LoadViewState than it is when SaveViewState was called. One thing you can do is override these methods and then put a breakpoint there to manually look at the Controls collection in the debugger. You will probably see that the controls inside the ListView are different. But try my first suggestion before you do this.
Question for you:
in your Page_Load you have
Albums = AlbumCollection.GetAlbums(Common.GetUserName(), ddlAlbumType.SelectedIndex);
but in lvwAlbums_RowEditing(..) and in btnCancel_Click(...) you have
AlbumCollection.GetAlbums(Common.GetUserName(), ddlAlbumType.SelectedIndex);
shouldn't these be (Albums = ...)
Albums = AlbumCollection.GetAlbums(Common.GetUserName(), ddlAlbumType.SelectedIndex);