Need more specifics about how to cancel a tab switch

1 Answer 13 Views
TabStrip
Gregory
Top achievements
Rank 1
Gregory asked on 29 Jan 2022, 02:19 PM

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!

 

 

1 Answer, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 02 Feb 2022, 01:03 PM

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:

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TabStrip
Asked by
Gregory
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Share this question
or