[CLOSED] Tabs Question

  1. #1

    [CLOSED] Tabs Question

    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
  2. #2

    RE: [CLOSED] Tabs Question

    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.
    Geoffrey McGill
    Founder & CEO
  3. #3

    RE: [CLOSED] Tabs Question

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

    Cheers,
    Timothy
  4. #4

    RE: [CLOSED] Tabs Question

    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.
    Geoffrey McGill
    Founder & CEO
  5. #5

    RE: [CLOSED] Tabs Question

    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
  6. #6

    RE: [CLOSED] Tabs Question

    No, the other UpdatePanel issue has not been fixed.
    Geoffrey McGill
    Founder & CEO
  7. #7

    RE: [CLOSED] Tabs Question

    No problem!

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

    Cheers,
    Timothy

Similar Threads

  1. [CLOSED] Move tabs Tabs Style Google Chrome
    By majunior in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Apr 30, 2013, 12:58 PM
  2. [CLOSED] Tooltip for tabs?
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: May 17, 2011, 8:54 PM
  3. [CLOSED] Tabs Add in c#
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 01, 2009, 12:36 PM
  4. [CLOSED] HI how to add buttons for all tabs?
    By Etisbew in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 14, 2009, 7:24 AM
  5. [CLOSED] Loop through tabs
    By reinout.mechant@imprss.be in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Mar 27, 2009, 3:59 PM

Posting Permissions