How do I select a tab with dynamic pageviews?

2 posts, 0 answers
  1. Steve
    Steve avatar
    84 posts
    Member since:
    Aug 2013

    Posted 15 Nov 2013 Link to this post

    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
            End If
        End Sub
        Private Sub AddTab(ByVal tabName As String, ByVal bAddPageView As Boolean)
            Dim tab As RadTab = New RadTab
            tab.Text = tabName
            If bAddPageView Then
            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"
        End Sub
        Private Sub AddPageView(ByVal tab As RadTab)
            Dim pageView As RadPageView = New RadPageView
            pageView.ID = tab.Text.Replace(" ", "")
            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
            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
            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>
    <head id="Head1" runat="server">
        <link href="../Css/Clients.css" rel="stylesheet" type="text/css" />
        <form id="form1" runat="server">
            <div style="position: relative">
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                        <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" />
                <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
                        <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                                <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                                <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
                        <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                                <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
                <script type="text/javascript">
                    function onTabSelecting(sender, args) {
                        if (args.get_tab().get_pageViewID()) {
                <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" />

    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">
            <telerik:AjaxSetting AjaxControlID="ClientListing">
                    <telerik:AjaxUpdatedControl ControlID="ClientListing" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
    <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">
                  <telerik:RadButton ID="Edit" runat="server" Text="Edit" Skin="Forest" Width="105px" OnClick="Edit_Click">
                      <Icon PrimaryIconCssClass="rbEdit"

    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

  2. Nencho
    Nencho avatar
    1645 posts

    Posted 20 Nov 2013 Link to this post

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

    <script type="text/javascript">
        function OnClientClicked() {

    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.
Back to Top