Tabstrip example not working for me

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

    Posted 13 Sep 2013 Link to this post

    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
  2. Steve
    Steve avatar
    84 posts
    Member since:
    Aug 2013

    Posted 14 Sep 2013 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 18 Sep 2013 Link to this post

    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.
  5. Steve
    Steve avatar
    84 posts
    Member since:
    Aug 2013

    Posted 18 Sep 2013 Link to this post

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