Search results

Getting Started

This section briefly explains about how to create a simple ButtonGroup in your ASP.NET Core application. You can refer ASP.NET Core Getting Started documentation page for introduction part of the system requirements and configure the common specifications.

Add ButtonGroup to the project

To create simple ButtonGroup add the div tag with class name as e-btn-group and add ejs-button elements should group inside the div element in your Index.cshtml page.

tagHelper
default.cs
<div class='e-btn-group'>
    <ejs-button id="html" content="HTML"></ejs-button>
    <ejs-button id="css" content="CSS"></ejs-button>
    <ejs-button id="javascript" content="Javascript"></ejs-button>
</div>
public IActionResult Index()
    {
            return View();
    }

Output be like the below.

ButtonGroup Sample

Run the application

After successful compilation of your application, simply press F5 to run the application.

The following example shows a default rendering of ButtonGroup.

tagHelper
default.cs
<div class='e-btn-group'>
    <ejs-button id="html" content="HTML"></ejs-button>
    <ejs-button id="css" content="CSS"></ejs-button>
    <ejs-button id="javascript" content="Javascript"></ejs-button>
</div>
public IActionResult Index()
    {
            return View();
    }

Orientation

ButtonGroup can be arranged in a vertical and horizontal orientation. By default, it is horizontally aligned.

Vertical Orientation

ButtonGroup can be aligned vertically by using the built-in CSS class e-vertical to the target element.

The following example illustrates how to achieve vertical orientation in ButtonGroup.

tagHelper
default.cs
<div class='e-btn-group e-vertical'>
    <ejs-button id="html" content="HTML"></ejs-button>
    <ejs-button id="css" content="CSS"></ejs-button>
    <ejs-button id="javascript" content="Javascript"></ejs-button>
</div>
public IActionResult Index()
    {
            return View();
    }

ButtonGroup does not support SplitButton component nesting in a vertical orientation.

See Also