Confirm tab change check with child tabs

[Scott]

I am using a RadTabScript in a .NET master page.  I have javascript functions defined that help track whether any changes have been made on pages inheriting the master page.  (i.e. a version of the "is dirty" algorithm)  It works save for 1 aspect; when I click on another child tab (when a tab has children), there is no change to that child tab.  The child tab's header is select, but I'm still looking at the original child tab.

Not all tabs have child tabs so whatever I come up with has to detect dynamically whether there are child tabs and which child tab has been clicked on.

Here is the javascript I have so far.  In the code-behind of each page, I've created the appropriate "onclick"/"onchange" Attribute calling the appropriate function.  I've noted where I'm uncertain what to do with copious question marks.  I've tried using get_selectedTab() on the resulting get_tabs list.  I've tried get_tab on that list trying to use selectedIndex on the sub tab list and the tab from get_tab.  Something always errs out.

<script language="javascript" type="text/javascript">
    var isTabClicked = "false";

    function OnClientTabSelecting(sender, args) {
        if (isTabClicked == "false") {
            //cancel the action
            args.set_cancel(true);

            //get the tab which is clicked
            var tab = args.get_tab();
            var sub_tabs = tab.get_tabs();
            if (sub_tabs != null) {
                //                ????????
                }
            }

            //check to see if a change has been logged
            var sChangedHF = document.getElementById('<%=ChangedHiddenField.ClientID%>');
            if (sChangedHF.value == "True") {
                if (confirm('You have unsaved changes on this page.  Continue without saving?')) {
                    isTabClicked = "true";
                    tab.click();
                }
            }
            else {
                isTabClicked = "true";
                tab.click();
            }
        }
    }
    function OnClientTabSelected() {
        //reset the isTabClicked variable
        isTabClicked = "false";
    }
    function confirmChange() {
        var sChangedHF = document.getElementById('<%=ChangedHiddenField.ClientID%>');
        sChangedHF.value = "True";
    }
    function resetChange() {
        var sChangedHF = document.getElementById('<%=ChangedHiddenField.ClientID%>');
        sChangedHF.value = "False";
    }
</script>

Here is the XML that references it.  (Obviously it has been scrubbed ... and by hand so please forgive any possible syntax errors.)

    <asp:HiddenField ID="ChangedHiddenField" runat="server" Value="False" />
confirmIgnoreChange();' EnableViewState="true" CausesValidation="false" runat="server">--%>
    <TRad:RadTabStrip id="CaseTabStrip" ClickSelectedTab="true" Skin="Sitefinity" OnClientTabSelecting="OnClientTabSelecting" OnClientTabSelected="OnClientTabSelected" EnableViewState="true" CausesValidation="false" runat="server">
        <Tabs>
            <TRad:RadTab Text="No Child 1" NavigateUrl="~/NoChild1.aspx" runat="server"></TRad:RadTab>
            <TRad:RadTab Text="Children 1" runat="server">
                <Tabs>
                    <TRad:RadTab Text="Child 1.1" NavigateUrl="~/Child1_1.aspx" runat="server"></TRad:RadTab>
                    <TRad:RadTab Text="Child 1.2" NavigateUrl="~/Child1_2.aspx" runat="server"></TRad:RadTab>
                    <TRad:RadTab Text="Child 1.3" NavigateUrl="~/Child1_3.aspx" runat="server"></TRad:RadTab>
                    <TRad:RadTab Text="Child 1.4" NavigateUrl="~/Child1_4.aspx" runat="server"></TRad:RadTab>
                    <TRad:RadTab Text="Child 1.5" NavigateUrl="~/Child1_5.aspx" runat="server"></TRad:RadTab>
                    <TRad:RadTab Text="Child 1.6" NavigateUrl="~/Child1_6.aspx" runat="server"></TRad:RadTab>
                </Tabs>
            </TRad:RadTab>
            <TRad:RadTab Text="Children 2" runat="server">
                <Tabs>
                    <TRad:RadTab Text="Child 2.1" NavigateUrl="~/Child2_1.aspx" runat="server"></TRad:RadTab>
                    <TRad:RadTab Text="Child 2.2" NavigateUrl="~/Child2_2.aspx" runat="server"></TRad:RadTab>
                </Tabs>
            </TRad:RadTab>
            <TRad:RadTab Text="No Child 2" NavigateUrl="~/NoChild2.aspx" runat="server"></TRad:RadTab>
            <TRad:RadTab Text="Children 3" runat="server">
                <Tabs>
                    <TRad:RadTab Text="Child 3.1" NavigateUrl="~/Child3_1.aspx" runat="server"></TRad:RadTab>
                    <TRad:RadTab Text="Child 3.2" NavigateUrl="~/Child3_2.aspx" runat="server"></TRad:RadTab>
                </Tabs>
            </TRad:RadTab>
            <TRad:RadTab Text="No Child 3" NavigateUrl="~/NoChild3.aspx" runat="server"></TRad:RadTab>
        </Tabs>
    </TRad:RadTabStrip>

If you need any more information to help me with this please do not hesitate to ask.  It is a high priority for me but I can move onto something else for now.

Thanks.

[Scott]

UPDATE:

All right, after some experimentation, I found that args.get_tab() is actually returning the correct tab clicked.  However, if the tab IS a sub tab, it still never switches to the correct child tab.

To review:  Clicking on a top-level tab always switches appropriately.  Once a top-level tab is selected, the 0 index child tab's URL is used in a redirect (that script is at the bottom of this update).  After that, any child tab selection never causes any change in the contents of the window.  (i.e. the TabClick event never fires.)

Here is the javascript function as it stands now.  I do not see why the tab.click() is not firing.

    function OnClientTabSelecting(sender, args) {
        if (isTabClicked == "false") {
            //cancel the action
            args.set_cancel(true);

            //get the tab which is clicked
            var tab = args.get_tab();

            //check to see if a change has been logged
            var sChangedHF = document.getElementById('<%=ChangedHiddenField.ClientID%>');
            if (sChangedHF.value == "True") {
                if (confirm('You have unsaved changes on this page.  Continue without saving?')) {
                    isTabClicked = "true";
                    tab.click();
                }
            }
            else {
                isTabClicked = "true";
                tab.click();
            }
        }
    }

Here is the VB.NET code-behind for TabClick.  Debugging shows that this is NEVER reached for a child tab.  It only gets fired on the top-level tab change.

    Protected Sub CaseTabStrip_TabClick(sender As Object, e As Telerik.Web.UI.RadTabStripEventArgs) Handles CaseTabStrip.TabClick
        If e.Tab.Tabs.Count > 0 Then
            e.Tab.Tabs(0).Selected = True
            Response.Redirect(e.Tab.Tabs(0).NavigateUrl)
        End If
    End Sub

[Nencho]

Hello Scott,

As I can see, you are using the NavigateUrl properties of the RadTab. Using this approach, the Page would be navigated in the specified in the property Page. Therefor, I would suggest you to use a RadMutliPage control, in order to achieve the desired functionality and specify the NavigateUrl properties in the underlying RadPageViews. Here is a video, demonstrating the test, I had performed, based on the provided snippet of code.

Greetings,
Nencho
the Telerik team