Ajax Control Toolkit custom Tab extender to close tabs client-side

Question

I'm attempting to write an AJAX control extender that can modify an AJAX Control Toolkit TabPanel so that the TabPanel's header has an image after the text that, when clicked, hides the tab header using client-side script (without a postback). I would also like to be able to specify an onClientClose function that is also called when a tab is closed.

I'm new to ASP control extenders, and so far I've followed the [tutorial](http://www.asp.net/ajax/tutorials/creating-a-custom-ajax-control-toolkit-control-extender-cs"Creating a Custom AJAX Control Toolkit Control Extender") on the ASP.NET site for creating a custom extender. I've called my extender a ClosableTabPanelExtender, and my extender project builds. I set up a test web page like so:

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
<asp:TabContainer ID="TabContainer1" runat="server">
    <asp:TabPanel ID="TabPanel0" runat="server">
        <HeaderTemplate>Tab 0</HeaderTemplate>
        <ContentTemplate>Hello!</ContentTemplate>
    </asp:TabPanel>
    <asp:TabPanel ID="TabPanel1" runat="server">
        <HeaderTemplate>Tab 1</HeaderTemplate>
        <ContentTemplate>Goodbye!</ContentTemplate>
    </asp:TabPanel>
</asp:TabContainer>
<cc1:ClosableTabPanelExtender ID="ClosableTabPanelExtender1" runat="server" 
    TargetControlID="TabPanel1" />

So far, I am getting the following error when I run the website:
The TargetControlID of 'ClosableTabPanelExtender1' is not valid. A control with ID 'TabPanel1' could not be found.
The error makes me think that a TabPanel can't be extended, so am I going to have to extend the TabContainer instead?

Apart from the error, I could use some direction, especially with the Behavior script. It is the most elusive part to me, though I know that it will likely house most of the functionality that I am trying to add. I'm also not sure how the other parts of the extender work together with it.

I have the Ajax Toolkit source code, and have looked through the source for the Tab controls, which I partially understand. I've also looked through several examples of control extenders, primarily Matt Berseth's extenders and one from Dan Wahlin.

Answer 1

I finally figured out what I needed to do. For anyone who is interested in the solution:

• In order to extend the TabPanel control, I had to get around the error I posted by overriding the OnResolveControlID method in my extender's server code (ClosableTabPanelExtender.cs).

  protected override void OnResolveControlID(ResolveControlEventArgs e)
  {
      // Get a reference to the outermost TabContainer that contains the TabPanel being extended.
      TabContainer tabContainer = (TabContainer)base.FindControl(OuterTabPanelID);
      if (tabContainer != null)
      {
          // Check to see if any of the tabs are the control we are looking form.
          foreach (TabPanel tab in tabContainer.Tabs)
          {
              if (tab.ID == e.ControlID)
              {
                  e.Control = tab;
                  return;
              }
          }
          // If none of the tabs are what we are looking for, search the contents of each tab.
          foreach (TabPanel tab in tabContainer.Tabs)
          {
              Control ctrl = tab.FindControl(e.ControlID);
              if (ctrl != null)
                  return;
          }
      }
  }
  

• As for the client-side Behavior script of the extender (and the interaction between the server and client code, the articles listed on this MSDN page are helpful and will save you a lot of trouble.