Using RadTabStrip to control panels / input fields

[Emanuele]

Hi, I would need to use a RadTabStrip as a selector, but not for a MultiPage with exclusive content.

When I select the TAB 0, I have to display n input controls.
When I select TAB 1, I have to display n + m input controls. i.e. add them or remove them using the 2 tabs.

Possibly? In the simplest way, server side is preferred.

This an extract. Ther's a parent MasterPage.

<asp:Content ID="Content2" ContentPlaceHolderID="cph1" runat="Server">

    <telerik:RadTabStrip RenderMode="Lightweight" runat="server" ID="rts1" Align="Justify" AutoPostBack="true" MultiPageID="rmp1" SelectedIndex="0">
            <Tabs>
                <telerik:RadTab Text="Primo anno"></telerik:RadTab>
                <telerik:RadTab Text="Anni successivi"></telerik:RadTab>
            </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage runat="server" ID="rmp1" SelectedIndex="0" RenderSelectedPageOnly="True">
        <telerik:RadPageView runat="server" Height="460px" ID="rpv1">
            <div class="contentWrapper">
                <telerik:RadAjaxPanel runat="server">
                    <span class="titIscritti">Calcolo per a.a. 2018-2019, studenti iscritti al 1° anno</span>
                    <br />
                    <asp:Label runat="server" AssociatedControlID="txtISEE">ISEE:</asp:Label>
                    <telerik:RadNumericTextBox runat="server" ID="txtISEE" EmptyMessage="valore ISEE" MaxLength="12" RenderMode="Lightweight" Type="Currency" CausesValidation="True"></telerik:RadNumericTextBox>
                    <asp:RequiredFieldValidator ID="rfv_isee" runat="server" ErrorMessage="*" ControlToValidate="txtISEE" Display="Dynamic" ValidationGroup="std"></asp:RequiredFieldValidator>
                    <br />
                    <asp:Label runat="server" AssociatedControlID="txtISPE" >ISPE:</asp:Label>
                    <telerik:RadNumericTextBox runat="server" ID="txtISPE" EmptyMessage="valore ISPE" MaxLength="12" RenderMode="Lightweight" Type="Currency" CausesValidation="True"></telerik:RadNumericTextBox>
                    <asp:RequiredFieldValidator ID="rfv_ispe" runat="server" ErrorMessage="*" ControlToValidate="txtISPE" Display="Dynamic" ValidationGroup="std"></asp:RequiredFieldValidator>
                    <br />
                    <asp:Label runat="server" AssociatedControlID="rddlDipartimento" >Dipartimento:</asp:Label>
                    <telerik:RadDropDownList RenderMode="Lightweight" ID="rddlDipartimento" runat="server" DataTextField="Struttura" DropDownHeight="200" DataValueField="ID">
                    </telerik:RadDropDownList>
                    <asp:RequiredFieldValidator ID="rfv_ddlDip" runat="server" ErrorMessage="*" ControlToValidate="rddlDipartimento" Display="Dynamic" InitialValue="seleziona" ValidationGroup="std"></asp:RequiredFieldValidator>
                    <br /><br />
                    <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Calcola" ID="btnCalcola" ToolTip="Effettua la simulazione"  OnClick="btnCalcola_Click" Primary="False" AutoPostBack="True" SingleClick="False" ButtonType="StandardButton" ValidationGroup="std" />
                    <br /><br />
                    <asp:Label ID="lblMsg" runat="server" Visible="False" ForeColor="Red"></asp:Label>
                </telerik:RadAjaxPanel>
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView runat="server" Height="460px" ID="rpv2">
            <div class="contentWrapper">
                Iscritti anni successivi
            </div>
        </telerik:RadPageView>
     </telerik:RadMultiPage>

</asp:Content>

[Vessy]

Hi Emanuele,

A possible way to achieve the described behavior without using RadMultiPage is to wrap the content related to each tab in a separate asp:Panel and manage its visibility on tab click. For example, you can have a similar configuration:

<telerik:RadTabStrip RenderMode="Lightweight" runat="server" ID="rts1" Align="Justify" AutoPostBack="true" SelectedIndex="0" OnTabClick="rts1_TabClick">
    <Tabs>
        <telerik:RadTab Value="tab0" Text="Primo anno"></telerik:RadTab>
        <telerik:RadTab Value="tab1" Text="Anni successivi"></telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>
<asp:Panel ID="ContentWrapper0" runat="server" Visible="true">
    The content related to <strong>Tab 0</strong>
</asp:Panel>
<asp:Panel ID="ContentWrapper1" runat="server" Visible="false">
    The content related to <strong>Tab 1</strong>
</asp:Panel>

protected void rts1_TabClick(object sender, RadTabStripEventArgs e)
{
    if (e.Tab.Value == "tab0")
    {
        ContentWrapper0.Visible = true;
        ContentWrapper1.Visible = false;
    }
    else
    {
        ContentWrapper0.Visible = false;
        ContentWrapper1.Visible = true;
    }
}

I hope this helps.

Regards,
Vessy
Progress Telerik

[Emanuele]

Thank you very much Vessy: simple and effective.

I would like to recommend the inclusion in the documentation.

Bye

[Vessy]

Hi,

Thank you for the feedback, Emanuele :) We will definitely consider your suggestion. I am glad the proposed solution is working for you.

Regards,
Vessy
Progress Telerik