RadTabStrip + RadMultiPage + RadAjaxManager Problem

[Katie]

I have a scenario where I have a RadTabStrip with 2 tabs and a RadMultiPage with 2 pages.  In the first page I have a RadGrid and the second page is a form. I am using RadAjaxManager to ajaxify the page. I want to be able to click an edit link from the RadGrid and have the multipage and tabstrip change to the form page.

The problem I am having is when I click on edit, the RadMultipage changes, but the RadTabStrip does not. If I take the RadAjaxManager out then it works correctly.

I have replicated the problem using a simple setup with just buttons in each page. Clicking the button should change both the RadTabStrip and RadMultipage.

Here is my aspx code

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server"
        MultiPageID="RadMultiPage1">
        <Tabs>
            <telerik:RadTab runat="server" Text="List">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Form">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server">
        <telerik:RadPageView ID="RadPageView1" runat="server">
            List View<br /><br />
            <asp:Button ID="Button1" runat="server" Text="Go to Form View" />
         </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView2" runat="server" Width="100%">
            Form View<br /><br />
            <asp:Button ID="Button2" runat="server" Text="Go to List View" />
         </telerik:RadPageView>
    </telerik:RadMultiPage>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"
        Skin="Default" Transparency="1">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
        DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <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="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

Here is the code behind

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        If Not Page.IsPostBack Then
            RadTabStrip1.SelectedIndex = 0
            RadMultiPage1.SelectedIndex = 0
        End If
    End Sub

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        RadTabStrip1.SelectedIndex = 1
        RadMultiPage1.SelectedIndex = 1
    End Sub


    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
        RadTabStrip1.SelectedIndex = 0
        RadMultiPage1.SelectedIndex = 0
    End Sub

If I take out the RadAjaxManager it works correctly.
Using the RadAjaxManager the RadTabStrip does not update.  Any ideas?

p.s. I have tried this with version 2009.2.701.20,  2009.2.826.20, 2009.3.1103.20 of  Telerik.Web.UI

[Paul]

Hi Jeff,

Please find below your modified code snippet that works as expected.

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="radAjaxScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1">
        <Tabs>
            <telerik:RadTab runat="server" Text="List">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Form">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server">
        <telerik:RadPageView ID="RadPageView1" runat="server">
            List View<br />
            <br />
            <asp:Button ID="Button1" runat="server" Text="Go to Form View" />
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView2" runat="server" Width="100%">
            Form View<br />
            <br />
            <asp:Button ID="Button2" runat="server" Text="Go to List View" />
        </telerik:RadPageView>
    </telerik:RadMultiPage>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default"
        Transparency="1">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="Button1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="Button2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    </form>

Kind regards,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Chen]

Can you please explain what was the problem and what had to change?

Otherwise I have to reverse engineer and compare the two sets of code to analyze how it applies to my situation.

[Yana]

Hi Chen,

The change is in the ajax settings of RadAjaxManager -  the buttons should update the tabstrip:

<telerik:AjaxSetting AjaxControlID="Button1">
  <UpdatedControls>
     <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
     <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
  </UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="Button2">
  <UpdatedControls>
     <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
     <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
  </UpdatedControls>
</telerik:AjaxSetting>

Regards,
Yana
the Telerik team

[Santhi]

I have same issue.In first tab i have a radgrid and continue button.Whenever the user select a radgrid item and click the button,button OnClick event is not firing.
Button have both onclick and onclientclick events.In onclientclick event,if user selects an item then select another tab,pageview and return true,otherwise return false.In onclick event i am populating the selected item values.But its not firing.

[Kate]

Hello Santhi,

Can you please elaborate a bit on your scenario? For example if you could send us some code snippet or a simplified runnable page that we could test locally would be very useful to us. Can you also clarify the version of the controls that you are using? 

Greetings,
Kate
the Telerik team

[Dorababu]

Hi Paul,
               As per your code the radajax is getting displaying multiple radajax can you tell why.. check out my attachment

[Kate]

Hello Dorababu,

The issue that you get is due to the fact that when you press the button it updates both the RadTabStrip control and the RadMultiPage control. Hence, you get two loading panels. Please note also that the solution that Paul proposed is related to an old version of our controls. Therefore i would suggest that you use the code below instead:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="Button1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="Button2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1"  LoadingPanelID="RadAjaxLoadingPanel1"/>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

All the best,
Kate
the Telerik team

[prabha]

Hi,

I am also having the same issue. Rad Page View is updated, but the Tab selection is not highlighted - While clicking button which is inside rad page view. I am loading Rad Page view contents from usercontrol.

My code is,

<telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1">
                        <img src="../../../../../Images/loading.gif" alt="Loading..." />
                    </telerik:RadAjaxLoadingPanel>
                    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
                        <AjaxSettings>
                            <telerik:AjaxSetting AjaxControlID="rtsTab1">
                                <UpdatedControls>
                                    <telerik:AjaxUpdatedControl ControlID="rtsTab1" />
                                    <telerik:AjaxUpdatedControl ControlID="rmpPage1" LoadingPanelID="LoadingPanel1" />
                                </UpdatedControls>
                            </telerik:AjaxSetting>
                            <telerik:AjaxSetting AjaxControlID="rmpPage1">
                                <UpdatedControls>
                                    <telerik:AjaxUpdatedControl ControlID="rmpPage1" />
                                    <telerik:AjaxUpdatedControl ControlID="rtsTab1"/>
                                </UpdatedControls>
                            </telerik:AjaxSetting>
                        </AjaxSettings>
                    </telerik:RadAjaxManager>

''' <summary>
''' This method is used to trigger a tab and make it selected
''' </summary>
''' <param name="tabValue"></param>
''' <remarks></remarks>
Protected Sub TriggerTabClickEvent(ByVal tabValue As String)
    Dim tab As RadTab = rtsTab1.FindTabByValue(tabValue)
    tab.Selected = True
    rtsTab1_TabClick(Me, New RadTabStripEventArgs(tab))
    ' rtsTab1.SelectedIndex = rtsTab1.SelectedTab.Index - 1
    Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "alert", "TabIndex:'" + rtsTab1.SelectedTab.Index.ToString(), True)
End Sub

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[Ambarish]

excellent Job :) It saved my lot of Time