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.
Unfortunately, activation email could not send to your email. Please try again.

Ribbon button click event not firing

Thread ID:

Created:

Updated:

Platform:

Replies:

130644 May 23,2017 06:38 AM May 25,2017 05:29 AM Angular 5
loading
Tags: ejRibbon
Sumair Ahmed
Asked On May 23, 2017 06:38 AM

     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 04:23 AM

Anyone?

Sarath Kumar P [Syncfusion]
Replied On May 24, 2017 05:07 AM

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 05:13 AM

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 05:17 AM

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 05:29 AM

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.

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.

;