Geek asks and answers

Cloning AJAX TabPanels

I ran into an interesting problem while trying to clone a template bar in my ajax tabclainer control.

The idea is that I have a user control on the first tab that lists some things, and to add a new thing that you click on a new button in a custom control that triggers an event on the control / page containing the tab container This control / page then clones the hidden tab and adds the clone to the tabcontainer.

with this markup, I get what I need, starting with the first tab (containing the list) and any subsequent tabs (with a hidden tab template ready for cloning) ...

<asp:TabContainer ID="TabContainer1" runat="server">
    <asp:TabPanel ID="ui_pnl1" HeaderText="My Panel" runat="server">
        <ContentTemplate>
            <cc1:myListOfThings ID="list" runat="server" OnMyEvent="CreateTabFromTemplate" />
        </ContentTemplate>
    </asp:TabPanel>
    <asp:TabPanel ID="TemplatePanel" runat="server" Visible="false">
        <HeaderTemplate>
            <span>Hello World</span><asp:LinkButton ID="ui_btnRemove" runat="server" Text="x" />
        </HeaderTemplate>
        <ContentTemplate>
            Some content for my panel
        </ContentTemplate>
    </asp:TabPanel>
</asp:TabContainer>

, , "MyEvent", , , "CreateTabFromTemplate".

, , "TemplatePanel" .

:

protected void CreateTabFromTemplate(object sender, EventArgs e)
{
    // create a new tab panel
    TabPanel newPanel = new TabPanel();
    // instantiate the hidden content template from the hidden note panel in the new panel
    ui_tpNoteCreator.ContentTemplate.InstantiateIn(newPanel);
    // add the panel to the available tabs and select it
    TabContainer1.Tabs.Add(newPanel);
    TabContainer1.ActiveTab = newPanel;
}

... - ... tabpanels... , , , .

: http://forums.asp.net/t/1108611.aspx/1 , , , .

, ... - ?!?!

?

+3
2

, ...

, , , , ...

:

<asp:TabContainer ID="TabContainer1" runat="server">
    <asp:TabPanel ID="ui_pnl1" HeaderText="My Panel" runat="server">
        <ContentTemplate>
            <cc1:myListOfThings ID="list" runat="server" OnMyEvent="CreateTabFromTemplate" />
        </ContentTemplate>
    </asp:TabPanel>
    <asp:TabPanel ID="TemplatePanel" runat="server" Visible="false">
        <HeaderTemplate>
            <span>Hello World</span><asp:LinkButton ID="ui_btnRemove" runat="server" Text="x" />
        </HeaderTemplate>
        <ContentTemplate>
            Some content for my panel
        </ContentTemplate>
    </asp:TabPanel>
</asp:TabContainer>

:

protected void CreateTabFromTemplate(object sender, EventArgs e)
{
    // create a new tab panel
    TabPanel newPanel = new TabPanel();
newPanel.HeaderTemplate = TemplatePanel.HeaderTemplate;
newPanel.ContentTemplate = TemplatePanel.ContentTemplate;
    // add the panel to the available tabs and select it
    TabContainer1.Tabs.Add(newPanel);
    TabContainer1.ActiveTab = newPanel;
}

protected void TabContainer_DataBinding(object sender, EventArgs e)
{
   foreach(TabPanel panel in TabContainer.Tabs)
   {
      //identify if this is the correct tab
      if(correctTab)
      {
          // this will find a control anywhere on the panel (eg in both header and content templates)
          Label label = panel.FindControl("ControlID") as Label;
          label.Text = "Some Business Object Value";
      }
   }
}
+2

, , .

:

<asp:TabContainer ID="TabContainer1" runat="server" ViewStateMode="Enabled">
        <asp:TabPanel ID="ui_pnl1" HeaderText="My Panel" runat="server">
            <ContentTemplate>
                <asp:Button ID="btnAddPanel" runat="server" Text="Add Panel" />
            </ContentTemplate>
        </asp:TabPanel>
        <asp:TabPanel ID="TemplatePanel" runat="server" Visible ="false">
            <HeaderTemplate>
                <span>Hello World</span><asp:LinkButton ID="ui_btnRemove" runat="server" Text="X" />
            </HeaderTemplate>
            <ContentTemplate>
                <p>Test Content</p>
            </ContentTemplate>
        </asp:TabPanel>
    </asp:TabContainer>

:

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        this.btnAddPanel.Click += new EventHandler(btnAddPanel_Click);
    }

    void btnAddPanel_Click(object sender, EventArgs e)
    {
        TabPanel newPanel = new TabPanel();

        newPanel.HeaderTemplate = TemplatePanel.HeaderTemplate;
        TemplatePanel.ContentTemplate.InstantiateIn(newPanel);

        TabContainer1.Tabs.Add(newPanel);
        TabContainer1.ActiveTab = newPanel;        
    }
}
0
source

More articles:


All Articles