Hi,
I have some textboxes and calendarsextenders bound to them. When I click on 1st textbox, calendar pops up. It hides two other boxes beneath it. After I select date i need to go other text boxes. I tried with tab key but it does not switch to other control, and calendar remains open. I have to click on empty area of page to close calendar.
However, on test site provided with toolkit tab key works ok. Does anyone have idea what might be wrong?
Just a word of warning - I am not very familiar with Ajax.
I have a few textboxes and a button within an update panel. When the button is clicked some data is retrieved (using Ajax) and some of the textboxes are filled with that data. I would like to remove the button click step, and instead have that data retrieved when the user leaves the first textbox. So, the user is in a name textbox. They type "Billy Bob," and then tab out to the next textbox (or click out of it to another textbox), at which time Ajax does it's asynchronous stuff to retrieve the data from the server for that name. Is this possible to do?
Thanks in advance!
You could try the TextChanged event of the first TextBox, remember to set theAutoPostBack value to true in the TextBox to generate a postback when you tab out of the TextBox.hello guys,
yes, this will work, if you're using an updatepanel. anyway, it might not "feel right" to the user since the contents that are inside the panel will be refreshed (which meaans that he migh be writing something on another textbox and then when he looks at it, everything has been "replaced" by the contents sent from the server...
Thank you both for your help. I was able to get it to work by using the textbox as the trigger.
Luis, I understand what you're saying about the workflow not feeling right. There are other underlying problems within this page (I didn't originally design it though!) and what it does that made me look at doing this as an option to fix some of those problems. But the more I look at it, the more I think that it just doesn't "feel right." =)
I probably won't implement this solution in the end. Thanks for the help!
Hi,
Is there any way to design TabPanel content from VS2005 designer (not from source view)?
I don't know if it is possible to add TextBoxes, Buttons... to TabPanels from designer - currently I do that manually in source view which significantly slows my coding.
i.e. Is there any way to design AJAX TabContainer like I can design TabControl in windows apps (drag&drop other controls into tab panels)?.
TabDesigner support is not available. Seeissue 7483.
Hello,
I have a TabContainer control with 3 tabs. On each tab I dynamically add textboxes. Each one of the textboxes has an OnTextChanged event. What I am trying to do is, to prevent the user from being able to switch between tabs if some of the text has changed in the textboxes, but the save button was not clicked.
So what I really want to do is, to detect when a user clicks on a different tab, then check my current tab see if any of the textboxes were updated and if they were I don't want to allow the other tab to be selected. Can someone please give me some hints or an example of how I can do this?
Thank You,
Vadim
You can hook into the tab changed event as follows:
var tabs = $find('TabsClientID');
tabs.add_activeTabChanged(YourHandler);
In YourHandler, you can do the necessary checks to see if the user should be moving away from a tab and return them to the previous tab if the checks fail. You will need to track the active tab index manually so that you can return them to the correct tab.
Jason
So calling the tabs.add_activeTabChanged(serversideHandler), will cause a postback correct? I will need to be able to pop up an alertbox or something like it notifying the user that they can't switch tabs from the serverEvent. Is there a way to cause some javascript to run from a function on the server?
this is my tab control here:
<cc1:TabContainer ID="tbcSettings" OnActiveTabChanged="ActiveTabChanged" runat="server" Width="300" Height="300">
<cc1:TabPanel ID="tbpGlobal" OnClientClick="ActiveTabChanged" TabIndex="0" BorderWidth="2" runat="server" HeaderText="Global">
<ContentTemplate>
<asp:UpdatePanel ID="upTab_List" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<slc:SettingList ID="settingListGlobal" runat="Server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="tbcSettings" EventName="ActiveTabChanged" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="tbpCommercial" OnClientClick="ActiveTabChanged" TabIndex="1" runat="server" HeaderText="Commercial">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<slc:SettingList ID="settingListCommercial" runat="Server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="tbcSettings" EventName="ActiveTabChanged" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="tbpMedicaid" OnClientClick="ActiveTabChanged" TabIndex="2" runat="server" HeaderText="Medicaid">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<slc:SettingList ID="settingListMedicaid" runat="Server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="tbcSettings" EventName="ActiveTabChanged" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
<script language="javascript">
function ActiveTabChanged(sender, e)
{
__doPostBack('<%= tbcSettings.ClientID %>');
}
</script>
c# code:
protected void ActiveTabChanged(object sender, EventArgs e)
{
//bcSettings.ActiveTabIndex = ((AjaxControlToolkit.TabContainer)sender).ActiveTabIndex;
//((AjaxControlToolkit.TabContainer)sender).
string tabname = tbcSettings.Tabs[((AjaxControlToolkit.TabContainer)sender).ActiveTabIndex].HeaderText;
switch (tabname)
{
case "Global":
stl = settingListGlobal;
break;
case "Commercial":
stl = settingListCommercial;
break;
case "Medicaid":
stl = settingListMedicaid;
break;
default:
break;
}
if (!stl.Saved)
{
string js = @."if (alert('you made changes, do you want to save now'))";
js += "{";
js += "__doPostBack('" + btnSave.ClientID + "');";
js += "}";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "savepostback", js, true);
}
}
No, the sample code I provided was for clientside handling of the event when the tab is changed...it does not cause a postback. The tab container is supposed to be able to automatically postback when a tab is changed although I have seen some posts that indicate that this might not be happening correctly. Check the forums to see if this is working or not.
Personally, I think it might be a nicer user experience to handle all of this clientside but understand if this is not practical. This would make it easier to show the alert and would avoid extra postbacks.
One thought...do you have to save the changes to every tab individually or can you just have a save button that saves the stuff in all of the tabs in one big go. This sounds like it would eliminate the problem altogether.
My take on tabs is that they are more designed for segmenting content and that the user can hop around with quick clientside UI control. I think this creates a better and snappier user experience. What do you gain by forcing the user to save every tab first? Sure, you can still have a save button on every tab so that the user can save their changes if they want to, but why force them to do it? It's the same as most tabbed windows in the Windows UI...you get an option to hit an Apply button to save your changes so far or continue changing settings on multiple tabs until you are ready to save.
