UI Customization

The DevExpress ASP.NET MVC Spreadsheet provides a UI experience similar to Microsoft Excel Online. It allows you to create intuitive and easy-to-use spreadsheet apps in the shortest possible time.

This demo illustrates the Spreadsheet's main UI elements available for customization through the API provided at different levels - for the whole extension or for individual worksheets.

At the level of extension settings, the following customization options are available:

• The mode of the ribbon-based UI (use the RibbonMode property)
  The Spreadsheet is designed to fully integrate the DevExpress ASP.NET MVC Ribbon extension. Based upon the RibbonMode property setting, the Spreadsheet can use either a built-in ribbon, a built-in one-line toolbar, an external ribbon extension, or no ribbon. The RibbonMode property values include:
  • Ribbon - The Spreadsheet uses a built-in ribbon; ribbon tabs can be customized using the Spreadsheet's RibbonTabs collection.
  • One Line Ribbon - The Spreadsheet displays a built-in ribbon used in one-line mode optimized for touch devices; one-line mode related settings can be defined for ribbon groups and ribbon galleries with their OneLineModeSettings properties.
  • ExternalRibbon - The Spreadsheet uses an external Ribbon extension, specified by the AssociatedRibbonName property. Ribbon tabs can be customized at the Ribbon extension level with the Tabs property. The Spreadsheet's DefaultRibbonTabs static property can be used to populate the external ribbon with the default ribbon tabs.
  • None - The Spreadsheet does not incorporate or use the ribbon UI.
  • Auto - The Spreadsheet automatically displays the proper built-in ribbon depending upon the client browser type; a standard ribbon is used under desktop browsers and a one-line ribbon is used under the browsers of touch devices.
• The Formula Bar visibility (use the ShowFormulaBar property)
• The Tab Control visibility (use the ShowSheetTabs property)

At the level of a worksheet, you can programmatically toggle the visibility of the following worksheet elements:

• Gridlines (use the ShowGridLines property)
• Headings of rows and columns (use the ShowHeadings property)

Give the demo a try and see how the Spreadsheet looks and behaves in different UI modes.