Tab

16 Aug 20184 minutes to read

RibbonTabs is a collection of control TabGroup which enables you to organize related commands into single view. Tabs can be added to Ribbon using RibbonTabs property. Id & Text properties are used to set unique ID and header text to RibbonTabs.
The manipulation of given text tab in the ribbon control can be done by using addTab, removeTab, hideTab,
showTab methods and tabAdd, tabCreate, tabRemove, tabClick and tabSelect events.

cshtml

@(Html.EJ().Ribbon("defaultRibbon")
      .Width("500")
      .ApplicationTab(app => {
          app.Type(ApplicationTabType.Menu).MenuItemID("Ribbon").MenuSettings(new MenuProperties() {
              OpenOnClick = false
          });
      })
      .RibbonTabs(tab => {
          tab.Id("home").Text("HOME").TabGroups(tabgroup => {
              tabgroup.Text("Save").AlignType(RibbonAlignType.Rows).Content(ctn => {
                  ctn.ContentGroups(contentGroup => {
                      contentGroup.Id("print").Text("Print").ButtonSettings(new ButtonProperties() {
                          ContentType = ContentType.TextAndImage,
                              ImagePosition = ImagePosition.ImageTop,
                              PrefixIcon = "e-icon e-Ribbon e-print"
                      }).Add();
                      contentGroup.Id("save").Text("Save").ButtonSettings(new ButtonProperties() {
                          ContentType = ContentType.TextAndImage,
                              ImagePosition = ImagePosition.ImageTop,
                              PrefixIcon = "e-icon e-Ribbon e-save"
                      }).Add();
                  }).ContentDefaults(df => df.Type(RibbonButtonType.Button).Width("50px").Height("70px")).Add();
              }).Add();
          }).Add();
          tab.Id("sendRec").Text("Send/Receive").TabGroups(tabgroup => {
              tabgroup.Text("Send/Receive").Type("custom").ContentID("sendReceive").AlignType(RibbonAlignType.Columns).Content(ctn => {

              }).Add();
          }).Add();
      })
     )
    <div id="sendReceive">
        Send/Receive All Folders
    </div>
    <ul id="Ribbon">
        <li>
            <a>FILE</a>
            <ul>
                <li><a>New</a></li>
                <li><a>Open</a></li>
                <li><a>Save</a></li>
                <li><a>Save As</a></li>
                <li><a>Print</a></li>
            </ul>
        </li>
    </ul>
     @section StyleSection{
    <link href="~/Content/ej/Ribbon-css/ej.icons.css" rel="stylesheet" />
    }