PDA

View Full Version : [CLOSED] TabPanel with ajax and user control (.ascx)



jamesand
Sep 04, 2013, 12:03 PM
Hi good morning, I'm writing to know if there are a solution to the issue I'm trying to solve.

I have a tab panel with several tabs. Each tab is a user control (.ascx). Each user control does lots of things and now when I try to run the website it takes long. So I want to load the tabs when the user click each tab (ajax).

How do I do it if I use user controls?

I tryied:



<%@ Register src="~/Controles/Inicio.ascx" tagname="Inicio" tagprefix="uc1" %>
<%@ Register src="~/Controles/MenuSuperior.ascx" tagname="MenuSuperior" tagprefix="uc1" %>

<%@ Register src="~/Controles/GestionClientes.ascx" tagname="GestionClientes" tagprefix="uc1" %>
<%@ Register src="~/Controles/GestionAbonados.ascx" tagname="GestionAbonados" tagprefix="uc1" %>
<%@ Register src="~/Controles/GestionEventos.ascx" tagname="GestionEventos" tagprefix="uc1" %>

<ext:Viewport ID="Viewport1" runat="server" StyleSpec="background-color: transparent;" Layout="BorderLayout">
<Items>
<ext:Panel
ID="pnlNorth"
runat="server"
Region="North"
Height="37"
Border="false"
Header="false"
BodyStyle="background-color: transparent;">
<Content>
<div id="settingsWrapper">
<div id="settings">
<uc1:MenuSuperior ID="UcMenuSuperior" runat="server"/>
</div>
</div>
</Content>
</ext:Panel>

<ext:TabPanel
ID="TabPanel1"
Region="Center"
runat="server"
ActiveTabIndex="0"
Border="false"
BodyStyle="background-color: #4D778B; border: 1px solid #AABBCC; border-top: none;"
MarginsSummary="5 5 5 0">
<Items>
<ext:Panel
ID="Tab1"
runat="server"
Title="Inicio"
Icon="House"
BodyStyle="background-color: transparent;"
AutoScroll="true">
<Content>
<uc1:Inicio ID="ucInicio" runat="server"/>
</Content>
</ext:Panel>
<ext:Panel
ID="Tab2"
runat="server"
Title="Clientes"
Icon="Group"
BodyStyle="background-color: transparent;"
AutoScroll="true">
<Loader ID="Loader3" runat="server">
<LoadMask ShowMask="true" />
</Loader>
<Content>
<uc1:GestionClientes ID="UcGestionClientes" runat="server"/>
</Content>
</ext:Panel>
<ext:Panel ID="Panel4"
runat="server"
Title="Abonados"
Icon="ColorSwatch"
BodyStyle="background-color: transparent;"
AutoScroll="true">
<Loader ID="Loader2" runat="server">
<LoadMask ShowMask="true" />
</Loader>
<Content>
<uc1:GestionAbonados ID="UcGestionAbonados" runat="server"/>
</Content>
</ext:Panel>
<ext:Panel ID="Panel1"
runat="server"
Title="Eventos"
Icon="SportTennis"
BodyStyle="background-color: transparent;"
AutoScroll="true">
<Loader ID="Loader1" runat="server">
<LoadMask ShowMask="true" />
</Loader>
<Content>
<uc1:GestionEventos ID="UcGestionEventos" runat="server"/>
</Content>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Viewport>

Any help?

Thanks in advance.

Daniil
Sep 04, 2013, 2:00 PM
Hi @jamesand,

By default, a TabPanel renders tabs only when it gets activated.

So, then you run your page, the active tab is rendered only. The inactive ones are not rendered.

I suspect there might be another problem.

Please try to comment out all the tabs except the first one. How much time does it take to load now?

Daniil
Sep 04, 2013, 3:35 PM
I didn't think about that there is Content used in the tabs. It might be rendered initially and, indeed, slows down loading.

Please clarify what is the content of the user controls? Are there Ext.NET controls or something else?

jamesand
Sep 04, 2013, 5:28 PM
Just Ext.Net controls. Which tag should I use instead Content?

Daniil
Sep 05, 2013, 5:15 AM
If there are Ext.NET controls, when I can suggest to set up some layout for the tabs. In a common case, you can set up Layout="AutoLayout".

Let's consider this example.

Page

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<%@ Register Src="~/TestUC.ascx" TagPrefix="uc" TagName="TestUC" %>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:TabPanel runat="server">
<Items>
<ext:Panel runat="server" Title="Tab 1" />
<ext:Panel runat="server" Title="Tab 2">
<Content>
<uc:TestUC runat="server" />
</Content>
</ext:Panel>
</Items>
</ext:TabPanel>
</form>
</body>
</html>


User Control

<%@ Control Language="C#" %>

<%@ Register Assembly="Ext.Net" TagPrefix="ext" Namespace="Ext.Net" %>

<ext:Label runat="server" Text="Hello for User Control!">
<Listeners>
<AfterRender Handler="alert('Label AfterRender');" />
</Listeners>
</ext:Label>

If you run it, you will see an alert box with the "Label AfterRender" message. It means that the Label is actually rendered initially.

However, if you set up Layout="AutoLayout" for the Tab 2 when the Label will be rendered only if activate the second tab.

jamesand
Sep 05, 2013, 11:20 AM
Ok Daniil! Thank you again for your help!

Daniil
Sep 05, 2013, 11:22 AM
So, did it help or you did not try it yet?

jamesand
Sep 05, 2013, 11:38 AM
Yes it helped in deed ;) It works fine.