Implementing Syncfusion ASP.NET Core Buttons

Button

The Button component is a fundamental action control that triggers a response when clicked. It supports color variants (primary, success, danger, warning, info, link), flat/outline/round styles, icon support, sizes, toggle behavior, ripple effects, and complete form integration.

Navigation Guide

Getting Started

📄 Read: references/button-getting-started.md

• Prerequisites and NuGet package installation
• Tag helper registration in _ViewImports.cshtml
• Stylesheet and script CDN setup in _Layout.cshtml
• Script manager registration with <ejs-scripts>
• Basic button rendering with <ejs-button>
• Enabling ripple effects
• Click event handling with onclick attribute
• Using the button in forms (type="submit" / type="reset")

Types and Styles

📄 Read: references/button-types-and-styles.md

• Color variants (e-primary, e-success, e-danger, e-warning, e-info, e-link)
• Flat, outline, and round button types
• Icon buttons and icon positioning (iconPosition: Left / Top / Right / Bottom)
• Toggle buttons with isToggle and toggled state
• Button sizes (e-small, e-bigger)

How-To

📄 Read: references/button-how-to.md

• Creating block buttons (full-width)
• Rounded-corner buttons
• Navigation links styled as buttons
• Custom appearance with CSS
• Disabled state
• RTL support with enableRtl
• Tooltips on buttons
• Form submission patterns

API Reference

📄 Read: references/button-api.md

• Complete property reference with types and defaults
• Methods (click, focusIn, destroy)
• Event signatures
• CSS class reference table
• Tag helper attribute syntax

Accessibility

📄 Read: references/button-accessibility.md

• WCAG 2.2 AA compliance
• Semantic HTML and WAI-ARIA attributes
• Keyboard navigation (Tab, Enter, Space)
• Focus management and visible focus indicators
• Icon-only button accessibility with aria-label

Quick Start

1. Install NuGet package:

Install-Package Syncfusion.EJ2.AspNet.Core

2. Register Tag Helper in ~/Pages/_ViewImports.cshtml:

@addTagHelper *, Syncfusion.EJ2

3. Add CSS and script in ~/Pages/Shared/_Layout.cshtml:

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. Add Script Manager at end of <body>:

<ejs-scripts></ejs-scripts>

5. Render the Button:

<ejs-button id="btn" cssClass="e-primary" content="Click Me"></ejs-button>

Common Patterns

Primary Action Button

<ejs-button id="submit" cssClass="e-primary" type="submit" content="Save Changes"></ejs-button>

Danger Action Button

<ejs-button id="delete" cssClass="e-danger" onclick="confirmDelete()" content="Delete"></ejs-button>

Icon Button

<ejs-button id="edit" cssClass="e-small" iconCss="e-icons e-edit-icon"></ejs-button>

Disabled Button

<ejs-button id="btn" disabled="true" content="Cannot Click"></ejs-button>

Form Submission

<form>
    <ejs-switch id="switch1" name="wifi" value="on" checked="true"></ejs-switch>
    <ejs-button id="submit" content="Submit"></ejs-button>
</form>

ButtonGroup

The ButtonGroup component visually groups related buttons into a single control. Use it to build segmented controls, toolbars, or related action clusters. It is a pure CSS grouping (no Tag Helper) — simply wrap multiple buttons inside an element with the e-btn-group class.

Navigation Guide

Getting Started

📄 Read: references/buttongroup-getting-started.md

• Pure CSS component setup
• Basic button grouping with e-btn-group wrapper
• Visual organization of related buttons

Selection and Nesting

📄 Read: references/buttongroup-selection-and-nesting.md

• Radio button group behavior (mutually exclusive selection)
• Checkbox group behavior (multiple selection)
• Nesting with DropDownButton and SplitButton
• Server-side state management for grouped selection

How-To

📄 Read: references/buttongroup-how-to.md

• Creating segmented controls
• Building toolbars with multiple groups
• Vertical button groups
• Separators between buttons
• Enable/disable logic for groups

Style and Appearance

📄 Read: references/buttongroup-style-and-appearance.md

• Custom styling for groups
• CSS classes reference
• Color variants within groups
• Vertical layouts

Accessibility

📄 Read: references/buttongroup-accessibility.md

• Semantic HTML structure
• ARIA attributes (role="group", aria-label)
• Keyboard navigation
• Focus indicators

Quick Start

1. Install NuGet package:

Install-Package Syncfusion.EJ2.AspNet.Core

2. Register Tag Helper in ~/Pages/_ViewImports.cshtml:

@addTagHelper *, Syncfusion.EJ2

3. Add CSS and script in ~/Pages/Shared/_Layout.cshtml:

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. Add Script Manager at end of <body>:

<ejs-scripts></ejs-scripts>

5. Render the ButtonGroup:

<div class="e-btn-group">
    <ejs-button id="btn1" content="HTML"></ejs-button>
    <ejs-button id="btn2" content="CSS"></ejs-button>
    <ejs-button id="btn3" content="JavaScript"></ejs-button>
</div>

Common Patterns

Vertical ButtonGroup

<div class="e-btn-group e-vertical">
    <ejs-button id="btn1" content="Top"></ejs-button>
    <ejs-button id="btn2" content="Middle"></ejs-button>
    <ejs-button id="btn3" content="Bottom"></ejs-button>
</div>

Segmented Control

<div class="e-btn-group">
    <ejs-button id="left" cssClass="e-outline" content="Left"></ejs-button>
    <ejs-button id="center" cssClass="e-outline" content="Center"></ejs-button>
    <ejs-button id="right" cssClass="e-outline" content="Right"></ejs-button>
</div>

Toolbar with Multiple Groups

<div class="e-toolbar">
    <div class="e-btn-group">
        <ejs-button id="bold" iconCss="e-icons e-bold-icon"></ejs-button>
        <ejs-button id="italic" iconCss="e-icons e-italic-icon"></ejs-button>
        <ejs-button id="underline" iconCss="e-icons e-underline-icon"></ejs-button>
    </div>
    <div class="e-btn-group">
        <ejs-button id="left" iconCss="e-icons e-align-left-icon"></ejs-button>
        <ejs-button id="center" iconCss="e-icons e-align-center-icon"></ejs-button>
    </div>
</div>

Checkbox

The Checkbox component is a boolean input control for form selections. It supports checked, unchecked, and indeterminate states (for parent checkboxes), label positioning, size variants, custom colors, and full accessibility.

Navigation Guide

Getting Started

📄 Read: references/checkbox-getting-started.md

• Prerequisites and NuGet package installation
• Tag helper registration in _ViewImports.cshtml
• Stylesheet and script CDN setup in _Layout.cshtml
• Script manager registration
• Basic checkbox rendering with <ejs-checkbox>
• Checkbox with labels
• Enabling ripple effects

Features and State

📄 Read: references/checkbox-features-and-state.md

• Checked and unchecked states
• Indeterminate state for parent checkboxes
• Disabled state
• Form integration with name and value attributes
• Change event handling with change attribute
• State summary table

Label and Size

📄 Read: references/checkbox-label-and-size.md

• Label configuration
• Label position control (Before / After)
• Size variants (e-small)
• Combined label and size example

Customization

📄 Read: references/checkbox-customization.md

• CSS class overrides (e-frame, e-label)
• Color variants (primary, success, warning, danger, info)
• Custom frame shape (circular checkboxes)
• RTL support with enableRtl

API Reference

📄 Read: references/checkbox-api.md

• Property reference table (id, label, checked, disabled, indeterminate, name, value, cssClass, labelPosition, enableRtl, enableHtmlSanitizer, enablePersistence, htmlAttributes)
• Methods (click, focusIn, destroy)
• Event signatures (created, beforeChange, change)
• Tag helper attribute syntax
• Complete end-to-end form example

Accessibility

📄 Read: references/checkbox-accessibility.md

• WCAG 2.2 AA compliance
• Semantic HTML and WAI-ARIA attributes
• Keyboard navigation (Tab / Space)
• Fieldset/Legend patterns
• Screen reader support

Quick Start

1. Install NuGet package:

Install-Package Syncfusion.EJ2.AspNet.Core

2. Register Tag Helper in ~/Pages/_ViewImports.cshtml:

@addTagHelper *, Syncfusion.EJ2

3. Add CSS and script in ~/Pages/Shared/_Layout.cshtml:

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. Add Script Manager at end of <body>:

<ejs-scripts></ejs-scripts>

5. Render the Checkbox:

<ejs-checkbox id="chk1" label="I agree to the terms"></ejs-checkbox>

Common Patterns

Checkbox with Form Submission

<form method="post">
    <ejs-checkbox id="terms" name="agreeTerms" value="agreed" label="I agree to terms"></ejs-checkbox>
    <ejs-button id="submit" type="submit" cssClass="e-primary" content="Submit"></ejs-button>
</form>

public async Task<IActionResult> OnPostAsync()
{
    bool agreeTerms = Request.Form["agreeTerms"] == "agreed";
    // Process the form data
    return Page();
}

Indeterminate Checkbox (Parent)

<ejs-checkbox id="selectAll" label="Select All" indeterminate="true" change="onSelectAllChange"></ejs-checkbox>
<ejs-checkbox id="opt1" name="options" value="1" label="Option 1"></ejs-checkbox>
<ejs-checkbox id="opt2" name="options" value="2" label="Option 2"></ejs-checkbox>

Small Size Checkbox

<ejs-checkbox id="compact" label="Compact option" cssClass="e-small"></ejs-checkbox>

RadioButton

The RadioButton component provides mutually exclusive option selection. Use it for single-choice form fields. Group radio buttons using the name attribute to ensure only one is selected at a time. Supports labels, sizes, form integration, and accessibility.

Navigation Guide

Getting Started

📄 Read: references/radiobutton-getting-started.md

• Prerequisites and NuGet package installation
• Tag helper registration in _ViewImports.cshtml
• Stylesheet and script CDN setup in _Layout.cshtml
• Script manager registration
• Basic radio button rendering with <ejs-radiobutton>
• Grouping radio buttons with name for mutual exclusivity

Features and State

📄 Read: references/radiobutton-features-and-state.md

• Disabled state
• Form integration with name and value attributes
• Reading selected value from Request.Form["name"]
• Change event handling

Label and Size

📄 Read: references/radiobutton-label-and-size.md

• Label positioning (Before / After)
• Size variants (e-small)
• Combined example

API Reference

📄 Read: references/radiobutton-api.md

• Property reference table
• Methods (click, focusIn, destroy)
• Event signatures
• Tag helper attribute syntax

Accessibility

📄 Read: references/radiobutton-accessibility.md

• WCAG 2.2 AA compliance
• Semantic HTML with fieldset / legend
• WAI-ARIA attributes
• Keyboard navigation (arrow keys for group navigation)
• Screen reader support

Quick Start

1. Install NuGet package:

Install-Package Syncfusion.EJ2.AspNet.Core

2. Register Tag Helper in ~/Pages/_ViewImports.cshtml:

@addTagHelper *, Syncfusion.EJ2

3. Add CSS and script in ~/Pages/Shared/_Layout.cshtml:

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. Add Script Manager at end of <body>:

<ejs-scripts></ejs-scripts>

5. Render the RadioButton:

<ul>
    <li><ejs-radiobutton id="r1" name="group1" label="Option 1"></ejs-radiobutton></li>
    <li><ejs-radiobutton id="r2" name="group1" label="Option 2"></ejs-radiobutton></li>
</ul>

Common Patterns

RadioButton Group with Form Submission

<form method="post">
    <ejs-radiobutton id="r1" name="choice" value="a" label="Option A"></ejs-radiobutton>
    <ejs-radiobutton id="r2" name="choice" value="b" label="Option B" checked="true"></ejs-radiobutton>
    <ejs-radiobutton id="r3" name="choice" value="c" label="Option C"></ejs-radiobutton>
    <ejs-button id="submit" type="submit" cssClass="e-primary" content="Submit"></ejs-button>
</form>

public async Task<IActionResult> OnPostAsync()
{
    string choice = Request.Form["choice"];
    // Process the selected value
    return Page();
}

Disabled RadioButton

<ejs-radiobutton id="r1" name="group2" label="Disabled" disabled="true" checked="true"></ejs-radiobutton>

DropDownButton

The DropDownButton component is a button that opens a popup menu when clicked. It supports items with icons, separators, disabled items, navigation URLs, and event handling for item selection.

Navigation Guide

Getting Started

📄 Read: references/dropdownbutton-getting-started.md

• Prerequisites and NuGet package installation
• Tag helper registration in _ViewImports.cshtml
• Stylesheet and script CDN setup in _Layout.cshtml
• Script manager registration
• Basic dropdown button rendering with <ejs-dropdownbutton>
• Binding items from controller via List<object>

Popup Items

📄 Read: references/dropdownbutton-popup-items.md

• Items with icons (iconCss)
• Separator items (separator: true)
• Disabled items (disabled: true)
• Navigation URLs (url property)
• Item structure reference

Events and Interactivity

📄 Read: references/dropdownbutton-events-and-interactivity.md

• Click events for primary button
• Open / close events for popup lifecycle
• Item selection handling with select event
• beforeOpen / beforeClose events

API Reference

📄 Read: references/dropdownbutton-api.md

• Property reference table
• Event signatures
• Tag helper attribute syntax

Accessibility

📄 Read: references/dropdownbutton-accessibility.md

• WCAG 2.2 AA compliance
• WAI-ARIA attributes (aria-haspopup, aria-expanded)
• Keyboard navigation
• Screen reader support

Quick Start

Controller (HomeController.cs):

public ActionResult Index()
{
    List<object> items = new List<object>();
    items.Add(new { text = "Cut" });
    items.Add(new { text = "Copy" });
    items.Add(new { text = "Paste" });
    ViewBag.items = items;
    return View();
}

View (Index.cshtml):

<ejs-dropdownbutton id="ddb" content="Edit" items="ViewBag.items"></ejs-dropdownbutton>

Common Patterns

DropDownButton with Icons

@{
    List<object> items = new List<object>();
    items.Add(new { text = "Cut", iconCss = "e-icons e-cut-icon" });
    items.Add(new { text = "Copy", iconCss = "e-icons e-copy-icon" });
    items.Add(new { text = "Paste", iconCss = "e-icons e-paste-icon" });
}
<ejs-dropdownbutton id="ddb" content="Edit" items="items"></ejs-dropdownbutton>

Handle Item Selection

<ejs-dropdownbutton id="ddb" content="Actions" items="ViewBag.items"
    select="onItemSelect"></ejs-dropdownbutton>

<script>
    function onItemSelect(args) {
        console.log('Selected:', args.item.text);
    }
</script>

Floating Action Button (FAB)

The Floating Action Button (FAB) component is a circular button that floats over the UI, typically used for the primary or most common action on a screen. It supports icon-only or text-and-icon content, 9 position values relative to a target container, and color variants.

Navigation Guide

Getting Started

📄 Read: references/floating-action-button-getting-started.md

• Prerequisites and NuGet package installation
• Tag helper registration in _ViewImports.cshtml
• Stylesheet and script CDN setup in _Layout.cshtml
• Script manager registration
• Basic FAB rendering with <ejs-fab>
• FAB with icons (iconCss)
• Positioning to containers with target

Positions

📄 Read: references/floating-action-button-positions.md

• 9 position values (TopLeft, TopCenter, TopRight, MiddleLeft, Center, MiddleRight, BottomLeft, BottomCenter, BottomRight)
• Position examples and use cases

Icons

📄 Read: references/floating-action-button-icons.md

• Icon-only FAB
• Common icons (e-plus-icon, e-edit-icon, e-delete-icon, e-search-icon, e-call-icon, e-chat-icon, e-email-icon)
• Icon positioning

Styles

📄 Read: references/floating-action-button-styles.md

• Built-in color variants (e-primary, e-success, e-danger)
• Custom styling with CSS

API Reference

📄 Read: references/floating-action-button-api.md

• Property reference table
• Tag helper attribute syntax

Accessibility

📄 Read: references/floating-action-button-accessibility.md

• WCAG 2.2 AA compliance
• aria-label for icon-only buttons
• Keyboard navigation
• Screen reader support

Quick Start

1. Install NuGet package:

Install-Package Syncfusion.EJ2.AspNet.Core

2. Register Tag Helper in ~/Pages/_ViewImports.cshtml:

@addTagHelper *, Syncfusion.EJ2

3. Add CSS and script in ~/Pages/Shared/_Layout.cshtml:

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. Add Script Manager at end of <body>:

<ejs-scripts></ejs-scripts>

5. Render the FAB:

<ejs-fab id="fab" content="Add" cssClass="e-primary"></ejs-fab>

Common Patterns

FAB with Icon

<ejs-fab id="fab" iconCss="e-icons e-plus-icon" cssClass="e-primary"></ejs-fab>

Positioned FAB

<div id="container" style="position: relative; height: 400px;">
    <ejs-fab id="fab" content="Add" position="BottomRight" target="#container"></ejs-fab>
</div>

FAB Click Handler

<ejs-fab id="fab" iconCss="e-icons e-plus-icon" cssClass="e-primary" onclick="onFabClick"></ejs-fab>
<script>
    function onFabClick() {
        console.log('FAB clicked');
    }
</script>

ProgressButton

The ProgressButton component is a button that displays a progress indicator during asynchronous operations. It supports spinner animation, progress bar (0–100%), and complete progress feedback while a long-running task is in progress.

Navigation Guide

Getting Started

📄 Read: references/progressbutton-getting-started.md

• Prerequisites and NuGet package installation
• Tag helper registration in _ViewImports.cshtml
• Stylesheet and script CDN setup in _Layout.cshtml
• Script manager registration
• Basic ProgressButton rendering with <ejs-progressbutton>
• Progress animation with setInterval

Spinner and Progress

📄 Read: references/progressbutton-spinner-and-progress.md

• Progress display (0–100)
• enableProgress="true" property
• Spinner configuration
• Hiding the spinner
• Real-time progress updates with progress property

Style and Appearance

📄 Read: references/progressbutton-style-and-appearance.md

• Color variants (e-primary, e-success, e-danger)
• Custom styling
• Size variants (e-small)

API Reference

📄 Read: references/progressbutton-api.md

• Property reference table
• Tag helper attribute syntax

Accessibility

📄 Read: references/progressbutton-accessibility.md

• WCAG 2.2 AA compliance
• aria-busy and aria-valuenow attributes
• Keyboard navigation
• Screen reader support

Quick Start

1. Install NuGet package:

Install-Package Syncfusion.EJ2.AspNet.Core

2. Register Tag Helper in ~/Pages/_ViewImports.cshtml:

@addTagHelper *, Syncfusion.EJ2

3. Add CSS and script in ~/Pages/Shared/_Layout.cshtml:

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. Add Script Manager at end of <body>:

<ejs-scripts></ejs-scripts>

5. Render the ProgressButton:

<ejs-progressbutton id="progress" content="Submit" enableProgress="true"></ejs-progressbutton>

Common Patterns

ProgressButton with Click Handler

<ejs-progressbutton id="upload" content="Upload" cssClass="e-primary"
    enableProgress="true" begin="onBegin" progress="onProgress" end="onEnd"></ejs-progressbutton>

<script>
    function onBegin(args) {
        // Start the operation
    }
    function onProgress(args) {
        // args.percent contains the progress (0-100)
        console.log('Progress:', args.percent + '%');
    }
    function onEnd(args) {
        // Operation complete
    }
</script>

ProgressButton with Spinner

<ejs-progressbutton id="spin" content="Loading" cssClass="e-primary" spinSettings="ViewBag.spin"></ejs-progressbutton>

Speed Dial

The Speed Dial component is a floating action button that expands into a menu of related action items when clicked. It supports linear and radial display modes, 9 position values, and complete item configuration with icons and titles.

Navigation Guide

Getting Started

📄 Read: references/speeddial-getting-started.md

• Prerequisites and NuGet package installation
• Tag helper registration in _ViewImports.cshtml
• Stylesheet and script CDN setup in _Layout.cshtml
• Script manager registration
• Position-relative container requirement
• Basic SpeedDial rendering with <ejs-speeddial>
• SpeedDial with items

Items

📄 Read: references/speeddial-items.md

• Item structure (text, iconCss, title properties)
• Icons and titles
• Item configuration

Display Modes

📄 Read: references/speeddial-display-modes.md

• Linear mode (Linear)
• Radial mode (Radial)
• Direction options (Up, Down, Left, Right)

Positions

📄 Read: references/speeddial-positions.md

• 9 position values (TopLeft through BottomRight)
• Position examples

API Reference

📄 Read: references/speeddial-api.md

• Property reference table
• Event signatures
• Tag helper attribute syntax

Accessibility

📄 Read: references/speeddial-accessibility.md

• WCAG 2.2 AA compliance
• aria-haspopup and aria-expanded attributes
• Keyboard navigation
• Menu navigation patterns

Quick Start

Controller (HomeController.cs):

public ActionResult Index()
{
    List<SpeedDialItem> items = new List<SpeedDialItem>();
    items.Add(new SpeedDialItem
    {
        Text = "Cut"
    });
    items.Add(new SpeedDialItem
    {
        Text = "Copy"
    });
    items.Add(new SpeedDialItem
    {
        Text = "Paste"
    });
    return View();
}

View (Index.cshtml):

<div id="container" style="position: relative; height: 400px;">
    <ejs-speeddial id="sd" content="Action" items="ViewBag.items" target="#container"></ejs-speeddial>
</div>

Common Patterns

Radial Mode

<ejs-speeddial id="sd" content="Edit" items="ViewBag.items"
    mode="Syncfusion.EJ2.Buttons.SpeedDialMode.Radial"
    direction="Syncfusion.EJ2.Buttons.SpeedDialDirection.Up">
</ejs-speeddial>

Linear Mode with Direction

<ejs-speeddial id="sd" content="More" items="ViewBag.items"
    mode="Syncfusion.EJ2.Buttons.SpeedDialMode.Linear"
    direction="Syncfusion.EJ2.Buttons.SpeedDialDirection.Left">
</ejs-speeddial>

SplitButton

The SplitButton component combines a primary action button with a dropdown arrow that reveals a popup list of secondary action items. Clicking the primary button triggers the default action; clicking the dropdown arrow opens the popup.

Navigation Guide

Getting Started

📄 Read: references/split-button-getting-started.md

• NuGet package installation and tag helper registration
• Stylesheet and script CDN setup
• Basic SplitButton with popup items (content, items)
• Running the application for the first time
• Controller action to populate ViewBag.items

Icons and Appearance

📄 Read: references/split-button-icons-and-appearance.md

• Adding icons via iconCss property
• Changing icon position (iconPosition: Left / Top)
• Vertical button layout using cssClass="e-vertical"
• Icons on popup action items
• Separator lines between popup items (separator: true)
• Style and appearance CSS class reference (.e-dropdown-btn, .e-split-btn, etc.)
• Theme Studio customization

Popup Items and Templating

📄 Read: references/split-button-popup-items.md

• Defining popup items with text, iconCss, separator, id, url, disabled
• Item templating via beforeItemRender event
• Popup templating using the target property
• Grouping items using ListView as target

How-To Scenarios

📄 Read: references/split-button-how-to.md

• Set disabled state via disabled property
• Enable right-to-left layout with enableRtl
• Open a Dialog on popup item click using select event
• Underline a character in item text using beforeItemRender
• Group items in popup with ListView

Events and Interactivity

📄 Read: references/split-button-events.md

• click — primary button clicked
• select — popup action item selected
• beforeOpen / open / close / beforeClose — popup lifecycle
• beforeItemRender — customize each popup item at render time
• created — component initialization complete
• Practical event handler examples

Accessibility

📄 Read: references/split-button-accessibility.md

• WCAG 2.2 AA compliance
• WAI-ARIA attributes (role, aria-haspopup, aria-expanded, aria-owns, aria-disabled)
• Keyboard navigation shortcuts
• Screen reader support
• Accessibility checker validation

API Reference

📄 Read: references/split-button-api.md

• Complete property list with types and defaults
• Event signatures
• Method reference (toggle, destroy)
• EJ1 to EJ2 migration mapping

Quick Start

Controller (HomeController.cs):

public ActionResult Index()
{
    List<object> items = new List<object>();
    items.Add(new { text = "Cut" });
    items.Add(new { text = "Copy" });
    items.Add(new { text = "Paste" });
    ViewBag.items = items;
    return View();
}

View (Index.cshtml):

<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"></ejs-splitbutton>

Common Patterns

SplitButton with Icon

<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"
    iconCss="e-icons e-paste"></ejs-splitbutton>

SplitButton with Icon on Top (Vertical style)

<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"
    iconCss="e-icons e-paste" iconPosition="Top"
    cssClass="e-vertical"></ejs-splitbutton>

Disabled SplitButton

<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"
    disabled="true"></ejs-splitbutton>

RTL SplitButton

<ejs-splitbutton id="rtl" content="Message" items="ViewBag.items"
    enableRtl="true"></ejs-splitbutton>

Handle Primary Click and Item Select

<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"
    click="onPrimaryClick" select="onItemSelect"></ejs-splitbutton>

<script>
    function onPrimaryClick(args) {
        // Primary button clicked
    }
    function onItemSelect(args) {
        // args.item contains the selected popup item
        console.log(args.item.text);
    }
</script>

Switch

The Switch component is a toggle control that allows users to switch between ON and OFF states. Use it for boolean settings, feature toggles, and quick state changes. It supports ON/OFF labels, sizes, RTL, custom styling, and form integration.

Navigation Guide

Getting Started

📄 Read: references/switch-getting-started.md

• Prerequisites and NuGet package installation
• Tag helper registration in _ViewImports.cshtml
• Stylesheet and script CDN setup in _Layout.cshtml
• Script manager registration
• Basic switch rendering with <ejs-switch>
• ON/OFF labels with onLabel and offLabel
• Initial state with checked

Features

📄 Read: references/switch-features.md

• Disabled state
• Size variants (e-small)
• RTL support with enableRtl
• Form integration with name and value

Events

📄 Read: references/switch-events.md

• Change event handling
• State change prevention with BeforeChange event
• Created event

Customization

📄 Read: references/switch-customization.md

• Custom styling
• Bar and handle customization
• Color customization

API Reference

📄 Read: references/switch-api.md

• Property reference table
• Event signatures
• Tag helper attribute syntax

Accessibility

📄 Read: references/switch-accessibility.md

• WCAG 2.2 AA compliance
• ARIA attributes (role="switch", aria-checked)
• Keyboard navigation (Space to toggle)
• Screen reader support

Quick Start

1. Install NuGet package:

Install-Package Syncfusion.EJ2.AspNet.Core

2. Register Tag Helper in ~/Pages/_ViewImports.cshtml:

@addTagHelper *, Syncfusion.EJ2

3. Add CSS and script in ~/Pages/Shared/_Layout.cshtml:

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. Add Script Manager at end of <body>:

<ejs-scripts></ejs-scripts>

5. Render the Switch:

<ejs-switch id="switch1" onLabel="ON" offLabel="OFF" checked="true"></ejs-switch>

Common Patterns

Switch with Form Submission

<form>
    <ejs-switch id="wifi" name="wifi" value="on" checked="true"></ejs-switch>
    <ejs-switch id="bluetooth" name="bluetooth" value="on"></ejs-switch>
    <ejs-button id="submit" type="submit" content="Save"></ejs-button>
</form>

Prevent State Change

<ejs-switch id="switch1" beforeChange="onBeforeChange"></ejs-switch>
<script>
    function onBeforeChange(args) {
        args.cancel = true; // Prevents toggle
    }
</script>

Small Switch with Change Event

<ejs-switch id="notify" cssClass="e-small" change="onNotifyChange"></ejs-switch>
<script>
    function onNotifyChange(args) {
        console.log('Notifications:', args.checked ? 'ON' : 'OFF');
    }
</script>

Chips

The Chips component displays compact elements that represent inputs, attributes, or actions. Use them for tags, filters, contacts, or removable input values. They support selection modes (None, Single, Multiple), leading/trailing icons, avatar text/images, delete functionality, outline variants, predefined color styles, and drag-and-drop reordering.

Navigation Guide

Getting Started

📄 Read: references/chips-getting-started.md

• Prerequisites and NuGet package installation
• Tag helper registration in _ViewImports.cshtml
• Stylesheet and script CDN setup in _Layout.cshtml
• Script manager registration with <ejs-scripts>
• Single chip rendering with <ejs-chiplist text="...">
• Chip list rendering with <e-chips> and <e-chip>

Types and Selection

📄 Read: references/chips-types-and-selection.md

• Input chips (deletable, single selection)
• Choice chips (single selection — radio-like)
• Filter chips (multiple selection — checkbox-like)
• Action chips (trigger operations on click)
• Pre-selecting chips with selected-chips
• Handling click and delete events
• Disabled chips

Customization

📄 Read: references/chips-customization.md

• Predefined styles (e-primary, e-success, e-info, e-warning, e-danger)
• Leading icons (CSS classes and URLs)
• Avatar images and text
• Trailing icons
• Outline chips with e-outline
• Custom templates
• HTML attributes
• RTL support

Style

📄 Read: references/chips-style.md

• Chip text styling
• Icon styling
• Delete button styling
• Selection state styling
• Avatar text styling
• Height/size customization
• CSS class hierarchy

Drag and Drop

📄 Read: references/chips-drag-and-drop.md

• Enabling drag and drop with allowDragAndDrop
• Restricting drag area
• Cross-container drag and drop
• Drag events (onDragStart, onDragEnd, onDrop)
• Preventing drag/drop conditionally
• Customizing drag clone

API Reference

📄 Read: references/chips-api.md

• Complete property reference (Text, Chips, Selection, SelectedChips, EnableDelete, CssClass, etc.)
• Methods (GetSelectedChips, Select, Unselect, Delete, Refresh)
• Events (OnClick, OnDelete, OnSelect, OnDragStart, OnDragEnd)
• ChipModel interface
• Event argument types

Accessibility

📄 Read: references/chips-accessibility.md

• WCAG 2.2 AA compliance
• WAI-ARIA attributes (role="listbox", role="option", aria-selected, aria-label)
• Keyboard navigation (Tab, Arrow keys, Enter, Delete)
• Screen reader support
• RTL accessibility
• Color contrast

Quick Start

1. Install NuGet package:

Install-Package Syncfusion.EJ2.AspNet.Core

2. Register Tag Helper in ~/Pages/_ViewImports.cshtml:

@addTagHelper *, Syncfusion.EJ2

3. Add CSS and script in ~/Pages/Shared/_Layout.cshtml:

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. Add Script Manager at end of <body>:

<ejs-scripts></ejs-scripts>

5. Render the Chips:

<ejs-chiplist id="chip-list">
    <e-chips>
        <e-chip text="Andrew"></e-chip>
        <e-chip text="Janet"></e-chip>
        <e-chip text="Laura"></e-chip>
        <e-chip text="Margaret"></e-chip>
    </e-chips>
</ejs-chiplist>

Common Patterns

Single Chip

<ejs-chiplist id="chip" text="Janet Leverling"></ejs-chiplist>

Deletable Chips

<ejs-chiplist id="deletable" enableDelete="true">
    <e-chips>
        <e-chip text="Tag 1"></e-chip>
        <e-chip text="Tag 2"></e-chip>
    </e-chips>
</ejs-chiplist>

Filter Chips (Multiple Selection)

<ejs-chiplist id="filter" selection="Multiple">
    <e-chips>
        <e-chip text="React"></e-chip>
        <e-chip text="Angular"></e-chip>
        <e-chip text="Vue"></e-chip>
    </e-chips>
</ejs-chiplist>

Chips with Avatar Text

<ejs-chiplist id="avatar-chips">
    <e-chips>
        <e-chip text="Andrew" avatarText="A"></e-chip>
        <e-chip text="Janet" avatarText="J"></e-chip>
    </e-chips>
</ejs-chiplist>

Colored Chips

<ejs-chiplist id="colored">
    <e-chips>
        <e-chip text="Primary" cssClass="e-primary"></e-chip>
        <e-chip text="Success" cssClass="e-success"></e-chip>
        <e-chip text="Danger" cssClass="e-danger"></e-chip>
    </e-chips>
</ejs-chiplist>

Draggable Chips

<ejs-chiplist id="draggable" allowDragAndDrop="true">
    <e-chips>
        <e-chip text="Task 1"></e-chip>
        <e-chip text="Task 2"></e-chip>
    </e-chips>
</ejs-chiplist>