Hiding Elements when on particular Tab

2 posts, 0 answers
  1. willk
    willk avatar
    17 posts
    Member since:
    May 2007

    Posted 21 Dec 2011 Link to this post

    Hi,

    I'm struggling to set the visible property on elements located on the page where the radtabstrip/radmultipage are located through server side code.

    In my example I have a page 'PreApp.aspx' which has the tabs/multipage on it as well as a button which enables you to move to the next tab. When you click on the tabs or the button the RadMultiPage_Load sub is executed correctly and btnNext.visible property is set, however it has no effect and the button state never changes.

    Can I do it this way, or do I have to use javascript on each page rather than server-side programming?

    Cheers,
    - Will

    PreApp.aspx.vb
    Imports Telerik.Web.UI
    Imports System.Data
     
    Partial Class _Default
        Inherits System.Web.UI.Page
     
    Protected Sub btnNext_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnNext.Click               
            If RadTabStrip1.SelectedIndex = 4 Then
                'MsgBox("Do you wish to apply for your selected loan using these details?")
            Else
                RadTabStrip1.SelectedIndex = RadTabStrip1.SelectedIndex + 1
                RadMultiPage1.SelectedIndex = RadTabStrip1.SelectedIndex
            End If
        End Sub
     
        Private Sub RadMultiPage1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadMultiPage1.Load
            If RadTabStrip1.SelectedTab.PageViewID = "Results" Or RadTabStrip1.SelectedTab.PageViewID = "Wizard" Then
                btnNext.Visible = False
            Else
                btnNext.Visible = True
            End If
        End Sub
     
    End Class


    PreApp.aspx
    <%@ Page Language="VB" AutoEventWireup="false" CodeBehind="PreApp.aspx.vb" Inherits="RadControlsWebApp1._Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
            <link rel="stylesheet" type="text/css" href="Styles.css" />
    </head>
    <body style="width: 950px">
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>                       
            </AjaxSettings>
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>                       
            </AjaxSettings>
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="btnNext">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>                       
            </AjaxSettings>
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="btnNext">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>                       
            </AjaxSettings>
        </telerik:RadAjaxManager>
         
            <telerik:RadTabStrip SelectedIndex="1" ID="RadTabStrip1" runat="server"
                    MultiPageID="RadMultiPage1" Skin="Black" CssClass="RadTabStrip"
            ScrollButtonsPosition="Left" AutoPostBack="True">
                <Tabs>
                    <telerik:RadTab runat="server" Text="Wizard" PageViewID="Wizard" Selected="True">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Basic Details" PageViewID="Basic">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Income" PageViewID="Income">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Assets/Liabilities" PageViewID="Assets">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Credit" PageViewID="Credit">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Results" PageViewID="Results">
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
             
            <telerik:RadMultiPage ID="RadMultiPage1" Runat="server" SelectedIndex="0" ScrollBars="Hidden">
                <telerik:RadPageView ID="Wizard" runat="server" ContentUrl="Wizard.aspx"  Height="550" Width="950" Selected="True">
                    Wizard
                </telerik:RadPageView>
                <telerik:RadPageView ID="Basic" runat="server" ContentUrl="Basic.aspx"  Height="550" Width="950">
                    BasicDetails
                </telerik:RadPageView>
                <telerik:RadPageView ID="Income" runat="server" ContentUrl="Income.aspx" Height="550" Width="950">
                    Income
                </telerik:RadPageView>
                <telerik:RadPageView ID="Assets" runat="server" ContentUrl="Assets.aspx" Height="550" Width="950">
                    Assets
                </telerik:RadPageView>
                <telerik:RadPageView ID="Credit" runat="server" ContentUrl="Credit.aspx" Height="550" Width="950">
                    Credit
                </telerik:RadPageView>
                <telerik:RadPageView ID="Results" runat="server" ContentUrl="Results.aspx" Height="550" Width="950">
                    Results<br />
                </telerik:RadPageView>
            </telerik:RadMultiPage>  
              
            <telerik:RadButton ID="btnNext" runat="server" Skin="Black"
            style="left: 820px; position: fixed; top: 520px;" Text="Save/Next">
            </telerik:RadButton>
     
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">       
        </telerik:RadAjaxLoadingPanel>
        </form>
    </body>
    </html>
  2. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 22 Dec 2011 Link to this post

    Hello Willk,

    The reason it doesn't have any effect on the btnNext button is because you didn't add it to the UpdatedControls collection in your AjaxSettings. You RadAjaxManager should look like this:

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
            <AjaxSettings
                 <telerik:AjaxSetting AjaxControlID="btnNext"
                    <UpdatedControls
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" /> 
                        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" /> 
                        <telerik:AjaxUpdatedControl ControlID="btnNext" />
                    </UpdatedControls
                </telerik:AjaxSetting>   
                <telerik:AjaxSetting AjaxControlID="RadTabStrip1"
                    <UpdatedControls
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" /> 
                        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" /> 
                        <telerik:AjaxUpdatedControl ControlID="btnNext" />
                    </UpdatedControls
                </telerik:AjaxSetting>                          
            </AjaxSettings
        </telerik:RadAjaxManager>

    It needs to be include on both AjaxSettings, even if the button is the ajax initiator because the RadAjaxManager needs to know which controls will be updated during the ajax request. Also, I removed the duplicate entries you made for btnNext and RadTabStrip1, as it was unneccessary.

    I hope that helps.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top