Apply javascript function for ribbon bar from master page

9 posts, 1 answers
  1. Dorababu
    Dorababu avatar
    95 posts
    Member since:
    May 2012

    Posted 20 Nov 2012 Link to this post

    Hi I am having a ribbon bar in a master page, I am having a child page where I am having some text boxes, if user enter some data and tries to navigate to another page on clicking the tab of ribbon bar i would like to show a pop up like are you sure you want to navigate with out saving. My javascript is as follows in child page
    <script type="text/javascript">
            var isDirty;
            isDirty = 0;
     
            function setDirty() {
                var form = document.getElementById("<%=txt.ClientID %>");
                var v = form.value;
                //is_checked = elems[i].checked;
                //is_checked1 = elems[i].checked;
                if (v == '') {
                    isDirty = 0;
                    //alert("In");
                }
                else {
                    isDirty = 1;
                    alert("In");
                }
     
            }
     
            function checkSave() {
                var sSave;
                if (isDirty == 1) {
                    sSave = window.confirm("You have some changes that have not been saved. Click OK to save now or CANCEL to continue without saving.");
                    if (sSave == true) {
                    }
                    else {
                    }
                }
            }
        </script>

    On change tab event i would like to fire that alert, from child page can some one help me

    Also how can I get all RibbonBarTab,RibbonBarGroup and associated RibbonBarButton through looping in javascript
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 20 Nov 2012 Link to this post

    Hi,

    One suggestion is that you can access the RadRibbonBar in the content page and can attach the selectedTabChanged eventhandler for the RadRibbonBar in the pageLoad event of the content page as follows.

    JS:
    <script type="text/javascript">
       function pageLoad() {
            var ribbonbar = $find('<%=((RadRibbonBar)Master.FindControl("RadRibbonBar1")).ClientID %>');
            ribbonbar.add_selectedTabChanged(checkSave);
            for (var i = 0; i < ribbonbar.get_tabs().get_count(); i++) {
                //Accessing the tabs in the RibbonBar
                ribbonbar.get_tabs().getItem(i);
                for (var j = 0; j < ribbonbar.get_tabs().getItem(i).get_groups().get_count(); j++) {
                    //Accessing the groups
                    ribbonbar.get_tabs().getItem(i).get_groups().getItem(j);
                    for (var k = 0; k < ribbonbar.get_tabs().getItem(i).get_groups().getItem(j).get_items().get_count(); k++) {
                           //Accessing the items
                        ribbonbar.get_tabs().getItem(i).get_groups().getItem(j).get_items().getItem(k);
                    }
                }
            }
        }
    </script>

    Hope this helps.

    Regards,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dorababu
    Dorababu avatar
    95 posts
    Member since:
    May 2012

    Posted 20 Nov 2012 Link to this post

    Hi thanks for ur reply, I had few questions to ask i.e where can I apply that function for ribbon par on my code page and if user select OK from the pop up I would like to move him to the selected tab or page and activate the corresponding tab , on cancel I would like to stand him on the current tab or page can you help me
    function checkSave() {
                var sSave;
                if (isDirty == 1) {
                    sSave = window.confirm("You have some changes that have not been saved. Click OK to save now or CANCEL to continue without saving.");
                    if (sSave == true) {
                        var ribbonbar = $find('<%=((RadRibbonBar)Master.FindControl("RadRibbonBar1")).ClientID %>');
                        ribbonbar.add_selectedTabChanged(checkSave);
                        for (var i = 0; i < ribbonbar.get_tabs().get_count(); i++) {
                            //Accessing the tabs in the RibbonBar
                            ribbonbar.get_tabs().getItem(i);
                            for (var j = 0; j < ribbonbar.get_tabs().getItem(i).get_groups().get_count(); j++) {
                                //Accessing the groups
                                ribbonbar.get_tabs().getItem(i).get_groups().getItem(j);
                                for (var k = 0; k < ribbonbar.get_tabs().getItem(i).get_groups().getItem(j).get_items().get_count(); k++) {
                                    //Accessing the items
                                    ribbonbar.get_tabs().getItem(i).get_groups().getItem(j).get_items().getItem(k);
                                }
                            }
                        }
                    }
                    else {
                    }
                }
            }
  5. Dorababu
    Dorababu avatar
    95 posts
    Member since:
    May 2012

    Posted 20 Nov 2012 Link to this post

    Also instead of applying javascript for each tab and button is there any way to assign the script to whole ribbon bar. Currently I write as follows

    RadRibbonBar rb = (RadRibbonBar)Master.FindControl("RadRibbonBar1");
                RibbonBarTab tb = rb.FindTabByValue("Tab0Value");
                RibbonBarTab tb1 = rb.FindTabByValue("Tab1Value");
                RibbonBarButton btn = tb.FindButtonByValue("RibbonBarButton0Value");
                btn.Attributes.Add("onclick", "checkSave();");
                tb1.Attributes.Add("onclick", "checkSave();");
                tb.Attributes.Add("onclick", "checkSave();");

    But when ribbon ui has more tabs and buttons it is hard to apply on each tab and button, so instead of that how can I use the given script to the whole ribbon bar
  6. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 20 Nov 2012 Link to this post

    Hi Dorababu,

    You can add the SelectedTabChanging client side event to the whole RadRibbonBar as follows.

    C#:
    RadRibbonBar rb = (RadRibbonBar)Master.FindControl("RadRibbonBar1");
    rb.OnClientSelectedTabChanging = "checkSave";

    You can check for the condition and then can cancel the OnClientSelectedTabChanging event of RadRibbonBar as follows.

    JS:
    <script type="text/javascript">
      function checkSave(sender, args) {
       var sSave = window.confirm("You have some changes that have not been saved. Click OK to save now or CANCEL to continue without saving.");
       if (sSave == false) {
          args.set_cancel(true);
        }
       }
    </script>

    Hope this helps.

    Regards,
    Princy.
  7. Dorababu
    Dorababu avatar
    95 posts
    Member since:
    May 2012

    Posted 20 Nov 2012 Link to this post

    Hi thanks but when I click on OK from confirm I would like to transfer it to next tab, with your code I tried as follows but it is not moving to next tab, also how can I apply this for menu items and button inside ribbon bar

    function checkSave(sender, args) {
                if (isDirty == 1) {
                    varsSave = window.confirm("You have some changes that have not been saved. Click OK to save now or CANCEL to continue without saving.");
                    if (sSave == false) {
                        args.set_cancel(true);
                    }
                    else {
                        args.set_cancel(false);
                    }
                }
            }
  8. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 21 Nov 2012 Link to this post

    Hi Dorababu,

    Following is the sample code that I tried to cancel the event on the based on the condition.

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadRibbonBar rb = (RadRibbonBar)Master.FindControl("RadRibbonBar1");
        rb.OnClientSelectedTabChanging = "checkSave";
        rb.OnClientButtonClicking = "checkSave";
        rb.OnClientApplicationMenuItemClicking = "checkSave";
    }

    JS:
    <script type="text/javascript">
    function checkSave(sender, args) {
            var sSave = window.confirm("You have some changes that have not been saved. Click OK to save now or CANCEL to continue without saving.");
            if (sSave == false) {
                args.set_cancel(true);
            }
        }
    </script>

    Hope this helps.

    Regards,
    Princy.
  9. Dorababu
    Dorababu avatar
    95 posts
    Member since:
    May 2012

    Posted 25 Nov 2012 Link to this post

    Thanks princy, but on clicking ok it is not activating the next tab, means if i click on tab2 with the alert I have and click OK it is staying the current tab, instead of that I would like to activate that tab
  10. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 03 Dec 2012 Link to this post

    Hi Dorababu,

    Unfortunately I couldn't replicate the issue at my end. Following is the sample code that i tried which worked as expected at my end.

    Master page:

    ASPX:
    <telerik:RadRibbonBar ID="RadRibbonBar1" runat="server">
        <Tabs>
            <telerik:RibbonBarTab Text="RibbonBarTab1">
                <telerik:RibbonBarGroup Text="RibbonBarGroup1">
                    <Items>
                       ................
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="RibbonBarGroup2">
                </telerik:RibbonBarGroup>
            </telerik:RibbonBarTab>
            <telerik:RibbonBarTab Text="RibbonBarTab2">
            </telerik:RibbonBarTab>
            ..............
        </Tabs>
    </telerik:RadRibbonBar>

    Child page:

    C#:
    RadRibbonBar rb = (RadRibbonBar)Master.FindControl("RadRibbonBar1");
    rb.OnClientSelectedTabChanging = "checkSave";
    rb.OnClientButtonClicking = "checkSave";
    rb.OnClientApplicationMenuItemClicking = "checkSave";

    JS:
    <script type="text/javascript">
        function checkSave(sender, args) {
            var sSave = window.confirm("You have some changes that have not been saved. Click OK to save now or CANCEL to continue without saving.");
            if (sSave == false) {
                args.set_cancel(true);
            }
        }
    </script>

    Hope this helps.

    Regards,
    Princy.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017