This is a migrated thread and some comments may be shown as answers.

Hiding Elements when on particular Tab

1 Answer 101 Views

TabStrip

This is a migrated thread and some comments may be shown as answers.

willk asked on 21 Dec 2011, 11:48 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

1 Answer, 1 is accepted

answered on 22 Dec 2011, 02:23 PM

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.