Showing posts with label dynamically. Show all posts
Showing posts with label dynamically. Show all posts

Wednesday, March 28, 2012

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 container width

Can the container width be set somehow to dynamically adjust based on it's content?

I have a 3 tabbed container with a Gridview within one of them. The edit mode of the Gridview is wider than when it is in Read mode. So lets say the default with of the container would be set to 600px, but when the Gridview goes into edit mode it might be 800px. The Gridview in edit mode will go right over the 'border' of the container in this case. Can this be configured to work change the width dynamically based on it's content, or do I have to figure out the widest instance and set it to that or programatically change the width on the container when the Gridview goes to edit mode?

Thanks

Mark,

could you post some of your HTML/ASP.NET declaration for the Tab and Content? The Tab is resizing quite well here...

Alexander

Monday, March 26, 2012

Tab Control is throwing an exception on postback

I have a tab container control on my page located within a view. When the view is activated I do a query and dynamically add the tabs based on a query like so:

 DataTable tblCollAttrs = oBAL.GetCollectionAttrs(DetailItemID);foreach(DataRow drowin tblCollAttrs.Rows) { TabPanel collTabPnl =new TabPanel(); collTabPnl.HeaderText = drow["vchAttributeName"].ToString(); relTablContainer.Tabs.Add(collTabPnl); }

So far everything is fine. Now I click an unrelated button which does a full postback that switches the view and I get this exception:Specified argument was out of the range of valid values. Here is where it is crashing in TabPanelCollection.cs:

public new TabPanel this[int index]
{
: get { return (TabPanel)base[index]; }
}

What am I missing here?

Unfortunately, the tab control does not play nice with dynamically added tabs. It does not re-create them during pre-init, and when it goes to set the active tab, you get the error you are seeing because the active tab index is greater than the number of tabs.


Is there anyway around this?


HiI have also this problem.please help me.

Because of this limitation I was unable to use this AJAX control. I ended up creating my own TabStrip control and putting it in an UpdatePanel.

Sorry I don't have a better response.

Tab Control Problem

If I use a tab control with a updatepanel and a datasource - the tab heights are not dynamically resizing. So, it appears like the gridview isn't inside of the tab.

Any ideas why?

1<atlas:TabPanel ID="tabAirSummary" HeaderText="Air Summary" runat="server">2 <ContentTemplate>34 <asp:UpdatePanel ID="UpdatePanel1" runat="server">5 <ContentTemplate>6...gridview and objectdatasource here..7</ContentTemplate>8</asp:UpdatePanel>9</ContentTemplate>10</atlas:TabPanel>1112

Any followups to this topic?

It seems rather odd that this would be released without this senario - I would think it would be common to have different views of data in each tab within a tabcontrol ?


Checking back in...Customer is awaiting a reply from me...

What is the official route for support with Control Toolkit?


Seems likework item 8091?

Saturday, March 24, 2012

TabContainer + UpdatePanel + UpdateProgress + OnClientActiveTabChanged - No progress gif..

Hey all,

I'm using a combinaison of TabContainer + UpdatePanel + UpdateProgress + OnClientActiveTabChanged to dynamically load the content of each TabPanel on user selection.

Everything works fine except the UpdateProgress which does nothing!

I have written a ActiveTabChanged(sender, e) function do actually do a post back for the OnClientActiveTabChanged method. like this :

function ActiveTabChanged(sender, e) {__doPostBack('<%= TabContainer1.ClientID %>', sender.get_activeTab().get_headerText()); }

My problem at the moment is that it does not fire the UpdateProgress control.

I tried to add an hidden asp:button within each TabPanel and fire their event in javascript but as I realised, it only work for the Activated tab, since the Tab controls are not loaded until they are active...... which is after the OnClientActiveTabChanged....

Anyone have any idea of how this can be achieve ?

Many thanks

Rich

I was wondering if anyone knows where the poster above learned what properties/values were exposed by the "sender" parameter sent into the active tab changed event we can specify on the clientside. I did try the sender.get_activeTab().get_headerText() above and it does indeed work. I'm wondering what else is exposed via this parameter and if it is documented somewhere?

Thanks

Wednesday, March 21, 2012

TabContainer and OnActiveTabChanged

Hi,
I read a lot of posts about the OnActiveTabChanged event but I would like to know what would be the best way to load dynamically the content of the selected Tab.
Here's my needs.
I have a tabcontainer with 3 tabs and I want to load the content on fly when the user selects a tab (of course without reload the entire page).
If someone could post the right code, that will be great.

Thanks in advance.
Stan

I think the best way to do this is to:

1) Put an UpdatePanel around the TabContainer

2) Hook the ActiveTabChanged event

3) When it fires for a given tab, add the content in the postback

Note there is a known issue with the TabContainer in an update panel - it's a cosmetic issue where you can see it redraw on postback.


OK I sat down and did a sample of this that loads each panel when the user selects it.

http://blogs.msdn.com/sburke/archive/2007/06/13/how-to-make-tab-control-panels-load-on-demand.aspx

TabContainer doesnt throw ActiveTabChanged Event!

Hi,

I am dynamically adding the tabs to the TabContainer control in the Page_Init event.

These are recreated everytime the page loads.

However when I change the selected tab on the client side and do a postback the ActiveTabChanged Event doesn't fire.

Any ideas?

I am having the same problem. Everything else is working except for the firing of this event. Anyone have a workaround?
yes, found the same problem. had a brief look at the source but couldn't find a obvious answer. bit of a showstopper for me, If anybody has a solution even if it to amend the source I would be happy.
http://forums.asp.net/thread/1556226.aspx?

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.