Keytips in ASP.NET MVC Ribbon control

19 Mar 202424 minutes to read

The Ribbon supports keyboard navigations to interact the ribbon items using the keytips which can be enabled by setting the EnableKeyTips property.

The keytips will be shown when the Alt + Windows/Command keys are pressed.

Ribbon items keytip

You can add keytips to all the ribbon items by using the KeyTip property.

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" } };
    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" } };

    List<string> fontSize = new List<string>() { "8", "9", "10", "11", "12", "14", "16", "18", "20", "22", "24", "26", "28", "36", "48", "72", "96" };
    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" };

    List<RibbonGroupButtonItem> groupButtonSingle = new List<RibbonGroupButtonItem>() {

      new RibbonGroupButtonItem { IconCss = "e-icons e-bold", KeyTip="1", Content = "Bold", Selected = true },
      new RibbonGroupButtonItem {IconCss = "e-icons e-italic", KeyTip="2", Content = "Italic" },
      new RibbonGroupButtonItem {IconCss = "e-icons e-underline", KeyTip="3", Content = "Underline" },
      new RibbonGroupButtonItem { IconCss = "e-icons e-strikethrough", KeyTip="4", Content = "Strikethrough" },
      new RibbonGroupButtonItem { IconCss = "e-icons e-change-case", KeyTip="5", Content = "Change Case" }
    };
}


@Html.EJS().Ribbon("ribbon").EnableKeyTips(true).Created("ribbonCreated").Tabs(tab => {
    tab.Header("Home").KeyTip("H").Groups(group =>
    {
        group.Header("Clipboard").KeyTip("CD").GroupIconCss("e-icons e-paste").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.SplitButton).KeyTip("PA").SplitButtonSettings(splitbutton =>
                {
                    splitbutton.IconCss("e-icons e-paste").Items(pasteOptions).Content("Paste");
                }).Add();
            }).Add();
            collection.Items(items =>
            {
                items.Type(RibbonItemType.Button).KeyTip("CU").ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-cut").Content("Cut");
                }).Add();
                items.Type(RibbonItemType.Button).KeyTip("CO").ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-copy").Content("Copy");
                }).Add();
                items.Type(RibbonItemType.Button).KeyTip("CS").ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-format-painter").Content("Format Painter");
                }).Add();
            }).Add();
        }).Add();
        group.Header("Font").EnableGroupOverflow(true).Orientation(ItemOrientation.Row).GroupIconCss("e-icons e-bold").CssClass("font-group").Collections(collections =>
        {
            collections.Id("ribbon-collection").Items(items =>
            {
                items.Type(RibbonItemType.ComboBox).KeyTip("O1").ComboBoxSettings(comboBox =>
                {
                    comboBox.DataSource(fontStyle).Index(3).AllowFiltering(true).Width("150px");
                }).Add();
                items.Type(RibbonItemType.ComboBox).KeyTip("O2").ComboBoxSettings(comboBox =>
                {
                    comboBox.DataSource(fontSize).Index(3).Width("65px");
                }).Add();
            }).Add();
            collections.Items(items =>
            {
                items.Type(RibbonItemType.GroupButton).KeyTip("GB").AllowedSizes(RibbonItemSize.Small).GroupButtonSettings(groupButton =>
                {
                    groupButton.Selection(RibbonGroupButtonSelection.Single).Header("Format Styles").Items(groupButtonSingle);
                }).Add();
                items.Type(RibbonItemType.ColorPicker).KeyTip("CP").AllowedSizes(RibbonItemSize.Small).ColorPickerSettings(colorPicker =>
                {
                    colorPicker.Value("#123456");
                }).Add();
            }).Add();
        }).Add();
        group.Header("Gallery").GroupIconCss("e-icons e-paste").Collections(collections =>
        {
            collections.Items(items =>
            {
                items.Type(RibbonItemType.Gallery).KeyTip("GY").GallerySettings(gallery =>
                {
                    gallery.ItemCount(3).Groups(galleryGroups =>
                    {
                        galleryGroups.Header("Styles").ItemWidth("100").Items(galleryItems =>
                        {
                            galleryItems.Content("Normal").Add();
                            galleryItems.Content("No Spacing").Add();
                            galleryItems.Content("Heading 1").Add();
                            galleryItems.Content("Heading 2").Add();
                            galleryItems.Content("Heading 3").Add();
                            galleryItems.Content("Heading 4").Add();
                            galleryItems.Content("Heading 5").Add();
                        }).Add();
                    });
                }).Add();
            }).Add();
        }).Add();
        group.Header("Tables").IsCollapsible(false).Collections(collections =>
        {
            collections.Items(items =>
            {
                items.Type(RibbonItemType.DropDown).KeyTip("T").AllowedSizes(RibbonItemSize.Large).DropDownSettings(dropDown =>
                {
                    dropDown.IconCss("e-icons e-table").Content("Table").Items(tableOptions);
                }).Add();
            }).Add();
        }).Add();
        group.Header("Show").IsCollapsible(false).Collections(collections =>
        {
            collections.Items(items =>
            {
                items.Type(RibbonItemType.CheckBox).KeyTip("R1").CheckBoxSettings(checkBox =>
                {
                    checkBox.Label("Ruler").Checked(false);
                }).Add();
                items.Type(RibbonItemType.CheckBox).KeyTip("R2").CheckBoxSettings(checkBox =>
                {
                    checkBox.Label("Gridlines").Checked(false);
                }).Add();
                items.Type(RibbonItemType.CheckBox).KeyTip("R3").CheckBoxSettings(checkBox =>
                {
                    checkBox.Label("Navigation Pane").Checked(true);
                }).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
   function ribbonCreated() {
        var ribbon = this;
        ribbon.ribbonKeyTipModule.showKeyTips('H');
    }
</script>

ASP.NET MVC Ribbon Control with items keytip

File menu keytip

You can add keytips to the file menu by using the KeyTip property.

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" } };
    List<MenuItem> fileOptions = new List<MenuItem>()
    {
        new MenuItem { Text = "New", IconCss = "e-icons e-file-new", Id="new" },
        new MenuItem { Text = "Open", IconCss = "e-icons e-folder-open", Id="Open" },
        new MenuItem { Text = "Rename", IconCss = "e-icons e-rename", Id="rename" },
        new MenuItem { Text = "Save as", IconCss = "e-icons e-save", Id="save" }
    };
    FileMenuSettings FileMenuSettings = new FileMenuSettings() { Text = "File", KeyTip = "F", Visible = true, MenuItems = fileOptions };
}


@Html.EJS().Ribbon("ribbon").EnableKeyTips(true).Created("ribbonCreated").FileMenu(FileMenuSettings).Tabs(tab => {
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").KeyTip("CD").GroupIconCss("e-icons e-paste").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.SplitButton).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();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
   function ribbonCreated() {
        var ribbon = this;
        ribbon.ribbonKeyTipModule.showKeyTips();
    }
</script>

ASP.NET MVC Ribbon Control with File menu keytip

Backstage menu keytip

You can add keytips to backstage menu items by using the KeyTip property.

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" } };
    List<BackstageItem> backstageItems = new List<BackstageItem>() {
        new BackstageItem { Id = "home", Text = "Home", KeyTip = "H", IconCss = "e-icons e-home", Content = processBackstageContent("home") },
        new BackstageItem { Id = "new", Text = "New", KeyTip = "N", IconCss = "e-icons e-file-new", Content = processBackstageContent("new") },
        new BackstageItem { Id = "open", Text = "Open", KeyTip = "O", IconCss = "e-icons e-folder-open", Content = processBackstageContent("open") }
    };
    BackStageMenu backstageSettings = new BackStageMenu() { Text = "File", Visible = true, KeyTip = "F", BackButton = new BackstageBackButton { Text = "Close" }, Items = backstageItems };
}
@functions {
  string processBackstageContent(string item)
  {
      string content = "";
      switch (item)
      {
          case "home":
          {
              content = "<div id='block-wrapper'><div class='section-title'> Recent </div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td> <span style='display: block; font-size: 14px'> Ribbon.docx </span><span style='font-size: 12px'> EJ2 >> Components >> Navigations >> Ribbon >> default </span></td></tr></tbody></table></div></div></div>";
              break;
          }
          case "new":
          {
              content = "<div id='new-section' class='new-wrapper'><div class='section-title'> New </div><div class='category_container'><div class='doc_category_image'></div> <span class='doc_category_text'> New document </span></div></div>";
              break;
          }
          case "open":
          {
              content = "<div id='open-content' style='padding: 20px;'><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td> <span style='display: block; font-size: 14px'> Open in Desktop App </span><span style='font-size: 12px'> Use the full functionality of Ribbon </span></td></tr></tbody></table></div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-protect-sheet'></span> </td><td> <span style='display: block; font-size: 14px'> Protect Document </span><span style='font-size: 12px'>To prevent accidental changes, this document has been set to open as view-only.</span></td></tr></tbody></table></div></div>";
              break;
          }
      }
      return content;
  }
}

@Html.EJS().Ribbon("ribbon").EnableKeyTips(true).Created("ribbonCreated").BackStageMenu(backstageSettings).Tabs(tab => {
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").GroupIconCss("e-icons e-paste").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.SplitButton).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();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
   function ribbonCreated() {
        var ribbon = this;
        ribbon.ribbonKeyTipModule.showKeyTips("F");
    }
</script>

<style>
  .e-ribbon-backstage-content {
    width: 500px;
    height: 350px;
  }

  .section-title {
    font-size: 22px;
  }

  .new-docs {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .category_container {
    width: 150px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
  }

  .doc_category_image {
    width: 80px;
    height: 100px;
    background-color: #fff;
    border: 1px solid rgb(125, 124, 124);
    text-align: center;
    overflow: hidden;
    margin: 0px auto 10px;
  }

  .doc_category_text {
    font-size: 16px;
  }

  .section-content {
    padding: 12px 0px;
    cursor: pointer;
  }

  .doc_icon {
    font-size: 16px;
    padding: 0px 10px;
  }

  .category_container:hover, .section-content:hover {
    background-color: #dfdfdf;
    border-radius: 5px;
    transition: all 0.3s;
  }
</style>

ASP.NET MVC Ribbon Control with Backstage menu keytip

Ribbon layout switcher keytip

You can add keytip to the layout switcher by using the LayoutSwitcherKeyTip property.

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" } };
    List<MenuItem> fileOptions = new List<MenuItem>()
    {
        new MenuItem { Text = "New", IconCss = "e-icons e-file-new", Id="new" },
        new MenuItem { Text = "Open", IconCss = "e-icons e-folder-open", Id="Open" },
        new MenuItem { Text = "Rename", IconCss = "e-icons e-rename", Id="rename" },
        new MenuItem { Text = "Save as", IconCss = "e-icons e-save", Id="save" }
    };
    FileMenuSettings FileMenuSettings = new FileMenuSettings() { Text = "File", Visible = true, MenuItems = fileOptions };
}


@Html.EJS().Ribbon("ribbon").EnableKeyTips(true).LayoutSwitcherKeyTip("LS").Created("ribbonCreated").FileMenu(FileMenuSettings).Tabs(tab => {
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").GroupIconCss("e-icons e-paste").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.SplitButton).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();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
   function ribbonCreated() {
        var ribbon = this;
        ribbon.ribbonKeyTipModule.showKeyTips();
    }
</script>

ASP.NET MVC Ribbon Control with layout switcher keytip

Ribbon launcher icon keytip

You can add keytip to the launcher icon by using the LauncherIconKeyTip property.

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" } };
    List<MenuItem> fileOptions = new List<MenuItem>()
    {
        new MenuItem { Text = "New", IconCss = "e-icons e-file-new", Id="new" },
        new MenuItem { Text = "Open", IconCss = "e-icons e-folder-open", Id="Open" },
        new MenuItem { Text = "Rename", IconCss = "e-icons e-rename", Id="rename" },
        new MenuItem { Text = "Save as", IconCss = "e-icons e-save", Id="save" }
    };
    FileMenuSettings FileMenuSettings = new FileMenuSettings() { Text = "File", Visible = true, MenuItems = fileOptions };
}


@Html.EJS().Ribbon("ribbon").EnableKeyTips(true).Created("ribbonCreated").FileMenu(FileMenuSettings).Tabs(tab => {
    tab.Header("Home").KeyTip("H").Groups(group =>
    {
        group.Header("Clipboard").ShowLauncherIcon(true).LauncherIconKeyTip("L").GroupIconCss("e-icons e-paste").Collections(collection =>
        {
            collection.Items(items =>
            {
                items.Type(RibbonItemType.SplitButton).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();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<script>
   function ribbonCreated() {
        var ribbon = this;
        ribbon.ribbonKeyTipModule.showKeyTips("H");
    }
</script>

ASP.NET MVC Ribbon Control with launcher icon keytip

Methods

Show keytips

You can use the showKeyTips method to shown the keytips dynamically.

In order to show specific keytips, pass the key string as an argument in the showKeyTips('H') method.

Hide keytips

You can use the hideKeyTips method in Ribbon to remove the keytips dynamically. This will remove all the visible keytips.

Guidelines for adding keytips

Before adding keytips to the ribbon items consider the following:

Avoid using the same keytip setting on multiple items.

For example: When you add the keytip text H or HF for the same items, it activates the first item occurrence of H, while any subsequent instances of H or HF are ignored.

Do not use the same first letter for the single and double keytip items.

For example: When accessing keytip text F, FP and FPF added for the different ribbon items and pressing F key, only the F key tip associated item will be activated while the FP, FPF configured ribbon items will be ignored.