Group

14 Aug 20187 minutes to read

Group is a collection of logical content groups that are combined under related Tab. Each group can be defined using content groups or custom content.

Adding Tab Groups

Group items can be added to Tabs by specifying text and corresponding content to be displayed. The content of group can be specified as either with content collection, contentID or customContent. You can add tab group dynamically in the ribbon control with given tab index, tab group object and group index position by using addTabGroup method.

Adding Content

Add content to Group item which is based on type of content specified. The available types are button, splitButton, toggleButton,gallery, and dropDownList.

Groups and defaults settings can be added with the content. You can add group content dynamically in the ribbon control with given tab index, group index, content, content index and sub group index position by using addTabGroupContent.

Defaults

The tabs.groups.content.defaults.height, tabs.groups.content.defaults.width,
tabs.groups.content.defaults.type, tabs.groups.content.defaults.isBig property to the controls in the group can be specified commonly.
The height & width applicable to button, split button, dropdown list ,Toggle button controls and isBig applicable to only button controls ( button, split , toggle)

Enable Separator

Separates the control from the next control in the group when group alignType is row. Set “true” to enableSeparator.

HTML

<ej-ribbon id="Default" width="500px" applicationTab.type="menu"
 applicationTab.menuItemID="menu">
   <e-tabs>
        <e-tab id="home" text="HOME" [groups]="groups1">
        </e-tab>
   </e-tabs>
</ej-ribbon>
<ul id="menu">
   <li>
        <a>FILE </a>
        <ul>
            <li><a>New</a></li>
            <li><a>Open</a></li>
        </ul>
   </li>
</ul>

HTML

import {Component} from '@angular/core';
import {NorthwindService} from '../../services/northwind.service';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/ribbon/ribbon.component.html',
  providers: [NorthwindService]
})
export class RibbonComponent {
    constructor(public northwindService: NorthwindService) {}

groups1 = [{
        text: "New",
        alignType: "rows",
        content: [{
            groups: [{
                id: "new",
                text: "New",
                toolTip: "New",
                enableSeparator: true,
                buttonSettings: {
                    width: 100,
                }
                }, {
                    id: "font",
                    text: "Font",
                    toolTip: "Font",
                    buttonSettings: {
                        width: 150,
                    }
                }],
            defaults: {
                type: "button",
                height: 70
            }
        }]
   }]
  }

Adding Custom Content

Set group type as custom to add custom items such as div, table and custom controls. With type as custom, content can be added in two ways as specified below.

• HTML contents can be directly added into the groups as string content using customContent property
• Custom template id can be specified to render those specific custom template using contentID property

HTML

<ej-ribbon id="Default" width="500px" applicationTab.type="menu" 
applicationTab.menuItemID="menu">
    <e-tabs>
        <e-tab id="home" text="HOME" [groups]="groups1">
        </e-tab>
    </e-tabs>
</ej-ribbon>

<ul id="menu">
    <li>
        <a>FILE </a>
        <ul>
            <li><a>New</a></li>
        </ul>
    </li>
</ul>
<button id="button">Using Content ID</button>

HTML

import {Component} from '@angular/core';
import {NorthwindService} from '../../services/northwind.service';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/ribbon/ribbon.component.html',
  providers: [NorthwindService]
})
export class RibbonComponent {
    constructor(public northwindService: NorthwindService) {}

groups1 = [{
        text: "New",
        type: "custom",
        customContent: "<button id='customContent'>Using Custom Content</button>"
     }, {
         text: "Data",
         type: "custom",
         contentID: "button"
     }]
  }

Group Expander

Set enableGroupExpander as true to show Group Expander for each group in Tab. These expanders can be customized using groupExpand event, such as to show popup dialog. To specify tooltip for the group expander of the group tabs.groups.groupExpanderSettings and
tabs.groups.groupExpanderSettings.toolTip can be used.

HTML

<ej-ribbon id="Default" width="500px" applicationTab.type="menu" 
applicationTab.menuItemID="menu">
    <e-tabs>
        <e-tab id="home" text="HOME" [groups]="groups1">
        </e-tab>
    </e-tabs>
</ej-ribbon>
<ul id="menu">
    <li>
        <a>FILE </a>
        <ul>
            <li><a>New</a></li>
        </ul>
    </li>
</ul>
<button id="button">Home button</button>

HTML

import {Component} from '@angular/core';
import {NorthwindService} from '../../services/northwind.service';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/ribbon/ribbon.component.html',
  providers: [NorthwindService]
})
export class RibbonComponent {
    constructor(public northwindService: NorthwindService) {}
    
       groups1 = [{
        text: "New",
        alignType: "rows",
        type: "custom",
        enableGroupExpander: true,
        contentID: "button"
    }]
  }