multipage not loading properly in radtabstrips

[Ekjot]

Hello!

First time poster here. Very interested in this product but am trying the trial version until I am satisfied. I am following the tutorial and putting multipage inside the radtabstrips to display pages properly. The issue I am having is that when I align the the tabstrips differently it doesn't display properly, if I add a border it only includes the tabs and not the individual page views.. its like they aren't even attached even the tabs properly display the right page views... heres my code:

asp.net:

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Align="Justify" Orientation="VerticalLeft" MultiPageID="RadMultiPagePatRecords">
        <Tabs>
            <telerik:RadTab runat="server" Text="Patient Search">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Delinquent Accounts">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Invoices">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="RadMultiPagePatRecords" runat="server">
        <telerik:RadPageView ID="RadPatientSearch" runat="server">
            <table>
                <tr>
                    <td class="labels" align="center">
                        <asp:Label ID="Label1" runat="server" Text="First Name: "></asp:Label>
                    </td>
                    <td class="textboxes">
                        <telerik:RadTextBox ID="txtFirstName" runat="server" EmptyMessage="Type Here" Width="100%">
                        </telerik:RadTextBox>
                    </td>
                    <td class="labels" align="center">
                        <asp:Label ID="Label2" runat="server" Text="Last Name:"></asp:Label>
                    </td>
                    <td class="textboxes">
                        <telerik:RadTextBox ID="txtLastName" runat="server" EmptyMessage="Type Here" Width="100%">
                        </telerik:RadTextBox>
                    </td>
                    <td class="labels" align="center">
                        <asp:Label ID="Label3" runat="server" Text="DOB:"></asp:Label>
                    </td>
                    <td class="textboxsmall">
                        <telerik:RadDateInput ID="RadDateInput1" runat="server" DateFormat="MM/dd/yyyy"
                            EmptyMessage="(MM/dd/yyyy)" Width="100%">
                            <EmptyMessageStyle Font-Size="Smaller" />
                        </telerik:RadDateInput>
                    </td>
                </tr>
            </table>
        </telerik:RadPageView>
    </telerik:RadMultiPage>

this is how its displaying: http://screencast.com/t/EFY9EVoD

what am i doing wrong? thanks for the help! really loving the tools so far! :)

[Richard]

    <telerik:RadTabStrip Align="Justify" Orientation="VerticalLeft" runat="server" Skin="Black" MultiPageID="RadMultiPage1">
        <Tabs>
            <telerik:RadTab runat="server" Text="Colors">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Calendar">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Quotes">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
</div>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server">
    <telerik:RadPageView ID="RadPageView1" runat="server">
        Rad<telerik:RadColorPicker ID="RadColorPicker1" Runat="server" Skin="Black">
        </telerik:RadColorPicker>
        PageView</telerik:RadPageView>
    <telerik:RadPageView ID="RadPageView2" runat="server">
        <telerik:RadCalendar ID="RadCalendar1" Runat="server" Skin="Black">
            <WeekendDayStyle CssClass="rcWeekend" />
            <CalendarTableStyle CssClass="rcMainTable" />
            <OtherMonthDayStyle CssClass="rcOtherMonth" />
            <OutOfRangeDayStyle CssClass="rcOutOfRange" />
            <DisabledDayStyle CssClass="rcDisabled" />
            <SelectedDayStyle CssClass="rcSelected" />
            <DayOverStyle CssClass="rcHover" />
            <FastNavigationStyle CssClass="RadCalendarMonthView RadCalendarMonthView_Black" />
            <ViewSelectorStyle CssClass="rcViewSel" />
        </telerik:RadCalendar>
    </telerik:RadPageView>
    <telerik:RadPageView ID="RadPageView3" runat="server">
        "You can observe a lot by watching - Yogi Berra"
    </telerik:RadPageView>
</telerik:RadMultiPage>

Ekjot:

I set up and ran your code locally and the display is the same as in your attached image. But, I do not see what is wrong here. It displays as expected. I also modified and ran the RadTabStrip/Multipage demo taken from Telerik's RadControls for ASP.NET AJAX course ware. The display is similar to yours when setting Align="Justify" Orientation="VerticalLeft". See the attached screenshots.

Please let me know what you're hoping to achieve and what is missing here. I'll try to assist.

Cheers!

[Ekjot]

Thanks for the reply: 

I am expecting it to show up like this:

http://www.screencast.com/t/mcbCrsoTa

When I followed the tutorial at: 

http://www.telerik.com/help/aspnet-ajax/tabstrip-multipage-integrate-with-tabstrip.html

It is implying that the multipages should be ENCLOSED inside the tab with a border if I so choose. Instead the page is not aligned and shows up underneath from the tab. It looks bad that way. If I change it to the other form where the tabs are verticaltop then also the multipage does not show up properly. If I add a border it will only put it around the tabs themselves and not the content underneath in the pageview. Is this normal or am I doing something wrong? I want it like the example shown in the tutorial but just aligned differently. Thanks :)

[Richard]

Ekjot:

I have investigated your request to align the page view to the right of the vertical tab strip. It turns out that this can be accomplished by the use of CSS applied to your Multipage Views. Also, the border can be accomplished in the same manner.

Take a close look at the "TabStrip/Orientation" demo located at http://demos.telerik.com/aspnet-ajax/tabstrip/examples/functionality/orientation/defaultcs.aspx. If you select the "VerticalLeft" radio button in the "Orientation" panel, you will get the effect that you seek.

Then, take a look at the "styles.css" tab of the code. You will find that the styling and positioning of the page views are controlled here.

I installed the demo locally and confirmed that when you comment out the reference to the "styles.css" in the head section of the "DefaultCS.aspx", the display of the page view reverts to the bottom of the page.

<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

 
Then, I added some CSS styling to the "Corporate Page" display to set a border around it.

.corporatePageView
{
    background: transparent url(images/corporate.jpg) no-repeat top left;
    height:218px;
    border-style: solid;
    border-color: Black;
    border-width: thin;
}

See the results in the attached image ("TabStripOrientation.jpg").

Let me know if this helps!

[Ekjot]

WOW! That is EXACTLY what I was looking for! THANK YOU! I really appreciate all the help and you have done a great job explaining it. My output is coming to the way I want it now, I didn't know that I would have to style that myself and thought it was something telerik will handle for me but this is great. Thanks again, you've been very helpful.