enabling and disabling items in ribbon

[Michael Salzlechner]

the ribbon control allows enabling and disabling of tabs but not of tab groups or items (buttons, etc)

[Buvana Sathasivam]

Hi Michael, 

Thanks for your update. 

Query #1: “the ribbon control allows enabling and disabling of tabs but not of tab groups or items (buttons, etc)” 

We have prepared workaround solution for the requirement. Please refer the following sample for to enable and disable of groups and items in the Ribbon control. 

Sample: http://www.syncfusion.com/downloads/support/forum/127300/ze/RibbonSample1678903424.zip  

 

Note : Choose group text or group item text from dropdown to disable/enable items. 

 

We can use the following code in “onDisableGroup” or “onEnableGroup” function, 

    

var curId = $("#defaultRibbon_home_" + args.value); 

 

Description: 

“defaultRibbon”  -  Ribbon Control Id 

“home”                   -  Tab Id of group you need to disable 

args.value          -  Group text  

We can use the following code in “onDisableGroupItems” or “onEnableGroupItems” function, 

var curId = $("#defaultRibbon_home_Font_" + args.value); 

 

Description: 

defaultRibbon – Ribbon Control Id 

home                   - Tab Id 

font                    -   Group Text 

args.value         -  Sub Group text or button’s text. 

     

Please refer the following code: 

            // Create Ribbon Object 

            ribbonObj = $("#defaultRibbon").data("ejRibbon"); 

            

            

         // Disable Group 

         function onDisableGroup(args) { 

            var curId = $("#defaultRibbon_home_" + args.value); 

            $(curId).addClass("e-disable"); 

            if ($(curId).find(".e-ddl").length > 0) { 

                var array = $(curId).find(".e-ddl"); 

                for (var i = 0; i < array.length; i++) { 

                    if (array.eq(i).hasClass("e-ddl")) { 

                        var ddl = array.eq(i).attr("id").replace("_wrapper", "") 

                        $("#" + ddl).ejDropDownList("disable");  // Here, we can disable drop down list items. 

                    } 

                } 

            } 

        } 

          

        // Enable Group 

        function onEnableGroup(args) { 

            var curId = $("#defaultRibbon_home_" + args.value); 

            $(curId).removeClass("e-disable"); 

            if ($(curId).find(".e-ddl").length > 0) { 

                var array = $(curId).find(".e-ddl"); 

                for (var i = 0; i < array.length; i++) { 

                    if (array.eq(i).hasClass("e-ddl")) { 

                        var ddl = array.eq(i).attr("id").replace("_wrapper", ""); 

                        $("#" + ddl).ejDropDownList("enable");      // Here, we can enable drop down list items. 

                    } 

                } 

            }  

        } 

 

        // Disable Group Items 

        function onDisableGroupItems(args) { 

            var curId = $("#defaultRibbon_home_Font_" + args.value); 

            $(curId).addClass("e-disable"); 

            if ($(curId).find(".e-ddl").length > 0) { 

                var ddl = $(curId).find(".e-ddl").attr("id").replace("_wrapper", ""); 

                $("#" + ddl).ejDropDownList("disable");         // Here, we can disable drop down list items. 

            } 

        } 

 

        // Enable Group Items 

        function onEnableGroupItems(args) { 

            var curId = $("#defaultRibbon_home_Font_" + args.value); 

            $(curId).removeClass("e-disable"); 

            if ($(curId).find(".e-ddl").length > 0) { 

                var ddl = $(curId).find(".e-ddl").attr("id").replace("_wrapper", ""); 

                $("#" + ddl).ejDropDownList("enable");           // Here, we can enable drop down list items. 

            }                                                                         

        } 

Please let us know if you need any further assistance. 

Regards, 

Buvana S 

[Michael Salzlechner]

thanks

that handles the appearance of group and items to 'look' disabled but all the functionality is still there

hover still shows the item selected beneath the cursor and clicking on the item still fires the click events

[Michael Salzlechner]

added some code to ignore the clicks on disabled items for now

something like

if ($("#"+btnId).parents('.e-disable').length) {

   --> bail from click event

}

[Buvana Sathasivam]

Hi Michael,   

  

  

Query #1: “added some code to ignore the clicks on disabled items”   

  

We have prepared a sample on how to ignore the clicks and hover on disable items. We have used disable methods of particular control to disable group items. (For e.g., button, toggle button, etc.).   

  

Sample:  http://www.syncfusion.com/downloads/support/forum/127300/ze/PreventEvent460390255  

   

Note: Choose group text or group item text from dropdown to disable/enable items with ignore the clicks and hover effect on disable items.   

    

Please refer to the following code:   

             

         // Disable Groups   

          function onDisableGroup(args) {   

            var curId = $("#defaultRibbon_home_" + args.value);   

            if ($(curId).find(".e-ddl").length > 0) {   

                var array = $(curId).find(".e-ddl");       // Find all drop down list in a groups   

                for (var i = 0; i < array.length; i++) {   

                    if (array.eq(i).hasClass("e-ddl")) {   

                        var ddl = array.eq(i).attr("id").replace("_wrapper", "")   

                        $("#" + ddl).ejDropDownList("disable");   

                    }   

                }   

            }   

            if ($(curId).find(".e-button").length > 0) {   

                var button = $(curId).find(".e-button");      // Find all buttons in the groups   

                for (var i = 0; i < button.length; i++) {   

                    var buttonId = button.eq(i).attr("id");   

                    $("#" +buttonId).ejButton("disable");   

                }   

            }   

        }   

          

       // Enable Groups   

        function onEnableGroup(args) {   

            var curId = $("#defaultRibbon_home_" + args.value);   

            if ($(curId).find(".e-ddl").length > 0) {   

                var array = $(curId).find(".e-ddl");   // Find all drop down list in a groups   

                for (var i = 0; i < array.length; i++) {   

                    if (array.eq(i).hasClass("e-ddl")) {   

                        var ddl = array.eq(i).attr("id").replace("_wrapper", "");   

                        $("#" + ddl).ejDropDownList("enable");   

                    }   

                }   

            }   

            if ($(curId).find(".e-button").length > 0) {   

                var button = $(curId).find(".e-button");   // Find all buttons in the groups   

                for (var i = 0; i < button.length; i++) {                

                    var buttonId = button.eq(i).attr("id");   

                    $("#" +buttonId).ejButton("enable");   

                }   

            }   

        }   

   

       // Disable Group Items   

        function onDisableGroupItems(args) {   

            var curId = $("#defaultRibbon_home_Font_" + args.value);   

            if ($(curId).find(".e-ddl").length > 0) {   

                var ddl = $(curId).find(".e-ddl").attr("id").replace("_wrapper", "");   

                $("#" + ddl).ejDropDownList("disable");       // Disable particular drop down list   

            }   

            else if($(curId).find(".e-button").length > 0){   

                var button = $(curId).find(".e-button").attr("id");   

                $("#" + button).ejButton("disable");      // Disable particular button   

            }   

        }   

   

        // Enable Group Items   

        function onEnableGroupItems(args) {   

            var curId = $("#defaultRibbon_home_Font_" + args.value);   

            if ($(curId).find(".e-ddl").length > 0) {   

                var ddl = $(curId).find(".e-ddl").attr("id").replace("_wrapper", "");   

                $("#" + ddl).ejDropDownList("enable");    // Enable particular drop down list   

            }   

            else if ($(curId).find(".e-button").length > 0) {   

                var button = $(curId).find(".e-button").attr("id");   

                $("#" + button).ejButton("enable");     // Enable particular button   

            }   

        }   

  

  

Regards,   

Buvana S