Ajax tab with different height

Last post 02-27-2008 1:36 PM by samiguru. 4 replies.

Sort Posts:

  • Ajax tab with different height

    02-21-2008, 11:47 AM
    • Member
      1 point Member
    • samiguru
    • Member since 02-21-2008, 11:46 AM
    • Posts 5

    How can i set Tab container with different heights dynamically.

     

    Samarjit C
  • Re: Ajax tab with different height

    02-21-2008, 3:36 PM
    • Member
      1 point Member
    • samiguru
    • Member since 02-21-2008, 11:46 AM
    • Posts 5

    The Tab height is not changing even though i have written server side validation .

     <cc1:TabContainer ID="TabContainer2" runat="server" CssClass="ajax__tab_Searchtab-theme" OnActiveTabChanged="DoServerSideValidation" OnClientActiveTabChanged="ActiveTabChanged">

    function ActiveTabChanged(sender, e)
    {

    __doPostBack('<%= TabContainer2.ClientID%>',sender.get_activeTab()[2].set_height(65));

    }

    protected void DoServerSideValidation(object sender, EventArgs e)

    {

     if (TabContainer2.ActiveTabIndex == 2)

    {

    TabPanel6.Height = 20;

    TabPanel6.Width = 40;

    TabContainer2.Height =600;

    TabContainer2.Width = 513;

    tabResultData.Visible = false ;

    }

    else if (TabContainer2.ActiveTabIndex == 1)

    {

    TabContainer2.Height = 315;

    TabContainer2.Width = 513;

    }

    else if (TabContainer2.ActiveTabIndex == 0)

    {

    TabContainer2.Height = 315;

    TabContainer2.Width = 513;

    }

    else if (TabContainer2.ActiveTabIndex == 3)

    {

    TabPanel6.Height = 20;

    TabPanel6.Width = 40;

    TabContainer2.Height = 600;

    TabContainer2.Width = 513;

    tabResultData.Visible = false;

      }

    }

     

    Samarjit C
  • Re: Ajax tab with different height

    02-21-2008, 5:00 PM
    • Member
      1 point Member
    • samiguru
    • Member since 02-21-2008, 11:46 AM
    • Posts 5

    is there any body, can handle ajax better.

     

    Samarjit C
  • Re: Ajax tab with different height

    02-27-2008, 10:30 AM
    Answer

    Hi Samiguru,

    The easiest way is put a Panel inside the TabPanel.  And when switch from tabs, you can use javascript to set its height dynamically according to its activedTabID.   For example,

    <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" AutoPostBack="false" ActiveTabIndex="0"  OnClientActiveTabChanged="onSwitchTabs">

       ........

    </ajaxToolkit:TabContainer>

    <script type="text/javascript" language="javascript">
            function onSwitchTabs(sender,args){
                switch(sender.get_activeTabIndex()){
                   case 0:     $get("<%=Panel1.ClientID%>").style.height= "150px";  break;
                   .......
                }
            }
    </script>

    Best regards,

    Jonathan

    Jonathan Shen
    Microsoft Online Community Support
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
  • Re: Ajax tab with different height

    02-27-2008, 1:36 PM
    Answer
    • Member
      1 point Member
    • samiguru
    • Member since 02-21-2008, 11:46 AM
    • Posts 5

    You are the Ajax king Jonathan,

    thanks much.

    Samarjit C
Page 1 of 1 (5 items)