- Tab selected
- Tab selecting
- Ribbon collapsing
- Ribbon expanding
- Group launcher click
- Overflow popup open
- Overflow popup close
- Button item events
- Checkbox item events
- Colorpicker item events
- ComboBox item events
- DropDown item events
- SplitButton item events
- GroupButton item events
- FileMenu events
- Backstage Menu events
- Gallery events
Contact Support
Events in ASP.NET CORE Ribbon control
15 Oct 202424 minutes to read
This section describes the ribbon events that will be triggered when appropriate actions are performed. The following events are available in the ribbon control.
Tab selected
The tabSelected event is triggered after selecting the tab item.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-ribbon id="ribbon" tabSelected="tabSelectedEvent">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard">
<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="View">
<e-ribbon-groups>
<e-ribbon-group header="Views">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=Button>
<e-ribbon-buttonsettings iconCss="e-icons e-print" content="Print Layout"></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 tabSelectedEvent(args) {
// Here, you can customize your code.
}
</script>
Tab selecting
The tabSelecting
event is triggered before selecting the tab item.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-ribbon id="ribbon" tabSelecting="tabSelectingEvent">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard">
<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="View">
<e-ribbon-groups>
<e-ribbon-group header="Views">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=Button>
<e-ribbon-buttonsettings iconCss="e-icons e-print" content="Print Layout"></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 tabSelectingEvent(args) {
// Here, you can customize your code.
}
</script>
Ribbon collapsing
The ribbonCollapsing event is triggered before collapsing the ribbon.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-ribbon id="ribbon" ribbonCollapsing="ribbonCollapsingEvent">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard">
<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 ribbonCollapsingEvent(args) {
// Here, you can customize your code.
}
</script>
Ribbon expanding
The ribbonExpanding event is triggered before expanding the ribbon.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-ribbon id="ribbon" ribbonExpanding="ribbonExpandingEvent">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard">
<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 ribbonExpandingEvent(args) {
// Here, you can customize your code.
}
</script>
Group launcher click
The launcherIconClick event is triggered when the launcher icon of the group is clicked.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-ribbon id="ribbon" launcherIconClick="launcherIconClickEvent">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" showLauncherIcon=true>
<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 launcherIconClickEvent(args) {
// Here, you can customize your code.
}
</script>
Overflow popup open
The overflowPopupOpen event is triggered while opening the overflow popup.
Overflow popup close
The overflowPopupClose event is triggered while closing the overflow popup.
The following code example demonstrates the ribbon rendered with overflowPopupOpen
and overflowPopupClose
events.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-ribbon id="ribbon" overflowPopupOpen="overflowPopupOpen" overflowPopupClose="overflowPopupClose" activelayout="Simplified">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard">
<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 overflowPopupOpen(args) {
// Here, you can customize your code.
}
function overflowPopupClose(args) {
// Here, you can customize your code.
}
</script>
Button item events
Clicked
The clicked event is triggered when the button is clicked.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=Button>
<e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut" clicked="clickedEvent"></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 clickedEvent() {
// Here, you can customize your code.
}
</script>
Created
The created event is triggered when the button is created.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=Button>
<e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut" created="createdEvent"></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 createdEvent() {
// Here, you can customize your code.
}
</script>
Checkbox item events
Change
The change event is triggered when the Checkbox state is changed.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="View">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=CheckBox>
<e-ribbon-checkboxsettings checked=false label="Ruler" change="changeEvent"></e-ribbon-checkboxsettings>
</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 changeEvent() {
// Here, you can customize your code.
}
</script>
Created
The created event is triggered once the Checkbox is created.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="View">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=CheckBox>
<e-ribbon-checkboxsettings checked=false label="Ruler" created="createdEvent"></e-ribbon-checkboxsettings>
</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 createdEvent() {
// Here, you can customize your code.
}
</script>
Colorpicker item events
Change
The change event is triggered while changing the colors.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<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=ColorPicker>
<e-ribbon-colorpickersettings value="#fff" change="changeEvent"></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 changeEvent() {
// Here, you can customize your code.
}
</script>
Created
The created event is triggered once the ColorPicker is created.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<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=ColorPicker>
<e-ribbon-colorpickersettings value="#fff" created="createdEvent"></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 createdEvent() {
// Here, you can customize your code.
}
</script>
Open
The open event is triggered while opening the ColorPicker popup.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<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=ColorPicker>
<e-ribbon-colorpickersettings value="#fff" open="openEvent"></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 openEvent(args) {
// Here, you can customize your code.
}
</script>
Select
The select event is triggered while selecting the color in picker/palette, when showButtons property is enabled.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<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=ColorPicker>
<e-ribbon-colorpickersettings value="#fff" select="selectEvent"></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 selectEvent(args) {
// Here, you can customize your code.
}
</script>
Before close
The beforeClose event is triggered before closing the ColorPicker popup.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<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=ColorPicker>
<e-ribbon-colorpickersettings value="#fff" beforeClose="beforeCloseEvent"></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 beforeCloseEvent(args) {
// Here, you can customize your code.
}
</script>
Before open
The beforeOpen event is triggered before opening the ColorPicker popup.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<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=ColorPicker>
<e-ribbon-colorpickersettings value="#fff" beforeOpen="beforeOpenEvent"></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 beforeOpenEvent(args) {
// Here, you can customize your code.
}
</script>
Before tile render
The beforeTileRender event is triggered while rendering each palette tile.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<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=ColorPicker>
<e-ribbon-colorpickersettings value="#fff" beforeTileRender="beforeTileRenderEvent"></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 beforeTileRenderEvent(args) {
// Here, you can customize your code.
}
</script>
ComboBox item events
Change
The change event is triggered when an item in a popup is selected or when the model value is changed by the user.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<string> fontStyle = new List<string>() { "Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia" };
}
<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=ComboBox>
<e-ribbon-comboboxsettings dataSource=fontStyle index=3 change="changeEvent"></e-ribbon-comboboxsettings>
</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 changeEvent() {
// Here, you can customize your code.
}
</script>
Close
The close event is triggered when the popup is closed.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<string> fontStyle = new List<string>() { "Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia" };
}
<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=ComboBox>
<e-ribbon-comboboxsettings dataSource=fontStyle index=3 close="closeEvent"></e-ribbon-comboboxsettings>
</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 closeEvent(args) {
// Here, you can customize your code.
}
</script>
Open
The open event is triggered when the popup is opened.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<string> fontStyle = new List<string>() { "Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia" };
}
<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=ComboBox>
<e-ribbon-comboboxsettings dataSource=fontStyle index=3 open="openEvent"></e-ribbon-comboboxsettings>
</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 openEvent(args) {
// Here, you can customize your code.
}
</script>
Created
The created event is triggered once the Combobox is created.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<string> fontStyle = new List<string>() { "Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia" };
}
<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=ComboBox>
<e-ribbon-comboboxsettings dataSource=fontStyle index=3 created="createdEvent"></e-ribbon-comboboxsettings>
</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 createdEvent() {
// Here, you can customize your code.
}
</script>
Filtering
The filtering event triggers on typing a character in the Combobox.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<string> fontStyle = new List<string>() { "Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia" };
}
<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=ComboBox>
<e-ribbon-comboboxsettings dataSource=fontStyle index=3 allowFiltering="true" filtering="filteringEvent"></e-ribbon-comboboxsettings>
</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 filteringEvent(args) {
// Here, you can customize your code.
}
</script>
Select
The select event is triggered when an item in the popup is selected.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<string> fontStyle = new List<string>() { "Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia" };
}
<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=ComboBox>
<e-ribbon-comboboxsettings dataSource=fontStyle index=3 select="selectEvent"></e-ribbon-comboboxsettings>
</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 selectEvent(args) {
// Here, you can customize your code.
}
</script>
Before open
The beforeOpen event triggers before opening the popup.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<string> fontStyle = new List<string>() { "Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia" };
}
<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=ComboBox>
<e-ribbon-comboboxsettings dataSource=fontStyle index=3 beforeOpen="beforeOpenEvent"></e-ribbon-comboboxsettings>
</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 beforeOpenEvent(args) {
// Here, you can customize your code.
}
</script>
DropDown item events
Before close
The beforeClose event is triggered before closing the DropdownButton popup.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> headerOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Header" }, new MenuItem { Text = "Edit Header" }, new MenuItem { Text = "Remove Header" } };
}
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=DropDown>
<e-ribbon-dropdownsettings iconCss="e-icons e-header" content="Header" items="headerOptions" beforeClose="beforeCloseEvent"></e-ribbon-dropdownsettings>
</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 beforeCloseEvent(args) {
// Here, you can customize your code.
}
</script>
Before open
The beforeOpen event is triggered before opening the Dropdown button popup.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> headerOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Header" }, new MenuItem { Text = "Edit Header" }, new MenuItem { Text = "Remove Header" } };
}
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=DropDown>
<e-ribbon-dropdownsettings iconCss="e-icons e-header" content="Header" items="headerOptions" beforeOpen="beforeOpenEvent"></e-ribbon-dropdownsettings>
</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 beforeOpenEvent(args) {
// Here, you can customize your code.
}
</script>
Before item render
The beforeItemRender event is triggered while rendering each popup item of the Dropdown button.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> headerOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Header" }, new MenuItem { Text = "Edit Header" }, new MenuItem { Text = "Remove Header" } };
}
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=DropDown>
<e-ribbon-dropdownsettings iconCss="e-icons e-header" content="Header" items="headerOptions" beforeItemRender="beforeItemRenderEvent"></e-ribbon-dropdownsettings>
</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 beforeItemRenderEvent(args) {
// Here, you can customize your code.
}
</script>
Open
The open event is triggered while opening the Dropdown button popup.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> headerOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Header" }, new MenuItem { Text = "Edit Header" }, new MenuItem { Text = "Remove Header" } };
}
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=DropDown>
<e-ribbon-dropdownsettings iconCss="e-icons e-header" content="Header" items="headerOptions" open="openEvent"></e-ribbon-dropdownsettings>
</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 openEvent(args) {
// Here, you can customize your code.
}
</script>
Close
The close event is triggered while closing the Dropdown button popup.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> headerOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Header" }, new MenuItem { Text = "Edit Header" }, new MenuItem { Text = "Remove Header" } };
}
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=DropDown>
<e-ribbon-dropdownsettings iconCss="e-icons e-header" content="Header" items="headerOptions" close="closeEvent"></e-ribbon-dropdownsettings>
</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 closeEvent(args) {
// Here, you can customize your code.
}
</script>
Created
The created event is triggered when the DropDown is created.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> headerOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Header" }, new MenuItem { Text = "Edit Header" }, new MenuItem { Text = "Remove Header" } };
}
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=DropDown>
<e-ribbon-dropdownsettings iconCss="e-icons e-header" content="Header" items="headerOptions" created="createdEvent"></e-ribbon-dropdownsettings>
</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 createdEvent() {
// Here, you can customize your code.
}
</script>
Select
The select event is triggered while selecting an action item in the Dropdown button popup.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> headerOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Header" }, new MenuItem { Text = "Edit Header" }, new MenuItem { Text = "Remove Header" } };
}
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=DropDown>
<e-ribbon-dropdownsettings iconCss="e-icons e-header" content="Header" items="headerOptions" select="selectEvent"></e-ribbon-dropdownsettings>
</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 selectEvent(args) {
// Here, you can customize your code.
}
</script>
SplitButton item events
Before close
The beforeClose event is triggered before closing the SplitButton popup.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> headerOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Header" }, new MenuItem { Text = "Edit Header" }, new MenuItem { Text = "Remove Header" } };
}
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=SplitButton>
<e-ribbon-splitbuttonsettings iconCss="e-icons e-paste" content="Paste" items=headerOptions beforeClose="beforeCloseEvent"></e-ribbon-splitbuttonsettings>
</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 beforeCloseEvent(args) {
// Here, you can customize your code.
}
</script>
Before open
The beforeOpen event is triggered before opening the SplitButton popup.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> headerOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Header" }, new MenuItem { Text = "Edit Header" }, new MenuItem { Text = "Remove Header" } };
}
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=SplitButton>
<e-ribbon-splitbuttonsettings iconCss="e-icons e-paste" content="Paste" items=headerOptions beforeOpen="beforeOpenEvent"></e-ribbon-splitbuttonsettings>
</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 beforeOpenEvent(args) {
// Here, you can customize your code.
}
</script>
Before item render
The beforeItemRender event is triggered while rendering each popup item of SplitButton.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> headerOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Header" }, new MenuItem { Text = "Edit Header" }, new MenuItem { Text = "Remove Header" } };
}
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=SplitButton>
<e-ribbon-splitbuttonsettings iconCss="e-icons e-paste" content="Paste" items=headerOptions beforeItemRender="beforeItemRenderEvent"></e-ribbon-splitbuttonsettings>
</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 beforeItemRenderEvent(args) {
// Here, you can customize your code.
}
</script>
Open
The open event is triggered while opening the SplitButton popup.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> headerOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Header" }, new MenuItem { Text = "Edit Header" }, new MenuItem { Text = "Remove Header" } };
}
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=SplitButton>
<e-ribbon-splitbuttonsettings iconCss="e-icons e-paste" content="Paste" items=headerOptions open="openEvent"></e-ribbon-splitbuttonsettings>
</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 openEvent(args) {
// Here, you can customize your code.
}
</script>
Close
The close event is triggered while closing the SplitButton popup.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> headerOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Header" }, new MenuItem { Text = "Edit Header" }, new MenuItem { Text = "Remove Header" } };
}
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=SplitButton>
<e-ribbon-splitbuttonsettings iconCss="e-icons e-paste" content="Paste" items=headerOptions close="closeEvent"></e-ribbon-splitbuttonsettings>
</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 closeEvent(args) {
// Here, you can customize your code.
}
</script>
Created
The created event is triggered when the SplitButton is created.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> headerOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Header" }, new MenuItem { Text = "Edit Header" }, new MenuItem { Text = "Remove Header" } };
}
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=SplitButton>
<e-ribbon-splitbuttonsettings iconCss="e-icons e-paste" content="Paste" items=headerOptions created="createdEvent"></e-ribbon-splitbuttonsettings>
</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 createdEvent() {
// Here, you can customize your code.
}
</script>
Select
The select event is triggered while selecting an action item in the SplitButton popup.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> headerOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Header" }, new MenuItem { Text = "Edit Header" }, new MenuItem { Text = "Remove Header" } };
}
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=SplitButton>
<e-ribbon-splitbuttonsettings iconCss="e-icons e-paste" content="Paste" items=headerOptions select="selectEvent"></e-ribbon-splitbuttonsettings>
</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 selectEvent(args) {
// Here, you can customize your code.
}
</script>
Click
The click event is triggered while clicking the primary button in the SplitButton.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> headerOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Header" }, new MenuItem { Text = "Edit Header" }, new MenuItem { Text = "Remove Header" } };
}
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=SplitButton>
<e-ribbon-splitbuttonsettings iconCss="e-icons e-paste" content="Paste" items=headerOptions click="clickEvent"></e-ribbon-splitbuttonsettings>
</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 clickEvent() {
// Here, you can customize your code.
}
</script>
GroupButton item events
BeforeClick
The BeforeClick event is triggered before selecting a button from the GroupButton items.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<RibbonGroupButtonItem> events = new List<RibbonGroupButtonItem>() {
new RibbonGroupButtonItem { IconCss = "e-icons e-bold", Content = "Bold", BeforeClick="beforeClickEvent" },
new RibbonGroupButtonItem {IconCss = "e-icons e-italic", Content = "Italic", Selected = true, BeforeClick="beforeClickEvent" },
new RibbonGroupButtonItem {IconCss = "e-icons e-underline", Content = "Underline", BeforeClick="beforeClickEvent" },
new RibbonGroupButtonItem { IconCss = "e-icons e-strikethrough", Content = "Strikethrough", BeforeClick="beforeClickEvent" }
};
}
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Paragraph">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=GroupButton allowedSizes=Small>
<e-ribbon-groupbuttonsettings selection=Multiple items=events></e-ribbon-groupbuttonsettings>
</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 beforeClickEvent() {
// Here, you can customize your code.
}
</script>
Click
The Click event is triggered when selecting a button from the GroupButton items.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<RibbonGroupButtonItem> events = new List<RibbonGroupButtonItem>() {
new RibbonGroupButtonItem { IconCss = "e-icons e-align-left", Content = "Align Left", Click="clickEvent" },
new RibbonGroupButtonItem {IconCss = "e-icons e-align-center", Content = "Align Center", Click="clickEvent", Selected = true },
new RibbonGroupButtonItem {IconCss = "e-icons e-align-right", Content = "Align Right", Click="clickEvent" },
new RibbonGroupButtonItem { IconCss = "e-icons e-justify", Content = "Justify", Click="clickEvent" }
};
}
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Paragraph">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type=GroupButton allowedSizes=Small>
<e-ribbon-groupbuttonsettings selection=Single items=events></e-ribbon-groupbuttonsettings>
</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 clickEvent() {
// Here, you can customize your code.
}
</script>
FileMenu events
Before close
The beforeClose event is triggered before closing the FileMenu popup.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> fileMenuOptions = new List<MenuItem>() {
new MenuItem { Text = "New", IconCss = "e-icons e-file-new", Id="new" },
new MenuItem { Text = "Open", IconCss = "e-icons e-folder-open", Id="open" },
new MenuItem { Text = "Rename", IconCss = "e-icons e-rename", Id="rename" },
new MenuItem { Text = "Save", IconCss = "e-icons e-save", Id="save" }
};
}
<ejs-ribbon id="ribbon">
<e-ribbon-filemenusettings text="File" visible="true" menuItems=fileMenuOptions beforeClose="beforeCloseEvent"></e-ribbon-filemenusettings>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<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 beforeCloseEvent(args) {
// Here, you can customize your code.
}
</script>
Before open
The beforeOpen event is triggered before opening the FileMenu popup.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> fileMenuOptions = new List<MenuItem>() {
new MenuItem { Text = "New", IconCss = "e-icons e-file-new", Id="new" },
new MenuItem { Text = "Open", IconCss = "e-icons e-folder-open", Id="open" },
new MenuItem { Text = "Rename", IconCss = "e-icons e-rename", Id="rename" },
new MenuItem { Text = "Save", IconCss = "e-icons e-save", Id="save" }
};
}
<ejs-ribbon id="ribbon">
<e-ribbon-filemenusettings text="File" visible="true" menuItems=fileMenuOptions beforeOpen="beforeOpenEvent"></e-ribbon-filemenusettings>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<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 beforeOpenEvent(args) {
// Here, you can customize your code.
}
</script>
Before item render
The beforeItemRender event is triggered while rendering each ribbon FileMenu item.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> fileMenuOptions = new List<MenuItem>() {
new MenuItem { Text = "New", IconCss = "e-icons e-file-new", Id="new" },
new MenuItem { Text = "Open", IconCss = "e-icons e-folder-open", Id="open" },
new MenuItem { Text = "Rename", IconCss = "e-icons e-rename", Id="rename" },
new MenuItem { Text = "Save", IconCss = "e-icons e-save", Id="save" }
};
}
<ejs-ribbon id="ribbon">
<e-ribbon-filemenusettings text="File" visible="true" menuItems=fileMenuOptions beforeItemRender="beforeItemRenderEvent"></e-ribbon-filemenusettings>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<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 beforeItemRenderEvent(args) {
// Here, you can customize your code.
}
</script>
Open
The open event is triggered when the FileMenu popup is opened.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> fileMenuOptions = new List<MenuItem>() {
new MenuItem { Text = "New", IconCss = "e-icons e-file-new", Id="new" },
new MenuItem { Text = "Open", IconCss = "e-icons e-folder-open", Id="open" },
new MenuItem { Text = "Rename", IconCss = "e-icons e-rename", Id="rename" },
new MenuItem { Text = "Save", IconCss = "e-icons e-save", Id="save" }
};
}
<ejs-ribbon id="ribbon">
<e-ribbon-filemenusettings text="File" visible="true" menuItems=fileMenuOptions open="openEvent"></e-ribbon-filemenusettings>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<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 openEvent(args) {
// Here, you can customize your code.
}
</script>
Close
The close event is triggered when the FileMenu popup is closed.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> fileMenuOptions = new List<MenuItem>() {
new MenuItem { Text = "New", IconCss = "e-icons e-file-new", Id="new" },
new MenuItem { Text = "Open", IconCss = "e-icons e-folder-open", Id="open" },
new MenuItem { Text = "Rename", IconCss = "e-icons e-rename", Id="rename" },
new MenuItem { Text = "Save", IconCss = "e-icons e-save", Id="save" }
};
}
<ejs-ribbon id="ribbon">
<e-ribbon-filemenusettings text="File" visible="true" menuItems=fileMenuOptions close="closeEvent"></e-ribbon-filemenusettings>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<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 closeEvent(args) {
// Here, you can customize your code.
}
</script>
Select
The select event is triggered while selecting an item in the ribbon FileMenu.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<MenuItem> fileMenuOptions = new List<MenuItem>() {
new MenuItem { Text = "New", IconCss = "e-icons e-file-new", Id="new" },
new MenuItem { Text = "Open", IconCss = "e-icons e-folder-open", Id="open" },
new MenuItem { Text = "Rename", IconCss = "e-icons e-rename", Id="rename" },
new MenuItem { Text = "Save", IconCss = "e-icons e-save", Id="save" }
};
}
<ejs-ribbon id="ribbon">
<e-ribbon-filemenusettings text="File" visible="true" menuItems=fileMenuOptions select="selectEvent"></e-ribbon-filemenusettings>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<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 selectEvent(args) {
// Here, you can customize your code.
}
</script>
Backstage Menu events
BackStageItemClick
The BackStageItemClick event is triggered when backstage item is selected.
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
@{
List<BackstageItem> backstageItems = new List<BackstageItem>() {
new BackstageItem { Id = "home", Text = "Home", IconCss = "e-icons e-home", Content = processBackstageContent("home"), BackStageItemClick = backStageItemClickEvent(args) },
};
BackStageMenu backstageSettings = new BackStageMenu() { Text = "File", Visible = true, BackButton = new BackstageBackButton { Text = "Close" }, Items = backstageItems };
}
<ejs-ribbon id="ribbon">
<e-ribbon-backstagemenusettings text="File" visible="true" backButton=backButtonSettings items=backstageItems></e-ribbon-backstagemenusettings>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Header & Footer">
<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 backStageItemClickEvent(args) {
// Here, you can customize your code.
}
</script>
Gallery events
popupOpen
The popupOpen event is triggered when the gallery popup opens.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery">
<e-ribbon-gallerySettings popupOpen="popupOpen">
<e-ribbon-gallery-groups>
<e-ribbon-gallery-group header="Styles">
<e-ribbon-gallery-items>
<e-ribbon-gallery-item content="Normal"></e-ribbon-gallery-item>
<e-ribbon-gallery-item content="No Spacing"></e-ribbon-gallery-item>
<e-ribbon-gallery-item content="Heading 1"></e-ribbon-gallery-item>
<e-ribbon-gallery-item content="Heading 2"></e-ribbon-gallery-item>
</e-ribbon-gallery-items>
</e-ribbon-gallery-group>
</e-ribbon-gallery-groups>
</e-ribbon-gallerySettings>
</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 popupOpen() {
// Your required action here
}
</script>
popupClose
The popupClose event is triggered when the gallery popup closes.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery">
<e-ribbon-gallerySettings popupClose="popupClose">
<e-ribbon-gallery-groups>
<e-ribbon-gallery-group header="Styles">
<e-ribbon-gallery-items>
<e-ribbon-gallery-item content="Normal"></e-ribbon-gallery-item>
<e-ribbon-gallery-item content="No Spacing"></e-ribbon-gallery-item>
<e-ribbon-gallery-item content="Heading 1"></e-ribbon-gallery-item>
<e-ribbon-gallery-item content="Heading 2"></e-ribbon-gallery-item>
</e-ribbon-gallery-items>
</e-ribbon-gallery-group>
</e-ribbon-gallery-groups>
</e-ribbon-gallerySettings>
</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 popupClose() {
// Your required action here
}
</script>
`
itemHover
The itemHover event is triggered when hover over the gallery item.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery">
<e-ribbon-gallerySettings itemHover="itemHover">
<e-ribbon-gallery-groups>
<e-ribbon-gallery-group header="Styles">
<e-ribbon-gallery-items>
<e-ribbon-gallery-item content="Normal"></e-ribbon-gallery-item>
<e-ribbon-gallery-item content="No Spacing"></e-ribbon-gallery-item>
<e-ribbon-gallery-item content="Heading 1"></e-ribbon-gallery-item>
<e-ribbon-gallery-item content="Heading 2"></e-ribbon-gallery-item>
</e-ribbon-gallery-items>
</e-ribbon-gallery-group>
</e-ribbon-gallery-groups>
</e-ribbon-gallerySettings>
</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 itemHover() {
// Your required action here
}
</script>
beforeItemRender
The beforeItemRender event is triggered while rendering each gallery item.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery">
<e-ribbon-gallerySettings beforeItemRender="beforeItemRender">
<e-ribbon-gallery-groups>
<e-ribbon-gallery-group header="Styles">
<e-ribbon-gallery-items>
<e-ribbon-gallery-item content="Normal"></e-ribbon-gallery-item>
<e-ribbon-gallery-item content="No Spacing"></e-ribbon-gallery-item>
<e-ribbon-gallery-item content="Heading 1"></e-ribbon-gallery-item>
<e-ribbon-gallery-item content="Heading 2"></e-ribbon-gallery-item>
</e-ribbon-gallery-items>
</e-ribbon-gallery-group>
</e-ribbon-gallery-groups>
</e-ribbon-gallerySettings>
</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 beforeItemRender() {
// Your required action here
}
</script>
beforeSelect
The beforeSelect event is triggered before selecting an item in the Ribbon gallery.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery">
<e-ribbon-gallerySettings beforeSelect="beforeSelect">
<e-ribbon-gallery-groups>
<e-ribbon-gallery-group header="Styles">
<e-ribbon-gallery-items>
<e-ribbon-gallery-item content="Normal"></e-ribbon-gallery-item>
<e-ribbon-gallery-item content="No Spacing"></e-ribbon-gallery-item>
<e-ribbon-gallery-item content="Heading 1"></e-ribbon-gallery-item>
<e-ribbon-gallery-item content="Heading 2"></e-ribbon-gallery-item>
</e-ribbon-gallery-items>
</e-ribbon-gallery-group>
</e-ribbon-gallery-groups>
</e-ribbon-gallerySettings>
</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 beforeSelect() {
// Your required action here
}
</script>
select
The select event is triggered while selecting an item in the Ribbon Gallery.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery">
<e-ribbon-gallerySettings select="select">
<e-ribbon-gallery-groups>
<e-ribbon-gallery-group header="Styles">
<e-ribbon-gallery-items>
<e-ribbon-gallery-item content="Normal"></e-ribbon-gallery-item>
<e-ribbon-gallery-item content="No Spacing"></e-ribbon-gallery-item>
<e-ribbon-gallery-item content="Heading 1"></e-ribbon-gallery-item>
<e-ribbon-gallery-item content="Heading 2"></e-ribbon-gallery-item>
</e-ribbon-gallery-items>
</e-ribbon-gallery-group>
</e-ribbon-gallery-groups>
</e-ribbon-gallerySettings>
</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 select() {
// Your required action here
}
</script>