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
85
WebTab background color setting and tabs selection issues
posted

Infragistics Team,

I am using the WebTab control (v16.2) in our application. Here below is the WebTab control defined in the .ASPX page.

<AAI:WebTab id="PageTab" runat="server" Height="280px" DESIGNTIMEDRAGDROP="833" DisplayMode="Scrollable" Width="940px"
TabOrientation="Horizontal" TabLocation="TopLeft" VisibleHeader="true">
<Tabs>
<ig:ContentTabItem Text="@NETWORK@" Key="Network" AutoSize="True">
<Template>
<ASP:ContentPanel id="pnlNetworkInfo" runat="server" Width="624" Height="69px">
<!-- HTML table with other controls defined //-->
</ASP:ContentPanel>
</Template>
</ig:ContentTabItem>
<ig:ContentTabItem Text="@FOCUSES@" Key="Focuses" AutoSize="True">
<Template>
<ASP:ContentPanel id="pnlNetworkFocuses" runat="server" Width="624" Height="69px" ControlGroup="NetworkInfoGroup">
<!-- HTML table with other controls defined //-->
</ASP:ContentPanel>
</Template>
</ig:ContentTabItem>
<ig:ContentTabItem Text="@PROVIDER@" Key="Provider">
<Template>
<ASP:ContentPanel id="pnlProvider" runat="server" Width="624" Height="69px" ControlGroup="NetworkInfoGroup">
<!-- HTML table with other controls defined //-->
</ASP:ContentPanel>
</Template>
</ig:ContentTabItem>
<ig:ContentTabItem Text="@GROUPPRACTICE@" Key="GroupPractice" AutoSize="True">
<Template>
<ASP:ContentPanel id="pnlGroupPractices" runat="server" Width="624" Height="69px" ControlGroup="NetworkInfoGroup">
<!-- HTML table with other controls defined //-->
</ASP:ContentPanel>
</Template>
</ig:ContentTabItem>
<ig:ContentTabItem Text="@FACILITY@" Key="Facility" AutoSize="True">
<Template>
<ASP:ContentPanel id="pnlFacility" runat="server" Width="624" Height="69px" ControlGroup="NetworkInfoGroup">
<!-- HTML table with other controls defined //-->
</ASP:ContentPanel>
</Template>
</ig:ContentTabItem>
<ig:ContentTabItem Text="@PLAN@" Key="Plan" AutoSize="True">
<Template>
<ASP:ContentPanel id="pnlPlan" runat="server" Width="624" Height="69px" ControlGroup="NetworkInfoGroup">
<!-- HTML table with other controls defined //-->
</ASP:ContentPanel>
</Template>
</ig:ContentTabItem>
<ig:ContentTabItem Text="@NOTES@" Key="Notes" AutoSize="True">
<Template>
<ASP:ContentPanel id="pnlGPNote" runat="server" Width="624" Height="69px" ControlGroup="NetworkInfoGroup">
<!-- HTML table with other controls defined //-->
</ASP:ContentPanel>
</Template>
</ig:ContentTabItem>
<ig:ContentTabItem Text="@USERDEFINED@" Key="UserDefined" AutoSize="True">
<Template>
<ASP:ContentPanel id="pnlUserDefined" runat="server" Width="624" Height="69px" ControlGroup="NetworkInfoGroup">
<!-- HTML table with other controls defined //-->
</ASP:ContentPanel>
</Template>
</ig:ContentTabItem>
<ig:ContentTabItem Text="@ASSOCIATEDMOS@" Key="AssociatedMOS" AutoSize="True">
<Template>
<ASP:ContentPanel id="pnlAssociatedMOS" runat="server" Width="624" Height="69px" ControlGroup="NetworkInfoGroup">
<!-- HTML table with other controls defined //-->
</ASP:ContentPanel>
</Template>
</ig:ContentTabItem>
</Tabs>
</AAI:WebTab>

When ran the application, the WebTab control displays the content with white background color. Please see the attached snapshot for details. How can we change the WebTab control background color without modifying the ig_webtab.css file that comes with Infragistics controls. I want to set the WebTab background color to transparent (or some other color) thru code dynamically as we have a requirement to display the tabs in different colors on different pages. I tried with some options to set the background color, but they did not work. Could you please let me know how to set the overall WebTab (or each Tab) control background color thru code (at run time).

Also I have observed that nothing happens when clicked on the individual tab headers. I understand that, when user clicks on any tab header, the corresponding tab content will be displayed. But this does not happen in my implementation. Is it not the default behavior of WebTab control? If not, please let me know how to display the corresponding tab content when the user clicks on its header.

If possible, please provide a sample application for the above two functionalities so that I could go thru and implement in our application. Thanking you in advance.

With Regards,
Naga

Parents
No Data
Reply
  • 18204
    Offline posted

    Hello Naga,

    Thank you for posting in our forums!

    The recommended approach to set the background colors is to set the CssClass property of the tabs.  Another way is to set the Style collection in code behind.  The following code shows examples of this.

    PageTab.Tabs[0].CssClass = "green-background";
    PageTab.Tabs[1].CssClass = "blue-background";

    PageTab.Tabs[2].Style.Add("background-color", "magenta");

    You could also add your own CSS definitions instead of modifying the ig_webtab.css file.  You can make the WebTab transparent using the following:

    .igtab_THContentHolder, .igtab_THContent
    {
        background-color: transparent;
    }

    As for the issue with content not showing when changing tabs, the tabs should be showing their content when switched to.  I am not familiar with the ContentPanel control you are using, but when I include a normal asp:Panel, the content shows as expected.  I have attached a sample demonstrating this and the methods of changing the background colors.

    If you need further assistance with this, please let me know.

    WebTab_DnyamicBackground.zip
Children