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.
Syncfusion Feedback

How can I dynamically add/remove a ribbon tab during run-time?

Thread ID:

Created:

Updated:

Platform:

Replies:

130528 May 17,2017 07:21 AM UTC May 18,2017 11:45 AM UTC Angular 1
loading
Tags: ejRibbon
Daniel Barisch
Asked On May 17, 2017 07:21 AM UTC

Hi,

I generate the tabs in the ribbon using the following code:
         <e-tabs>
<div *ngFor="let item of Tabs">
<e-tab [id]="item.Id" [text]="item.Name" [groups]="item.Groups" *ngIf="item.IsVisible"></e-tab>
</div>
</e-tabs>

How can I add a tab after the control has been created / rendered initially, e.g. with a button click?

Sarath Kumar P [Syncfusion]
Replied On May 18, 2017 11:45 AM UTC

   
Thanks for contacting Syncfusion support.   
   
We can add tab dynamically into ribbon control using “addTab” method. Please refer to the below codes which explain adding tab dynamically into ribbon control in the button click event.   
  
[ribbon.component.html] 
 
<button (click)="addRibbonTab()">Add ribbon tab</button//Button to add tabs into ribbon control in click event. 
<ej-ribbon id="Default" width="500px" applicationTab.type="menu" applicationTab.menuItemID="ribbonmenu"> 
    <e-tabs> 
            <div *ngFor="let item of Tabs"> 
                <e-tab [id]="item.Id" [text]="item.Name" [groups]="item.Groups" *ngIf="item.IsVisible"></e-tab> 
            </div> 
        </e-tabs>   
</ej-ribbon> 
 
 
[ribbon.component.ts] 
  
addRibbonTab(e) { 
        $('#Default').data('ejRibbon').addTab("Tab3", this.groups3, 3);  //Add ribbon tabs using “addTab” method of ribbon control. 
    } 
    Tabs = [{ 
        Id: "home", 
        Name: "HOME", 
        Groups: [{ 
            text: "Group1", 
            alignType: "rows", 
            content: [{ 
                groups: [{ 
                    id: "grp1", 
                    text: "Group1 button", 
                    toolTip: "Group1 button" 
                }], 
                defaults: { 
                    type: "button", 
               } 
            }] 
        }], 
        IsVisible: true 
    }, 
        { 
            Id: "insert", 
            Name: "INSERT", 
            Groups: [{ 
                text: "Group2", 
                alignType: "rows", 
                content: [{ 
                    groups: [{ 
                        id: "grp2", 
                        text: "Group2 button", 
                        toolTip: "Group2 button" 
                    }], 
                    defaults: { 
                        type: "button", 
                    } 
                }] 
            }], 
            IsVisible: true 
        }] 
   groups3 = [{ 
        text: "Group3", 
        alignType: "rows", 
        content: [{ 
            groups: [{ 
                id: "grp3", 
                text: "Group3 button", 
                toolTip: "Group3 button" 
            }], 
            defaults: { 
                type: "button", 
            } 
        }] 
    }]  
  
  
  
 
 
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

;