Need more specifics about how to cancel a tab switch

[Gregory]

I need more specifics about how to cancel a tab switch when using the RadTabStrip. The information I have found on the Telerik help forums makes a lot of assumptions about knowledge of the programmer, and (although I have lots of programming experience) I'm fairly new at Telerik and asp programming in general. 

I'm using the Telerik RadTabStrip and I need to cancel on the client side the switching from one tab to another. The RadTabStrip is on a general management page that references the other tabs (asp pages), one for each tab.

In the first tab asp page, I have a hidden control that contains an indicator if the page is dirty. 

In the management page, containing the RadTabStip, I have a java script function for the OnClientTabSelecting. From the management page java script function for OnClientTabSelecting I need to A) check if I'm leaving the page which may be dirty and B) if that is the page i'm leaving then I need to check the dirty flag. If both A and B are true, then C) I need to prompt the user, warning them that the page is dirty and confirming that they do want to leave. If they do not, then I want to cancel the tab switch. 

I understand how to to C) above, but could you please provide some example code of both A) and B) above? If the examples exist elsewhere, then a link to those examples would be very helpful.

Thank you!

 

 

[Peter Milchev]

Hello Gregory,

Assuming you use ContentUrl for the tabs, you can access the contentWindow of the iframe created for it and access if the page is dirty. To facilitate this, you can create a function that would return true or false. Then, based on the result, you can cancel the OnClientTabSelecting event:

• https://docs.telerik.com/devtools/aspnet-ajax/getting-started/customize-control-behavior 
• https://docs.telerik.com/devtools/aspnet-ajax/controls/tabstrip/client-side-programming/overview#cancelling-an-action 
• https://docs.telerik.com/devtools/aspnet-ajax/controls/tabstrip/client-side-programming/events/onclienttabselecting 
• A similar scenario as with RadWindow objects - https://docs.telerik.com/devtools/aspnet-ajax/controls/window/how-to/calling-functions-in-windows 

Here is a simple example demonstrating the suggested approach:

Main page: 

<script>
    function OnClientTabSelecting(sender, args) {
        var selectedTab = sender.get_selectedTab();
        if (selectedTab) {
            var frame = $telerik.$(selectedTab.get_pageView().get_element()).find("iframe")[0]
            var isDirty = frame.contentWindow.isPageDirty();
            alert(isDirty)
            // cancel tab change if current page is dirty
            args.set_cancel(isDirty);
        }
    }
</script>
<telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1" OnClientTabSelecting="OnClientTabSelecting">
    <Tabs>
        <telerik:RadTab Text="Tab 1" Selected="true"></telerik:RadTab>
        <telerik:RadTab Text="Tab 2"></telerik:RadTab>
        <telerik:RadTab Text="Tab 3"></telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0">
    <telerik:RadPageView ID="RadPageView1" runat="server" ContentUrl="ChildPage1.aspx">
    </telerik:RadPageView>
    <telerik:RadPageView ID="RadPageView2" runat="server" ContentUrl="ChildPage2.aspx">
    </telerik:RadPageView>
    <telerik:RadPageView ID="RadPageView3" runat="server" ContentUrl="ChildPage3.aspx">
    </telerik:RadPageView>
</telerik:RadMultiPage>

 

Child Pages:

<h1>Page 1</h1>
<telerik:RadCheckBox runat="server" ID="IsDirty"></telerik:RadCheckBox>
<script>  
    function isPageDirty() {
        return $find("<%= IsDirty.ClientID %>").get_checked();
    }
</script>

Regards,
Peter Milchev
Progress Telerik