Tabstrip example not working for me

[Steve]

I am trying to use the logic from the demo project listed here (http://demos.telerik.com/aspnet-ajax/tabstrip/examples/multipage/dynamic-pageview-creation/defaultvb.aspx), but It's not working as expected.

First, the onTabSelecting javascript is not finding previous pageViewId's and it keeps posting back.
Second, the code "e.Tab.PageView.Selected = True" in the TabClick event in the codebehind is throwing an error, "Object reference not set to an instance of an object." Upon inspection, e.Tab is showing it is a valid RadTab, but the PageView is Nothing.

I looked at everything, and it all looks correct. I have some logic to dynamically create the tabs and load the ascx into pageviews based upon a saved path in the database. The default.aspx uses a nested master, with the AjaxManager in the child master. It's setup like this:

Site.Master ---> Child.Master ---> Default.aspx

Here is the Default.aspx page.

<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Child.Master" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="MainApp._Default" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<asp:Content runat="server" ID="LeftNav" ContentPlaceHolderID="ChildContentLeftPanel">
        <telerik:RadCalendar ID="RadCalendar1" runat="server" Skin="Forest" >
            <WeekendDayStyle CssClass="rcWeekend" />
            <CalendarTableStyle CssClass="rcMainTable"/>
            <OtherMonthDayStyle CssClass="rcOtherMonth"/>
            <OutOfRangeDayStyle CssClass="rcOutOfRange"/>
            <DisabledDayStyle CssClass="rcDisabled"/>
            <SelectedDayStyle CssClass="rcSelected"/>
            <DayOverStyle CssClass="rcHover"/>
            <FastNavigationStyle CssClass="RadCalendarMonthView RadCalendarMonthView_Forest"/>
            <ViewSelectorStyle CssClass="rcViewSel"/>
        </telerik:RadCalendar>
</asp:Content>

<asp:Content runat="server" ID="NavigationContent" ContentPlaceHolderID="ChildContent1">
    <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1" Skin="Forest"/>

    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server" >
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="NavTabStrip">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="NavTabStrip"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1"></telerik:AjaxUpdatedControl>
                </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>

    <div class="exampleWrapper">
        <telerik:RadTabStrip ID="NavTabStrip" runat="server" SelectedIndex="0" MultiPageID="RadMultipPage1" Skin="Forest" Align="Justify"
            OnTabClick="NavTabStrip_TabClick" OnClientTabSelecting="onTabSelecting" />
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage1_PageViewCreated" />

    </div>


</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="ChildContent2">

</asp:Content>

Here is the VB code.

Imports System
Imports Telerik.Web.UI

Partial Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            SetStoreID(Page.Master)
            Dim dal As Navigation = New Navigation

            Dim ds As DataSet = dal.NavigationSelect(0)
            Dim bAddPageView As Boolean = True
            Dim sObjectPath As String = String.Empty

            For Each row As DataRow In ds.Tables(0).Rows
                If IsDBNull(row.Item("ObjectPath")) Then
                    sObjectPath = String.Empty
                Else
                    sObjectPath = row.Item("ObjectPath")
                End If
                AddTab(row.Item("NavName"), sObjectPath, bAddPageView)
                bAddPageView = False
            Next
        End If

    End Sub
    Private Sub SetStoreID(ByVal sender As Object)
        Dim sStoreID As String

        Dim DAL As Store = New Store
        sStoreID = DAL.StoreCurrentStoreIDSelect

        Dim StoreID As HiddenField = FindControlRecursive(sender, "StoreID")

        StoreID.Value = sStoreID

    End Sub

    Private Sub AddTab(ByVal tabName As String, ByVal ObjectPath As String, ByVal bAddPageView As Boolean)
        Dim tab As RadTab = New RadTab

        tab.Text = tabName
        tab.Attributes.Add("ObjectPath", ObjectPath)

        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) Handles RadMultiPage1.PageViewCreated
        Dim tab As RadTab = NavTabStrip.SelectedTab

        Dim userControlName As String = tab.Attributes("ObjectPath")

        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
        RadMultiPage1.PageViews.Add(pageView)
        tab.PageViewID = pageView.ID
        pageView.Selected = True
    End Sub
    Protected Sub NavTabStrip_TabClick(ByVal sender As Object, ByVal e As RadTabStripEventArgs) Handles NavTabStrip.TabClick
        '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

[Steve]

I tried the following code change, but to no avail. I don't get the error message "Object reference not set to an instance of an object." anymore, but the pageview still doesn't switch. There are two tabs being created and two pageviews. I set a breakpoint at the RadMultipPage1.PageViews line and interrogate the values. There are indeed two pagesviews available. And the NavTabStrip.SelectedIndex shows the correct index of the tab selected. Yet, I am not navigating off the first pageview.

Protected Sub NavTabStrip_TabClick(ByVal sender As Object, ByVal e As RadTabStripEventArgs) Handles NavTabStrip.TabClick

              If e.Tab.PageViewID Is Nothing Or e.Tab.PageViewID.Equals("") Then

                    AddPageView(e.Tab)
              End If

              RadMultiPage1.PageViews(NavTabStrip.SelectedIndex).Selected = True

    End Sub

[Nencho]

Hello Steve,

After a thoroughly investigation of your code, I was able to locate 2 problems. The first one is related with the issue you had described. The PageViewCreated event is fired for each of the RadPageViews in the PageViews collection. As I can see in the event handler, you are attempting to get the current selected tab and access its attribute's value, in order to load the corresponding UserControl. This is actually a great approach, in such scenario like yours. However there is a slight change that needs to be implemented. When the PageLoad event has passed and you attempt to click on the second RadTab, the PageViewCreated event will be fired twice - once for the first PageView and once more for the currently added PageView. When the event is reached for the first time, and you are accessing the attribute for the currently selected tab, you are actually associating the first RadTab with the usercontrol, which is meant to be associated with the second one.  I have created a sample project for you, implementing a custom workaround in the RadMultiPage1_PageViewCreated.

In the demo, which you had followed as an example, there is a custom javascript code implemented, in order to prevent a postback, when a RadTab with an already associated PageView is selected. This is achieved in the OnClientTabSelecting in the following manner :

<script type="text/javascript">
        function onTabSelecting(sender, args) {
            if (args.get_tab().get_pageViewID()) {
                args.get_tab().set_postBack(false);
            }
        }
    </script>

In your particular scenario, I noticed that the pageViewID is always null ( which actually is overcome by the workaround you had implemented demonstrated in your last response ). This issue occurs because you had mistyped the MultiPageID in the RadTabStrip declaration. The MultiPageID is RadMultiPage1 and the referenced one is RadMultipPage1.

I am sending you the modified sample project, which I had prepared for you, base on the provided code snippets.

Note : dll files are removed, due to a security reasons.

Regards,
Nencho
Telerik

[Steve]

Thank you Nencho! You have a keen eye. Thanks again!