Ribbon in ASP.NET MVC Spreadsheet Control

28 Jul 202613 minutes to read

The Ribbon organizes spreadsheet features into a series of tabs. Click the expand or collapse icon to dynamically expand or collapse the ribbon.

To expand or collapse the ribbon:

  1. Locate the expand or collapse icon in the ribbon.
  2. Click the icon to change the ribbon state.
  3. Verify that the ribbon content expands or collapses accordingly.

Ribbon Customization

You can customize the ribbon using the following methods:

Method Description
hideRibbonTabs Shows or hides existing ribbon tabs.
enableRibbonTabs Enables or disables existing ribbon tabs.
addRibbonTabs Adds custom ribbon tabs.
hideToolbarItems Shows or hides existing ribbon toolbar items.
enableToolbarItems Enables or disables specified ribbon toolbar items.
addToolbarItems Adds custom items to the ribbon toolbar.
hideFileMenuItems Shows or hides File-menu items.
enableFileMenuItems Enables or disables File-menu items.
addFileMenuItems Adds custom File-menu items.

The following code example demonstrates how to customize the ribbon.

@Html.EJS().Spreadsheet("spreadsheet").Created("created").FileMenuBeforeOpen("fileMenuBeforeOpen").FileMenuItemSelect("fileMenuItemSelect").Sheets(sheet =>
{
    sheet.Ranges(ranges =>
    {
        ranges.DataSource((IEnumerable<object>)ViewBag.defaultData).StartCell("A1").Add();
    }).Columns(column =>
    {
        column.Width(180).Add();
        column.Width(130).Add();
        column.Width(130).Add();
        column.Width(180).Add();
        column.Width(130).Add();
        column.Width(120).Add();
    }).Add();
}).Render()

<script>
   
    function created() {
        this.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:F1');
        // Hiding the `Insert` from ribbon.
        this.hideRibbonTabs(['Insert']);
        // Set disabled state to `View` ribbon tab.
        this.enableRibbonTabs(['View'], false);
        // Adding the `Help` ribbon tab at the last index.
        // Specify the ribbon tab header text in last optional argument(`insertBefore`) for inserting new tab before any existing tab.
        this.addRibbonTabs([{ header: { text: 'Help' }, content: [{ text: 'Feedback', tooltipText: 'Feedback',
            click: (args) => { /* Any click action for this toolbar item will come here. */ } }] }]);
        // Hiding the unwanted toolbar items from `Home` by specifying its index.
        this.hideToolbarItems('Home', [0, 1, 2, 4, 14, 15, 21, 24]);
        // Set disable state to `Underline`, 'Wrap text` toolbar items from `Home` by specifying the item id.
        this.enableToolbarItems('Home', [`${this.element.id}_underline`, `${this.element.id}_wrap`], false);
        // Set disable state to `Protect Sheet` toolbar item from `Data` by mentioning its index.
        this.enableToolbarItems('Data', [0], false);
        // Adding the new `Custom Formulas` toolbar item under `Formulas` tab for adding custom formulas.
        this.addToolbarItems(
            'Formulas', [{ type: 'Separator' }, {
                text: 'Custom Formulas', tooltipText: 'Custom Formulas',
                // You can set click handler for each new custom toolbar item
                click: (args) => {
                    // You can add custom formulas here.
                }
            }]);
        // Adding new custom item `Import` after the existing `Open` item. By default, new item will add after the specified item.
        this.addFileMenuItems([{ text: 'Import', iconCss: 'e-open e-icons' }], 'Open');
        // Adding new custom item `Export As` after the existing `Save As` item.
        // Set `insertAfter` optional argument as `false` for adding new item before the specified item.
        this.addFileMenuItems(
            [{
                text: 'Export As', iconCss: 'e-save e-icons', items: [{ text: 'XLSX', iconCss: 'e-xlsx e-icons' },
                    { text: 'XLS', iconCss: 'e-xls e-icons' }, { text: 'CSV', iconCss: 'e-csv e-icons' }]
            }],
            'Save As', false);
    }
    function fileMenuBeforeOpen() { // Because the file menu items are created dynamically, you need to perform the hide or show and enable/disable operations
        // under filemenu before open event.
        // Hiding the `Save As` and `Open` item.
        this.hideFileMenuItems(['Save As', 'Open']);
         // Set disable state to `New` item. You can perform any file menu items customization by specifying the item id,
        // if it has more than one same item text. Set the last argument `isUniqueId` as true for using the item id.
        this.enableFileMenuItems([`${this.element.id}_New`], false, true); }

    function fileMenuItemSelect(args) {
    // Custom file menu items select handler
        switch (args.item.text) {
            case 'Import': ej.base.select(`#${this.element.id}_fileUpload`, this.element).click();
                break;
            case 'XLSX': this.save({ saveType: 'Xlsx' });
                break;
            case 'XLS': this.save({ saveType: 'Xls' });
                break;
            case 'CSV': this.save({ saveType: 'Csv' });
                break;
        }}

</script>
public ActionResult Index()
{
    List<object> data = new List<object>()
    {
        new { CustomerName= "Romona Heaslip",  Model= "Taurus",  Color= "Aquamarine",  PaymentMode= "Debit Card",  DeliveryDate= "07/11/2015",  Amount= "8529.22" },
        new { CustomerName= "Clare Batterton",  Model= "Sparrow",  Color= "Pink",  PaymentMode= "Cash On Delivery",  DeliveryDate= "7/13/2016",  Amount= "17866.19" },
        new { CustomerName= "Eamon Traise",  Model= "Grand Cherokee",  Color= "Blue",  PaymentMode= "Net Banking",  DeliveryDate= "09/04/2015",  Amount= "13853.09" },
        new { CustomerName= "Julius Gorner",  Model= "GTO",  Color= "Aquamarine",  PaymentMode= "Credit Card",  DeliveryDate= "12/15/2017",  Amount= "2338.74" },
        new { CustomerName= "Jenna Schoolfield",  Model= "LX",  Color= "Yellow",  PaymentMode= "Credit Card",  DeliveryDate= "10/08/2014",  Amount= "9578.45" },
        new { CustomerName= "Marylynne Harring",  Model= "Catera",  Color= "Green",  PaymentMode= "Cash On Delivery",  DeliveryDate= "7/01/2017",  Amount= "19141.62" },
        new { CustomerName= "Vilhelmina Leipelt",  Model= "7 Series",  Color= "Goldenrod",  PaymentMode= "Credit Card",  DeliveryDate= "12/20/2015",  Amount= "6543.30" },
        new { CustomerName= "Barby Heisler",  Model= "Corvette",  Color= "Red",  PaymentMode= "Credit Card",  DeliveryDate= "11/24/2014",  Amount= "13035.06" },
        new { CustomerName= "Karyn Boik",  Model= "Regal",  Color= "Indigo",  PaymentMode= "Debit Card",  DeliveryDate= "05/12/2014",  Amount= "18488.80" },
        new { CustomerName= "Jeanette Pamplin",  Model= "S4",  Color= "Fuscia",  PaymentMode= "Net Banking",  DeliveryDate= "12/30/2014",  Amount= "12317.04" },
        new { CustomerName= "Cristi Espinos",  Model= "TL",  Color= "Aquamarine",  PaymentMode= "Credit Card",  DeliveryDate= "12/18/2013",  Amount= "6230.13" },
        new { CustomerName= "Issy Humm",  Model= "Club Wagon",  Color= "Pink",  PaymentMode= "Cash On Delivery",  DeliveryDate= "02/02/2015",  Amount= "9709.49" },
        new { CustomerName= "Tuesday Fautly",  Model= "V8 Vantage",  Color= "Crimson",  PaymentMode= "Debit Card",  DeliveryDate= "11/19/2014",  Amount= "9766.10" },
        new { CustomerName= "Rosemaria Thomann",  Model= "Caravan",  Color= "Violet",  PaymentMode= "Net Banking",  DeliveryDate= "02/08/2014",  Amount= "7685.49" },
    };
    ViewBag.DefaultData = data;
    return View();
}

See Also