Contents
Methods
7 Jul 202324 minutes to read
The following methods are available in the Ribbon control.
addTab
Using the addTab method you can add tab dynamically in the ribbon control. The arguments are as follows.
| Argument name | Description |
|---|---|
| tab | Gets the tab data to add. |
| targetId (optional) | Gets the ID of the target tab to add the new tab. |
| isAfter (optional) | Defines whether the tab is added before or after the target. |
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-button id="addTab" content="AddTab" onclick="addTab()" isPrimary="true"></ejs-button>
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Font">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=Button>
<e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut"></e-ribbon-buttonsettings>
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>
<script>
function addTab() {
var ribbonObj = document.getElementById("ribbon").ej2_instances[0];
let newTab = {
header: "Insert",
id: "tab"
};
ribbonObj.addTab(newTab);
}
</script>addGroup
Using the addGroup method you can add a group dynamically in the ribbon control. The arguments are as follows.
| Argument name | Description |
|---|---|
| tabId | Gets the ribbon tab ID. |
| group | Gets the group data to add. |
| targetId (optional) | Gets the ID of the target group to add the new group. |
| isAfter (optional) | Defines whether the group is added before or after the target. |
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-button id="addGroup" content="AddGroup" onclick="addGroup()" isPrimary="true"></ejs-button>
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home" id="homeTab">
<e-ribbon-groups>
<e-ribbon-group header="Font">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=Button>
<e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut"></e-ribbon-buttonsettings>
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>
<script>
function addGroup() {
var ribbonObj = document.getElementById("ribbon").ej2_instances[0];
let newGroup = {
header: "newGroup",
id: "insertGroup"
}
ribbonObj.addGroup("homeTab", newGroup);
}
</script>addCollection
Using the addCollection method you can add a collection dynamically in the ribbon control. The arguments are as follows.
| Argument name | Description |
|---|---|
| groupId | Gets the ribbon group ID. |
| collection | Gets the collection data to add. |
| targetId (optional) | Gets the ID of the target collection to add the new collection. |
| isAfter (optional) | Defines whether the collection is added before or after the target. |
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-button id="addCollection" content="AddCollection" onclick="addCollection()" isPrimary="true"></ejs-button>
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Font" id="fontGroup">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=Button>
<e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut"></e-ribbon-buttonsettings>
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>
<script>
function addCollection() {
var ribbonObj = document.getElementById("ribbon").ej2_instances[0];
let newCollection = {
id: "insertCollection",
items: [
{
type: "Button",
buttonSettings: {
content: "Edit",
iconCss: "e-icons e-edit"
}
},
{
type: "ColorPicker",
colorPickerSettings: {
value: "035a"
}
}
]
}
ribbonObj.addCollection("fontGroup", newCollection)
}
</script>addItem
Using the addItem method you can add an item dynamically in the ribbon control. The arguments are as follows.
| Argument name | Description |
|---|---|
| collectionId | Gets the ribbon collection ID. |
| item | Gets the item data to add . |
| targetId (optional) | Gets the ID of the target item to add the new item. |
| isAfter (optional) | Defines whether the item is added before or after the target. |
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-button id="addItem" content="AddItem" onclick="addItem()" isPrimary="true"></ejs-button>
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home" id="homeTab">
<e-ribbon-groups>
<e-ribbon-group header="Font" id="fontGroup" orientation="Column">
<e-ribbon-collections>
<e-ribbon-collection id="buttonCollection">
<e-ribbon-items>
<e-ribbon-item type=Button allowedSizes="Medium">
<e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut"></e-ribbon-buttonsettings>
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>
<script>
function addItem() {
var ribbonObj = document.getElementById("ribbon").ej2_instances[0];
let newItem = {
id: "insertItem",
type: "ColorPicker",
colorPickerSettings: {
value: "035a"
}
}
ribbonObj.addItem("buttonCollection", newItem)
}
</script>removeTab
The removeTab method is used to remove a tab from the ribbon control. This method takes the tabId as a parameter.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-button id="removeTab" content="RemoveTab" onclick="removeTab()" isPrimary="true"></ejs-button>
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home" id="homeTab">
<e-ribbon-groups>
<e-ribbon-group header="Font">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=Button>
<e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut"></e-ribbon-buttonsettings>
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
<e-ribbon-tab header="Insert" id="insertTab">
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>
<script>
function removeTab() {
var ribbonObj = document.getElementById("ribbon").ej2_instances[0];
ribbonObj.removeTab("insertTab")
}
</script>removeGroup
The removeGroup method is used to remove a group of items from the ribbon control. This method takes the groupId as a parameter.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-button id="removeGroup" content="RemoveGroup" onclick="removeGroup()" isPrimary="true"></ejs-button>
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Font" id="buttonGroup">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item displayOptions=Auto type=Button>
<e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut"></e-ribbon-buttonsettings>
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="ClipBoard" id="clipBoard">
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>
<script>
function removeGroup() {
var ribbonObj = document.getElementById("ribbon").ej2_instances[0];
ribbonObj.removeGroup("clipBoard");
}
</script>removeCollection
The removeCollection method is used to remove a collection of items from the ribbon control. This method takes the collectionId as a parameter.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-button id="removeCollection" content="RemoveCollection" onclick="removeCollection()" isPrimary="true"></ejs-button>
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Font">
<e-ribbon-collections>
<e-ribbon-collection id="buttonCollection">
<e-ribbon-items>
<e-ribbon-item type=Button>
<e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut"></e-ribbon-buttonsettings>
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection id="colorPickerCollection">
<e-ribbon-items>
<e-ribbon-item type=ColorPicker>
<e-ribbon-colorpickersettings value="035a"></e-ribbon-colorpickersettings>
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>
<script>
function removeCollection() {
var ribbonObj = document.getElementById("ribbon").ej2_instances[0];
ribbonObj.removeCollection("colorPickerCollection");
}
</script>removeItem
The removeItem method is used to removes an item from the ribbon control. This method takes the itemId as a parameter.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-button id="removeItem" content="RemoveItem" onclick="removeItem()" isPrimary="true"></ejs-button>
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Font">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=Button id="cutItem">
<e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut"></e-ribbon-buttonsettings>
</e-ribbon-item>
<e-ribbon-item type=Button id="copyItem">
<e-ribbon-buttonsettings iconCss="e-icons e-copy" content="Copy"></e-ribbon-buttonsettings>
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>
<script>
function removeItem() {
var ribbonObj = document.getElementById("ribbon").ej2_instances[0];
ribbonObj.removeItem("copyItem")
}
</script>enableItem
The enableItem method in a ribbon control is used to enable a specific item in the ribbon control. This method takes the itemId as a parameter.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-button id="enableItem" content="EnableItem" onclick="enableItem()" isPrimary="true"></ejs-button>
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Font">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=Button disabled=true id="cutItem">
<e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut"></e-ribbon-buttonsettings>
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>
<script>
function enableItem() {
var ribbonObj = document.getElementById("ribbon").ej2_instances[0];
ribbonObj.enableItem("cutItem")
}
</script>disableItem
The disableItem method in a ribbon control is used to disable a specific item in the ribbon control. This method takes the itemId as a parameter.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-button id="disableItem" content="DisableItem" onclick="disableItem()" isPrimary="true"></ejs-button>
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Font">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=Button id="cutItem">
<e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut"></e-ribbon-buttonsettings>
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>
<script>
function disableItem() {
var ribbonObj = document.getElementById("ribbon").ej2_instances[0];
ribbonObj.disableItem("cutItem")
}
</script>refreshLayout
The refreshLayout method can be used to update the layout and reflect the changes.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-button id="refresh" content="Refresh" onclick="refreshLayout()" isPrimary="true"></ejs-button>
<ejs-ribbon id="ribbon" activeLayout="Classic">
<e-ribbon-tabs>
<e-ribbon-tab header="Home" id="homeTab">
<e-ribbon-groups>
<e-ribbon-group header="Font" id="fontGroup" orientation="Column">
<e-ribbon-collections>
<e-ribbon-collection id="buttonCollection">
<e-ribbon-items>
<e-ribbon-item type=Button id="cutButton" allowedSizes="Medium">
<e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut"></e-ribbon-buttonsettings>
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>
<script>
function refreshLayout() {
var ribbonObj = document.getElementById("ribbon").ej2_instances[0];
ribbonObj.activeLayout = "Simplified";
ribbonObj.refreshLayout();
}
</script>selectTab
The selectTab method is used to select a tab from the ribbon control. This method takes the tabId as a parameter.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-button id="selectTab" content="selectTab" onclick="selectTab()" isPrimary="true"></ejs-button>
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home" id="homeTab">
<e-ribbon-groups>
<e-ribbon-group header="Font">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=Button>
<e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut"></e-ribbon-buttonsettings>
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
<e-ribbon-tab header="Insert" id="insertTab">
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>
<script>
function selectTab() {
var ribbonObj = document.getElementById("ribbon").ej2_instances[0];
ribbonObj.selectTab("insertTab")
}
</script>