Tab Control with ASP.net control

Hello there,

I am trying to put some server controls such as label, textbox and dropdownlist on AJAX Tab control but these controls not responding to any events like button onclick event. How can I write code to handle and work with these server controls while it is on the AJAX Tab control?

Please help...

Best regards,
Sam

can u post ur code.. here..

actually I have no code till now i am just placed the button control on the AJAX tab and I am trying to wire onclick event with this button but it is not working. and the other thing is the control propertis is not working like i set the max length propertis to 200 char but the textbox still accept more than 200 char.

Thank you

Sam

Hi Htaher,

Based on your description, what you want is when click on the server control no postback will be occurred. If I have misunderstood, please feel free to let me know.

For your situation, you may use HTML Controls instead of the server controls.If you insist on using server controls, please forbit the controls to postback.

For example: If it is a Button control, you can use this: <asp:Button ID="Button1" runat="server" Text="Calendar" OnClientClick="return false;"/>

If it is a DropDownList Control , you can set it's AutoPostBack to "false". Just like this:

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="false">
</asp:DropDownList>

I hope this help.

Best regards,

Jonathan

Tab key works with CalendarExtender on sample site but not on production site

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?

Please reply with acomplete, simple, self-contained sample page that demonstrates the problem so that we can investigate the specific behavior you're seeing. Thank you!

Tabbing into a textbox with MaskedEditExtender

I am having an issue with the MaskedEditExtender in the Sept 20th ajaxtoolkit release. I have this textbox group:

<asp:Label ID="lblEffort2_KP" runat="server" Text="Y2 "></asp:Label>

<asp:TextBox ID="txtYear2Effort_KP" runat="server" CssClass="textbox" Width="50px" Text='<%# bind("effort_2") %>' TabIndex="5013"></asp:TextBox>
<ajaxToolkit:MaskedEditExtender ID="MEYear2Effort_KP" runat="server" TargetControlID="txtYear2Effort_KP"
InputDirection="RightToLeft" MaskType="Number" Mask="999.99%">
</ajaxToolkit:MaskedEditExtender>

You'll notice I have the inputdirection = right to left. If you tab into this textbox it highlights the mask and when you start entering the number it goes from LeftToRight.

You can see this error also on the microsoft ajax toolkit sample page.

Go here: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/MaskedEdit/MaskedEdit.aspx
and click on the text above the first textbox, the enter number one, and hit tab and you will see the issue. If you just click in the textbox it will work correctly, right to left. Any solution?

Hi Ryan,

I think it is a design pattern. When you press the tab and the cursor displays before the point. While you keep entering , the number will go to right from the left. If you have other suggestions, please post ithere. Also you can post your current idea to it. Our developers will evaluate them seriously and take them into consideration when designing future release of the product.Improving the quality of the products and services is a never-ending process for Microsoft.

Best regards,

Jonathan

Tabbing out of a textbox...

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...

Absolutely right, I prefer to use WebServices or pagemethods to do something like this, infact I don't use UpdatePanels at all in my application for this (and other reasons.), but I think he is using an UpdatePanel at the moment.

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!

TabContainer and Validator

I'm new to the toolkit... Can you use RequiredFieldValidator to validate a textbox when the user clicks on a different TabPanel in the TabContainer? I imagine that you can write your own JS. Thoughts?

Thanks!!!

Hi,

According to my understanding to your question, you are trying to prevent the other TabPanel from being actived if current TabPanel has validators that fail to validate. Isn't it?

As far as I know, the TabContainer doesn't expose an event that fires before the active panel is changed. So, you may try an alternative method. The basic idea is as follows:

1. Add an activeTabChanged event handler to the TabContainer
2. When a tabPanel is actived, save its index in a global variable
3. In the activeTabChanged handler, check if all Validators in previous tabPanel are valid. If not, set current active index to the index stored in global variable.

You may have the following code:

function pageLoad() {
tc = $find("TabContainer1");
tc.add_activeTabChanged(onChanged);
}

var index = 0;

function onChanged(sender, e) {
tc = $find("TabContainer1");
if( !Page_Validators[0].isvalid ){ // I assume validators[0] is in previous panel here. For practical usage, you may have to implement a strategy to organize validators in different panels
tc.set_activeTabIndex(index);
}
else{
index = tc.get_activeTabIndex(index);
}
}

Though this approach is not that straight, still hope this can helps.

TabContainer preventing the user from switching tabs if some textbox changed in a previous

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.

Well, I would rather make them press save before moving between tabs, but it seems like what I want to do is a pretty complicated task.

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.