Example of Default Functionalities in ASP.NET MVC Toolbar Control

This sample demonstrates the default functionalities of the Toolbar. Select any command or click the left/right navigation icon or touch swipe to see the hidden commands of the Toolbar

DEMO
SOURCE
simple Toolbar


Scrollable Toolbar


Popup Toolbar


MultiRow Toolbar


Extended Toolbar

Toolbar is a graphical control on which commands / buttons will be displayed in horizontal order. By default scrolling display mode enabled when content exceeds the available viewing area.


You can use left / right navigation icon or touch swipe to see the hidden commands of the toolbar.

Initially toolbar rendered with the left and right navigation icon and you can see hidden commands by moving in right or left direction.

When you reach right / left end of toolbar, corresponding navigation direction will be disabled.

In this demo, available responsive mode of ASP.NET MVC Toolbar has been showcased. The modes can be set through overflowMode property and the possible modes are Scrollable, PopupPopup, Extended and MultiRow.

  • Scrollable - The scrollable mode is the default mode. When you have excess toolbar items, it can be viewed by scrolling through left and right arrows. You can continuously scroll the toolbar content by holding on the navigation icon. In devices navigation icons are not available. you can touch swipe to see the hidden commands of the toolbar.
  • Popup - The overflowing toolbar items which do not fit in viewing area moves to the popup container.
  • Extended - The overflowing toolbar items which do not fit in the available space can be viewed in the next row of the toolbar on clicking the expand icon.
  • MultiRow - The overflowing toolbar items which do not fit in viewing area will be displayed as an in-line of the toolbar.
Transform your ASP.NET MVC web apps today with Syncfusion ASP.NET MVC components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab