RadTabStrip with RadMultiPage click events stop working

9 posts, 0 answers
  1. Lane Goolsby
    Lane Goolsby avatar
    2 posts
    Member since:
    Dec 2008

    Posted 14 Mar 2011 Link to this post

    I am working with the RadTabStrip and the RadMultiPage controls in a SharePoint web part and am running into a strange issue. The controls are loading properly and everything is working as expected, but after clicking a couple of tags the tab strip stops working. The click is being registered by the page because I can step into javascript debug statements, but none of the RAD code is executed. Below is my code but it pretty much matches the Load On Demand example.

    Web Form:

     

     

     

     

    <telerik:RadAjaxLoadingPanel runat="server" ID="radLoadingPanel" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="radTabStrip">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="radTabStrip" />
                    <telerik:AjaxUpdatedControl ControlID="radCenterFrame" LoadingPanelID="radLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="radCenterFrame">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="radCenterFrame" LoadingPanelID="radLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <script type="text/javascript">
      
        //function radTabStrip_OnClientSelecting(sender, args) {
        //    if (args.get_tab().get_pageViewID()) {
        //        alert(args.get_tab().get_test());
        //        args.get_tab().set_postBack(false);
        //    }
        //}
                  
    </script>
    <div>
        <telerik:RadTabStrip ID="radTabStrip" runat="server" 
            SelectedIndex="0" MultiPageID="radCenterFrame" OnTabClick="radTabStrip_TabClick"
            Orientation="HorizontalTop">
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="radCenterFrame" runat="server" SelectedIndex="0" OnPageViewCreated="radCenterFrame_PageViewCreated" />
    </div>

     

     

     

     

     



    Code Behind:

            protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    RadTab skillTab = new RadTab();
                    skillTab.Text = "Tab1";
                    radTabStrip.Tabs.Add(skillTab);

                    RadTab certTab = new RadTab();
                    certTab.Text = "Tab2";
                    radTabStrip.Tabs.Add(certTab);

                    RadTab aspTab = new RadTab();
                    aspTab.Text = "Tab3";
                    radTabStrip.Tabs.Add(aspTab);

                    RadTab tpTab = new RadTab();
                    tpTab.Text = "Tab4";
                    radTabStrip.Tabs.Add(tpTab);

                    RadPageView pageView = new RadPageView();
                    pageView.ID = skillTab.Text;
                    radCenterFrame.PageViews.Add(pageView);
                    skillTab.PageViewID = pageView.ID;
                }
            }

            protected void radCenterFrame_PageViewCreated(object sender, RadMultiPageEventArgs e)
            {
                string page = e.PageView.ID;

                switch (page)
                {
                    case "Tab1":
                        AddControl("~/_ControlTemplates/Proj/Tab1Control.ascx", e);
                        break;
                    case "Tab2":
                        AddControl("~/_ControlTemplates/Proj/Tab2Control.ascx", e);
                        break;
                    case "Tab3":
                        AddControl("~/_ControlTemplates/Proj/Tab3Control.ascx", e);
                        break;
                    case "Tab4":
                        AddControl("~/_ControlTemplates/Proj/Tab4Control.ascx", e);
                        break;
                }
            }

            protected void radTabStrip_TabClick(object sender, RadTabStripEventArgs e)
            {
                AddPageView(e.Tab);
                e.Tab.PageView.Selected = true;
            }
            private void AddPageView(RadTab tab)
            {
                RadPageView pageView = new RadPageView();
                pageView.ID = tab.Text;
                radCenterFrame.PageViews.Add(pageView);
                tab.PageViewID = pageView.ID;
            }
            private void AddControl(string Path, RadMultiPageEventArgs e)
            {
                Control userControl = Page.LoadControl(Path);
                userControl.ID = e.PageView.ID + "_usercontrol";
                e.PageView.Controls.Add(userControl);
            }

  2. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 16 Mar 2011 Link to this post

    Hello Lane,

    I noticed you don't have AutoPostback set to true on your RadTabStrip, thus the reason it doesn't raise the server-side events.

    I hope that helps.
  3. Lane Goolsby
    Lane Goolsby avatar
    2 posts
    Member since:
    Dec 2008

    Posted 16 Mar 2011 Link to this post

    The server post backs for OnTabClick are firing just fine for the first couple of clicks. After clicking on three tabs, no matter what order I click (e.g. 1-2-1, 1-2-3, 1-3-3, 3-2-1, etc.), the events stop firing. AutoPostBack did not affect it.
  4. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 21 Mar 2011 Link to this post

    Hi Lane Goolsby,

    SharePoint has some issues loading client scripts dynamically and I suppose that this causes the issue that you experience.
    Let me suggest you add the script references for RadTabStrip control manually through the ScriptManager  - as described in this help article.

    Regards,
    Kalina
    the Telerik team
  5. Patrik Johansson
    Patrik Johansson avatar
    274 posts
    Member since:
    May 2010

    Posted 29 Mar 2011 Link to this post

    Note sure if it is relevant but setting the NavigationURL for a Tab will prevent many events and override the AutoPostback setting, we had the same problem ourselves recently.
  6. Sebastian
    Sebastian avatar
    10 posts
    Member since:
    Sep 2011

    Posted 01 Dec 2011 Link to this post

    Was a solution found to this?

    I have similar problem where TabClick event does not get fired after few clicks.

  7. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 06 Dec 2011 Link to this post

    Hello Sebastian,

    Could you clarify whether you are using the RadTabStrip in SharePoint or not? In case it's used in SharePoint, have you tried to register the script manually as my colleague Kalina had suggested?

    All the best,
    Dimitar Terziev
    the Telerik team
    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 their blog feed now
  8. Jack
    Jack avatar
    6 posts
    Member since:
    May 2007

    Posted 29 Mar in reply to Patrik Johansson Link to this post

    I have experienced the same problem as Patrik when including NavigationURL values in RadTabStrip. The TabClick event just does not fire. My work around for this in vb.net is  

     

    Private Sub RadTabStrip1_TabClick(sender As Object, e As RadTabStripEventArgs) Handles RadTabStrip1.TabClick
            Dim TabClicked As Telerik.Web.UI.RadTab = e.Tab

            '---- Do some code here in response to the click. Possibly a post to the database

           '---- And then redirect to the appropriate page. This is the page name that would normally be in the NavigateUrl property
            If TabClicked.Text = "Incident Details" Then
                Response.Redirect("IncidentDetails.aspx")
            ElseIf TabClicked.Text = "Investigator Notes" Then
                Response.Redirect("InvestigatorNotes.aspx")
            End If

        End Sub

  9. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3864 posts

    Posted 03 Apr Link to this post

    Hello Jack,

    This behavior is expected, when the NavigateUrl is set for a tab, it should act as a hyperlink.

    Thus, if you need server code to run before the redirect, your approach is correct.

    Just make sure the redirect can occur, partial postbacks cannot redirect like that by default (see redirecting to another page with RadAjax).

    I can only suggest you consider using the Value of the tab as a flag instead of the Text. This would be useful if the app is localized.

    Regards,

    Marin Bratanov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top