ajax TabControl: active

Showing posts with label active. Show all posts

Wednesday, March 28, 2012

Tab container

hi all,

i have placed the tab container in side a datagrid. tab container will appear in the item command of datagrid. if i set the active tab index as zero. i got some error.

57 line 17 char

argument out of range exception

1495 line 38 char

this.get_element().style is null or not an object.

if i remove that active tab index property tab container works fine.

how to close the tab container?

please help me

Balaji

Hi Balaji,

Can you show me your relevant code so that I can reproduce your issue?
A stripped simpler version of your code would be better.

Looking forward to your reply.

hi,

here is my code snippet

protectedvoid dlHostels_ItemCommand(object source,DataGridCommandEventArgs e)

{

tabcontainer tbc=new tabcontainer();

tbc = (TabContainer)dlHostels.Items[e.Item.ItemIndex].FindControl("TabContainer1");

Label lblInfo =newLabel();

TabPanel tp = new tabpanel();

tp.controls.add(lblinfo);

tbc.controls.add(tp);

//i have added three panels to this tabcontainer.

tbc.activetab=0; // problem with this tabindex. if i didnt mention anything then it works fine.

}

Tab Content Disappears by Clicking on Active Tab

I am puzzled as to why the dynamically loaded content of an Active Tab disappears when I click on the Active Tab. But if I click on another Tab and go back to the previous tab the content appears.

<%@dotnet.itags.org.PageLanguage="C#"MasterPageFile="~/MasterPages/DeafaultMasterPage.master"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"Title="Default Page" %>
<asp:ContentID="Content2"ContentPlaceHolderID="cphBody"Runat="Server">
<scripttype="text/javascript"language="javascript">
function ActiveTabChanged(sender, e)
{
__doPostBack('<%= tcDefault.ClientID %>', sender.get_activeTab().get_headerText());
}
</script>
<ajaxToolkit:TabContainerID="tcDefault"runat="server"OnClientActiveTabChanged="ActiveTabChanged"OnActiveTabChanged="ActiveTabChangedServer">
<ajaxToolkit:TabPanelID="tab1"runat="server"HeaderText="Info"EnableViewState="true"><ContentTemplate>Dynamic content, load UserControl
</ContentTemplate></ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanelID="tab2"runat="server"HeaderText="tab 2"EnableViewState="true"/></ajaxToolkit:TabContainer>

Code Behind

protected void Page_Load(object sender, EventArgs e) { ScriptManager sm = ScriptManager.GetCurrent(this.Page); sm.RegisterAsyncPostBackControl(tcDefault); }

protected void ActiveTabChangedServer(object sender, EventArgs e) {// Initialize Tab TabContainer tc = (TabContainer)CommonUtility.FindControlRecursive(this,"tcDefault");if (tcDefault.ActiveTab == tab1) { LoadControl1(tc); }if (tcDefault.ActiveTab == tab2) {//Do something in code LoadControl2(tc); } }

I noticed if I did the following;

protected void Page_Load(object sender, EventArgs e) { ReCreateTab(); }

The content in the tab sticks, but then the content is displayed twice. I know it has something to do with the ViewState, but not sure how to debug and what to read, I am new at this .Net and Ajax.

Any help would be appreciate.

Hi,

This is a FAQ regarding dynamic controls in asp.net. Please refer to this:

1. Why do I have to recreate dynamic controls every time? /Why dynamic controls are disappeared on PostBack?

Whenever a request comes, a new instance of the page that isbeing requested is created to serve the request even it's a PostBack. Allcontrols on the page are reinitialized, and there state can be restored fromthe ViewState in a later phase.

The dynamic controls have to be recreated again and added tothe control hierarchy. Otherwise, they won't exist in the page.

Please be careful with when to create dynamic controls. Inorder to keep their state, they have to be created before the LoadViewStatephase. Page_Init as well as Page_Load methods are options available.

For more information about this topic, please refer to thisarticle:

Creating Dynamic Data Entry User Interfaces[http://msdn2.microsoft.com/en-us/library/aa479330.aspx ]

Hope this helps.

tab control

I would like to hide a panel later in the page depending on which tab is active. Is there a way to check for the active tab?

Hey,

I believe the tabcontainer has an SelectedIndex or ActiveIndex property, or something similar, which contains the index of the active tab.

Tab Control - not saving active tab on postback

I have a tab control and this is more of an annoyance than anything right now but when a linkbutton in the current tabpane causes a postback the tab jumps back to its original state

(meaning that the tab index is reset to 0 I guess but any way the tab the user is on changes back to its default setting - the first tab)

Does something need to be set ?

TIA

TheTabs demo does a full postback and shows how the client state is preserved. Not sure why this is not working for you.

yeah i cant quite figure it out eiter since i copied it directly from the toolkit example

here the html if you can think of anything

1<ajaxToolkit:TabContainer runat="server" ID="Tabs" Height="300px" Width="100%" ActiveTabIndex="0">2 <ajaxToolkit:TabPanel runat="Server" ID="Panel1" HeaderText="Table of Contents">3 <ContentTemplate>456<DNN:DNNTREE id="DNNTree1" runat="server" cssclass="CommandButton">7</DNN:DNNTREE>89 </ContentTemplate>10 </ajaxToolkit:TabPanel>1112 <ajaxToolkit:TabPanel runat="Server" ID="Panel3" HeaderText="Index" >13 <ContentTemplate>14 <asp:UpdatePanel ID="UpdatePanel2" runat="server">15 <ContentTemplate >16 <asp:DataList ID="lstIndex" runat="server">17 <ItemTemplate >18 <li><asp:LinkButton ID="lbItemTitle" runat="server" CommandArgument="View">LinkButton</asp:LinkButton></li>19 </ItemTemplate>20 </asp:DataList></ContentTemplate>21 </asp:UpdatePanel>22 </ContentTemplate>23 </ajaxToolkit:TabPanel>2425 </ajaxToolkit:TabContainer>

I acutually worked around it with the updatepanel around the datalist in the second panel but it would be interesting to know why it didnt work

Monday, March 26, 2012

Tab Control - Change active tab

Hi,

I have a quick question that I am hoping will have an easy answer.

I have a form with a tab control and 3 tabs. What I would like to do is have a button on one of the tabs change the active tab.
So under tab 1 the users clicks the button which will bring them to tab 2. I know they can just click on the tab header at the top however I want to do some quick validation of information before making that tab visible and switching focus to it, is this possible?

Regards,

Daryl

function SetTabIndex(index)
{
var tabs = $find('TabContainerClientID');
tabs.set_activeTabIndex(index);
}
Thank you Jason!

Saturday, March 24, 2012

TabContainer ActiveTab Lost

I'm using a TabContainer with 6 TabPanels. When posting back with a button, the active tab is remembered properly. However, on an autopostback from a dropdownlist, the ActiveTab does not get remembered - it does not reflect the currently selected tab (unless of course, you didn't change tabs).

Can anyone confirm this behavior? I'd love to narrow down the cause of this to make sure it's not something I'm doing. Here's the relevant markup:

 <asp:dropdownlist id="ddlSubList" runat="server" Font-Size="10px" Height="20px" Visible="False" AutoPostBack="True" DataSource="<%# GetSubcontractors()%>" DataTextField="SubcontractorName" DataValueField="SubcontractorID" />
 <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" Height="600px" Width="860px" CssClass="ajax__tab_viper">
 <ajaxToolkit:TabPanel ID="tabGeneralInfo" runat="server" HeaderText="General Info">
 <ContentTemplate>
 <pdg:GeneralInfo id="uclGeneralInfo" runat="server" style="" />
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 <ajaxToolkit:TabPanel ID="tabContacts" runat="server" HeaderText="Contacts">
 <ContentTemplate>
 <pdg:Contacts id="uclContacts" runat="server" style="" />
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 <ajaxToolkit:TabPanel ID="tabTrades" runat="server" HeaderText="Trades">
 <ContentTemplate>
 <pdg:Trades id="uclTrades" runat="server" style="" />
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 <ajaxToolkit:TabPanel ID="tabOpTerritory" runat="server" HeaderText="Op Territory">
 <ContentTemplate>
 <pdg:OpTerritory id="uclOpTerritory" runat="server" style="" />
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 <ajaxToolkit:TabPanel ID="tabLicenses" runat="server" HeaderText="Licenses">
 <ContentTemplate>
 <pdg:Licenses id="uclLicenses" runat="server" style="" />
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 <ajaxToolkit:TabPanel ID="tabOwnerQuals" runat="server" HeaderText="Owner Quals.">
 <ContentTemplate>
 <pdg:OwnerQuals id="uclOwnerQuals" runat="server" style="" />
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 <ajaxToolkit:TabPanel ID="tabManReps" runat="server" HeaderText="Manufacturer Rep">
 <ContentTemplate>
 <pdg:ManReps id="uclManReps" runat="server" style="" />
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 <ajaxToolkit:TabPanel ID="tabComments" runat="server" HeaderText="Comments">
 <ContentTemplate>
 <pdg:Comments id="uclComments" runat="server" style="" />
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 <ajaxToolkit:TabPanel ID="tabESProjects" runat="server" HeaderText="Subcontracts">
 <ContentTemplate>
 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
 <ContentTemplate>
 <pdg:ESProjects id="uclESProjects" runat="server" style="" />
 </ContentTemplate>
 </asp:UpdatePanel>
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 </ajaxToolkit:TabContainer>

I am also looking for a solution for this problem. I have not yet been able to find anything to point me in the right direction. Have you had any luck?
No luck yet. I'm fairly sure at this point that it's a bug with the control, but I don't have time to dig into the control's source right now. Anyone else feel like doing the honors?
I'm facing the same problem.
Yep, I'm having this problem as well. It happens with any control that fires an autopostback.

Hi, I'm having a similar problem with a linkbutton within a tab. A linkbutton doesn't have an autopostback attribute so I'm guessing that the tab control only works properly with Buttons.

A simple piece of test code can be found on this post:http://forums.asp.net/thread/1578119.aspx

Andrew

The problem seems to be that the AutoPostBack behavior of DropDownList (for example) adds some JavaScript that calls __doPostBack directly and this bypasses ASP.NET AJAX's Sys.WebForms.PageRequestManager._doPostBack method which is intended to intercept submits and perform additional processing. It's this additional processing which needs to happen in order for the active tab to be maintained and the lack of it explains the problems in this thread. (Note: You can break things similarly by setting UseSubmitBehavior=false on an asp:Button that currently works.)

Curiously, ASP.NET AJAX intercepts window.__doPostBack, but not the global __doPostBack that ASP.NET adds to every page. It's seeming to me that this difference is the root of the issue here, so I'll ask some folks on the ASP.NET AJAX team to have a look when they get a chance.

After further investigation, I believe that the explanation above was based on a mistaken observation. Specifically, ASP.NET AJAX successfully intercepts __doPostBack, so that's not the problem.

What I'm thinking now is that the problem is a result of the difference between whether or not the form's onsubmit is triggered or not. For a typical Button it IS, but for an AutoPostBack (or Button with UseSubmitBehavior=false) it's NOT. Sys.WebForms.PageRequestManager._doPostBack is getting called and it's calling through to the global __doPostBack as it should. But since this is not an async postback the _doPostBack implementation is returning BEFORE calling Sys.WebForms.PageRequestManager._onFormSubmit which is where the necessary call to the form's onsubmit happens. It's in the form's onsubmit that the saveClientState method in Tabs.js gets called and saves the active tab index, so if that doesn't get called, then the active tab index doesn't get saved.

I've just openedwork item 8255 to track this problem - thanks very much for bringing it up! Watch there for updates.

PS - As a temporary workaround, it may be possible to wrap the entire TabContainer in an UpdatePanel.

Hi David,

The workaround does work (I've tried it for linkbuttons, dropdownlists and button columns in a datagrid). First workaround I've tried that also enhances the user experience Smile

Thanks very much for looking at this.

Andrew

Thanks for the response, David! Workaround seems to work for now. I'll keep an eye on this.

A note for people like me who can not use the updater panel and are suffering from this bug. My tab container is on a user control that is loaded on a very complex control, and adding updater panels is not an option at this point. I 'hacked fixed' the situation by setting the active tab myself.

Add a hidden field to the user control or page where the tab control resides:

<asp:HiddenField ID="activeTab" runat="server" />

then add a client event for when the active tab changes:

<ajaxToolkit:TabContainer OnClientActiveTabChanged="ActiveTabChanged" runat="server" ID="tabContainer"

<script type="text/javascript"> function ActiveTabChanged(sender, e) { var activeTab = $get('<%=activeTab.ClientID%>'); activeTab.value = sender.get_activeTabIndex(); }</script>

and then add the following code to the page_load of the user control/page:

  if (!string.IsNullOrEmpty(activeTab.Value)) tabContainer.ActiveTabIndex =int.Parse(activeTab.Value);

Workaround UpdatePanel works for me too.

Big Smile

thanks howard, hidden field method works great!

Hi folks!

I might be having the same problem, but I'm not sure that is the same issue, so I'll describe it here shortly. I want to use a TabContainer w FormViews to display different benefit configurations per products.

In an UpdatePanel, I have a tabContainer containing formviews in each tabs representing our different products and the benefit configuration for that client.

Each formview is using the sameObjectDataSource as its data source; when you click on a tab, a filter is set on the data source such as to display only the correct product information.

///
/// Those functions take care of raising the Server event upon changing the active tab.
///
1 <script type="text/javascript" language="javascript" >
2 ///
3 /// Fonction nécessaire pour attraper l'évènement c?té-client, puis le faire correspondre
4 /// à l'évènement serveur...
5 ///
6 function UserTabChanged(sender, e)
7 {
8 <%= Page.ClientScript.GetPostBackEventReference(tcConfPers, "")%>
9 }
10
11 function ConcesTabChanged(sender, e)
12 {
13 <%= Page.ClientScript.GetPostBackEventReference(tcConfConces, "")%>
14 }

///
/// Here is the declaration of the UpdatePanel, TabContainer, Tabs, and formviews, plus the ObjectDataSource
/// (You may disregard "SectionnableDiv " as it is only a custom panel, with an additional property...)
15 </script>
16 <asp:UpdateProgress ID="ConfPersUpdateProgress" runat="server" AssociatedUpdatePanelID="upnlConfPers" >
17 <ProgressTemplate>
18 <asp:Image ID="imgConfPersUpdateProgress" runat="server" ImageUrl="~/Dependancies/Multimedia/Images/bigrotation2.gif" />
19 </ProgressTemplate>
20 </asp:UpdateProgress>
21
22 <asp:UpdatePanel ID="upnlConfPers" runat="server" RenderMode="Inline" UpdateMode="Conditional">
23 <ContentTemplate>
24
25 <libPC:SectionnableDiv ID="divBenefPerso" AccessCode="sConfPerso" runat="server" Visible="true">
26 <libAJAX:TabContainer CssClass="ajax__tab_portal" ID="tcConfPers" runat="server" OnClientActiveTabChanged="UserTabChanged" OnActiveTabChanged="tcConfPers_OnActiveTabChanged">
27 <libAJAX:TabPanel ID="tbConfPersAWC" runat="server" HeaderText="AWChar">
28 <ContentTemplate>
29 <libPC:PortalBenefConfigView AccessCode="sConfAWC" TypeProd="AWCar" Template="~/WUC/wucBaseBenefitConfig.ascx" ID="fvBenefPersAWC" runat="server" DataSourceID="odsBenefConfigs" OnDataBound="SetRadioBtn">
30 <HeaderTemplate>
31 <asp:Label runat="server">Configuration de profits de garanties supplémentaires pour voitures</asp:Label>
32 </HeaderTemplate>
33 </libPC:PortalBenefConfigView>
34 </ContentTemplate>
35 </libAJAX:TabPanel>
36 <libAJAX:TabPanel ID="tbConfPersAWRV" runat="server" HeaderText="AWVR">
37 <ContentTemplate>
38 <libPC:PortalBenefConfigView AccessCode="sConfAWRV" TypeProd="AWRV" Template="~/WUC/wucBaseBenefitConfig.ascx" ID="fvBenefPersAWRV" runat="server" DataSourceID="odsBenefConfigs" OnDataBound="SetRadioBtn">
39 <HeaderTemplate>
40 <asp:Label runat="server">Configuration de profits de garanties supplémentaires pour véhicules récréatifs</asp:Label>
41 </HeaderTemplate>
42 </libPC:PortalBenefConfigView>
43 </ContentTemplate>
44 </libAJAX:TabPanel>
45 <libAJAX:TabPanel ID="tbConfPersAWLV" runat="server" HeaderText="AWVL">
46 <ContentTemplate>
47 <libPC:PortalBenefConfigView AccessCode="sConfAWLV" TypeProd="AWLV" Template="~/WUC/wucBaseBenefitConfig.ascx" ID="fvBenefPersAWLV" runat="server" DataSourceID="odsBenefConfigs" OnDataBound="SetRadioBtn">
48 <HeaderTemplate>
49 <asp:Label runat="server">Configuration de profits de garanties supplémentaires pour véhicules de loisir</asp:Label>
50 </HeaderTemplate>
51 </libPC:PortalBenefConfigView>
52 </ContentTemplate>
53 </libAJAX:TabPanel>
54 <libAJAX:TabPanel ID="tbConfPersRWC" runat="server" HeaderText="RWChar">
55 <ContentTemplate>
56 <libPC:PortalBenefConfigView AccessCode="sConfRWC" TypeProd="RWCar" Template="~/WUC/wucBaseBenefitConfig.ascx" ID="fvBenefPersRWC" runat="server" DataSourceID="odsBenefConfigs" OnDataBound="SetRadioBtn">
57 <HeaderTemplate>
58 <asp:Label runat="server">Configuration de profits de garanties de remplacement pour voitures</asp:Label>
59 </HeaderTemplate>
60 </libPC:PortalBenefConfigView>
61 </ContentTemplate>
62 </libAJAX:TabPanel>
63 <libAJAX:TabPanel ID="tbConfPersRWLV" runat="server" HeaderText="RWVL">
64 <ContentTemplate>
65 <libPC:PortalBenefConfigView AccessCode="sConfRWLV" TypeProd="RWLV" Template="~/WUC/wucBaseBenefitConfig.ascx" ID="fvBenefPersRWLV" runat="server" DataSourceID="odsBenefConfigs" OnDataBound="SetRadioBtn">
66 <HeaderTemplate>
67 <asp:Label runat="server">Configuration de profits de garanties de remplacement pour véhicules de loisir</asp:Label>
68 </HeaderTemplate>
69 </libPC:PortalBenefConfigView>
70 </ContentTemplate>
71 </libAJAX:TabPanel>
72 <libAJAX:TabPanel ID="tbConfPersILC" runat="server" HeaderText="AssCréd">
73 <ContentTemplate>
74 <libPC:PortalBenefConfigView AccessCode="sConfCIC" TypeProd="ILCar" Template="~/WUC/wucBaseBenefitConfig.ascx" ID="fvBenefPersCIC" runat="server" DataSourceID="odsBenefConfigs" OnDataBound="SetRadioBtn">
75 <HeaderTemplate>
76 <asp:Label runat="server">Configuration de profits d'assurance-crédit pour voitures</asp:Label>
77 </HeaderTemplate>
78 </libPC:PortalBenefConfigView>
79 </ContentTemplate>
80 </libAJAX:TabPanel>
81 </libAJAX:TabContainer>
82
83 </libPC:SectionnableDiv>
84
85 <asp:ObjectDataSource ID="odsBenefConfigs" runat="server"
86 TypeName="GroupePPP.Portal.AuthorizationDAL.CommissionInfoDAL"
87 SelectMethod="GetEntityList"
88 UpdateMethod="Save"
89 OnSelecting="odsBenefConfigs_Selecting">
90 <UpdateParameters>
91 <asp:Parameter Name="user" Type="Object" />
92 <asp:Parameter Name="da" Type="Object" />
93 </UpdateParameters>
94 <SelectParameters>
95 <asp:Parameter Name="IDConces" Type="Int32" />
96 <asp:Parameter Name="IDUser" Type="Int32" />
97 <asp:Parameter Name="da" Type="Object" />
98 </SelectParameters>
99 </asp:ObjectDataSource>
100
101 </ContentTemplate>
102 </asp:UpdatePanel>

Problem is: When I first change the active tab, the page is doing a full post-back, instead of a partial one, and there is no change of tabs, or filter applied on the ods, but on all subsequent changes of tab, only a partial postback is made(which is good.)
On every change(after the first one), the filter is set appropriately (the contained ObjectDataSource is filtered and the formview displays the correct product information.) But when I go to edit mode (in any one of the formviews), the partial post-back is made, but the ODS seems to lose its state (I'm now in the correct tab, but the filter went away, and the data displayed is the first record in the underlying datatable.) If I then go to another tab and come back to the one I wanted to edit, the other is in read-only mode, and the one I asked for is still in edit mode, on the correct record.

I might have given too many details, but as I'm new to AJAX, I tried to include all relevant information... Please do not hesitate to ask for clarifications.

Thank you all for your time!

Hi folks!

In an UpdatePanel, I have a tabContainer containing formviews in each tabs representing our different products and the benefit configuration for that client.

Each formview is using the sameObjectDataSource as its data source; when you click on a tab, a filter is set on the data source such as to display only the correct product information.

I might have given too many details, but as I'm new to AJAX, I tried to include all relevant information... Please do not hesitate to ask for clarifications.

Thank you all for your time!

P.S.: Sorry for the double-post; the forum parser had a hard-time wih the accentuated "e", in "Quebec"... ;)

Wednesday, March 21, 2012

TabContainer doesnt maintain active tab after click on TreeView node

Hello,

I've got a small probleme with TabContainer and a treeview. When I click on a TreeView node, the TabContainer doesn't maintain its active tab after postback.

Here is a test page. To reproduce the problem, select the second tab, then click on any of the node inside the Tree.

<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="test2.aspx.cs" Inherits="test2" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> </head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager> <asp:TreeView ID="treeview" runat="server"> <Nodes> <asp:TreeNode Text="root" Value="root"> <asp:TreeNode Text="item1" Value="item1"></asp:TreeNode> <asp:TreeNode Text="item2" Value="item2"></asp:TreeNode> </asp:TreeNode> </Nodes> </asp:TreeView> <ajaxToolkit:TabContainer ID="container" runat="server"> <ajaxToolkit:TabPanel HeaderText="tab 1" runat="server" ID="tab1"></ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel HeaderText="tab 2" runat="server" ID="tab2"></ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> </div> </form></body></html>

It doesn't work with LinkButton postbacks, too, and probably with everything that uses __doPostBack() calls...