Nesting a splitter in a TabStrip using MultiPage

Answered (Not Verified) This post has 0 verified answers and 12 replies

Not Ranked
Posts: 15
jonebersole Posted: Tue Feb 16, 2010 @ 10:05 AM

I have what seems to be a very complicated layout that I need some assistance with.  I am using MasterPages in .NET and I have some basic header/footer information and controls located on the masterpage.  The content area is in the center of the page.

On my default page of the site, I am creating the main entry page that will do just about everything.  In the content area, I have TabStrip control that is using MultiPage with PageViews on it.  I want each tab to have a similar look by adding a splitter to each tab.  On the left hand side they would have a NavBar menu relevant to that PageView (tab).  On the right hand side they would have two splitterpanes; one for the top and one for the bottom for actual content/data.  My problem is that the splitter does not behave correctly within the pageviews/tabstrip. 

- The content in the left pane never shows up. it is always set to a height of 1px by ComponentArt settings
- Resizing the splitter panes don't work properly, they start really small (1px??) and then when you select to resize one it grows exponentially
- I can't seem to fill the entire area of the web page with the tab data so it acts like 'FillContainer' for the splitter
- Controls that you add to the spillter panes won't show up either.

Here is my page code that is in my default.aspx page in the content area.

    <ComponentArt:TabStrip ID="TabStrip1" runat="server" Width="100%" MultiPageId="multiPageMain"
        Height="100%">
        <Tabs>
            <ComponentArt:TabStripTab runat="server" Text="My Portal" AutoPostBackOnSelect="false"
                PageViewId="pvMyPortal">
            </ComponentArt:TabStripTab>
            <ComponentArt:TabStripTab runat="server" Text="Tech Support" AutoPostBackOnSelect="false"
                PageViewId="pvTechSupport">
            </ComponentArt:TabStripTab>
        </Tabs>
    </ComponentArt:TabStrip>
    <ComponentArt:MultiPage ID="multiPageMain" runat="server">
        <ComponentArt:PageView ID="pvMyPortal" runat="server">
            <ComponentArt:Splitter ID="splitMyPortal" runat="server" FillContainer="true">
                <Layouts>
                    <ComponentArt:SplitterLayout ID="SplitterLayout2" runat="server">
                        <Panes Orientation="Horizontal" SplitterBarCssClass="VerticalSplitterBar" SplitterBarWidth="6">
                            <ComponentArt:SplitterPane>
                                <Panes>
                                    <ComponentArt:SplitterPane PaneContentId="content1" Width="182" AllowResizing="false" AllowScrolling="true" MinHeight="400" style="z-index:99;">
                                    
                                    </ComponentArt:SplitterPane>
                                </Panes>
                            </ComponentArt:SplitterPane>
                            <ComponentArt:SplitterPane>
                                <Panes Orientation="Vertical" SplitterBarCssClass="HorizontalSplitterBar" SplitterBarWidth="6">
                                    <ComponentArt:SplitterPane PaneContentId="content2" Height="40%">
                                    </ComponentArt:SplitterPane>
                                    <ComponentArt:SplitterPane PaneContentId="content3" Height="60%">
                                    </ComponentArt:SplitterPane>
                                </Panes>
                            </ComponentArt:SplitterPane>
                        </Panes>
                    </ComponentArt:SplitterLayout>
                </Layouts>
                <Content>
                    <ComponentArt:SplitterPaneContent ID="content1" Height="200">
                        Left Content Area1
                    </ComponentArt:SplitterPaneContent>
                    <ComponentArt:SplitterPaneContent ID="content2">
                        Top Content Area1</ComponentArt:SplitterPaneContent>
                    <ComponentArt:SplitterPaneContent ID="content3">
                        Bottom Content Area1</ComponentArt:SplitterPaneContent>
                </Content>
            </ComponentArt:Splitter>
        </ComponentArt:PageView>
        <ComponentArt:PageView ID="pvTechSupport" runat="server">
            <ComponentArt:Splitter ID="splitTechSupport" runat="server" FillContainer="true">
                <Layouts>
                    <ComponentArt:SplitterLayout ID="SplitterLayout1" runat="server">
                        <Panes Orientation="Horizontal" SplitterBarCssClass="VerticalSplitterBar" SplitterBarWidth="6">
                            <ComponentArt:SplitterPane PaneContentId="content4" Width="182" AllowResizing="false">
                            </ComponentArt:SplitterPane>
                            <ComponentArt:SplitterPane>
                                <Panes Orientation="Vertical" SplitterBarCssClass="HorizontalSplitterBar" SplitterBarWidth="6">
                                    <ComponentArt:SplitterPane PaneContentId="content5" Height="40%">
                                    </ComponentArt:SplitterPane>
                                    <ComponentArt:SplitterPane PaneContentId="content6" Height="60%">
                                    </ComponentArt:SplitterPane>
                                </Panes>
                            </ComponentArt:SplitterPane>
                        </Panes>
                    </ComponentArt:SplitterLayout>
                </Layouts>
                <Content>
                    <ComponentArt:SplitterPaneContent ID="content4" Width="180" Style="position: relative;">
                        Left Content Area2
                    </ComponentArt:SplitterPaneContent>
                    <ComponentArt:SplitterPaneContent ID="content5">
                        Top Content Area2</ComponentArt:SplitterPaneContent>
                    <ComponentArt:SplitterPaneContent ID="content6">
                        Bottom Content Area2</ComponentArt:SplitterPaneContent>
                </Content>
            </ComponentArt:Splitter>
        </ComponentArt:PageView>
    </ComponentArt:MultiPage>
Jon

All Replies

Not Ranked
Posts: 15
jonebersole Posted: Tue Feb 16, 2010 @ 12:10 PM
After hours and hours of trying more things, I have more information that should help.  I now think this is a bug in one of the ComponentArt components.

- If I put my splitter control in a page by itself, I can see each of the content areas just fine and everything appears as it should
- When I place the same splitter control inside a MultiPage/PageView it won't display anything in a vertical column.  Horizontal layouts work fine, but Vertical layouts dont display their contents.
Jon
Top 10 Contributor
Posts: 1,603
Answered (Not Verified) harish Posted: Wed Feb 17, 2010 @ 6:31 AM
Suggested by harish

Hello,

 

Thanks for getting back to me and providing me the information.

 

Using the information, I was able to reproduce the issues and here I have logged this behavior with our developers in our defect management system, with a defect ID of #D6789.  This defect will be assigned to a developer to research for a fix, workaround, or other resolution.  If some other resolution is reached, I will contact you with this information.

 

I really appreciate for your co-operation and patience on this.

 

Thank you.

Harish Malhotra

Not Ranked
Posts: 15
jonebersole Posted: Wed Feb 17, 2010 @ 6:44 AM
Harish, Thank you for your reply and attention to my problem.  I did find a workaround that isn't pretty, but it is a temporary fix.  Where I have my vertical pane, i created two horizontal panes instead.  I made my top pane a fixed size of 0px and set the splitterbarsize between them 0px in size also.  It puts a very annoying blank area of about 5px above the second pane, but it helps achieve what I was looking to do until you get a fix in place. I also had to add the following events and javascript code to my page so it would refresh on resize, otherwise it shows blank data in the content areas...

        <ClientEvents>
            <Load EventHandler="ResetSplitter" />
            <ResizeEnd EventHandler="ResetSplitter" />
        </ClientEvents>

 

    <script type="text/javascript">
        function ResetSplitter(sender, e) {
            <%=MySplitter.ClientID %>.adjustSize(true);
        }
    </script>

 

I hope this helps someone else.  Now I'm running into another problem with having a splitter in the content area of a page that uses a masterpage, which I've logged another ticket for.  The collapse/expand bars don't show.  This can be easily replicated as well. Please see my post...
Collapse and Expand features don't work (and icon doesn't show) when in a masterpage


Thanks for all of your help!
Jon
Top 10 Contributor
Posts: 1,603
harish Posted: Wed Feb 17, 2010 @ 8:05 AM

Hello,

 

Thanks for getting back to me.

Thanks for sharing the temporary fix for other's benefit.

Regarding your splitter with masterpage query; the reply has been posted by the concerned engineer in the respective forum.

Thanks.

Harish Malhotra

Not Ranked
Posts: 15
jonebersole Posted: Wed Feb 17, 2010 @ 8:07 AM
I also found another problem to nesting a splitter in a tabstrip.  When I place the splitter in the first pageview it works ok, but if I move the same splitter to a tab that isn't the active tab when the page loads, I get a lot of problems.  The content doesn't load properly in the splitter panes and when you go to resize the splitter panes they all minimize to 1px in height and you can no longer resize anything. 

The funny thing is when you do that first resize, after you resize the collapse/expand icon appears.  See entry  Collapse and Expand features don't work (and icon doesn't show) when in a masterpagefor more information on this bug.

Maybe I'm not doing it properly.  How do I use splitter controls in the tabstrip properly?
Jon
Top 10 Contributor
Posts: 1,603
harish Posted: Wed Feb 17, 2010 @ 1:33 PM

Hello,

 

Thanks for getting back to me with updates.

 

The issue which you are observing by placing the splitter control inside the pageview ("The content doesn't load properly in the splitter panes and when you go to resize the splitter panes they all minimize to 1px in height and you can no longer resize anything") are also to be seen in the earlier scenario i.e. placing splitter control inside multipage. For this the defect #D6789 has already been submitted. Once it is resolved should take care of the similar problem being faced of placing splitter control inside the pageview /multipage.  If some other resolution is reached, I will contact you with this information.

 

We regret for the inconvenience caused to you.

 

I really appreciate for your co-operation and patience on this.

 

Thank you.

 

Harish Malhotra

Not Ranked
Posts: 15
jonebersole Posted: Thu Mar 11, 2010 @ 7:56 AM
Thanks for the information Harish.  Can you tell me how/where I lookup the #Dxxxx numbers on your site so I can track when the fixes have been applied?  I'm using version 2009.3.  I see that version 2010.1 has just been released.  I was curious if any of these fixes have been applied to that release. Thanks.
Jon
Top 10 Contributor
Posts: 1,603
harish Posted: Thu Mar 11, 2010 @ 8:06 AM

Hello,

 

Thanks for getting back to me.

 

Currently our defect tracking system is private meaning customers cannot track the defect which has been submitted on their behalf/other defects. However, we do tend to make it public in the future.

 

The defect # D6789 is still under process(It has not been fixed in 2010.1). Until it's sourced it's hard to give a solid timeframe for the fix. We are treating

it with high priority. We are doing our best to get this sorted asap.

 

Thank you for your co-operation and patience in this regard.

 

Thank you.

 

Harish Malhotra

Not Ranked
Posts: 15
jonebersole Posted: Fri Jun 18, 2010 @ 5:29 AM
any news on this fix?  Thanks
Jon
Top 10 Contributor
Posts: 1,603
harish Posted: Fri Jun 18, 2010 @ 5:37 AM

Hello,

 

Thanks for getting back to me.

 

The defect #D6789 is still under process. As the defect has been logged, there's nothing more the support team can do to escalate.  We don't provide timelines for fixes, as a policy.  All defects are assessed on an ongoing basis and prioritized accordingly.

 

I'm sorry I couldn't be the bearer of better news. Thank you for your co-operation and patience in this regard.

 

Thanks

 

Harish Malhotra

Not Ranked
Posts: 1
pabchee Posted: Wed May 11, 2011 @ 8:32 AM
this post started on Tue Feb 16, 2010 @ 10:05 AM, that is over a year. Has this issue been solved because I am facing a similar problem!
Top 10 Contributor
Posts: 1,603
harish Posted: Wed May 11, 2011 @ 11:50 AM

Hello,

 

Unfortunately this defect #D6789 is still under process.

 

I'm sorry I couldn't be the bearer of better news.

 

Thank you for your co-operation and patience in this regard.

 

Harish Malhotra

Page 1 of 1 (13 items)