Selective Tab Postback

6 posts, 0 answers
  1. Albert Shenker
    Albert Shenker avatar
    550 posts
    Member since:
    Mar 2004

    Posted 03 Sep 2009 Link to this post

    I have a tabstrip/multipage which functions through client-side code. In other words, the pageviews are loaded up front and clicking on tabs switches the multipage instantaneously. However, I have one particular pageview that holds data which can take a while to load. I would like to have it so when  a user clicks on the associated tab, a loading panel appears and the tab click essentially does an ajax update. If I set Autopostback to true and "Aajxify" the entire tabstrip, then I lose the quick switching between the other tabs. I only want this one tab to perform a postback, while the others function normally. Is there a way to do this? I thought I could set autopostback to true, handle the tabselecting event and, if the tab is not the one in question, set_cancel(true). THis works to allow only one tab to postback, but then obviously the normal functioning of the other tabs doesn't work. All of the client-side functions for selecting a tab seem to raise the TabSelecting even, so I get an endless loop. Basically, if the clicked tab is not the special "postback" tab, I just want to select the right pageview and focus the tab. I can select the pageview client-side, but there doesn't seem to be a way of focusing the tab in this example. Tab.select, Tab.se_selected and Tabstrip.set_selectedindex all seem to raise the selecting event.
  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 07 Sep 2009 Link to this post

    Hi Albert,

    Please find below a sample code snippet that shows the needed approach.

    ASPX:
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head id="Head1" runat="server"
        <title></title
    </head> 
    <body> 
        <form id="form1" runat="server"
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
        </telerik:RadScriptManager> 
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" 
            OnTabClick="RadTabStrip1_TabClick"
            <Tabs> 
                <telerik:RadTab runat="server" Text="Root RadTab1"
                </telerik:RadTab> 
                <telerik:RadTab runat="server" Text="Root RadTab2"
                </telerik:RadTab> 
                <telerik:RadTab runat="server" Text="Root RadTab3"
                </telerik:RadTab> 
                <telerik:RadTab runat="server" Text="Get Time"
                </telerik:RadTab> 
            </Tabs> 
        </telerik:RadTabStrip> 
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server"
            <telerik:RadPageView ID="RadPageView1" runat="server"
                RadPageView1 
            </telerik:RadPageView> 
            <telerik:RadPageView ID="RadPageView2" runat="server"
                RadPageView2 
            </telerik:RadPageView> 
            <telerik:RadPageView ID="RadPageView3" runat="server"
                RadPageView3 
            </telerik:RadPageView> 
            <telerik:RadPageView ID="RadPageView4" runat="server"
                RadPageView4<br /> 
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> 
            </telerik:RadPageView> 
        </telerik:RadMultiPage> 
        </form> 
    </body> 
    </html> 

    Code-behind:
    using System; 
    using System.Collections.Generic; 
    using System.Linq; 
    using System.Web; 
    using System.Web.UI; 
    using System.Web.UI.WebControls; 
    using Telerik.Web.UI; 
     
    public partial class _Default : System.Web.UI.Page 
        protected void Page_Load(object sender, EventArgs e) 
        { 
            foreach (RadTab tab in RadTabStrip1.GetAllTabs()) 
            { 
                if (tab.Text != "Get Time"
                { 
                    tab.PostBack = false
                } 
            } 
        } 
        protected void RadTabStrip1_TabClick(object sender, Telerik.Web.UI.RadTabStripEventArgs e) 
        { 
            Label1.Text = DateTime.Now.ToString(); 
        } 
     


    Best wishes,
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Robert
    Robert avatar
    198 posts
    Member since:
    Aug 2009

    Posted 08 Sep 2011 Link to this post

    I have implemented this into my project and it still causes a postback on a tab that is set to PostBack=False in Page_Load.

    <telerik:RadTabStrip ID="tsReport" runat="server" MultiPageID="mpWrapper" 
            SelectedIndex="0" Skin="WebBlue">
           
            <Tabs>
              <telerik:RadTab runat="server" Selected="True" Text="Report Input">
              </telerik:RadTab>
              <telerik:RadTab runat="server" Text="Report Display">
              </telerik:RadTab>
              <telerik:RadTab runat="server" Text="Scheduling">
              </telerik:RadTab>
            </Tabs>
          </telerik:RadTabStrip>
          <telerik:RadMultiPage ID="mpWrapper" Runat="server" SelectedIndex="0" 
            Width="100%">
            <telerik:RadPageView ID="pvReportInput" runat="server" 
              ContentUrl="rptReportInput.aspx?reportID=229" Width="100%" Height="100%">
            </telerik:RadPageView>
            <telerik:RadPageView ID="pvReportDisplay" runat="server" 
              Width="100%" Height="100%">
            </telerik:RadPageView>
            <telerik:RadPageView ID="pvReportSchedule" runat="server" 
              ContentUrl="rptScheduleInput.aspx" Width="100%" Height="100%">
            </telerik:RadPageView>
          </telerik:RadMultiPage>

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
      For Each tab As RadTab In tsReport.GetAllTabs()
        If tab.Text <> "Report Display" Then
          tab.PostBack = False
        End If
      Next
    End Sub

    Protected Sub tsReport_TabClick(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadTabStripEventArgs) Handles tsReport.TabClick
    End Sub

    Any idea of what can be causing this to still postback?
  5. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 13 Sep 2011 Link to this post

    Hi Robert,

    When you have provided an event handler for the TabClick event a post-back occurs disregarding the PostBack property of the tab.

    In order to achieve the desired functionality you should subscribe on the client-side OnClientTabSelecting event and use the following implementation of the event handler function:
    function onTabSelecting(sender, args) {
                    if (args.get_tab().get_text() == "Report Display") {
                        args.get_tab().set_postBack(false);
                    }
                }


    Greetings,
    Dimitar Terziev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Ashish
    Ashish avatar
    3 posts
    Member since:
    Oct 2010

    Posted 08 Dec 2011 Link to this post

    Hi Dimitar,

    regarding the tab.set_postBack(true) its works fine for me, but problem is i want to set postback true for "2 tabs", in my case only 1 tab causes post back, the postback ability of second one is lost after the postback of first one, i also tried with track and commit changes thing....but no success please help.
  7. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 12 Dec 2011 Link to this post

    Hello Ashish,

    Please open a support ticket and provide a runnable sample page with your current implementation and describe the exact problems that you experience.

    Best wishes,
    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017