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

Tabstrip example not working for me

3 Answers 60 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 14 Sep 2013, 03:40 AM
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

3 Answers, 1 is accepted

Sort by
0
Steve
Top achievements
Rank 1
answered on 14 Sep 2013, 02:59 PM
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
0
Accepted
Nencho
Telerik team
answered on 18 Sep 2013, 12:12 PM
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
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.
0
Steve
Top achievements
Rank 1
answered on 18 Sep 2013, 11:20 PM
Thank you Nencho! You have a keen eye. Thanks again!
Tags
TabStrip
Asked by
Steve
Top achievements
Rank 1
Answers by
Steve
Top achievements
Rank 1
Nencho
Telerik team
Share this question
or