Load on demand tabpanel

Hi there,

I wonder how to create some tabs with following requirement:
1. Load a tab's contain at the first times when it selected (except the first tab)
2. After the first load, you can chose another tab, and when you come back previous tab, it does not load again.

You can meet this requirement in "Related" Tab at 'New Post' page in this forum

Please help me by any link, artical, sample code, etc...

Thank you very much!

I'd like to do this too. Someone's gotta have a solution for this
I am also curious how this is done. It would be very useful to reduced the initial loading time of a page to not have to load the entire contents of the tabs before the page is presented to the user. I didn't see any OnActive event for TabPanels. Am I missing something?
OnActive event is not solution for this problem. It's?very easy when you want to create tabpanel with "Loading?style" on a tab actived. But, when you loaded a tab,?and?come?back?after?select?other?tab,?it will?load?again.

The main problem is: how to show loaded tab, but don't load again.
This is my solution for Tabpanel load tab on demand problem:
I create a Web method, which will return a string.
I call this method by Javascript (view Ajax tutorial at Asp.net)
In onComplete(arg) function, I saved return string (arg variable) in Javascript's variable.
On OnClientClick I call TryLoad javascript function to render my string to a div tab from memory

 /* Author: Do Quoc Khanh Email: doqkhanh@.gmail.com */ var flagArray=new Array(20); var contentArray = new Array(20); //Define var unLoaded = 0; var Loaded = 1; //Save current tabid var currentTab; var displayObj; function showValue(id, value) { document.getElementById(id).innerHTML = value; } function isFirstTime(currentTab) { if (flagArray[currentTab] == Loaded) { return true; } return false; } function tryLoad(displayobjectid, inputparam, tabid) { currentTab = tabid; displayObj = displayobjectid; if(isFirstTime(currentTab)) { //Fill info to obj value from memory showValue(displayObj,contentArray[currentTab]); } else { //Execute load process Test.GetCategories(inputparam, onComplete, onError, onTimeout); } } function onComplete(arg) { //Check loaded flag flagArray[currentTab] = Loaded; //Save to memory contentArray[currentTab] = arg; //Fill info to obj innerhtml from memory showValue(displayObj,arg); } function onError(arg) { alert('Error'); } function onTimeout(arg) { alert('Time out'); }

Load Tab Content when user selects the Tab

Hello,

I am creating a web page with two different tabs. The data for both tabs is from single aspx file under a single Content.

How can i make my second tab load its content when user clicks it?

Regards

HI .

When you click on one Tab . data will be populated from DataBase or its only Static Content .IF it is Static Content then Use Div for Each Tab and Clicking on tab Show one Div and hide another div

Both tabs are Gridviews data (data populated from database).

As of now, my page has both grids loaded with data and it just loaded once from the server.

But like i said, i need the second Tab only populated when user clicks it.

take a look at this link... its help ful

http://mattberseth.com/blog/2007/07/how_to_lazyload_tabpanels_with.html

loading dynamic with tabs

Hello!

I have page with number of gridviews and information that case delay in page load ... I want to split it in tabs .. but does Tab Container load the tabs at time of page load or when click on a tab?

you can add the tabs at runtime..

following is the code..

Code behind.

protected void Page_Load(object sender, EventArgs e) { mytabContainer.Tabs[0].HeaderText ="My first Tab"; AjaxControlToolkit.TabPanel tb =new AjaxControlToolkit.TabPanel(); tb.HeaderText ="My second tab"; mytabContainer.Tabs.Add(tb); AjaxControlToolkit.TabPanel tb1 =new AjaxControlToolkit.TabPanel(); tb1.HeaderText ="my third tab"; mytabContainer.Tabs.Add(tb1); }

and html is

 
 <asp:ScriptManager ID="scriptmanager" runat="server"> </asp:ScriptManager> <cc1:TabContainer ID="mytabContainer" runat="server" ActiveTabIndex="0"> <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1"> </cc1:TabPanel> </cc1:TabContainer>
 

Loading UserControls in Tabs

Hello folks,

In my project I am using the AjaxToolKit to display Tabs on my page which is inherieted from a master page Script manager and UpdatePanel is on master page. The aspx page has TabContainer:

<ajaxToolkit:TabContainerID="tcMain"runat="server"OnClientActiveTabChanged="ActiveTabChanged"OnActiveTabChanged="ActiveTabChangedServer">

Also on the aspx page I have this to wireup the client side Tab change event:

<scripttype="text/javascript"language="javascript">
function ActiveTabChanged(sender, e) {
__doPostBack('<%= tcMain.ClientID %>', sender.get_activeTab().get_headerText());
}
</script>

On the code behind of the aspx page I have a method that does the work when the active Tab is changed:

protectedvoid ActiveTabChangedServer(object sender,EventArgs e){
// Do something
}

My Tab container has two tabs each of which loads a User control. What I am noticing is that whenever I switch tabs the previously loaded control has to load again, a postback is occuring. The Tab Panel in the container has ViewState enabled.

Should I have to load the UserConrol again when I switch to a different Tab?

Is there a more efficient way of doing this?

Should I unload the UserControl for better performance and making page lighter when switching tabs? Is this the correct way of doing things?

Appreciate your help.

You could put the tab panel inside of an updatepanel.
You could also set up an handler to check each time the tab is changed and load the last control from viewstate (I like to set up a property that saves any control that I load dynamically into viewstate so I can always refer to it when I need it)...

Take the update panel out of the masterpage and put on the page with the tab container.

Update panels are not intended for masterpages.

Hope this helps

DK

Hi,

You have to load the UserControl again. This is a FAQ about dynamic control in asp.net. Please refer to the following explanation.

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.