Tab Control and vertical scroll bar

Hi All

Hello, I am facing a problem on tab control. Now, I would like to set the vertical scroll bars to be shown always. And I set the property for scroll bar to vertical. It seems worked fine under IE7 but the scroll bar disappear under IE6. Are there any setting needed under IE6 to make it works?

regards

Alex

- option 1: use an iframe inside the tabpanel and set itsstyle="overflow-x:hidden; overflow-y:scroll;"

- option 2: use a div in your tabpanel and set its style to: same as above...

- option 3..n: someone else will probably post another way if that didn't work..

Tab Panel - Problem in trapping Server Side Change Event

Hi,

This is related to the problem facing in trapping the Server Side Change Event of 'Tab Container - Tab Panel'

Below is the code:

<cc1:TabContainer ID="TabContainer1" runat="server" OnClientActiveTabChanged="Change"OnActiveTabChanged="TabContainer1_ActiveTabChanged">
<cc1:TabPanel ID="TabPanel1" runat="server">
<HeaderTemplate>Tab 1</HeaderTemplate>
<ContentTemplate>Tab 1 Content</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server">
<HeaderTemplate>Tab 2</HeaderTemplate>
<ContentTemplate>Tab 2 Content</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>

There are two events provided to handle Client & Server Side events seperately. Client Event works properly.

For reference : http://ajax.asp.net/ajaxtoolkit/Tabs/Tabs.aspx

Problem:The server side event is not working.

Quick help will be highly appreciated.

Regards,

Arun Manglick

Hi,

Here is the solution.

Add 'AutoPostback' property.

<cc1:TabContainer ID="TabContainer1" runat="server" OnClientActiveTabChanged="ActiveTabChanged" OnActiveTabChanged="TabContainer1_ActiveTabChanged"AutoPostBack="True">

Reference : http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=7739

The solution seems to be strange. This solution is been added on 02Jun07. Before that it was a major challenge to overcome that.

Regards,

Arun...

TabContainer Control

Hi,

I am facing an issue with the tabcontainer control. Inside the tabPanel i have an updatepanel which contains a linkbutton set as a trigger to update the content of the tabPanel.

Somehow the server side click event of the linkbutton is not getting fired.

Below is my code snippet :

 <cc1:TabContainer id="Tabs1" runat="server" OnClientActiveTabChanged="ActiveTabChanged" Height="150px"> <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Inbox" CssClass="tabClass" > <ContentTemplate><!--E-Claims form system--> <asp:UpdatePanel ID="claimUpdate" runat="server"> <ContentTemplate><!--Panel to hide the content--> <asp:Panel ID="panel4" runat="server" CssClass="fontClass" BackColor="#082f73" width="682"> <div style="padding:5px; cursor: pointer; vertical-align: middle;"> <div style="float: left;">E-Claim</div> <div style="float: right; margin-left: 20px;" > <asp:LinkButton ID="lnk2" runat="server" Text="Show Details" ForeColor="#ffffff"/> </div> </div> </asp:Panel><!--Content to show--> <asp:Panel id="panel3" runat="server"> <asp:UpdatePanel ID="updatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:GridView ID="grid2" runat="server"> </asp:GridView> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="lnk2" EventName="Click" /> </Triggers> </asp:UpdatePanel>   </asp:Panel> </ContentTemplate> </asp:UpdatePanel> <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server" TargetControlID="panel3" ExpandControlID="panel4" CollapseControlID="Panel4" Collapsed="True" TextLabelID="lnk2" CollapsedText="Show Details.." ExpandedText="Hide Details.." > </cc1:CollapsiblePanelExtender> </ContentTemplate> </cc1:TabPanel> </cc1:TabContainer>

I too am facing a similar issue.I have a simple tabcontainer control on a page and within its tabpanel, an asp:button. Clicking on the button doesnt raise any server side event. I have tried several things but nothing seems to work. The moment i remove the tabcontainer, it works just fine.

Thanks.

Hi,

I tried it, the click event handler fired. Here is my code:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void lnk2_Click(object sender, EventArgs e) { }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <input type="button" onclick="access()" /> <script type="text/javascript" src="JScript.js"></script> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>   <ajaxToolkit:TabContainer id="Tabs1" runat="server" Height="150px"> <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="Inbox" CssClass="tabClass" > <ContentTemplate><!--E-Claims form system--> <asp:UpdatePanel ID="claimUpdate" runat="server"> <ContentTemplate><!--Panel to hide the content--> <asp:Panel ID="panel4" runat="server" CssClass="fontClass" BackColor="#082f73" width="682"> <div style="padding:5px; cursor: pointer; vertical-align: middle;"> <div style="float: left;">E-Claim</div> <div style="float: right; margin-left: 20px;" > <asp:LinkButton ID="lnk2" runat="server" Text="Show Details" ForeColor="#ffffff" OnClick="lnk2_Click"/> </div> </div> </asp:Panel><!--Content to show--> <asp:Panel id="panel3" runat="server"> <asp:UpdatePanel ID="updatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:GridView ID="grid2" runat="server"> </asp:GridView> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="lnk2" EventName="Click" /> </Triggers> </asp:UpdatePanel> </asp:Panel> <ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server" TargetControlID="panel3" ExpandControlID="panel4" CollapseControlID="Panel4" Collapsed="True" TextLabelID="lnk2" CollapsedText="Show Details.." ExpandedText="Hide Details.." Enabled="True" > </ajaxToolkit:CollapsiblePanelExtender> </ContentTemplate> </asp:UpdatePanel> </ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> </div> </form></body></html>