TabStrip Pageview Problem

[Ash]

I have a tabstrip on my web page with 2 tabs. they point to 2 different pageviews. I have first one selected= true (it should show me the pageview of this tab). but when my page loads the very first time,  I see the pageview of my 2nd tab, although first one is selected. when I click on my first tab then it shows the pageview of that tab.

my code is:

<

telerik:RadMultiPage ID="rmMain" runat="server" Width="656px" SelectedIndex="1">

<telerik:RadPageView ID="pvSum" runat="server">

<table>

<tr>

<td style="width: 104px; height: 21px;">

<asp:Label ID="Label1" runat="server" CssClass="LabelSubHeadingTable2" Text="Consignee:" Width="100px"></asp:Label></td>

<td style="height: 21px">

<asp:Label ID="lblConsignee" runat="server" CssClass="LabelSubHeadingTable" Width="249px"></asp:Label></td>

<td style="height: 21px;" width="40">

<asp:Label ID="Label2" runat="server" CssClass="LabelSubHeadingTable2" Text="PO#:" Width="80px"></asp:Label></td>

<td style="height: 21px">

<asp:Label ID="lblPo" runat="server" CssClass="LabelSubHeadingTable" Width="249px"></asp:Label></td>

<td style="height: 21px">

</td>

</tr>

</table>

</telerik:RadPageView>

<

telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="rmMain"

SelectedIndex="1" Skin="Hay">

<Tabs>

<telerik:RadTab runat="server" PageViewID="pvSum" Text="Summary" Selected="True">

</telerik:RadTab>

<telerik:RadTab runat="server" PageViewID="pvProd" Text="Order Details">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

and code for pageviews are:

<telerik:RadPageView ID="pvProd" runat="server">

<telerik:RadGrid ID="RadGrid1" AllowSorting="True" runat="server" style="text-align: left" AutoGenerateColumns="False" GridLines="None">

<MasterTableView>

<RowIndicatorColumn Visible="False">

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<ExpandCollapseColumn Resizable="False" Visible="False">

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<EditFormSettings>

<PopUpSettings ScrollBars="None" />

</EditFormSettings>

<Columns>

<telerik:GridBoundColumn DataField="Order" HeaderText="Order #"

UniqueName="gcolumn1" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn AllowSorting="False" DataField="ProdNum" HeaderText="Pro #"

UniqueName="gcolumn2" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn AllowSorting="False" DataField="ShipName" HeaderText="Ship Name"

UniqueName="gcolumn3" >

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True">

</ClientSettings>

</telerik:RadGrid></telerik:RadPageView>

</telerik:RadMultiPage><telerik:RadAjaxManager

ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

[Paul]

Hello Ash,

You will have to either set the Selected property of the corresponding pageview to true, i.e.

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="rmMain" Skin="Hay">
        <Tabs>
            <telerik:RadTab runat="server" PageViewID="pvSum" Text="Summary" Selected="True">
            </telerik:RadTab>
            <telerik:RadTab runat="server" PageViewID="pvProd" Text="Order Details">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="rmMain" runat="server" Width="656px">
        <telerik:RadPageView ID="pvSum" runat="server" Selected="true">
            <table>
                <tr>
                    <td style="width: 104px; height: 21px;">
                        <asp:Label ID="Label1" runat="server" CssClass="LabelSubHeadingTable2" Text="Consignee:" Width="100px"></asp:Label></td>
                    <td style="height: 21px">
                        <asp:Label ID="lblConsignee" runat="server" CssClass="LabelSubHeadingTable" Width="249px"></asp:Label></td>
                    <td style="height: 21px;" width="40">
                        <asp:Label ID="Label2" runat="server" CssClass="LabelSubHeadingTable2" Text="PO#:" Width="80px"></asp:Label></td>
                    <td style="height: 21px">
                        <asp:Label ID="lblPo" runat="server" CssClass="LabelSubHeadingTable" Width="249px"></asp:Label></td>
                    <td style="height: 21px">
                    </td>
                </tr>
            </table>
        </telerik:RadPageView>
        <telerik:RadPageView ID="pvProd" runat="server">
            grid</telerik:RadPageView>
    </telerik:RadMultiPage>
</form>

or remove the Selected property from both the tab and the pageview and set the SelectedIndex property for both controls (tabstrip and multipage).

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" MultiPageID="rmMain" Skin="Hay">
        <Tabs>
            <telerik:RadTab runat="server" PageViewID="pvSum" Text="Summary">
            </telerik:RadTab>
            <telerik:RadTab runat="server" PageViewID="pvProd" Text="Order Details">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="rmMain" runat="server" Width="656px" SelectedIndex="0">
        <telerik:RadPageView ID="pvSum" runat="server">
            <table>
                <tr>
                    <td style="width: 104px; height: 21px;">
                        <asp:Label ID="Label1" runat="server" CssClass="LabelSubHeadingTable2" Text="Consignee:" Width="100px"></asp:Label></td>
                    <td style="height: 21px">
                        <asp:Label ID="lblConsignee" runat="server" CssClass="LabelSubHeadingTable" Width="249px"></asp:Label></td>
                    <td style="height: 21px;" width="40">
                        <asp:Label ID="Label2" runat="server" CssClass="LabelSubHeadingTable2" Text="PO#:" Width="80px"></asp:Label></td>
                    <td style="height: 21px">
                        <asp:Label ID="lblPo" runat="server" CssClass="LabelSubHeadingTable" Width="249px"></asp:Label></td>
                    <td style="height: 21px">
                    </td>
                </tr>
            </table>
        </telerik:RadPageView>
        <telerik:RadPageView ID="pvProd" runat="server">
            grid</telerik:RadPageView>
    </telerik:RadMultiPage>
</form>

Sincerely yours,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[rh]

I've set both the RadTab and RadPageView Selected="true" and yet it doesn't default the selected tab when the page loads. The correct tab shows as selected (although it is the first tab so it would probably show as selected anyways) but the content area is just blank until I select a different tab and then select back on the first tab.

[rh]

When I set it in code on page load (myPageView.Selected = true;) then it loads the tab view. I guess setting it declaritively doesn't work.

[Waleed Seada]

Hello rh,

It works as Paul said:
Again check this sample code.

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0" SkinID="TabStrip">
                <Tabs>
                    <telerik:RadTab TabIndex="1" runat="server" Text="Root Tab 1" PageViewID="PageView1">
                    </telerik:RadTab>
                    <telerik:RadTab TabIndex="2" runat="server" Text="Root Tab 2" PageViewID="PageView2">
                    </telerik:RadTab>
                    <telerik:RadTab TabIndex="3" runat="server" Text="Root Tab 3" PageViewID="PageView3">
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Width="700" Height="500">
                <telerik:RadPageView ID="PageView1" runat="server">

Just make sure you assign it for RadTabStrip and RadMultiPage

Regards,
Waleed