Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Andreas
200
WebTab and SelectedIndexChanged
posted

Hello,

I have two WebTabs on my page in different UserControls. My objective is changing the selected Index of the first tab depending on the selectedIndexChanged Event of the second tab.

With Code Behind I get the event an can easily identify the information about the new selected index. But setting the SelectedIndex Attribute for the first tab doesn't work.

I have added the code into page_prerender of the usercontrol containing the first tab

 WebTabControl1.SelectedIndex = 4 

sets SelectedIndex to 4, but on the page nothing changes. The new Tab is not selected.

 

My second attempt is doing this only with client side events.

I get the event every time I change the Tab Index but with this code:

function tabToolbarInit(sender, eventArgs) {
//        alert("Selected Index has changed");
        var tab = $get('<%=tabWorkspace.ClientID%>');
        alert(tab);
        alert(eventArgs.tabIndex);
    }

I can see that the WebTab Control has been identified. But alert(eventArgs.tabIndex); shows only <undefined> ???

Documentation says TabItemPostBackEventArgs shoud have the Property tabIndex.

Can anyone give me a little help?

 

best regards
Andreas

  • 24497
    posted

    Hi Calisana,

    I am not sure why server codes to change index of WebTab in another usercontrol do not work. I tested following and it worked without any problems.
    Note: in order to process server codes, you need a postback. So, you need a submit button on page or you should enable AutoPostBack for tab-change. My codes use autopostback.

    UserControl with "source" WebTab:
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="TabUser1.ascx.cs" Inherits="TabUser1" %>
    <ig:WebTab ID="WebTab1" runat="server" Width="200px" Height="200px"
     onselectedindexchanged="WebTab1_SelectedIndexChanged">
      <Tabs>
       <ig:ContentTabItem runat="server" Text="Tab 1"></ig:ContentTabItem>
       <ig:ContentTabItem runat="server" Text="Tab 2"></ig:ContentTabItem>
       <ig:ContentTabItem runat="server" Text="Tab 3"></ig:ContentTabItem>
      </Tabs>
     <AutoPostbackFlags SelectedIndexChanged="On" />
    </ig:WebTab>

    TabUser1.ascx.cs:
    protected void WebTab1_SelectedIndexChanged(object sender, Infragistics.Web.UI.LayoutControls.TabSelectedIndexChangedEventArgs e)
    {
      Control tabUser2 = this.Page.FindControl("TabUser21");
      if(tabUser2 == null)
       return;
      Control tabOnUser2 = tabUser2.FindControl("WebTab2");
      if(tabUser2 == null)
       return;
      ((Infragistics.Web.UI.LayoutControls.WebTab)tabOnUser2).SelectedIndex = this.WebTab1.SelectedIndex;
    }

    UserControl with "target" WebTab:
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="TabUser2.ascx.cs" Inherits="TabUser2" %>
    <ig:WebTab ID="WebTab2" runat="server" Width="200px" Height="200px">
      <Tabs>
       <ig:ContentTabItem runat="server" Text="Tab 1"></ig:ContentTabItem>
       <ig:ContentTabItem runat="server" Text="Tab 2"></ig:ContentTabItem>
       <ig:ContentTabItem runat="server" Text="Tab 3"></ig:ContentTabItem>
      </Tabs>
    </ig:WebTab>

    main page:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TabContainer.aspx.cs" Inherits="TabContainer" %>
    <%@ Register src="TabUser1.ascx" tagname="TabUser1" tagprefix="uc1" %>
    <%@ Register src="TabUser2.ascx" tagname="TabUser2" tagprefix="uc2" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "     http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
    <html xmlns="     http://www.w3.org/1999/xhtml ">
    <head runat="server">
        <title></title>
    </head>
    <body>
     <form id="form1" runat="server">
      <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
      <uc1:TabUser1 ID="TabUser11" runat="server" />
      <uc2:TabUser2 ID="TabUser21" runat="server" />
     </form>
    </body>
    </html>

    You also may do all on client without a postback. However, you should use $find(clientID) method, because $get(id) returns html element, but not javascript object. If you do not know ClientID, then I suggest you to use $util.findControl(ID) method which allows to find an AJAX control by its ID.
    Actually in case of UserControls, that is probably the only option, because codes like below with attempt to find child in different UserControl by its ClientID will not be compiled.

    var tab = $find('<%=WebTab2.ClientID%>');

    Because WebTab2 is located in different UserControl.
    Of course you may use standard $find with exact hard coded value of ClientID.
    Below are codes for UserControl with "source" WebTab which do all on client (all other codes are the same).

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="TabUser1.ascx.cs" Inherits="TabUser1" %>
    <script type="text/javascript">
    function ctl00_WebTab1_SelectedIndexChanged(sender, eventArgs)
    {
     var tab2 = $util.findControl('WebTab2');
    // var tab2 = $find('TabUser21_WebTab2');
     if(tab2)
      tab2.set_selectedIndex(sender.get_selectedIndex());
    }
    </script>
    <script type="text/javascript">
    </script>
    <ig:WebTab ID="WebTab1" runat="server" Width="200px" Height="200px"
     onselectedindexchanged="WebTab1_SelectedIndexChanged">
      <Tabs>
       <ig:ContentTabItem runat="server" Text="Tab 1"></ig:ContentTabItem>
       <ig:ContentTabItem runat="server" Text="Tab 2"></ig:ContentTabItem>
       <ig:ContentTabItem runat="server" Text="Tab 3"></ig:ContentTabItem>
      </Tabs>
     <ClientEvents SelectedIndexChanged="ctl00_WebTab1_SelectedIndexChanged" />
    </ig:WebTab>