TabContainer and FormView

Hello,

I would like to replace our current tab solution with the tab controls found in the ajax control toolkit. I've spent a few days trying to get the tabs to operate in the manner I would like and was wondering if anyone could explain the best way to use TabContainer and FormView controls together.

Basically, I would like to do the following:

<asp:SqlDataSource ... /><asp:FormView ...><EditItemTemplate><ajaxToolkit:TabContainer ...><ajaxToolkit:TabPanel ID="Panel1" ...>...</ajaxToolkit:TabPanel><ajaxToolkit:TabPanel ID="Panel2" ...>...</ajaxToolkit:TabPanel></ajaxToolkit:TabContainer></EditItemTemplate></asp:FormView>

When I build pages based on this - Update and Insert commands fail with "You must declare the scalar variable XXX" errors as the formview cannot find the editing controls inside the TabContainer because it is an INamingContainer. I have tried using multiple FormView controls (one for each tab panel) in concert to update & insert records - however the amount of custom code required is unacceptable.

The solution I choose has to be very reusable as we have hundreds of different pages (like this) in production. At this point I am considering writing my own client side tab control as I would like to come up with a solution as quickly as possible and I've hit a number of dead ends.

Does the ajax control toolkit support using a FormView that contains a TabContainer (am I just missing something)? Are there any good workarounds? Are there plans to add this kind of support in the future?

Any answers or information will greatly help me make my decisions. Thanks in advance,
J. Shane Kunkle

jkunkle@dotnet.itags.org.vt.edu

Any input or advice is appreciated...

Hi Shane,

I think it's not that easy to make works perfectly in your situation now.

Can you try to add a public property on the TabContainer, and take it as a parameter?

I'm sorry - i'm not sure i understand your advice. Are you advising that I should create a class that inherits from TabContainer - what would the new property do?

Thanks again for the assistance,

Shane

Yes, or you can change the its original code since it's provided.

TabContainer ClientState problem

I'm quite new in this AJAX stuff, so if you have any better solution, please post it.

Today I decided to use Tabs from ASP.NET AJAX Control Toolkit and found a stupid problem with them: The ClientState doesn't get updated when a post-pack is fired from drop-down list (OnIndexChanged event + AutoPostBack) or from custom control (I have server control that inherits from Button, but renders in a different way). It seems that the control toolkit framework doesn't process these post-backs as it should and the saveClientState of AjaxControlToolkit.TabContainer isn't called (basicaly it means, that all other controls that are derived from AjaxControlToolkit.ControlBase have this problem - correct me, if I'm wrong).

What I did was, that I added this function to the TabContainer class (in Tabs.js):

set_ClientState : function(value) {
 var input = this.get_clientStateField();
 if (input) {
 input.value = value;
 }
 },

and

added this line:

this.set_ClientState(this.saveClientState());

before:

 if (this._loaded) {
    this.raiseActiveTabChanged();
 }
 this.raisePropertyChanged("activeTabIndex");

in set_activeTabIndex function of AjaxControlToolkit.TabContainer.

Hope it helps someone.

I'm having the same problem. I'm trying to implement your solution, but I still get the same 'Specified argument was out of the range of valid values.Parameter name: index' error. I think it's because I'm not actually referencing the modifiedTabs.js file from my code.

I've made the correction that you specified in AJAX Control Toolkit\AjaxControlToolkit\Tabs.js and rebuilt the AjaxControlToolkit solution. I made sure that the new AjaxControlToolkit.dll is in AJAX Control Toolkit\AjaxControlToolkit\bin\Debug, AJAX Control Toolkit\SampleWebSite\Bin, AJAX Control Toolkit\AjaxControlExtender, and my web site's App_Data, which are all of the places that it existed. I'm not sure which, if any of those locations my app reads from. I tested removing all of them, but my app ran and the TabContainer/TabPanels were created, so I'm not sure it uses the dll in any of those locations.

Can you give me a pointer on how to get this done?

Hi bjs339 have you read this post?

http://forums.asp.net/t/1124541.aspx

I think the trick for you is to use the TabContainer event OnInit

TabContainer or TabPanel break focus

Hi,

this is probably a simple problem, but I can't find a solution in this forum. I'm getting started with the AJAX Control Toolkit and set up a quite simple testpage:

There is a table, in one cell there is an update panel with some textboxes. I can place focus on one of these boxes regularily using eg "this.TextBox2.Focus();" in Page.Load.

As soon as I put a TabContainer and a TabPanel around the update Panel, the focus doesn't work anymore. I tried several methods of setting focus described in this forum, it simply doesn't work.

Any hint would be greatly appreciated!

Kind regards,

Sven

Might be related to this post, but I wan't able to make any use of it:

http://forums.asp.net/thread/1485462.aspx

Sorry, I intended to point to this post as a related issue, but the other one might have the same problem with the accordion:

http://forums.asp.net/thread/1675357.aspx

I know how you feel. I looked for HOURS about how to do this. I finally found this somehow. Make sure you place this code at the BOTTOM of your ASP.Net page. It has to be at the bottom because the Sys has to come after the script manager. (or at least that is what it seems. It will give errors at the top.) Just replace txtPartNo with your control name.

<script language="javascript" type="text/javascript">
Sys.Application.add_load
(
function()
{
window.setTimeout(focus, 1);
}
)
function focus()
{
try
{
document.getElementById('<%=txtPartNo.ClientID %>').focus();
}
catch(err)
{
//do nothing
}
}
</script>

Have a great day!

~Secretxelf

Thanks, the code above works!!! I've been googling a similar problem for 2 days!

vb code = page.setfocus(control) and control.setfocus() and

html =<formid="form1"DefaultFocus="txtBox1n"runat="server">

don't work when you are using ajax updatepanel. The work around above does work.