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. Angular
  4. Ribbon button click event not firing

Ribbon button click event not firing

     Just trying to fire the button click event on the Ribbon.  Trying to use groupClick as it says on the API.

This is what i have, but nothing happens; no action, no error message (Using google chrome console).

Any ideas?

defaults = { type: 'button', width: '60', height: '70' };
buttonSettings = { contentType: 'imageonly', imagePosition: 'imagetop', prefixIcon: 'e-ribbon e-icon e-new' };
tabHome = [{
text: 'New', alignType: 'rows',
content: [{
groups: [{
id: 'new', text: 'New', toolTip: 'New',
buttonSettings: { contentType: 'imageonly', imagePosition: 'imagetop', prefixIcon: 'e-ribbon e-icon e-new', groupClick: 'CreateNew' }
}],
defaults: { type: 'button', width: '50', height: '70', isBig: 'true' },
groupClick: "CreateNew"
}]
},


public CreateNew(sender){
let tabObj = new TabComponent();
tabObj.createNewTab();
}








5 Replies
SA Sumair Ahmed May 24, 2017 08:23 AM UTC

Anyone?

SK Sarath Kumar P Syncfusion Team May 24, 2017 09:07 AM UTC

Hi Sumair Ahmed,   
Thanks for contacting Syncfusion support.     
After analyzing your code, we found that you have not set the group click(“groupClick”) event in the correct order. Please refer to the below codes and initialize the “groupClick” event as an attribute in the “<ej-ribbon>” tag like below,    
  
[ribbon.component.html]   
   
<ej-ribbon id="Default" width="500px" applicationTab.type="menu"applicationTab.menuItemID="ribbonmenu" (groupClick)="CreateNew($event)">  //Initialize the “groupClick” event   
    <e-tabs>   
         <e-tab id="home" text="HOME" [groups]="Group1"></e-tab>   
        </e-tabs>     
</ej-ribbon>   
<ul id="ribbonmenu">   
    <li>   
        <a>FILE </a>   
        <ul>   
            <li><a>New</a></li>   
            <li><a>Open</a></li>   
        </ul>   
    </li>   
</ul>   
   
[ribbon.component.ts]   
    
 CreateNew(args) {  //Define the “groupClick” event and add new ribbon tab   
        $('#Default').data('ejRibbon').addTab("Tab2", this.Group2, 2);   
    }   
    Group1 = [{   
        text: "Group1",   
        alignType: "rows",   
        content: [{   
            groups: [{   
                id: "grp1",   
                text: "Click button",   
                toolTip: "Group1 button"   
            }],   
            defaults: {   
                type: "button",   
            }   
        }]   
    }]   
   Group2 = [{   
        text: "Group2",   
        alignType: "rows",   
        content: [{   
            groups: [{   
                id: "grp2",   
                text: "Group2 button",   
                toolTip: "Group2 button"   
            }],   
            defaults: {   
                type: "button",   
            }   
        }]   
    }]   
    
    
                 https://help.syncfusion.com/api/js/ejribbon#methods:addtab   
Regards,   
Sarath Kumar P.   


SA Sumair Ahmed May 24, 2017 09:13 AM UTC

What i don't understand is; if i define it in the HTML, how would i have multiple group click events.  I.e for different groups, different button click events?

SA Sumair Ahmed May 25, 2017 09:17 AM UTC

Anyone?  Would like to get an answer as this taking up too much time.

Your API states: Triggered when the control in the group is clicked successfully.

To me that states that there can be one per group??

 how would i have multiple group click events.  I.e for different groups, different button click events?

SK Sarath Kumar P Syncfusion Team May 25, 2017 09:29 AM UTC

Hi Sumair Ahmed, 
 
In the group click event , you can get clicked target information in the “args” object based on that values in the “args” object you can perform different operations for targets of different groups(“you can have multiple group click events for different groups and buttons in different groups by defining it in the html”). Please refer to the below codes,  
 
[ribbon.component.html] 
 
<ej-ribbon id="Default" width="500px" applicationTab.type="menu" applicationTab.menuItemID="ribbonmenu" (groupClick)="CreateNew($event)">   //Initialize the “groupClick” event 
    <e-tabs> 
         <e-tab id="home" text="HOME" [groups]="Group1"></e-tab> 
        </e-tabs>   
</ej-ribbon> 
 
[ribbon.component.ts] 
  
 CreateNew(args) {   // ‘args’ holds details/information of clicked target. So, you can have multiple group click events for different groups and buttons in different groups. 
        alert("Clicked target ID( " +args.target.id + " ) retrieved through 'group click' event."); 
    }  
  
 
Or you can also define click event for each button defined inside each group like below, 
 
 
[ribbon.component.ts] 
  
 Group1 = [{ 
        text: "Group1", 
        alignType: "rows", 
        content: [{ 
            groups: [{ 
                id: "grp1_btn", 
                text: "Click grp1 button", 
                toolTip: "Group1 button", 
                buttonSettings: { 
                 click: function(args){ 
                    alert("button ID( " +args.target.id + " ) retrieved through 'button' event."); 
                 } 
                } 
            }], 
            defaults: { 
                type: "button", 
            } 
        }] 
    },{ 
        text: "Group2", 
        alignType: "rows", 
        content: [{ 
            groups: [{ 
                id: "grp2_btn", 
                text: "Click grp2 button", 
                toolTip: "Group2 button", 
                buttonSettings: { 
                 click: function(args){ 
                    alert("button ID( " +args.target.id + " ) retrieved through 'button' event."); 
                 } 
                } 
            }], 
            defaults: { 
                type: "button", 
            } 
        }] 
    }] 
 
 
Refer to the below sample and video, 
 
 
 
 
Regards, 
 
Sarath Kumar P. 


Loader.
Up arrow icon