We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. jQuery
  4. enabling and disabling items in ribbon

enabling and disabling items in ribbon

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



4 Replies
BS Buvana Sathasivam Syncfusion Team November 9, 2016 09:23 AM UTC


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. 

 
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 


MS Michael Salzlechner November 9, 2016 11:40 AM UTC

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


MS Michael Salzlechner November 9, 2016 11:53 AM UTC

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

something like

if ($("#"+btnId).parents('.e-disable').length) {
   --> bail from click event
}

BS Buvana Sathasivam Syncfusion Team November 10, 2016 05:10 AM UTC


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


Loader.
Up arrow icon