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

Selective Tab Postback

5 Answers 357 Views

TabStrip

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

Albert Shenker asked on 04 Sep 2009, 02:43 AM

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.

5 Answers, 1 is accepted

answered on 07 Sep 2009, 01:51 PM

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.

answered on 08 Sep 2011, 05:45 PM

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?

answered on 13 Sep 2011, 03:09 PM

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Selective Tab Postback

5 Answers, 1 is accepted