Apply javascript function for ribbon bar from master page

[Dorababu]

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

[Princy]

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.

[Dorababu]

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

[Dorababu]

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

[Princy]

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.

[Dorababu]

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);
                }
            }
        }

[Princy]

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.

[Dorababu]

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

[Princy]

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.