Spreadsheet - Ribbon

The ASP.NET Core Spreadsheet control allows you to provide a custom ribbon for your application. This demo shows how to display default and custom items in the ribbon.

The ribbon tab’s items collection provides a set of methods that allow you to add default items to a ribbon (for instance, in this demo the AddUndoItem and AddRedoItem methods).

Use the AddButton method to populate the ribbon with custom items. To process the item click, handle the OnCustomCommandExecuted event. The commandName event argument returns the clicked item’s CommandName property value and allows you to identify the clicked item.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

@inject IWebHostEnvironment env <form id="formExport" method="post"> <input name="SpreadsheetWorkSessionId" type="hidden" value="" /> </form> <script> function onCustomCommandExecuted(s, e) { switch (e.commandName) { case 'save': var spreadsheetState = spreadsheet.getSpreadsheetState(); $.ajax({ type: 'POST', url: '@Url.Action("RibbonSaveToFile")', data: { spreadsheetState: spreadsheetState } }); break; case 'download': var spreadsheetState = spreadsheet.getSpreadsheetState(); $("#formExport").attr('action', '@Url.Action("RibbonDownloadXlsx")'); $("input[name='SpreadsheetWorkSessionId']").val(spreadsheetState.SpreadsheetWorkSessionId); $("#formExport").submit(); break; } } </script> @{ var documentPath = System.IO.Path.Combine( env.ContentRootPath, DirectoryManagmentUtils.GetDocumentSampleFolderPath(Context), "UICustomization.xlsx"); } @(Html.DevExpress() .Spreadsheet("spreadsheet") .Height("500px") .Width("100%") .Ribbon(ribbon => ribbon .Visible(true) .ActiveTabIndex(1) .Tabs(tabs => { tabs.Clear(); tabs.Add() .Title("File") .Items(items => { items.AddButton() .Text("Save") .CommandName("save") .ShowText(true) .Icon("save"); items.AddButton() .Text("Download as Xlsx") .CommandName("download") .ShowText(true) .Icon("download"); items.AddPrintItem().BeginGroup(true); }); tabs.AddHomeTab() .Items(items => { items.Clear(); items.AddUndoItem(); items.AddRedoItem(); items.AddCutItem(); items.AddCopyItem(); items.AddPasteItem(); }); }) ) .ClientSideEvents(events => { events.OnCustomCommandExecuted("onCustomCommandExecuted"); }) .ConfirmOnLosingChanges(confirm => confirm.Enabled(false)) .DocumentRequestHandlerUrl(Url.Action("DxDocumentRequest")) .Open(documentPath) )

using System; using System.IO; using System.Linq; using System.Text; using DevExpress.AspNetCore.Spreadsheet; using DevExpress.Spreadsheet; using DevExpress.XtraSpreadsheet.Export; using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Mvc; namespace AspNetCoreDemos.Spreadsheet { [Route("[action]")] public class SpreadsheetController : Controller { public ActionResult RibbonCustomization() { return View(); } [HttpPost] public void RibbonSaveToFile(SpreadsheetClientState spreadsheetState) { var spreadsheet = SpreadsheetRequestProcessor.GetSpreadsheetFromState(spreadsheetState); spreadsheet.Save(); } public IActionResult RibbonDownloadXlsx(SpreadsheetClientState spreadsheetState) { var spreadsheet = SpreadsheetRequestProcessor.GetSpreadsheetFromState(spreadsheetState); MemoryStream stream = new MemoryStream(); spreadsheet.SaveCopy(stream, DocumentFormat.Xlsx); stream.Position = 0; const string XlsxContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"; return File(stream, XlsxContentType, "ProfitAndLoss.xlsx"); } } }