Set Focus not working in asp.net - asp.net

I'm trying to set focus on a control after Postback but its not working. below are the details.
I have some code inside a Panel. Panel will be open closed using ajax.
There is a radio button inside panel ... Once I click the radio button, i want to focus on that control but it goes to start of the page due to post back.
I tried
1. SetFocus(controlID);
2. controlID.Focus();
3. set focus to control in javascript also
but no solution working.
This is a long page ... I have more panels in it. Not sure why my solutions are not working.
Attached my code below:
<Panel> first panel comes here...</Panel>
<div class="demoarea">
<asp:Panel ID="pnl_2_Header" runat="server" CssClass="collapsePanelHeader" Height="30px">
<div style="padding:5px; cursor: pointer; vertical-align: middle;">
<div style="float: left;">User's Information</div>
<div style="float: left; margin-left: 20px;">
<asp:Label ID="lbl_2_Header" runat="server" Visible="False">(Show Details...)</asp:Label>
</div>
<div style="float: right; vertical-align: middle;">
<asp:ImageButton ID="img_2_Header" runat="server" ImageUrl="~/images/expand_blue.jpg" AlternateText="(Show Details...)" Visible="False"/>
</div>
</div>
</asp:Panel>
<asp:Panel ID="pnl_2" runat="server" CssClass="collapsePanel" Height="0" BorderStyle="solid" BorderWidth="1">
<table width="100%" style="text-align:left;font-weight:300;" cellpadding="7">
<tr valign="top">
<td style="width:50%;">
School in Primary 6 :
<br /><br />
<asp:RadioButton ID="rdoPri1" runat="server"
Text="sometext" GroupName="pri" value="1"
AutoPostBack="True" oncheckedchanged="rdoPri1_CheckedChanged" /> <br />
<asp:RadioButton ID="rdoPriOther" runat="server" Text="Others"
GroupName="pri" value="2" AutoPostBack="True"
oncheckedchanged="rdoPriOther_CheckedChanged" />
<asp:TextBox ID="txtPriOther" CssClass="txt" Width="50%" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqPriOther" ValidationGroup="pnl_2" Visible="false" runat="server" ControlToValidate="txtPriOther" Text="*" ErrorMessage="*" SetFocusOnError="true"></asp:RequiredFieldValidator>
</td>
</tr>
</table>
</asp:Panel>
</div>
<ajaxToolkit:CollapsiblePanelExtender ID="cpe_2" runat="Server"
TargetControlID="pnl_2"
ExpandControlID="pnl_2_Header"
CollapseControlID="pnl_2_Header"
Collapsed="True"
TextLabelID="lbl_2_Header"
ImageControlID="img_2_Header"
ExpandedText="(Hide Details...)"
CollapsedText="(Show Details...)"
ExpandedImage="~/images/collapse_blue.jpg"
CollapsedImage="~/images/expand_blue.jpg"
SuppressPostBack="true"
SkinID="CollapsiblePanelDemo" />
<Panel> 3rd Panel </Panel>
...
Code behind:
protected void rdoPri1_CheckedChanged(object sender, EventArgs e)
{
-- Some code here --
//SetFocus(pnl_2);
rdoPri1.Focus();
}

Web form server control event will trigger postback when Autopostback is set to true. It means your Set focus will not be working expected after one of the controls triggered postback.
So, my personal opinion, it you need such a UI/UX design, I would suggest to use client script instead.

Add the same control.Focus() or setfocus in page load, and add conditions like if needed
//in page load
if (rdoButton1.Checked) {//setfocus here}

Related

how to stop refreshing of current page when any server side event of web user control being fired

I'm building a web user control.
Now i need to fire some server side events on web user control.
And also need to stop page refreshing.
Can any one tell me how can i fire server side event on web user control without refreshing hole page.
Edit-1
My control (.ascx)
<%--Control designer start--%>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div style="position:relative;border:none;" id="divComboContainer" runat="server" >
<%--Hidden fields for datacombo values--%>
<asp:HiddenField ID="Hidden_Value" Value="" runat="server" />
<asp:HiddenField ID="Hidden_SorDir" Value="" runat="server" />
<asp:HiddenField ID="Hidden_RowIndex" Value="" runat="server" />
<asp:HiddenField ID="hfScrollPosition" Value="" runat="server" />
<%--Seleted text display textbox--%>
<asp:TextBox ID="txtDisplay" runat="server" CssClass="tb10" autocomplete="off" ToolTip="Type for search"></asp:TextBox>
<%--Panal and controls for dropdown--%>
<asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel" Width="1000px"
style="display :none;
visibility: hidden;
border:2px solid #E5E5E5;
padding-bottom:-1px;
margin-top:-28px;
background-color:#83ACF3;
overflow:hidden;
height:auto;
max-height:700px;
max-width:1000px;">
<%--<asp:Button ID="Button1" runat="server" Text="Button" />--%>
<%--Search textbox div--%>
<div class="ddeSerch">
<div style="padding-top:5px;float:left;">
Look-Up
</div>
<asp:TextBox runat="server" ID="txtSearch" autocomplete="off" CssClass="tb10" BackColor="White" Width="50%" MaxLength="150"
onclick="return false;"
style="background: url(GridViewCSSThemes/Images/tia.png) no-repeat top right;background-color:White;padding-right:25px;">
</asp:TextBox>
<div style="padding-top:5px;float:right;cursor:pointer;" runat="server" id="dcmbClose" >
Close
</div>
</div>
<%--Datacombo header--%>
<asp:Table ID="Table1" runat="server" CssClass="header" GridLines="Vertical" Width="100%">
</asp:Table>
<%--Datacombo body(records)--%>
<div id="divGrid" runat="server" style="max-height:615px;width:100%;overflow-X:auto;overflow-Y:auto;">
<asp:GridView ID="gridEdit" GridLines="Vertical" runat="server" Width="100%"
ShowFooter="false" AutoGenerateColumns="false" ShowHeader="false" AllowSorting="true"
Font-Size = "11pt" Font-Names = "Arial" style="color:Black;"
AlternatingRowStyle-BackColor="#CCDDFB"
RowStyle-BackColor="WhiteSmoke"
OnRowCreated="gridEdit_RowCreated" OnRowDataBound="gridEdit_RowDataBound" OnSorting="gridEdit_Sorting">
<HeaderStyle HorizontalAlign="Left" CssClass="header" Font-Bold="false" />
<RowStyle CssClass="rowstyle"/>
<Columns>
</Columns>
</asp:GridView>
</div>
<%--Datacombo footer--%>
<table class="footer" id="tblfooter" runat="server">
<tr>
<td style="text-align:left;">
<asp:TextBox Enabled="false" autocomplete="off" ID="lblOrd" CssClass="footer" runat="server" Width="100%"></asp:TextBox>
</td>
<td style="text-align:right;">
<asp:TextBox Enabled="false" autocomplete="off" ID="lblTot" CssClass="footer" style="text-align:right;" runat="server" Width="100%"></asp:TextBox>
</td>
</tr>
</table>
</asp:Panel>
<ajaxToolkit:DropDownExtender runat="server" ID="DDE"
TargetControlID="txtDisplay"
DropDownControlID="DropPanel" HighlightBorderColor="Transparent">
</ajaxToolkit:DropDownExtender>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Use on aspx page
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<uc1:UCDataCombo runat="server" ID="UCDataCombo4"/>
</ContentTemplate>
</asp:UpdatePanel>
When user clicks on header of gridview it fires some events.
And hole page got refreshed.
I need to stop refreshing of hole page.
UpdatePanel enables sections of a page to be partially rendered without a postback.
You can have a full understanding by reading here.
-EDIT-
I don't if this will help but you gotta try this:
Check if is set in your web.config, if it is there you may want to remove it.
Go to this link for more details.
Hope it helps!
Problem i solved by setting clientIDMode to Static.
clientIDMode="Static".
Now update panel works fine.

ASP.NET AJAX ModalPopupExtender - opening with wrong button

I am having trouble with the AJAX ModalPopupExtender control. What I am trying to do is click a button, trigger a postcode lookup using Yahoo API with the button click event, display this in an asp panel in the ShowModalDialog box, and then close the dialog. I also need a separate button on the page to submit information using a form that is completely separate from this.
I have set the target button up as follows:
<asp:Button ID="btnStockist" runat="server" BackColor="#2C3473" OnClick="btnStockist_Click" />
The modalpopup is as follows:
<ajax:ModalPopupExtender ID="mpeStockist" runat="server" okcontrolid="btnOkay" targetcontrolid="btnStockist" popupcontrolid="pnlDisplay"
popupdraghandlecontrolid="PopupHeader" drag="true" backgroundcssclass="ModalPopupBG" ></ajax:ModalPopupExtender>
What is actually happening is that when clicking the target button, the popup opens but the event does not trigger (no postcode lookup is done). However, clicking the separate, unrelated button on the same page DOES trigger the event, and the lookup works perfectly. I am able to close the dialog as normal. I have tried hiding the target button with CSS as a quick workaround, but the problem is that any other buttons on the page seem to trigger the lookup method and modalpopup no matter what their click event is programmed to do, and I need them to work separately.
In case it's of any use, the panel code is here:
<asp:Panel ID="pnlDisplay" style="display:none" runat="server">
<div class="PopupContainer">
<div class="PopupBody">
<div align="center">Local Suppliers</div>
<br /><br />
<asp:label ID="lblError" runat="server"></asp:label>
<asp:UpdatePanel ID="upAlternatives" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DataList ID="dlStockist_Select" runat="server">
<HeaderTemplate>
<table cellpadding="5" width="680">
<tr>
<td>Name</td>
<td>Address</td>
<td>Town/City</td>
<td>Miles (Approx)</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%# DataBinder.Eval(Container.DataItem, "CNAM") %></td>
<td><%# DataBinder.Eval(Container.DataItem, "CADD1") %></td>
<td><%# DataBinder.Eval(Container.DataItem, "CADD3")%></td>
<td align="center"><%# DataBinder.Eval(Container.DataItem, "Distance")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
<asp:LinkButton ID="btnOkay" runat="server" visible="true" Text="Close" CommandName="Update" BorderColor="#FFFFFF" BackColor="#000000"
BorderWidth="3" BorderStyle="Double" ForeColor="White" Font-Size="13pt" style="cursor: pointer; padding: 1px 15px 1px 15px;
margin-top: 10px;" Font-Underline="False"></asp:LinkButton>
</div>
</div>
</asp:Panel>
Thanks in advance for the help
Add one more button as per below
<asp:Button Text="targetbutton" ID="tgtbtn" runat="server" Style="display: none" />
Set id of this button in targetcontrolid of modulpopup (because it can not be null)
and in click event of btnStockist
open your modulapopup by code
protected void btnStockist_Click(object sender, EventArgs e)
{
mpeStockist.Show();
}

server side event for the button having modal pop up extender

I have a button on which I am calling a modal pop up extender which is showing a panel. Below is the code:
<asp:Button ID="btnOne" runat="server" Text="View "
onclick=" btnOne_Click" />
<asp:Panel ID="test" CssClass="ModalWindow" Width="100%" ScrollBars="Both" runat="server">
<table id="tblgv" width="100%">
<tr>
<td>
<asp:GridView ID="gvTwo" runat="server">
</asp:GridView>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnPopUpCancel" runat="server" Text="Close" />
</td>
</tr>
</table>
</asp:Panel>
<asp:ModalPopupExtender ID="ModalPopupExtender1" OkControlID="btnPopUpCancel"
TargetControlID=" btnOne " PopupControlID="test" runat="server">
</asp:ModalPopupExtender>
In the panel, I have a gridview. I want that when I click the button gridview will be loaded. But it is not happening, when I clicked on the button it is not going server side.
help me how to resolve it.
Your problem is that the ModalPopup is showing Client side.
If you what to do stuff (bind the gridview) you need do trigger a postback to the server.
add a dummy target for the ModalPopup
< asp:Button runat="server" ID="HiddenTargetControlForModalPopup" style="display:none" />
set TargetControlID="HiddenTargetControlForModalPopup"
call ModalPopupExtender1.show() inside the btnOne_Click event.
btnOne will now trigger a serverside event. You should also put the Gridview inside a update panel and set btnOne at as asyncpostback trigger.
Hope this will help.
You Can Use Asynchronous PostBack Trigger Or PostBackTrigger as per your need. Id want this Grid View In update panel you need to use Asynchronous PostBack Trigger.
and if you want that page to be reload at button click you need to have post back trigger and make sure that control button to be inside that update panel.
Here is an Example
<asp:UpdatePanel ID="UPDTree" runat="server">
<ContentTemplate>
<asp:LinkButton ID="lnkfaketree" runat="server"></asp:LinkButton>
<asp:ModalPopupExtender ID="mpeTree" runat="server" BackgroundCssClass="modalBackground recharge" CancelControlID="btntreeclose" PopupControlID="paneltree" TargetControlID="lnkfaketree"></asp:ModalPopupExtender>
<asp:Panel ID="paneltree" runat="server" Style="display: none">
<div class="btn-group pull-right">
</div>
<div class="box box-primary">
<div class="box-header with-border" style="padding: 3px; background-color: #14181a; font-weight: bolder">
<h3 class="box-title" style="color: white">Tree View</h3>
<div class="btn-group pull-right">
<asp:LinkButton ID="btntreeclose" runat="server" CssClass="fa fa-close" OnClick="btntreeclose_Click"></asp:LinkButton>
</div>
</div>
<div class="form-horizontal">
<div class="box-body">
<div id="chart_div" style="width: 1000px; height: 500px; overflow: auto">
</div>
<asp:Button id="BtnNext" runat="server" OnClick="selectHandler()" />
<asp:Button id="btn_Submit" runat="server" OnClick="selectHandler2()" />
</div>
</div>
</div>
</asp:Panel>
</ContentTemplate><Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnNext" EventName="Click" />
<asp:PostBackTrigger ControlID="btn_Submit" />
</Triggers>
</asp:UpdatePanel>

ms ajax hover extender error "An extender can't be in a different UpdatePanel than the control it extends"

It is obvious that the control and the extender are in the same update panel. Yet, a "An extender can't be in a different UpdatePanel than the control it extends" error occurs.
NOTE: The user control is declared within an UpdatePanel on the page using it. That makes the UpdatePanel in the user control "nested".
The following code is in the Asp.Net UserControl:
<asp:TemplateField HeaderStyle-Width="0px">
<ItemTemplate>
<asp:UpdatePanel ID="hoverMenuUpdatePanel" runat="server">
<ContentTemplate>
<ajaxtoolkit:HoverMenuExtender ID="extensionActionHoverMenuExtender" runat="server"
PopupControlID="extensionActionHoverMenu" PopupPosition="Left" HoverCssClass="popupHover"
TargetControlID="extensionActionHoverMenu" OffsetX="5" PopDelay="50" />
<asp:Panel ID="extensionActionHoverMenu" runat="server" CssClass="modalDialogPanel"
Style="display: none; height: 200px; width: 300px; padding: 5px;">
<div style="border-color: #3A362C; padding: 2px; border-right-style: solid; border-right-width: thin;
float: left;">
<div class="title">
Reserve Extension: &nbsp
<asp:Label ID="extensionToReserveLabel" runat="server" Text='<%# Eval("ConsolidatedPhoneExtensionPK") %>' />
</div>
<div id="userType" style="border-style: solid; border-width: 1px; padding: 5px; height: 80px;
width: 200px; background-color: #E2DDBA; margin-bottom: 8px;">
User Type:
<asp:RadioButtonList ID="reservedUserTypeRadioButtonList" runat="server">
<asp:ListItem Selected="true" Text="999/988" Value="Employee" />
<asp:ListItem Text="Other" Value="Other" />
</asp:RadioButtonList>
</div>
<div>
Employee No:<asp:TextBox ID="reserveEmployeeNo" runat="server" OnTextChanged="reserveEmployeeNo_TextChanged"
AutoPostBack="true" />
<asp:Label ID="employeeNameDisplayLabel" runat="server" />
<asp:Label ID="reserveUserMessageAreaLabel" runat="server" />
</div>
</div>
<div>
<div>
<asp:Button ID="selectButton" runat="server" Text="View" CommandName="Select" Width="75px" />
</div>
<div>
<asp:Button ID="reserveButton" runat="server" Text="Reserve" CommandName="Reserve"
CommandArgument='<%# Eval("ConsolidatedPhoneExtensionPK") %>' Width="75px" />
</div>
</div>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="reserveEmployeeNo" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateField>
Create a panel with an ID of "popup" (it can be anthing you like though). In this panel place any buttons or what ever you want, this will be your popup menu. Set your PopupControlID to "popup".
Your TargetControlID should be the ID of the panel you want the manu to popup in (extensionActionHoverMenu?).
PopupControlID and TargetControlID are the same. Your TargetControlID should be some other form element.
HoverMenu Sample:
TargetControlID - The control that the extender is targeting. When
the mouse cursor is over this control,
the hover menu popup will be
displayed.
PopupControlID - The ID of the control to display when mouse is over
the target control. In this case, it's
just a simple panel with two links:
Sometimes it's not about the updatepanel but about other items of the toolkit.
I got this message while using the FilteredTextBoxExtender. The control defined int the TargetControlID was in a different updatepanel.

Losing Button.Click events after first partial postback in UpdatePanel

I have a Page that has a single instance of a UserControl that itself has a single UpdatePanel. Inside the UpdatePanel are several Button controls. The Click event for these controls are wired up in the code-behind, in the Init event of the UserControl.
I get the Click event for the first button I push, every time, no problem. After that, I only get Click events for one button (SearchButton) - the rest are ignored. I have included the code for the control below - for sake of brevity, I have excluded the click event handler methods, but they are all of the standard "void Button_Click(object sender, EventArgs e)" variety. Any ideas?
<asp:UpdatePanel ID="PickerUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="Container" runat="server">
<div>
<asp:TextBox ID="PickerResults" runat="server" style="margin-right: 3px;" SkinID="Plain" />
<asp:Image
ID="LaunchPopup" runat="server" ImageUrl="~/images/icons/user_manage.png"
ImageAlign="Top" BorderColor="#294254" BorderStyle="Dotted" BorderWidth="1px"
Height="20px" Width="20px" style="cursor: pointer;" />
</div>
<asp:Panel ID="PickerPanel" runat="server" DefaultButton="OKButton" CssClass="popupDialog" style="height: 227px; width: 400px; padding: 5px; display: none;">
<asp:Panel runat="server" id="ContactPickerSearchParams" style="margin-bottom: 3px;" DefaultButton="SearchButton">
Search: <asp:TextBox ID="SearchTerms" runat="server" style="margin-right: 3px;" Width="266px" SkinID="Plain" />
<asp:Button ID="SearchButton" runat="server" Text="Go" Width="60px" SkinID="Plain" />
</asp:Panel>
<asp:ListBox ID="SearchResults" runat="server" Height="150px" Width="100%" SelectionMode="Multiple" style="margin-bottom: 3px;" />
<asp:Button ID="AddButton" runat="server" Text="Add >>" style="margin-right: 3px;" Width="60px" SkinID="Plain" />
<asp:TextBox ID="ChosenPeople" runat="server" Width="325px" SkinID="Plain" />
<div style="float: left;">
<asp:Button ID="AddNewContact" runat="server" SkinID="Plain" Width="150px" Text="New Contact" />
</div>
<div style="text-align: right;">
<asp:Button ID="OKButton" runat="server" Text="Ok" SkinID="Plain" Width="100px" />
</div>
<input id="SelectedContacts" runat="server" visible="false" />
</asp:Panel>
<ajax:PopupControlExtender ID="PickerPopEx" runat="server" PopupControlID="PickerPanel" TargetControlID="LaunchPopup" Position="Bottom" />
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="AddButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="SearchButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="AddNewContact" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
public partial class ContactPicker : System.Web.UI.UserControl
{
protected void Page_Init(object sender, EventArgs e)
{
SearchButton.Click += new EventHandler(SearchButton_Click);
AddButton.Click += new EventHandler(AddButton_Click);
OKButton.Click += new EventHandler(OKButton_Click);
}
// Other code left out
}
It seems that adding UseSubmitBehavior="false" to the button definitions has solved my problem. Still don't know why that first button click worked at all.
The most likely reason for this would be the client IDs that .Net generates for its controls changing. These are dynamically assigned and could change between postbacks / partial postbacks.
If controls are being added to the panel dynamically, the ID of your button could be different between postbacks causing .Net to be unable to tie the click event to the correct event handler in your code.
In my case, i had a LinkButton within a dgPatients_ItemDataBound event handler that used the PostBackUrl property.
The moment i changed the LinkButton to a HyperLink, the problem went away.

Resources