ASP.AJAX TabContainer/TabPanel Customisation

Question

Is it possible to set the position of the tabs to be at the bottom of the tabcontainer using the AjaxToolkit? You do have some control over the CSS but I'm not au-fait enough with CSS to see whether it's feasible?

Thanks

Answer 1

You can't with the off-the-shelf version of this control, but you could easily modify the source code to create your own version. Checkout AjaxControlToolkit\Tabs\TabContainer.cs (below). You would need to reverse the order so that the RenderHeader() Part comes below the RenderChildren() part. Alternatively you could add a property to the control called "RenderHeaderFirst" or something like that to achieve the same functionality:

    protected override void RenderContents(HtmlTextWriter writer)
    {
        Page.VerifyRenderingInServerForm(this);

        // rendering the tabs (header)
        writer.AddAttribute(HtmlTextWriterAttribute.Id, ClientID + "_header");
        writer.RenderBeginTag(HtmlTextWriterTag.Div);
        {
            RenderHeader(writer);
        }
        writer.RenderEndTag();

        // rendering the contents of the tabs (children)
        if (!Height.IsEmpty)
            writer.AddStyleAttribute(HtmlTextWriterStyle.Height, Height.ToString());

        writer.AddAttribute(HtmlTextWriterAttribute.Id, ClientID + "_body");
        writer.RenderBeginTag(HtmlTextWriterTag.Div);
        {
            RenderChildren(writer);
        }
        writer.RenderEndTag();
    }

P.S. I haven't tried this myself, but it looks like the right direction to go.

Answer 2

Or you could just use the TabStripPlacement property of the TabContainer...

TabContainer Properties

• ActiveTabChanged (Event) - Fired on the server side when a tab is changed after a postback
• OnClientActiveTabChanged - The name of a javascript function to attach to the client-side tabChanged event
• CssClass - A css class override used to define a custom look and feel for the tabs. See the Tabs Theming section for more details.
• ActiveTabIndex - The first tab to show
• Height - sets the height of the body of the tabs (does not include the TabPanel headers)
• Width - sets the width of the body of the tabs
• ScrollBars - Whether to display scrollbars (None, Horizontal, Vertical, Both, Auto) in the body of the TabContainer
• TabStripPlacement - Whether to render the tabs on top of the container or below (Top, Bottom)