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

How do I select a tab with dynamic pageviews?

1 Answer 93 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
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>
 
<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

Sort by
0
Nencho
Telerik team
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.
Tags
TabStrip
Asked by
Steve
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Share this question
or