[CLOSED] Tabs Question

[Timothy]

Hello,

Quick question, any way to make the contents of a tab not render unless active on postback? Would be helpful when working with larger pages.

Cheers,
Timothy

[geoffrey.mcgill]

Good question. Currently, I don't think it's possible, although all the plumbing is in place to incorporate the functionality. Let me see what I can do.

[Timothy]

Would be great to have, but don't let it side track you from the UpdatePanel surrounding the TabPanel problem ;)

Cheers,
Timothy

[geoffrey.mcgill]

Hi Timothy,

We've added a new feature to the Toolkit called DeferredRendering. Currently it only applies to the TabPanel.

If TabPanel.AutoPostBack='true' and TabPanel.DeferredRendering="true" (default value = 'true'), the Content within inactive Tabs will not be rendered to the Page html source.

The ActiveTab will be rendered as before, but Tabs who are not Active will basically be placeholders. The Content and any child Controls will not be rendered. Any Listeners or AjaxEvents attached to the Tab will still be added. Just the Content and Child Controls will not be rendered.

You can confirm DeferredRendering is occuring by viewing the following code sample in a browser, then View > Source and search for the string "This is Tab2". It should not be found.

Example

<ext:TabPanel 
    ID="TabPanel1" 
    runat="server" 
    ActiveTab="0" 
    Height="450"
    OnTabChanged="TabPanel1_TabChanged"
    AutoPostBack="True">
    <Tabs>
        <ext:Tab ID="Tab1" runat="server" Title="Tab 1">
            <Content>
                This is Tab1
            </Content>
        </ext:Tab>
        <ext:Tab ID="Tab2" runat="server" Title="Tab 2">
            <Content>
                This is Tab2
            </Content>
        </ext:Tab>
    </Tabs>
</ext:TabPanel>

The DeferredRendering also works if the TabPanel is placed within an <asp:UpdatePanel>.

In complex TabPanel configurations this feature can significantly reduce the "over the wire" html and JavaScript payload.

If you prefer the functionality of previous releases, where all Content and Controls within all Tabs are rendered on Page_Load, please set DeferredRendering="false". Again, this will only apply if .AutoPostBack="true".

The following code demonstrates setting the DeferredRendering property to "false".

Example

<ext:TabPanel 
    ID="TabPanel1" 
    runat="server" 
    ActiveTab="0" 
    Height="450"
    OnTabChanged="TabPanel1_TabChanged"
    AutoPostBack="True"
    DeferredRendering="false">
    <Tabs>
        <ext:Tab ID="Tab1" runat="server" Title="Tab 1">
            <Content>
                This is Tab1
            </Content>
        </ext:Tab>
        <ext:Tab ID="Tab2" runat="server" Title="Tab 2">
            <Content>
                This is Tab2
            </Content>
        </ext:Tab>
    </Tabs>
</ext:TabPanel>

One gotcha... if using DeferredRendering, any Control within a deferred rendered Tab will obviously not be available to client-side JavaScript. The scenario of scripting against content/controls within inactive Tabs may be rare, but with DeferredRendering it's not possible. The html elements and DOM objects are just not there. Setting DeferredRendering to "false" will fix that problem.

To sumarize, if TabPanel.AutoPostBack property = "true", then DeferredRendering will occur automatically. The default value for the DeferredRendering property is "true". If you are already using AutoPostBack, then your TabPanels will automatically defer rendering once upgraded to latest v0.6 build.

The new DeferredRendering code has been added to SVN and will be available with v0.6.

Hope this helps.

[Timothy]

Great! Thanks for the update!

Quick question, you mentioned it also works within an UpdatePanel, does this mean the TabPanel issue inside the UpdatePanel has been resolved? I know I'm pushing on this one hard, but it's big for me ;)

Cheers,
Timothy

[geoffrey.mcgill]

No, the other UpdatePanel issue has not been fixed.

[Timothy]

No problem!

Oh, and I love this new feature, wow that takes a load off my over head transfer!

Cheers,
Timothy