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

How do I select a tab with dynamic pageviews?

1 Answer 227 Views

TabStrip

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

Steve asked on 15 Nov 2013, 08:59 PM

I have an aspx that loads a TabStrip control and MultiPage control. The TabStrip is populated in the code-behind. The MultiPage is created only for the first tab. When the user clicks on another tab, the MultiPage is created at that point.

Each MultipPage PageView loads a .ascx when the tab is selected by clicking on it.

On tab 1, I have an ascx that loads a RadGrid. The grid contains a button, that when clicked, I want to select tab 2. The MultiPage PageView for tab 2 has not been created yet. The .aspx page has logic to create the PageView, if not created yet, in the TabClick event.

In the codebehind for the click event for the button on Tab 2, I can locate the tab control on the parent page and issue a select on tab 2, but that does not trigger the click event on the tab.

How do I get the aspx to create the new PageView?

This is my .aspx page that creates the tabs dynamically and the pageviews, when needed:

Imports Telerik.Web.UI

Public Class Clients

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not Page.IsPostBack Then

Dim dal As New Navigation

Dim ds As DataSet = dal.NavigationSelect(1)

Dim bAddPageView As Boolean = True

For Each row As DataRow In ds.Tables(0).Rows

AddTab(row.Item("NavName"), bAddPageView)

bAddPageView = False

Next

End If

End Sub

Private Sub AddTab(ByVal tabName As String, ByVal bAddPageView As Boolean)

Dim tab As RadTab = New RadTab

tab.Text = tabName

NavTabStrip.Tabs.Add(tab)

If bAddPageView Then

AddPageView(tab)

End If

End Sub

Protected Sub RadMultiPage1_PageViewCreated(ByVal sender As Object, ByVal e As RadMultiPageEventArgs)

Dim userControlName As String = e.PageView.ID + ".ascx"

Dim userControl As Control = Page.LoadControl(userControlName)

userControl.ID = e.PageView.ID & "_userControl"

e.PageView.Controls.Add(userControl)

End Sub

Private Sub AddPageView(ByVal tab As RadTab)

Dim pageView As RadPageView = New RadPageView

pageView.ID = tab.Text.Replace(" ", "")

RadMultiPage1.PageViews.Add(pageView)

tab.PageViewID = pageView.ID

End Sub

Protected Sub NavTabStrip_TabClick(ByVal sender As Object, ByVal e As RadTabStripEventArgs)

Dim pageView As RadPageView = RadMultiPage1.FindControl(e.Tab.Text.Replace(" ", ""))

If IsNothing(pageView) Then

AddPageView(e.Tab)

End If

e.Tab.PageView.Selected = True

End Sub

Private Shared Function FindControlRecursive(Root As Control, Id As String) As Control

If Root.ID = Id Then

Return Root

End If

For Each Ctl As Control In Root.Controls

Dim FoundCtl As Control = FindControlRecursive(Ctl, Id)

If FoundCtl IsNot Nothing Then

Return FoundCtl

End If

Next

Return Nothing

End Function

End Class

This is the aspx page itself:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Clients.aspx.vb" Inherits="MainApp.Clients" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>

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

<head id="Head1" runat="server">

<title></title>

<link href="../Css/Clients.css" rel="stylesheet" type="text/css" />

</head>

<body>

<form id="form1" runat="server">

<div style="position: relative">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

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

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadTabStrip1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />

<telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadMultiPage1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<script type="text/javascript">

function onTabSelecting(sender, args) {

if (args.get_tab().get_pageViewID()) {

args.get_tab().set_postBack(false);

}

</script>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" HorizontalAlign="NotSet">

<telerik:RadTabStrip ID="NavTabStrip" runat="server" OnClientTabSelecting="onTabSelecting" SelectedIndex="0" Width="1000px" MultiPageID="RadMultiPage1" Skin="Forest" Align="Justify" OnTabClick="NavTabStrip_TabClick" />

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage1_PageViewCreated" />

</telerik:RadAjaxPanel>

</div>

</form>

</body>

</html>

This is the ascx page that is loaded in tab !. I have simplified it by just having the button in there.

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="ClientListing.ascx.vb" Inherits="MainApp.ClientListing" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy2" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="ClientListing">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="ClientListing" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

<telerik:RadGrid ID="ClientListing" ShowGroupPanel="false" PageSize="5" AllowPaging="True" runat="server" AllowSorting="True" AllowFilteringByColumn="true" ShowHeader="False"

OnNeedDataSource="ClientListing_NeedDataSource" CssClass="RadGrid">

<PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>

<MasterTableView TableLayout="Fixed">

<ItemTemplate>

<telerik:RadButton ID="Edit" runat="server" Text="Edit" Skin="Forest" Width="105px" OnClick="Edit_Click">

<Icon PrimaryIconCssClass="rbEdit"

</telerik:RadButton>

</ItemTemplate>

</MasterTableView>

</telerik:RadGrid>

This is the codebehind for the ascx page:

Imports Telerik.Web.UI

Public Class ClientListing

Inherits System.Web.UI.UserControl

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

End Sub

Protected Sub Edit_Click(sender As Object, e As EventArgs)

Dim rts As RadTabStrip = DirectCast(Me.Parent.FindControl("NavTabStrip"), RadTabStrip)

rts.Tabs(1).Selected = True

rts.Tabs(1).PageView.Selected = True 'This will throw an error because PageView has not been created yet

End Sub

End Class

1 Answer, 1 is accepted

answered on 20 Nov 2013, 01:41 PM

Hello Steve,

I would suggest you to use the Client-side event of the RadButton and call the click() method on the desired RadTab. This would replicate the entire flow, replicating a click on the RadTab and firing the subsequent events and logic. Please consider the following implementation:

<telerik:RadButton ID="Edit" runat="server" Text="Edit" Skin="Forest" Width="105px" AutoPostBack="false" OnClientClicked="OnClientClicked">

<Icon PrimaryIconCssClass="rbEdit" />

</telerik:RadButton>

<script type="text/javascript">

function OnClientClicked() {

$find("NavTabStrip").findTabByText("NavName2").click();

}

</script>

Regards,
Nencho
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.