- addTab
- addGroup
- addCollection
- addItem
- removeTab
- removeGroup
- removeCollection
- removeItem
- enableItem
- disableItem
- refreshLayout
- selectTab
Contact Support
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
@Html.EJS().Button("addTab").Content("AddTab").Click("addTab").IsPrimary(true).Render()
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
tab.Header("Home").Groups(group =>
{
group.Header("Clipboard").Collections(collection =>
{
collection.Items(item =>
{
item.Type(RibbonItemType.Button).ButtonSettings(button =>
{
button.IconCss("e-icons e-cut").Content("cut");
}).Add();
}).Add();
}).Add();
}).Add();
}).Render()
<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
@Html.EJS().Button("addGroup").Content("AddGroup").Click("addGroup").IsPrimary(true).Render()
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
tab.Id("home").Header("Home").Groups(group =>
{
group.Header("Clipboard").Collections(collection =>
{
collection.Items(item =>
{
item.Type(RibbonItemType.Button).ButtonSettings(button =>
{
button.IconCss("e-icons e-cut").Content("cut");
}).Add();
}).Add();
}).Add();
}).Add();
}).Render()
<script>
function addGroup() {
var ribbonObj = document.getElementById("ribbon").ej2_instances[0];
let newGroup = {
header: "newGroup",
id: "insertGroup"
}
ribbonObj.addGroup("home", 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
@Html.EJS().Button("addCollection").Content("AddCollection").Click("addCollection").IsPrimary(true).Render()
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
tab.Header("Home").Groups(group =>
{
group.Id("fontGroup").Header("Clipboard").Collections(collection =>
{
collection.Items(item =>
{
item.Type(RibbonItemType.Button).ButtonSettings(button =>
{
button.IconCss("e-icons e-cut").Content("cut");
}).Add();
}).Add();
}).Add();
}).Add();
}).Render()
<script>
function addCollection() {
var ribbonObj = document.getElementById("ribbon").ej2_instances[0];
let newCollection = {
id: "insertGroup",
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
@Html.EJS().Button("addItem").Content("AddItem").Click("addItem").IsPrimary(true).Render()
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
tab.Header("Home").Groups(group =>
{
group.Header("Clipboard").Collections(collection =>
{
collection.Id("buttonCollection").Items(item =>
{
item.Type(RibbonItemType.Button).AllowedSizes(RibbonItemSize.Medium).ButtonSettings(button =>
{
button.IconCss("e-icons e-cut").Content("cut");
}).Add();
}).Add();
}).Add();
}).Add();
}).Render()
<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
@Html.EJS().Button("removeTab").Content("RemoveTab").Click("removeTab").IsPrimary(true).Render()
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
tab.Id("homeTab").Header("Home").Groups(group =>
{
group.Header("Clipboard").Collections(collection =>
{
collection.Id("buttonCollection").Items(item =>
{
item.Type(RibbonItemType.Button).ButtonSettings(button =>
{
button.IconCss("e-icons e-cut").Content("cut");
}).Add();
}).Add();
}).Add();
}).Add();
tab.Id("insertTab").Header("Insert").Add();
}).Render()
<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
@Html.EJS().Button("removeGroup").Content("RemoveGroup").Click("removeGroup").IsPrimary(true).Render()
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
tab.Id("homeTab").Header("Home").Groups(group =>
{
group.Header("Font").Collections(collection =>
{
collection.Id("buttonCollection").Items(item =>
{
item.Type(RibbonItemType.Button).ButtonSettings(button =>
{
button.IconCss("e-icons e-cut").Content("cut");
}).Add();
}).Add();
}).Add();
group.Header("ClipBoard").Id("clipBoard").Add();
}).Add();
}).Render()
<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
@Html.EJS().Button("removeCollection").Content("RemoveCollection").Click("removeCollection").IsPrimary(true).Render()
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
tab.Id("homeTab").Header("Home").Groups(group =>
{
group.Header("Font").Collections(collection =>
{
collection.Id("buttonCollection").Items(item =>
{
item.Type(RibbonItemType.Button).ButtonSettings(button =>
{
button.IconCss("e-icons e-cut").Content("cut");
}).Add();
}).Add();
collection.Id("colorPicker").Items(item =>
{
item.Type(RibbonItemType.ColorPicker).ColorPickerSettings(colorpicker =>
{
colorpicker.Value("035a");
}).Add();
}).Add();
}).Add();
}).Add();
}).Render()
<script>
function removeCollection() {
var ribbonObj = document.getElementById("ribbon").ej2_instances[0];
ribbonObj.removeCollection("colorPicker");
}
</script>
removeItem
The removeItem
method is used to remove an item from the ribbon control. This method takes the itemId
as a parameter.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@Html.EJS().Button("removeItem").Content("RemoveItem").Click("removeItem").IsPrimary(true).Render()
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
tab.Id("homeTab").Header("Home").Groups(group =>
{
group.Header("Font").Collections(collection =>
{
collection.Id("buttonCollection").Items(item =>
{
item.Id("cutItem").Type(RibbonItemType.Button).ButtonSettings(button =>
{
button.IconCss("e-icons e-cut").Content("cut");
}).Add();
item.Id("copyItem").Type(RibbonItemType.Button).ButtonSettings(button =>
{
button.IconCss("e-icons e-copy").Content("copy");
}).Add();
}).Add();
}).Add();
}).Add();
}).Render()
<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
@Html.EJS().Button("enableItem").Content("EnableItem").Click("enableItem").IsPrimary(true).Render()
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
tab.Id("homeTab").Header("Home").Groups(group =>
{
group.Header("Font").Collections(collection =>
{
collection.Id("buttonCollection").Items(item =>
{
item.Id("cutItem").Disabled(true).Type(RibbonItemType.Button).ButtonSettings(button =>
{
button.IconCss("e-icons e-cut").Content("cut");
}).Add();
}).Add();
}).Add();
}).Add();
}).Render()
<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
@Html.EJS().Button("disableItem").Content("DisableItem").Click("disableItem").IsPrimary(true).Render()
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
tab.Id("homeTab").Header("Home").Groups(group =>
{
group.Header("Font").Collections(collection =>
{
collection.Id("buttonCollection").Items(item =>
{
item.Id("cutItem").Type(RibbonItemType.Button).ButtonSettings(button =>
{
button.IconCss("e-icons e-cut").Content("cut");
}).Add();
}).Add();
}).Add();
}).Add();
}).Render()
<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.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@Html.EJS().Button("refresh").Content("Refresh").Click("refreshLayout").IsPrimary(true).Render()
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
tab.Id("homeTab").Header("Home").Groups(group =>
{
group.Header("Font").Collections(collection =>
{
collection.Id("buttonCollection").Items(item =>
{
item.Id("cutItem").Type(RibbonItemType.Button).ButtonSettings(button =>
{
button.IconCss("e-icons e-cut").Content("cut");
}).Add();
}).Add();
}).Add();
}).Add();
}).Render()
<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
@Html.EJS().Button("selectTab").Content("selectTab").Click("selectTab").IsPrimary(true).Render()
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
tab.Id("homeTab").Header("Home").Groups(group =>
{
group.Header("Font").Collections(collection =>
{
collection.Id("buttonCollection").Items(item =>
{
item.Id("cutItem").Type(RibbonItemType.Button).ButtonSettings(button =>
{
button.IconCss("e-icons e-cut").Content("cut");
}).Add();
}).Add();
}).Add();
}).Add();
tab.Id("insertTab").Header("Insert").Add();
}).Render()
<script>
function selectTab() {
var ribbonObj = document.getElementById("ribbon").ej2_instances[0];
ribbonObj.selectTab("insertTab");
}
</script>