Gallery Items in ASP.NET MVC Ribbon control

22 Mar 202424 minutes to read

The Ribbon supports Gallery view which allows users to perform specific actions by displaying a collection of related items, including icons, content, or images. You can render the gallery item by setting the Type property to Gallery and customize it by using the RibbonGallerySettings, which provides options such as Groups, ItemCount, PopupHeight, PopupWidth and more.

Groups

You can render the groups inside the gallery items by using Groups property and customize the groups using RibbonGalleryGroup, which provides options such as Items, CssClass, Header and more.

Adding items

You can render the gallery items by using Items property and customize using the RibbonGalleryItem, which provides options such as Content, IconCss, Disabled and more.

@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.Id("clipboard").Header("Clipboard").GroupIconCss("e-icons e-paste").Collections(collection =>
    {
      collection.Items(items =>
      {
        items.Type(RibbonItemType.SplitButton).Id("pastebtn").AllowedSizes(RibbonItemSize.Large).SplitButtonSettings(splitButton =>
        {
          splitButton.IconCss("e-icons e-paste").Items(pasteOptions).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();
        items.Type(RibbonItemType.Button).ButtonSettings(button =>
        {
          button.IconCss("e-icons e-format-painter").Content("Format Painter");
        }).Add();
      }).Add();
    }).Add();
    group.Header("Gallery").Collections(collections =>
    {
      collections.Items(items =>
      {
        items.Type(RibbonItemType.Gallery).GallerySettings(gallery =>
        {
          gallery.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()

ASP.NET MVC Ribbon Control with gallery items

Adding content

You can use the Content property to define the text content for the gallery item.

@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.Id("clipboard").Header("Clipboard").GroupIconCss("e-icons e-paste").Collections(collection =>
    {
      collection.Items(items =>
      {
        items.Type(RibbonItemType.SplitButton).Id("pastebtn").AllowedSizes(RibbonItemSize.Large).SplitButtonSettings(splitButton =>
        {
          splitButton.IconCss("e-icons e-paste").Items(pasteOptions).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();
        items.Type(RibbonItemType.Button).ButtonSettings(button =>
        {
          button.IconCss("e-icons e-format-painter").Content("Format Painter");
        }).Add();
      }).Add();
    }).Add();
    group.Header("Gallery").Collections(collections =>
    {
      collections.Items(items =>
      {
        items.Type(RibbonItemType.Gallery).GallerySettings(gallery =>
        {
          gallery.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()

ASP.NET MVC Ribbon Control with gallery content

Adding icons

You can use the IconCss property to define the icons for the gallery item.

@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.Id("clipboard").Header("Clipboard").GroupIconCss("e-icons e-paste").Collections(collection =>
    {
      collection.Items(items =>
      {
        items.Type(RibbonItemType.SplitButton).Id("pastebtn").AllowedSizes(RibbonItemSize.Large).SplitButtonSettings(splitButton =>
        {
          splitButton.IconCss("e-icons e-paste").Items(pasteOptions).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();
        items.Type(RibbonItemType.Button).ButtonSettings(button =>
        {
          button.IconCss("e-icons e-format-painter").Content("Format Painter");
        }).Add();
      }).Add();
    }).Add();
    group.Header("Gallery").Collections(collections =>
    {
      collections.Items(items =>
      {
        items.Type(RibbonItemType.Gallery).GallerySettings(gallery =>
        {
          gallery.Groups(galleryGroups =>
          {
            galleryGroups.Header("Transitions").Items(galleryItems =>
            {
              galleryItems.Content("None").IconCss("e-icons e-rectangle").Add();
              galleryItems.Content("Fade").IconCss("e-icons e-send-backward").Add();
              galleryItems.Content("Reveal").IconCss("e-icons e-bring-forward").Add();
              galleryItems.Content("Zoom").IconCss("e-icons e-zoom-to-fit").Add();
            }).Add();
          });
        }).Add();
      }).Add();
    }).Add();
  }).Add();
}).Render()

ASP.NET MVC Ribbon Control with gallery icons

Adding html attributes

You can use the HtmlAttributes property to add HTML attributes to the Ribbon gallery item.

The following sample showcases how to add title attribute to the gallery item using HtmlAttributes property.

@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.Id("clipboard").Header("Clipboard").GroupIconCss("e-icons e-paste").Collections(collection =>
    {
      collection.Items(items =>
      {
        items.Type(RibbonItemType.SplitButton).Id("pastebtn").AllowedSizes(RibbonItemSize.Large).SplitButtonSettings(splitButton =>
        {
          splitButton.IconCss("e-icons e-paste").Items(pasteOptions).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();
        items.Type(RibbonItemType.Button).ButtonSettings(button =>
        {
          button.IconCss("e-icons e-format-painter").Content("Format Painter");
        }).Add();
      }).Add();
    }).Add();
    group.Header("Gallery").Collections(collections =>
    {
      collections.Items(items =>
      {
        items.Type(RibbonItemType.Gallery).GallerySettings(gallery =>
        {
          gallery.Groups(galleryGroups =>
          {
            galleryGroups.Header("Styles").Items(galleryItems =>
            {
              galleryItems.Content("Normal").HtmlAttributes(new Dictionary<string, object>() { { "title", "Normal" } }).Add();
              galleryItems.Content("No Spacing").HtmlAttributes(new Dictionary<string, object>() { { "title", "No Spacing" } }).Add();
              galleryItems.Content("Heading 1").HtmlAttributes(new Dictionary<string, object>() { { "title", "Heading 1" } }).Add();
              galleryItems.Content("Heading 2").HtmlAttributes(new Dictionary<string, object>() { { "title", "Heading 2" } }).Add();
            }).Add();
          });
        }).Add();
      }).Add();
    }).Add();
  }).Add();
}).Render()

ASP.NET MVC Ribbon Control with Html attributes

Css class

You can use the CssClass property to customize the gallery item.

The following sample showcases how to customize the appearance of each gallery item using the CssClass property .

@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.Id("clipboard").Header("Clipboard").GroupIconCss("e-icons e-paste").Collections(collection =>
    {
      collection.Items(items =>
      {
        items.Type(RibbonItemType.SplitButton).Id("pastebtn").AllowedSizes(RibbonItemSize.Large).SplitButtonSettings(splitButton =>
        {
          splitButton.IconCss("e-icons e-paste").Items(pasteOptions).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();
        items.Type(RibbonItemType.Button).ButtonSettings(button =>
        {
          button.IconCss("e-icons e-format-painter").Content("Format Painter");
        }).Add();
      }).Add();
    }).Add();
    group.Header("Gallery").Collections(collections =>
    {
      collections.Items(items =>
      {
        items.Type(RibbonItemType.Gallery).GallerySettings(gallery =>
        {
          gallery.Groups(galleryGroups =>
          {
            galleryGroups.Header("Good, Bad and Neutral").Items(galleryItems =>
            {
              galleryItems.Content("Normal").CssClass("normal").Add();
              galleryItems.Content("Bad").CssClass("bad").Add();
              galleryItems.Content("Good").CssClass("good").Add();
              galleryItems.Content("Neutral").CssClass("neutral").Add();
            }).Add();
          });
        }).Add();
      }).Add();
    }).Add();
  }).Add();
}).Render()

<style>
  .e-ribbon-gallery-item {
    margin: 5px;
  }

  .e-ribbon-gallery-item.normal {
    background: #f0f0f0;
    color: #333;
  }

  .e-ribbon-gallery-item.bad {
    background: #ffb6b6;
    color: #800000;
  }

  .e-ribbon-gallery-item.good {
    background: #c7ebc9;
    color: #004d00;
  }

  .e-ribbon-gallery-item.neutral {
    background: #eedd9d;
    color: #6c5429;
    }
</style>

ASP.NET MVC Ribbon Control with gallery item Cssclass

Disabled

You can use the Disabled property to disable the Ribbon gallery item. It prevents the user interaction when set to true. By default, the value is false.

@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.Id("clipboard").Header("Clipboard").GroupIconCss("e-icons e-paste").Collections(collection =>
    {
      collection.Items(items =>
      {
        items.Type(RibbonItemType.SplitButton).Id("pastebtn").AllowedSizes(RibbonItemSize.Large).SplitButtonSettings(splitButton =>
        {
          splitButton.IconCss("e-icons e-paste").Items(pasteOptions).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();
        items.Type(RibbonItemType.Button).ButtonSettings(button =>
        {
          button.IconCss("e-icons e-format-painter").Content("Format Painter");
        }).Add();
      }).Add();
    }).Add();
    group.Header("Gallery").Collections(collections =>
    {
      collections.Items(items =>
      {
        items.Type(RibbonItemType.Gallery).GallerySettings(gallery =>
        {
          gallery.Groups(galleryGroups =>
          {
            galleryGroups.Header("Styles").Items(galleryItems =>
            {
              galleryItems.Content("Normal").Disabled(true).Add();
              galleryItems.Content("No Spacing").Add();
              galleryItems.Content("Heading 1").Add();
              galleryItems.Content("Heading 2").Add();
            }).Add();
          });
        }).Add();
      }).Add();
    }).Add();
  }).Add();
}).Render()

ASP.NET MVC Ribbon Control with gallery item disabled

Custom header

You can use the Header property to set header for the group items in the Ribbon gallery popup.

@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.Id("clipboard").Header("Clipboard").GroupIconCss("e-icons e-paste").Collections(collection =>
    {
      collection.Items(items =>
      {
        items.Type(RibbonItemType.SplitButton).Id("pastebtn").AllowedSizes(RibbonItemSize.Large).SplitButtonSettings(splitButton =>
        {
          splitButton.IconCss("e-icons e-paste").Items(pasteOptions).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();
        items.Type(RibbonItemType.Button).ButtonSettings(button =>
        {
          button.IconCss("e-icons e-format-painter").Content("Format Painter");
        }).Add();
      }).Add();
    }).Add();
    group.Header("Gallery").Collections(collections =>
    {
      collections.Items(items =>
      {
        items.Type(RibbonItemType.Gallery).GallerySettings(gallery =>
        {
          gallery.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()

ASP.NET MVC Ribbon Control with gallery group header

Setting item width

You can use the ItemWidth property to specify the width of gallery items.

Setting item height

You can use the ItemHeight property to set the height of the gallery items. If the ItemHeight of the gallery item is smaller the remaining gallery items are aligned based on the ItemCount specified.

The provided example demonstrates how to customize gallery items using the ItemWidth and ItemHeight properties.

@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.Id("clipboard").Header("Clipboard").GroupIconCss("e-icons e-paste").Collections(collection =>
    {
      collection.Items(items =>
      {
        items.Type(RibbonItemType.SplitButton).Id("pastebtn").AllowedSizes(RibbonItemSize.Large).SplitButtonSettings(splitButton =>
        {
          splitButton.IconCss("e-icons e-paste").Items(pasteOptions).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();
        items.Type(RibbonItemType.Button).ButtonSettings(button =>
        {
          button.IconCss("e-icons e-format-painter").Content("Format Painter");
        }).Add();
      }).Add();
    }).Add();
    group.Header("Gallery").Collections(collections =>
    {
      collections.Items(items =>
      {
        items.Type(RibbonItemType.Gallery).GallerySettings(gallery =>
        {
          gallery.PopupWidth("350").Groups(galleryGroups =>
          {
            galleryGroups.Header("Styles").ItemWidth("100").ItemHeight("30").Items(galleryItems =>
            {
              galleryItems.Content("Normal").Add();
              galleryItems.Content("No Spacing").Add();
              galleryItems.Content("Heading 1").Add();
              galleryItems.Content("Heading 2").Add();
              galleryItems.Content("Title").Add();
              galleryItems.Content("Subtitle").Add();
            }).Add();
          });
        }).Add();
      }).Add();
    }).Add();
  }).Add();
}).Render()

ASP.NET MVC Ribbon Control with gallery items width and height

Group styling

You can use the CssClass property to customize the appearance of gallery groups.

@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.Id("clipboard").Header("Clipboard").GroupIconCss("e-icons e-paste").Collections(collection =>
    {
      collection.Items(items =>
      {
        items.Type(RibbonItemType.SplitButton).Id("pastebtn").AllowedSizes(RibbonItemSize.Large).SplitButtonSettings(splitButton =>
        {
          splitButton.IconCss("e-icons e-paste").Items(pasteOptions).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();
        items.Type(RibbonItemType.Button).ButtonSettings(button =>
        {
          button.IconCss("e-icons e-format-painter").Content("Format Painter");
        }).Add();
      }).Add();
    }).Add();
    group.Header("Gallery").Collections(collections =>
    {
      collections.Items(items =>
      {
        items.Type(RibbonItemType.Gallery).GallerySettings(gallery =>
        {
          gallery.Groups(galleryGroups =>
          {
            galleryGroups.Header("Styles").CssClass("custom-group").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()

<style>
  .custom-group {
    font-style: italic;
  }
</style>

ASP.NET MVC Ribbon Control with gallery group css

Setting item count

You can customize the number if items to be displayed in Ribbon gallery by using the ItemCount property. By default the ItemCount will be 3.

The following example showcases the utilization of the ItemCount property, displaying a ribbon gallery with 4 items.

@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.Id("clipboard").Header("Clipboard").GroupIconCss("e-icons e-paste").Collections(collection =>
    {
      collection.Items(items =>
      {
        items.Type(RibbonItemType.SplitButton).Id("pastebtn").AllowedSizes(RibbonItemSize.Large).SplitButtonSettings(splitButton =>
        {
          splitButton.IconCss("e-icons e-paste").Items(pasteOptions).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();
        items.Type(RibbonItemType.Button).ButtonSettings(button =>
        {
          button.IconCss("e-icons e-format-painter").Content("Format Painter");
        }).Add();
      }).Add();
    }).Add();
    group.Header("Gallery").Collections(collections =>
    {
      collections.Items(items =>
      {
        items.Type(RibbonItemType.Gallery).GallerySettings(gallery =>
        {
          gallery.ItemCount(4).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()

ASP.NET MVC Ribbon Control with gallery items count

Setting selected item

You can use the SelectedItemIndex property to define the currently selected item in the Ribbon gallery items.

@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.Id("clipboard").Header("Clipboard").GroupIconCss("e-icons e-paste").Collections(collection =>
    {
      collection.Items(items =>
      {
        items.Type(RibbonItemType.SplitButton).Id("pastebtn").AllowedSizes(RibbonItemSize.Large).SplitButtonSettings(splitButton =>
        {
          splitButton.IconCss("e-icons e-paste").Items(pasteOptions).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();
        items.Type(RibbonItemType.Button).ButtonSettings(button =>
        {
          button.IconCss("e-icons e-format-painter").Content("Format Painter");
        }).Add();
      }).Add();
    }).Add();
    group.Header("Gallery").Collections(collections =>
    {
      collections.Items(items =>
      {
        items.Type(RibbonItemType.Gallery).GallerySettings(gallery =>
        {
          gallery.SelectedItemIndex(1).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()

ASP.NET MVC Ribbon Control with gallery selected item index

Setting popup height

You can specify the height of the gallery popup by using the PopupHeight property.

Setting popup width

you can specify the width of the gallery popup by using the PopupWidth propery.

The example demonstrates the customization of popup with PopupHeight and PopupWidth properties.

@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.Id("clipboard").Header("Clipboard").GroupIconCss("e-icons e-paste").Collections(collection =>
    {
      collection.Items(items =>
      {
        items.Type(RibbonItemType.SplitButton).Id("pastebtn").AllowedSizes(RibbonItemSize.Large).SplitButtonSettings(splitButton =>
        {
          splitButton.IconCss("e-icons e-paste").Items(pasteOptions).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();
        items.Type(RibbonItemType.Button).ButtonSettings(button =>
        {
          button.IconCss("e-icons e-format-painter").Content("Format Painter");
        }).Add();
      }).Add();
    }).Add();
    group.Header("Gallery").Collections(collections =>
    {
      collections.Items(items =>
      {
        items.Type(RibbonItemType.Gallery).GallerySettings(gallery =>
        {
          gallery.PopupWidth("350").PopupHeight("180").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();
              galleryItems.Content("Title").Add();
              galleryItems.Content("Subtitle").Add();
            }).Add();
          });
        }).Add();
      }).Add();
    }).Add();
  }).Add();
}).Render()

ASP.NET MVC Ribbon Control with gallery popup width and height

Template

You can customize the default appearance and content of Ribbon gallery items by using the Template property.

You can customize the appearance of Ribbon gallery popup by using the PopupTemplate property.

The below example demonstrates the customization of both the Template and PopupTemplate properties:

@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.Id("clipboard").Header("Clipboard").GroupIconCss("e-icons e-paste").Collections(collection =>
    {
      collection.Items(items =>
      {
        items.Type(RibbonItemType.SplitButton).Id("pastebtn").AllowedSizes(RibbonItemSize.Large).SplitButtonSettings(splitButton =>
        {
          splitButton.IconCss("e-icons e-paste").Items(pasteOptions).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();
        items.Type(RibbonItemType.Button).ButtonSettings(button =>
        {
          button.IconCss("e-icons e-format-painter").Content("Format Painter");
        }).Add();
      }).Add();
    }).Add();
    group.Header("Table Styles").Collections(collections =>
    {
      collections.Items(items =>
      {
        items.Type(RibbonItemType.Gallery).GallerySettings(gallery =>
        {
          gallery.ItemCount(7).Template("#galleryTemplate").PopupTemplate("#galleryTemplate").Groups(galleryGroups =>
          {
            galleryGroups.Header("Plain Tables").Items(galleryItems =>
            {
              galleryItems.CssClass("plainTables_item_1").Add();
              galleryItems.CssClass("plainTables_item_2").Add();
              galleryItems.CssClass("plainTables_item_3").Add();
              galleryItems.CssClass("plainTables_item_4").Add();
              galleryItems.CssClass("plainTables_item_5").Add();
              galleryItems.CssClass("plainTables_item_6").Add();
              galleryItems.CssClass("plainTables_item_7").Add();
            }).Add();
            galleryGroups.Header("List Tables").Items(galleryItems =>
            {
              galleryItems.CssClass("listTables_item_1").Add();
              galleryItems.CssClass("listTables_item_2").Add();
              galleryItems.CssClass("listTables_item_3").Add();
              galleryItems.CssClass("listTables_item_4").Add();
              galleryItems.CssClass("listTables_item_5").Add();
              galleryItems.CssClass("listTables_item_6").Add();
              galleryItems.CssClass("listTables_item_7").Add();
            }).Add();
          });
        }).Add();
      }).Add();
    }).Add();
    group.Id("insert").Header("Insert").Collections(collection =>
    {
      collection.Items(items =>
      {
        items.Type(RibbonItemType.Button).ButtonSettings(button =>
        {
          button.IconCss("e-icons e-insert-above").Content("Above");
        }).Add();
        items.Type(RibbonItemType.Button).ButtonSettings(button =>
        {
          button.IconCss("e-icons e-insert-below").Content("Below");
        }).Add();
      }).Add();
      collection.Items(items =>
      {
        items.Type(RibbonItemType.Button).ButtonSettings(button =>
        {
          button.IconCss("e-icons e-insert-left").Content("Left");
        }).Add();
        items.Type(RibbonItemType.Button).ButtonSettings(button =>
        {
          button.IconCss("e-icons e-insert-right").Content("Right");
        }).Add();
      }).Add();
    }).Add();
  }).Add();
}).Render()

<script type="text/x-jsrender" id="galleryTemplate">
  <div class="gallery-template ${items.cssClass}">
    <table class="gallery-table">
      <tbody>
        <tr class="row_one">
          <td class="tableContent">-</td>
          <td class="tableContent">-</td>
          <td class="tableContent">-</td>
          <td class="tableContent">-</td>
          <td class="tableContent">-</td>
        </tr>
        <tr class="row_two">
          <td class="tableContent">-</td>
          <td class="tableContent">-</td>
          <td class="tableContent">-</td>
          <td class="tableContent">-</td>
          <td class="tableContent">-</td>
        </tr>
        <tr class="row_three">
          <td class="tableContent">-</td>
          <td class="tableContent">-</td>
          <td class="tableContent">-</td>
          <td class="tableContent">-</td>
          <td class="tableContent">-</td>
        </tr>
      </tbody>
    </table>
  </div>
</script>

<style>

  /* plain table styles */
  .plainTables_item_1 .tableContent {
    border: 1px solid black;
  }

  .plainTables_item_2 .tableContent,
  .plainTables_item_3 .tableContent {
    border: 1px solid #c1c1c1;
  }

  .plainTables_item_4 .row_one .tableContent {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
  }

  .plainTables_item_4 .row_three .tableContent {
    border-bottom: 1px solid black;
  }

  .plainTables_item_5 .row_one .tableContent {
    border-bottom: 1px solid black;
  }

  .plainTables_item_5 .row_one .tableContent,
  .plainTables_item_7 .row_one .tableContent {
    border-bottom: 1px solid black;
  }

  .plainTables_item_5 .row_two .tableContent:first-child,
  .plainTables_item_5 .row_three .tableContent:first-child,
  .plainTables_item_7 .row_two .tableContent:first-child,
  .plainTables_item_7 .row_three .tableContent:first-child {
    border-right: 1px solid black;
  }

  /* list table styles */

  .listTables_item_1 .row_one .tableContent {
    border-bottom: 1px solid #83caeb;
  }

  .listTables_item_2 .row_one .tableContent,
  .listTables_item_2 .row_two .tableContent,
  .listTables_item_2 .row_three .tableContent {
    border-bottom: 1px solid #83caeb;
    border-top: 1px solid #83caeb;
  }

  .listTables_item_3 .row_one .tableContent {
    border-top: 1px solid #156082;
    border-bottom: 1px solid #156082;
    background-color: #156082;
    color: white;
  }

  .listTables_item_3 .row_three .tableContent {
    border-bottom: 1px solid #156082;
  }

  .listTables_item_5 .row_one .tableContent,
  .listTables_item_7 .row_one .tableContent {
    border-bottom: 1px solid white;
  }

  .listTables_item_5 .row_two .tableContent:first-child,
  .listTables_item_5 .row_three .tableContent:first-child,
  .listTables_item_7 .row_two .tableContent:first-child,
  .listTables_item_7 .row_three .tableContent:first-child {
    border-right: 1px solid white;
  }

  .listTables_item_5 .tableContent {
    background-color: #156082;
    color: white;
  }

  .listTables_item_7 .row_one .tableContent {
    border-bottom: 1px solid black;
  }

  .listTables_item_7 .row_two .tableContent:first-child,
  .listTables_item_7 .row_three .tableContent:first-child {
    border-right: 1px solid black;
  }

  .listTables_item_4 .row_one .tableContent {
    border-top: 1px solid #156082;
    border-bottom: 1px solid #156082;
  }

  .listTables_item_4 .row_three .tableContent {
    border-bottom: 1px solid #156082;
  }

  .gallery-table {
    border-collapse: collapse;
    line-height: 14px;
  }

  .tableContent {
    width: 12px;
  }
</style>

ASP.NET MVC Ribbon Control with gallery template

To know more about the built-in Ribbon items, please refer to the Ribbon Items section.