Solved

ASP.NET AJAX Toolkit Tabs

Posted on 2013-01-22
3
559 Views
Last Modified: 2013-01-23
I'm attempting to insert an AJAX Tab Control, but it does not render when I publish it.  Apparently, I'm missing a key component, but am unable to determine what.  

I have this at the top of my page: <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

I also have the ToolkitScriptManager on the page.  Here is that code along with my attempt of creating a tab control:
______________________________________________
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:TabContainer runat="server" Height="250px" Width="944px" ActiveTabIndex="0"
            TabStripPlacement="Top" ScrollBars="None" Font-Bold="True" Font-Size="14px">
            <asp:TabPanel runat="server" Height="250px" Width="944px" HeaderText="Selling" ID="TabPanel1">
                <ContentTemplate>
                    <div>
                        Hello</div>
                </ContentTemplate>
            </asp:TabPanel>
            <asp:TabPanel runat="server" HeaderText="Bidding" ID="TabPanel2" Enabled="true">
                <ContentTemplate>
                    <div>
                        Hello</div>
                </ContentTemplate>
            </asp:TabPanel>
            <asp:TabPanel runat="server" HeaderText="Sold" ID="TabPanel3" Enabled="true">
                <ContentTemplate>
                    <div>
                        Hello</div>
                </ContentTemplate>
            </asp:TabPanel>
        </asp:TabContainer>

What am I missing?  Thanks!
0
Comment
Question by:cmerlo1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 20

Expert Comment

by:informaniac
ID: 38808572
<asp:TabPanel runat="server" Height="250px" Width="944px" HeaderText="Selling" Enabled="true" ID="TabPanel1">

Open in new window

0
 
LVL 16

Accepted Solution

by:
Kamal Khaleefa earned 500 total points
ID: 38809056
insert the update panel at the top
0
 

Author Closing Comment

by:cmerlo1
ID: 38812063
I also needed to put the TabPanels within the TabContainer and the TabContainer within the ContentTemplate.  Additionally, I had to explicitly apply the style of Visibility="visible" to the tabcontainer.  Note that this could not be added using css.
_____________________________________________________________________________
<asp:UpdatePanel runat="server" ID="StupidPanel">
            <ContentTemplate>
                <asp:TabContainer ID="TabContainer1" runat="server" Style="display: block; visibility: visible;
                    font-size: 14px; font-weight: bold; width: 100%; height: 200px; clear: both;
                    margin-bottom: 15px;" ActiveTabIndex="2" TabStripPlacement="Top"
                    ScrollBars="None">
                    <asp:TabPanel runat="server" HeaderText="Selling" ID="TabPanel1"
                        Enabled="true">
                    </asp:TabPanel>
                    <asp:TabPanel runat="server" HeaderText="Bidding" ID="TabPanel2" Enabled="true">
                    </asp:TabPanel>
                    <asp:TabPanel runat="server" HeaderText="Sold" ID="TabPanel3" Enabled="true">
                    </asp:TabPanel>
                    <asp:TabPanel runat="server" HeaderText="Won" ID="TabPanel4" Enabled="true">
                    </asp:TabPanel>
                    <asp:TabPanel runat="server" HeaderText="Watching" ID="TabPanel5" Enabled="true">
                    </asp:TabPanel>
                </asp:TabContainer>
            </ContentTemplate>
        </asp:UpdatePanel>
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question