Confirm tab change check with child tabs

3 posts, 0 answers
  1. Scott
    Scott avatar
    2 posts
    Member since:
    Apr 2013

    Posted 10 Apr 2013 Link to this post

    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.
  2. Scott
    Scott avatar
    2 posts
    Member since:
    Apr 2013

    Posted 11 Apr 2013 Link to this post

    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


  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 15 Apr 2013 Link to this post

    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
    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