Events

20 Mar 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.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@Html.EJS().Ribbon("ribbon").TabSelected("function(args){tabSelectedEvent(args)}").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-paste").Content("Paste");
                }).Add();
            }).Add();
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-cut").Content("Cut");
                }).Add();
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-copy").Content("Copy");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function tabSelectedEvent(args) {
        // Here, you can customize your code.
    }
</script>

Tab selecting

The TabSelecting event is triggered before selecting the tab item.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@Html.EJS().Ribbon("ribbon").TabSelecting("function(args){tabSelectingEvent(args)}").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-paste").Content("Paste");
                }).Add();
            }).Add();
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-cut").Content("Cut");
                }).Add();
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-copy").Content("Copy");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function tabSelectingEvent(args) {
        // Here, you can customize your code.
    }
</script>

Ribbon collapsing

The RibbonCollapsing event is triggered before collapsing the ribbon.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@Html.EJS().Ribbon("ribbon").RibbonCollapsing("function(args){ribbonCollapsingEvent(args)}").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-paste").Content("Paste");
                }).Add();
            }).Add();
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-cut").Content("Cut");
                }).Add();
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-copy").Content("Copy");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function ribbonCollapsingEvent(args) {
        // Here, you can customize your code.
    }
</script>

Ribbon expanding

The RibbonExpanding event is triggered before expanding the ribbon.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@Html.EJS().Ribbon("ribbon").RibbonExpanding("function(args){ribbonExpanding(args)}").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-paste").Content("Paste");
                }).Add();
            }).Add();
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-cut").Content("Cut");
                }).Add();
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-copy").Content("Copy");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function ribbonExpanding(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.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@Html.EJS().Ribbon("ribbon").LauncherIconClick("function(args){launchClick(args)}").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").ShowLauncherIcon(true).Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-paste").Content("Paste");
                }).Add();
            }).Add();
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-cut").Content("Cut");
                }).Add();
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-copy").Content("Copy");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function launchClick(args) {
        // Here, you can customize your code.
    }
</script>

Button item events

Clicked

The Clicked event is triggered when the button is clicked.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-cut").Content("Cut").Clicked("function(){clickedEvent()}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function clickedEvent() {
        // Here, you can customize your code.
    }
</script>

Created

The Created event is triggered when the button is created.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-cut").Content("Cut").Created("function(){createdEvent()}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

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

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.CheckBox).CheckBoxSettings(checkBox =>
                {
                    checkBox.Label("Ruler").Checked(false).Change("function(){changeEvent()}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function changeEvent() {
        // Here, you can customize your code.
    }
</script>

Created

The Created event is triggered once the Checkbox is created.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.CheckBox).CheckBoxSettings(checkBox =>
                {
                    checkBox.Label("Ruler").Checked(false).Created("function(){createdEvent()}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function createdEvent() {
        // Here, you can customize your code.
    }
</script>

Colorpicker item events

Change

The Change event is triggered while changing the colors.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.ColorPicker).ColorPickerSettings(colorPicker =>
                {
                    colorPicker.Value("#123456").Change("function(){changeEvent()}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function changeEvent() {
        // Here, you can customize your code.
    }
</script>

Created

The Created event is triggered once the ColorPicker is created.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.ColorPicker).ColorPickerSettings(colorPicker =>
                {
                    colorPicker.Value("#123456").Created("function(){createdEvent()}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function createdEvent() {
        // Here, you can customize your code.
    }
</script>

Open

The Open event is triggered while opening the ColorPicker popup.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.ColorPicker).ColorPickerSettings(colorPicker =>
                {
                    colorPicker.Value("#123456").Open("function(args){openEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

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

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.ColorPicker).ColorPickerSettings(colorPicker =>
                {
                    colorPicker.Value("#123456").Select("function(args){selectEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function selectEvent(args) {
        // Here, you can customize your code.
    }
</script>

Before close

The BeforeClose event is triggered before closing the ColorPicker popup.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.ColorPicker).ColorPickerSettings(colorPicker =>
                {
                    colorPicker.Value("#123456").BeforeClose("function(args){beforeCloseEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function beforeCloseEvent() {
        // Here, you can customize your code.
    }
</script>

Before open

The BeforeOpen event is triggered before opening the ColorPicker popup.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.ColorPicker).ColorPickerSettings(colorPicker =>
                {
                    colorPicker.Value("#123456").BeforeOpen("function(args){beforeOpenEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function beforeOpenEvent(args) {
        // Here, you can customize your code.
    }
</script>

Before tile render

The BeforeTileRender event is triggered while rendering each palette tile.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.ColorPicker).ColorPickerSettings(colorPicker =>
                {
                    colorPicker.Value("#123456").BeforeTileRender("function(args){beforeTileRenderEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

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

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@{ 
    List<string> fontStyle = new List<string>() { "Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia", "Impact", "Segoe Print", "Segoe Script", "Segoe UI", "Symbol", "Times New Roman", "Verdana", "Windings" };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.ComboBox).ComboBoxSettings(comboBox =>
                {
                    comboBox.DataSource(fontStyle).Index(2).Change("function(args){changeEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function changeEvent() {
        // Here, you can customize your code.
    }
</script>

Close

The Close event is triggered when the popup is closed.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@{ 
    List<string> fontStyle = new List<string>() { "Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia", "Impact", "Segoe Print", "Segoe Script", "Segoe UI", "Symbol", "Times New Roman", "Verdana", "Windings" };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.ComboBox).ComboBoxSettings(comboBox =>
                {
                    comboBox.DataSource(fontStyle).Index(2).Close("function(args){closeEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function closeEvent(args) {
        // Here, you can customize your code.
    }
</script>

Open

The Open event is triggered when the popup is opened.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@{ 
    List<string> fontStyle = new List<string>() { "Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia", "Impact", "Segoe Print", "Segoe Script", "Segoe UI", "Symbol", "Times New Roman", "Verdana", "Windings" };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.ComboBox).ComboBoxSettings(comboBox =>
                {
                    comboBox.DataSource(fontStyle).Index(2).Open("function(args){openEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function openEvent(args) {
        // Here, you can customize your code.
    }
</script>

Created

The Created event is triggered once the Combobox is created.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@{ 
    List<string> fontStyle = new List<string>() { "Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia", "Impact", "Segoe Print", "Segoe Script", "Segoe UI", "Symbol", "Times New Roman", "Verdana", "Windings" };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.ComboBox).ComboBoxSettings(comboBox =>
                {
                    comboBox.DataSource(fontStyle).Index(2).Created("function(args){createdEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function createdEvent() {
        // Here, you can customize your code.
    }
</script>

Filtering

The Filtering event triggers on typing a character in the Combobox.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@{ 
    List<string> fontStyle = new List<string>() { "Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia", "Impact", "Segoe Print", "Segoe Script", "Segoe UI", "Symbol", "Times New Roman", "Verdana", "Windings" };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.ComboBox).ComboBoxSettings(comboBox =>
                {
                    comboBox.DataSource(fontStyle).Index(2).Filtering("function(args){filteringEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

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

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@{ 
    List<string> fontStyle = new List<string>() { "Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia", "Impact", "Segoe Print", "Segoe Script", "Segoe UI", "Symbol", "Times New Roman", "Verdana", "Windings" };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.ComboBox).ComboBoxSettings(comboBox =>
                {
                    comboBox.DataSource(fontStyle).Index(2).Select("function(args){selectEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function selectEvent(args) {
        // Here, you can customize your code.
    }
</script>

Before open

The BeforeOpen event triggers before opening the popup.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon

@{ 
    List<string> fontStyle = new List<string>() { "Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia", "Impact", "Segoe Print", "Segoe Script", "Segoe UI", "Symbol", "Times New Roman", "Verdana", "Windings" };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.ComboBox).ComboBoxSettings(comboBox =>
                {
                    comboBox.DataSource(fontStyle).Index(2).BeforeOpen("function(args){beforeOpenEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function beforeOpenEvent(args) {
        // Here, you can customize your code.
    }
</script>

Before close

The BeforeClose event is triggered before closing the DropdownButton popup.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@{
    List<MenuItem> tableOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Table" }, new MenuItem { Text = "This device" }, new MenuItem { Text = "Convert Table" }, new MenuItem { Text = "Excel SpreadSheet" } };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Tables").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.DropDown).DropDownSettings(dropDown =>
                {
                    dropDown.IconCss("e-icons e-table").Content("Table").Items(tableOptions).BeforeClose("function(args){beforeCloseEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function beforeCloseEvent(args) {
        // Here, you can customize your code.
    }
</script>

Before open

The BeforeOpen event is triggered before opening the Dropdown button popup.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@{
    List<MenuItem> tableOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Table" }, new MenuItem { Text = "This device" }, new MenuItem { Text = "Convert Table" }, new MenuItem { Text = "Excel SpreadSheet" } };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Tables").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.DropDown).DropDownSettings(dropDown =>
                {
                    dropDown.IconCss("e-icons e-table").Content("Table").Items(tableOptions).BeforeOpen("function(args){beforeOpenEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

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

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@{
    List<MenuItem> tableOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Table" }, new MenuItem { Text = "This device" }, new MenuItem { Text = "Convert Table" }, new MenuItem { Text = "Excel SpreadSheet" } };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Tables").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.DropDown).DropDownSettings(dropDown =>
                {
                    dropDown.IconCss("e-icons e-table").Content("Table").Items(tableOptions).BeforeItemRender("function(args){beforeItemRenderEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function beforeItemRenderEvent(args) {
        // Here, you can customize your code.
    }
</script>

Open

The Open event is triggered while opening the Dropdown button popup.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@{
    List<MenuItem> tableOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Table" }, new MenuItem { Text = "This device" }, new MenuItem { Text = "Convert Table" }, new MenuItem { Text = "Excel SpreadSheet" } };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Tables").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.DropDown).DropDownSettings(dropDown =>
                {
                    dropDown.IconCss("e-icons e-table").Content("Table").Items(tableOptions).Open("function(args){openEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function openEvent(args) {
        // Here, you can customize your code.
    }
</script>

Close

The Close event is triggered while closing the Dropdown button popup.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@{
    List<MenuItem> tableOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Table" }, new MenuItem { Text = "This device" }, new MenuItem { Text = "Convert Table" }, new MenuItem { Text = "Excel SpreadSheet" } };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Tables").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.DropDown).DropDownSettings(dropDown =>
                {
                    dropDown.IconCss("e-icons e-table").Content("Table").Items(tableOptions).Close("function(args){closeEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function closeEvent(args) {
        // Here, you can customize your code.
    }
</script>

Created

The Created event is triggered when the DropDown is created.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@{
    List<MenuItem> tableOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Table" }, new MenuItem { Text = "This device" }, new MenuItem { Text = "Convert Table" }, new MenuItem { Text = "Excel SpreadSheet" } };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Tables").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.DropDown).DropDownSettings(dropDown =>
                {
                    dropDown.IconCss("e-icons e-table").Content("Table").Items(tableOptions).Created("function(args){createdEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function createdEvent(args) {
        // Here, you can customize your code.
    }
</script>

Select

The Select event is triggered while selecting an action item in the Dropdown button popup.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@{
    List<MenuItem> tableOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Table" }, new MenuItem { Text = "This device" }, new MenuItem { Text = "Convert Table" }, new MenuItem { Text = "Excel SpreadSheet" } };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Tables").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.DropDown).DropDownSettings(dropDown =>
                {
                    dropDown.IconCss("e-icons e-table").Content("Table").Items(tableOptions).Select("function(args){selectEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

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

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations


@{
    List<MenuItem> pasteOptions = new List<MenuItem>() { new MenuItem { Text = "Keep Source Format" }, new MenuItem { Text = "Merge format" }, new MenuItem { Text = "Keep text only" } };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.SplitButton).SplitButtonSettings(splitButton =>
                {
                    splitButton.IconCss("e-icons e-paste").Items(pasteOptions).Content("Paste").BeforeClose("function(args){beforeCloseEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function beforeCloseEvent(args) {
        // Here, you can customize your code.
    }
</script>

Before open

The BeforeOpen event is triggered before opening the SplitButton popup.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations


@{
    List<MenuItem> pasteOptions = new List<MenuItem>() { new MenuItem { Text = "Keep Source Format" }, new MenuItem { Text = "Merge format" }, new MenuItem { Text = "Keep text only" } };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.SplitButton).SplitButtonSettings(splitButton =>
                {
                    splitButton.IconCss("e-icons e-paste").Items(pasteOptions).Content("Paste").BeforeOpen("function(args){beforeOpenEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

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

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations


@{
    List<MenuItem> pasteOptions = new List<MenuItem>() { new MenuItem { Text = "Keep Source Format" }, new MenuItem { Text = "Merge format" }, new MenuItem { Text = "Keep text only" } };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.SplitButton).SplitButtonSettings(splitButton =>
                {
                    splitButton.IconCss("e-icons e-paste").Items(pasteOptions).Content("Paste").BeforeItemRender("function(args){beforeItemRenderEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function beforeItemRenderEvent(args) {
        // Here, you can customize your code.
    }
</script>

Open

The Open event is triggered while opening the SplitButton popup.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations


@{
    List<MenuItem> pasteOptions = new List<MenuItem>() { new MenuItem { Text = "Keep Source Format" }, new MenuItem { Text = "Merge format" }, new MenuItem { Text = "Keep text only" } };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.SplitButton).SplitButtonSettings(splitButton =>
                {
                    splitButton.IconCss("e-icons e-paste").Items(pasteOptions).Content("Paste").Open("function(args){openEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function openEvent(args) {
        // Here, you can customize your code.
    }
</script>

Close

The Close event is triggered while closing the SplitButton popup.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations


@{
    List<MenuItem> pasteOptions = new List<MenuItem>() { new MenuItem { Text = "Keep Source Format" }, new MenuItem { Text = "Merge format" }, new MenuItem { Text = "Keep text only" } };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.SplitButton).SplitButtonSettings(splitButton =>
                {
                    splitButton.IconCss("e-icons e-paste").Items(pasteOptions).Content("Paste").Close("function(args){closeEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function closeEvent(args) {
        // Here, you can customize your code.
    }
</script>

Created

The Created event is triggered when the SplitButton is created.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations


@{
    List<MenuItem> pasteOptions = new List<MenuItem>() { new MenuItem { Text = "Keep Source Format" }, new MenuItem { Text = "Merge format" }, new MenuItem { Text = "Keep text only" } };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.SplitButton).SplitButtonSettings(splitButton =>
                {
                    splitButton.IconCss("e-icons e-paste").Items(pasteOptions).Content("Paste").Created("function(args){createdEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function createdEvent(args) {
        // Here, you can customize your code.
    }
</script>

Select

The Select event is triggered while selecting an action item in the SplitButton popup.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations


@{
    List<MenuItem> pasteOptions = new List<MenuItem>() { new MenuItem { Text = "Keep Source Format" }, new MenuItem { Text = "Merge format" }, new MenuItem { Text = "Keep text only" } };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.SplitButton).SplitButtonSettings(splitButton =>
                {
                    splitButton.IconCss("e-icons e-paste").Items(pasteOptions).Content("Paste").Select("function(args){selectEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

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

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations


@{
    List<MenuItem> pasteOptions = new List<MenuItem>() { new MenuItem { Text = "Keep Source Format" }, new MenuItem { Text = "Merge format" }, new MenuItem { Text = "Keep text only" } };
}
@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.SplitButton).SplitButtonSettings(splitButton =>
                {
                    splitButton.IconCss("e-icons e-paste").Items(pasteOptions).Content("Paste").Click("function(args){clickEvent(args)}");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function clickEvent(args) {
        // Here, you can customize your code.
    }
</script>

GroupButton item events

BeforeClick

The BeforeClick event is triggered before selecting a button from the groupbutton items.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@{
    List<RibbonGroupButtonItem> events = new List<RibbonGroupButtonItem>() {

      new RibbonGroupButtonItem { IconCss = "e-icons e-bold", Content = "Bold", BeforeClick = "function(args){beforClickEvent(args)}" },
      new RibbonGroupButtonItem {IconCss = "e-icons e-italic", Content = "Italic", Selected = true, BeforeClick = "function(args){beforClickEvent(args)}" },
      new RibbonGroupButtonItem {IconCss = "e-icons e-underline", Content = "Underline", BeforeClick = "function(args){beforClickEvent(args)}" },
      new RibbonGroupButtonItem { IconCss = "e-icons e-strikethrough", Content = "Strikethrough", BeforeClick = "function(args){beforClickEvent(args)}" }
    };
}


@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Paragraph").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.GroupButton).AllowedSizes(RibbonItemSize.Small).GroupButtonSettings(groupButton =>
                {
                    groupButton.Selection(RibbonGroupButtonSelection.Multiple).Items(events);
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function beforClickEvent(args) {
        // Here, you can customize your code.
    }
</script>

Click

The Click event is triggered when selecting a button from the groupbutton items.

Index.cshtml
@using Syncfusion.EJ2
@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 = "function(args){clickEvent(args)}" },
      new RibbonGroupButtonItem {IconCss = "e-icons e-align-center", Content = "Align Center", Click = "function(args){clickEvent(args)}", Selected = true },
      new RibbonGroupButtonItem {IconCss = "e-icons e-align-right", Content = "Align Right", Click = "function(args){clickEvent(args)}" },
      new RibbonGroupButtonItem { IconCss = "e-icons e-justify", Content = "Justify", Click = "function(args){clickEvent(args)}" }
    };
}


@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Paragraph").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.GroupButton).AllowedSizes(RibbonItemSize.Small).GroupButtonSettings(groupButton =>
                {
                    groupButton.Selection(RibbonGroupButtonSelection.Single).Items(events);
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function clickEvent(args) {
        // Here, you can customize your code.
    }
</script>

FileMenu events

Before close

The BeforeClose event is triggered before closing the FileMenu popup.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@{
    List<MenuItem> fileOptions = new List<MenuItem>()
{
        new MenuItem { Text = "New", IconCss = "e-icons e-file-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 as", IconCss = "e-icons e-save", Id="save" }
    };
}
@Html.EJS().Ribbon("ribbon").FileMenu(file =>
{
    file.Visible(true).MenuItems(fileOptions).BeforeClose("function(args){beforeCloseEvent(args)}");
}).Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-cut").Content("Cut");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function beforeCloseEvent(args) {
        // Here, you can customize your code.
    }
</script>

Before open

The BeforeOpen event is triggered before opening the FileMenu popup.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@{
    List<MenuItem> fileOptions = new List<MenuItem>()
{
        new MenuItem { Text = "New", IconCss = "e-icons e-file-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 as", IconCss = "e-icons e-save", Id="save" }
    };
}
@Html.EJS().Ribbon("ribbon").FileMenu(file =>
{
    file.Visible(true).MenuItems(fileOptions).BeforeOpen("function(args){beforeOpenEvent(args)}");
}).Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-cut").Content("Cut");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

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

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@{
    List<MenuItem> fileOptions = new List<MenuItem>()
{
        new MenuItem { Text = "New", IconCss = "e-icons e-file-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 as", IconCss = "e-icons e-save", Id="save" }
    };
}
@Html.EJS().Ribbon("ribbon").FileMenu(file =>
{
    file.Visible(true).MenuItems(fileOptions).BeforeItemRender("function(args){beforeItemRenderEvent(args)}");
}).Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-cut").Content("Cut");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function beforeItemRenderEvent(args) {
        // Here, you can customize your code.
    }
</script>

Open

The Open event is triggered when the FileMenu popup is opened.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@{
    List<MenuItem> fileOptions = new List<MenuItem>()
{
        new MenuItem { Text = "New", IconCss = "e-icons e-file-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 as", IconCss = "e-icons e-save", Id="save" }
    };
}
@Html.EJS().Ribbon("ribbon").FileMenu(file =>
{
    file.Visible(true).MenuItems(fileOptions).Open("function(args){openEvent(args)}");
}).Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-cut").Content("Cut");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function openEvent(args) {
        // Here, you can customize your code.
    }
</script>

Close

The Close event is triggered when FileMenu popup is closed.

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@{
    List<MenuItem> fileOptions = new List<MenuItem>()
{
        new MenuItem { Text = "New", IconCss = "e-icons e-file-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 as", IconCss = "e-icons e-save", Id="save" }
    };
}
@Html.EJS().Ribbon("ribbon").FileMenu(file =>
{
    file.Visible(true).MenuItems(fileOptions).Close("function(args){closeEvent(args)}");
}).Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-cut").Content("Cut");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

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

Index.cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@{
    List<MenuItem> fileOptions = new List<MenuItem>()
{
        new MenuItem { Text = "New", IconCss = "e-icons e-file-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 as", IconCss = "e-icons e-save", Id="save" }
    };
}
@Html.EJS().Ribbon("ribbon").FileMenu(file =>
{
    file.Visible(true).MenuItems(fileOptions).Select("function(args){selectEvent(args)}");
}).Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-cut").Content("Cut");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function selectEvent(args) {
        // Here, you can customize your code.
    }
</script>

BackStageItemClick

The BackStageItemClick event is triggered when backstage item is selected.

Index.cshtml
@using Syncfusion.EJ2
@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 };
}
@Html.EJS().Ribbon("backstage-ribbon").BackStageMenu(backstageSettings)).Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-cut").Content("Cut");
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
    function backStageItemClickEvent(args) {
        // Here, you can customize your code.
    }
</script>

Gallery events

popupOpen

The PopupOpen event is triggered when the gallery popup opens.

Index.cshtml
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
  tab.Header("Home").Groups(group =>

  {
    group.Header("Gallery").Collections(collections =>
    {
      collections.Items(items =>
      {
        items.Type(RibbonItemType.Gallery).GallerySettings(gallery =>
        {
          gallery.PopupOpen("popupOpen").Groups(galleryGroups =>
          {
            galleryGroups.Header("Styles").Items(galleryItems =>
            {
              galleryItems.Content("Normal").Add();
              galleryItems.Content("No Spacing").Add();
              galleryItems.Content("Heading 1").Add();
              galleryItems.Content("Heading 2").Add();
            }).Add();
          });
        }).Add();
      }).Add();
    }).Add();
  }).Add();
}).Render()

<script>
  function popupOpen() {
    // Your required action here
  }
</script>

popupClose

The PopupClose event is triggered when the gallery popup closes.

Index.cshtml
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
  tab.Header("Home").Groups(group =>

  {
    group.Header("Gallery").Collections(collections =>
    {
      collections.Items(items =>
      {
        items.Type(RibbonItemType.Gallery).GallerySettings(gallery =>
        {
          gallery.PopupClose("popupClose").Groups(galleryGroups =>
          {
            galleryGroups.Header("Styles").Items(galleryItems =>
            {
              galleryItems.Content("Normal").Add();
              galleryItems.Content("No Spacing").Add();
              galleryItems.Content("Heading 1").Add();
              galleryItems.Content("Heading 2").Add();
            }).Add();
          });
        }).Add();
      }).Add();
    }).Add();
  }).Add();
}).Render()

<script>
  function popupClose() {
    // Your required action here
  }
</script>

`

itemHover

The ItemHover event is triggered when hover over the gallery item.

Index.cshtml
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
  tab.Header("Home").Groups(group =>

  {
    group.Header("Gallery").Collections(collections =>
    {
      collections.Items(items =>
      {
        items.Type(RibbonItemType.Gallery).GallerySettings(gallery =>
        {
          gallery.ItemHover("itemHover").Groups(galleryGroups =>
          {
            galleryGroups.Header("Styles").Items(galleryItems =>
            {
              galleryItems.Content("Normal").Add();
              galleryItems.Content("No Spacing").Add();
              galleryItems.Content("Heading 1").Add();
              galleryItems.Content("Heading 2").Add();
            }).Add();
          });
        }).Add();
      }).Add();
    }).Add();
  }).Add();
}).Render()

<script>
  function itemHover() {
    // Your required action here
  }
</script>

beforeItemRender

The BeforeItemRender event is triggered while rendering each gallery item.

Index.cshtml
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
  tab.Header("Home").Groups(group =>

  {
    group.Header("Gallery").Collections(collections =>
    {
      collections.Items(items =>
      {
        items.Type(RibbonItemType.Gallery).GallerySettings(gallery =>
        {
          gallery.BeforeItemRender("beforeItemRender").Groups(galleryGroups =>
          {
            galleryGroups.Header("Styles").Items(galleryItems =>
            {
              galleryItems.Content("Normal").Add();
              galleryItems.Content("No Spacing").Add();
              galleryItems.Content("Heading 1").Add();
              galleryItems.Content("Heading 2").Add();
            }).Add();
          });
        }).Add();
      }).Add();
    }).Add();
  }).Add();
}).Render()

<script>
  function beforeItemRender() {
    // Your required action here
  }
</script>

beforeSelect

The BeforeSelect event is triggered before selecting an item in the Ribbon gallery.

Index.cshtml
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
  tab.Header("Home").Groups(group =>

  {
    group.Header("Gallery").Collections(collections =>
    {
      collections.Items(items =>
      {
        items.Type(RibbonItemType.Gallery).GallerySettings(gallery =>
        {
          gallery.BeforeSelect("beforeSelect").Groups(galleryGroups =>
          {
            galleryGroups.Header("Styles").Items(galleryItems =>
            {
              galleryItems.Content("Normal").Add();
              galleryItems.Content("No Spacing").Add();
              galleryItems.Content("Heading 1").Add();
              galleryItems.Content("Heading 2").Add();
            }).Add();
          });
        }).Add();
      }).Add();
    }).Add();
  }).Add();
}).Render()

<script>
  function beforeSelect() {
    // Your required action here
  }
</script>

select

The Select event is triggered while selecting an item in the Ribbon Gallery.

Index.cshtml
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
  tab.Header("Home").Groups(group =>

  {
    group.Header("Gallery").Collections(collections =>
    {
      collections.Items(items =>
      {
        items.Type(RibbonItemType.Gallery).GallerySettings(gallery =>
        {
          gallery.Select("select").Groups(galleryGroups =>
          {
            galleryGroups.Header("Styles").Items(galleryItems =>
            {
              galleryItems.Content("Normal").Add();
              galleryItems.Content("No Spacing").Add();
              galleryItems.Content("Heading 1").Add();
              galleryItems.Content("Heading 2").Add();
            }).Add();
          });
        }).Add();
      }).Add();
    }).Add();
  }).Add();
}).Render()

<script>
  function select() {
    // Your required action here
  }
</script>

Events

Tab selected

Tab selecting

Ribbon collapsing

Ribbon expanding

Group launcher click

Button item events

Clicked

Created

Checkbox item events

Change

Created

Colorpicker item events

Change

Created

Open

Select

Before close

Before open

Before tile render

ComboBox item events

Change

Close

Open

Created

Filtering

Select

Before open

DropDown item events

Before close

Before open

Before item render

Open

Close

Created

Select

SplitButton item events

Before close

Before open

Before item render

Open

Close

Created

Select

Click

GroupButton item events

BeforeClick

Click

FileMenu events

Before close

Before open

Before item render

Open

Close

Select

Backstage Menu events

BackStageItemClick

Gallery events

popupOpen

popupClose

itemHover

beforeItemRender

beforeSelect

select