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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Ribbon button click event not firing

Thread ID:

Created:

Updated:

Platform:

Replies:

130644 May 23,2017 10:38 AM UTC May 25,2017 09:29 AM UTC Angular 5
loading
Tags: ejRibbon
Sumair Ahmed
Asked On May 23, 2017 10:38 AM UTC

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








Sumair Ahmed
Replied On May 24, 2017 08:23 AM UTC

Anyone?

Sarath Kumar P [Syncfusion]
Replied On 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.   


Sumair Ahmed
Replied On 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?

Sumair Ahmed
Replied On 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?

Sarath Kumar P [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;