When the selection of the radio buttons change I would like to show/hide the panel in the next table cell. I have it hiding and showing fine but each time it causes the page to refresh to the top. Is their a way to stop that refresh? I would like to hide and show the panel dynamically.
<table>
<tr>
<td>
<asp:RadioButtonList runat="server" ID="rblPlayerStatus" AutoPostBack="true" >
<asp:ListItem>Free Agent</asp:ListItem>
<asp:ListItem>I have teammate</asp:ListItem>
</asp:RadioButtonList>
</td>
<td>
<asp:Panel runat="server" ID="pnlTeamMate">
<asp:Label runat="server" ID="lblTeamMate" Text="Choose Teammate" />
</asp:Panel>
</td>
</tr>
</table>
Use the AJAX.ASP.Net library - then you add a ScriptManager item, and an UpdatePanel. Anything within the UpdatePanel will update through AJAX, not a full page refresh.
Do you have any server side logic based on which show and hide the panel. If yes then you could use update panel control. If it is just client side logic such as
If Free Agent is select show FreeAgent Panel else Team Panel
use javascript or rather jquery to achieve the same.
From your code, I can't see where you hide and show the panel. You could use an updatepanel, but that is best used when you need to retrieve more information from the server.
If you simply want to show and hide the panel, you can do it better with Javascript, by adding some code to the OnClick event to set the panel's visibility css attribute. There are a few tutorials on google about how to do this. Something like this should be sufficient to get you started.
Solution would be either using AJAX (UpdatePanel and ScriptManager) or removing
AutoPostback = true and using JavaScript to display/hide the panel
Related
I've got a web form using asp.net. In this form I have a lot of inputs.
For one of the drop downs whenever you press it, the focus jumps to the next text box.
This is in a update panel, because there is some server side work required for filtering, hiding, etc.
If the User chooses Australia from visaType_filter then it hides visaType_dd and shows visaType_tb. If they choose NZ its the other way around.
Now my question:
Is there a bug or something that makes focus jump off of a drop down when you click on it to go to the next input (or control)?
Code:
<fieldset>
<asp:UpdatePanel ID="visaTypeUpdatePanel" runat="server">
<ContentTemplate>
<label>Visa Type Number</label>
<label>
<asp:DropDownList ID="visaType_filter" runat="server" Width="40%" OnSelectedIndexChanged="visaType_filter_SelectedIndexChanged" AutoPostBack="true"/>
<asp:TextBox ID="visaType_tb" runat="server" Width="40%" OnTextChanged="visaType_tb_blur" AutoPostBack="true"/>
<asp:DropDownList ID="visaType_dd" runat="server" Width="40%"/>
<asp:Literal ID="visaType_literal" runat="server" />
</label>
</ContentTemplate>
</asp:UpdatePanel>
</fieldset>
<fieldset>
I resolved my problem by using jQuery and Ajax in place of UpdatePanels.
AFAIK, when UpdatePanel gets triggered, the focus does not get maintained. So ideally, you shouldn't be getting any focus at all.
Regardless of reason, you can work-around the issue using ScriptManager.SetFocus method to maintain focus on the drop-down.
You can also have client side solutions for maintaining focus - they essentially work by hooking into AJAX requests to remember the focused control before update panel is triggered and then restoring it back when update panel post-back is completed: see this link for one such solution.
I'm trying to create multiple gridviews in which all would be loaded at pageload. I have 3 sets of data. When user clicks on a tab then it would show the corresponding gridview.
What is the best approach to this? I'm not good at JavaScript or JQuery.
One way I thought of is using a table and image buttons, where I would put gridview1.visible = false when gridview2 tab is clicked. Is this a good way to do it? or is there another intuitive way to do it?
"Easiest approach to use Ajax Tookit Tab Containers and Tab Panels, Put GridView in the content template of TabPanel.
<ajaxToolkit:TabContainer runat="server"
OnClientActiveTabChanged="ClientFunction"
Height="150px">
<ajaxToolkit:TabPanel runat="server"
HeaderText="Signature and Bio"
<ContentTemplate>
-- Grid View --
</ContentTemplate>
/>
</ajaxToolkit:TabContainer>
Refer :
http://www.asp.net/Ajax/Ajaxcontroltoolkit/samples/Tabs/Tabs.aspx
I have just started using RadControls so this question might be basic for you, I am using a List View which I am populating using Sql Data Source, I also have insert functionality in that List View but the problem is the insert template just disappear after adding one record and I have to refresh the page to make insert template appear again, am I doing something wrong ?
I have another question regarding Rad List View, is it possible that we use a drop down box instead of a text box inside insert template ? because sometimes you want to restrict the users to pick from predefined values instead of letting them enter anything ? I have tried putting drop down box inside insert template using code view of visual studio and it also appears properly when I run the page but the problem is data binding is not working, I have tried using
SelectedValue=<%# Bind("field_name") %>
as it was used in case of textbox like
Text=<%# Bind("field_name") %)>
but it does not work for some reason.
Please advice,
Thanks.
Ok I got it, maybe it will help someone.
<tr>
<td>
<asp:Label ID="DEPARTMENTLabel2" runat="server"
AssociatedControlID="DEPARTMENTTextBox" Text="DEPARTMENT"></asp:Label>
</td>
<td>
<asp:DropDownList ID="DEPARTMENTTextBox" runat="server" SelectedValue='<%# Bind("DEPARTMENT") %>'>
<asp:ListItem Text="Admin" Value="Admin">Admin</asp:ListItem>
<asp:ListItem Text="Editing" Value="Editing">Editing</asp:ListItem>
<asp:ListItem Text="Sales and Support" Value="Sales and Support">Sales and Support</asp:ListItem>
<asp:ListItem Text="Writing" Value="Writing">Writing</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
Change the default textbox to a dropdown and assign its ID to AssociatedControlID of label that is representing it, here I used the same ID which was originally assigned to it "DEPARTMENTTextBox" (just to be careful), you can change it to "DEPARTMENTDropDown" or any ID you like but make sure you make these changes everywhere in the RADListView so that it performs normally.
As for the insert template disappearing after adding one record, I made a workaround and placed a button for "add another record" such that when it is clicked it calls this code.
protected void btnAddAnother_Click(object sender, EventArgs e)
{
RLVUsers.ShowInsertItem(RadListViewInsertItemPosition.LastItem);
}
This button make insert template reappear and allow the user to add another record.
I'm using AJAX.Net (3.5) inside a usercontrol.
The usercontrol contains an UpdatePanel, and inside the UpdatePanelthere is a MultiView.
The ScriptManager is included in the page that act as container for the usercontrol.
To switch between views the usercontrol contains a simple button.
When I click it, the View is changed so the old content is hidden and new content is displayed.
My problem is that the content isn't hidden at all.
The view changes and the new content is displayed, but the old one remains on the page.
To isolate the problem, I tried changing the multiview and switching visibility of a simple label, but the behavior is the same.
Any ideas?
oh I understand. It's all right then. The problem is not of Ajax here. It's just you cannot embed something in <table> tags. In this case, you can try something different than the <table> control. Maybe a <div> or something else. I don't know exactly what sort of situation you have. Maybe you explain the result you want to achieve so I can give you some advice.
Regards
It seems that AJAX.Net doesn't work very well if you have part of a table outside the UpdatePanel.
On my control I want to show or hide some rows of a table. I included only the tr and td tags inside the updatepanel.
To reproduce the problem:
<table>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<tr>
<td>
<asp:Label ID="lblToShow" runat="server" Text="Label to show" Visible="false" />
<br />
<asp:Label ID="lblToHide" runat="server" Text="Label to hide" />
</td>
</tr>
</ContentTemplate>
</asp:UpdatePanel>
</table>
If you change the visibility using:
lblToShow.Visible = true;
lblToHide.Visible = false;
The text of both labels are shown on the page (lblToHide does not hide)
If you move the table tags inside the UpdatePanel everything works fine.
call
updatepanel.Update()
after you make the changes to your updatepanel
or try
updatepanel.Controls.Clear();
I have 3 different kinds of ajax popups that need to exist across my site. I was hoping that I could simply create a user control for each one and place the panel and modal popup extender inside each one but this doesn't seem to be working. Has anyone tried this before or do you have a recommendation as to how I can avoid duplicate code for each pop up on different pages? Thanks!
Ah I figured out my issue with the User Control I believe.
The ModalPopUpExtender requires the TargetID property to be set otherwise an error occurs. Since this is sitting in a UserControl I just created a dummy link button that doesn't do anything and I set the property visible to false.
<asp:LinkButton ID="lnkBlank" runat="server" Visible="false" />
<asp:Panel ID="plContainer" style="display: none;" runat="server">
Hello?
</asp:Panel>
<cc1:ModalPopupExtender ID="mpe" runat="server"
BehaviorID="test"
TargetControlID="lnkBlank"
PopupControlID="plContainer" />
Apparently it doesn't appreciate that and the moment I set the visible property to true it started working. Not sure what the reasoning is for a TargetID since, I would think, most pop ups could be called from multiple links about the page. Perhaps I'm still not entirely clear on how this control is supposed to be used.
One option would be to write the popups in a asp.net user control (a .ascx page) and include that on the pages you need the popups. Have a public method in the ascx page that will show the popup, and call it from the parent page when you need to. If you already have a script manager on the parent page, you can't have a second one in the ascx page, but other then that there shouldn't be anything that would stop this from working. Hope this helps!
edit: here's what my modal popup extender control looks like...
<cc1:ModalPopupExtender
ID="mpeClassroom"
BackgroundCssCLass="modalBackground"
runat="server"
CancelControlID="lbClose"
OnOkScript="onOk()"
TargetControlID="Button1"
PopupControlID="pnlClassroom">
</cc1:ModalPopupExtender>
in my code behind page, my method just calls mpeClassroom.Show();
The problem with hidden link as TrgetControlID is that; when u set its visibility as false, server doesn't render it as well. PopExtender then cannot find control on the page.
Instead of setting its visibility to false, try to apply a style with display:none. This should work !