Ej2 Aspnetcore Docs

Table of Contents
Introduction 1.1
Installation 1.2
System Requirements 1.3
Getting Started 1.4
NuGet Packages 1.5
State Persistence 1.6
Accessibility 1.7
Browser Compatibility 1.8
Theming 1.9
Avatar 2.1
Getting Started(ASP.NET Core) 2.1.1
Types 2.1.2
How-To 2.1.3
Badge 3.1
Types 3.1.2
How-To 3.1.3
Release Notes 4.1
v16.2.41 4.1.1
v16.1.37 4.1.2
v16.1.34 4.1.3
v16.1.32 4.1.4
v16.1.25 4.1.5
v16.1.24 4.1.6
Migration from 16.1 to 16.2 4.1.7
Button Group 5.1
Getting Started 5.1.1
Types and Styles 5.1.2
Selection and Nesting 5.1.3
Accessibility 5.1.4
How To 5.1.5
1
Base 6.1
Localization 6.1.1
Internationalization 6.1.2
Right-To-Left 6.1.3
Button 7.1
Types and Styles 7.1.2
How To 7.1.3
Calendar 8.1
Date Range 8.1.2
Globalization 8.1.3
Customization 8.1.4
Calendar Views 8.1.5
Accessibility 8.1.6
How To 8.1.7
Card 9.1
Header and Content 9.1.2
Image and Divider 9.1.3
Action Buttons 9.1.4
Horizontal Card 9.1.5
How to 9.1.6
Chart 10.1
Working with Data 10.1.2
Chart Dimensions 10.1.3
Category Axis 10.1.4
Numeric Axis 10.1.5
DateTime Axis 10.1.6
Logarithmic Axis 10.1.7
Axis Labels 10.1.8
Axis Customization 10.1.9
Stripline 10.1.10
2
Multiple Panes 10.1.11
Basic Chart 10.1.12
Polar & Radar 10.1.13
Financial Charts 10.1.14
Other Types 10.1.15
Multiple Series 10.1.16
Technical Indicators 10.1.17
Trendlines 10.1.18
Markers 10.1.19
Data Labels 10.1.20
Annotations 10.1.21
Legend 10.1.22
Tooltip 10.1.23
Zooming 10.1.24
Crosshair and Trackball 10.1.25
Selection 10.1.26
Print and Export 10.1.27
Appearance 10.1.28
Accessibility 10.1.29
Internationalization 10.1.30
Localization 10.1.31
Check Box 11.1
Label and Size 11.1.2
How To 11.1.4
Color Picker 12.1
Mode And Value 12.1.2
How To 12.1.4
Context Menu 13.1
Icons and Navigation 13.1.2
3
Template and Multilevel nesting 13.1.3
How To 13.1.5
Datepicker 14.1
Date Range 14.1.2
Date Format 14.1.3
Globalization 14.1.4
Strict Mode 14.1.5
Customization 14.1.6
Start and Depth View 14.1.7
How To 14.1.9
Daterangepicker 15.1
Range Restriction 15.1.2
How To 15.1.6
Dialog 16.1
Templates 16.1.2
Animation 16.1.3
Localization 16.1.4
How To 16.1.6
Document Editor 17.1
Drop Down Button 18.1
Icons 18.1.2
Popup Items 18.1.3
4
How To 18.1.5
Grid 19.1
Data Binding 19.1.2
Columns 19.1.3
Row 19.1.4
Cell 19.1.5
Editing 19.1.6
Sorting 19.1.7
Grouping 19.1.8
Filtering 19.1.9
Searching 19.1.10
Paging 19.1.11
Scrolling 19.1.12
Virtualization 19.1.13
Selection 19.1.14
Aggregates 19.1.15
Print 19.1.16
State Persistence 19.1.17
Toolbar 19.1.18
Pdf Export 19.1.19
Excel Export 19.1.20
Clipboard 19.1.23
Context Menu 19.1.24
How To 19.1.25
Heatmap 20.1
Working With Data 20.1.2
Rendering Modes 20.1.3
Axis 20.1.4
Palette 20.1.5
Legend 20.1.6
5
Appearance 20.1.7
Dimensions 20.1.8
Tooltip 20.1.9
List View 21.1
Data Binding 21.1.2
Grouping 21.1.3
Checklist 21.1.4
Nested List 21.1.5
Customizing Templates 21.1.6
Virtualization 21.1.7
Maskedtextbox 22.1
Mask Configuration 22.1.2
How To 22.1.4
Radio Button 23.1
Label and Size 23.1.2
How To 23.1.3
Range Navigator 24.1
Range 24.1.2
Lightweight 24.1.3
Series Type 24.1.4
Type of Data 24.1.5
Period Selector 24.1.6
Labels 24.1.7
Grid Lines and Tick Lines 24.1.8
Tooltip 24.1.10
RTL 24.1.11
Export and Print 24.1.12
6
Schedule 25.1
Appointments 25.1.2
Data binding 25.1.3
Editor customization 25.1.4
Timezone 25.1.5
Views 25.1.6
Resources 25.1.7
Readonly 25.1.8
Timescale 25.1.9
Header bar customization 25.1.10
Working days and hours 25.1.11
Schedule dimensions 25.1.13
Customizations 25.1.14
Recurrence editor 25.1.15
How To 25.1.17
Sidebar 26.1
Target 26.1.2
Types 26.1.3
Auto Close 26.1.4
Dock 26.1.5
How To 26.1.6
Slider 27.1
Ticks 27.1.2
Formatting 27.1.3
Limits 27.1.4
How-To 27.1.6
Split Button 28.1
7
Icons 28.1.2
Popup Items 28.1.3
How To 28.1.5
Switch 29.1
How To 29.1.3
Textbox 30.1
Groups 30.1.2
Sizing 30.1.3
Validation 30.1.4
How To 30.1.5
Timepicker 31.1
Time Range 31.1.2
Strict Mode 31.1.4
How To 31.1.6
Toast 32.1
Configuring options 32.1.2
Positioning 32.1.3
Action Buttons 32.1.4
TimeOut 32.1.5
Template 32.1.6
Animation 32.1.7
How to 32.1.9
Tooltip 33.1
Setting Dimension 33.1.2
8
Content 33.1.3
Position 33.1.4
Open Mode 33.1.5
Animation 33.1.6
Uploader 34.1
Asynchronous Upload 34.1.2
Chunk Upload 34.1.3
Drag and drop 34.1.4
Validation 34.1.5
Form Support 34.1.6
Template 34.1.7
Localization 34.1.8
How To 34.1.10
9
Essential JS 2 for ASP.NET Core
Essential JS 2 for ASP.NET Core is a modern enterprise UI toolkit that has been the built from
the ground up to be lightweight, responsive, modular and touch friendly. It also available in other
frameworks such as JavaScript and Angular, React. This documentation is a common
documentation site for ASP.NET Core wrappers for Essential JS 2.
How to best read this user guide

The best way to get started would be to read the "Getting Started" section of the
documentation for the component that you would like to start using first. The "Getting
Started" guide gives just enough information that you need to know before starting to write
code. This is the only section that we recommend reading end-to-end before starting to write
code, all other information can be referred as needed.
Now that you are familiar with the basics of using the component, the next step would be to
start integrating the component into your application. A good starting point would be to refer
to the code snippets in the online sample browser which contains hundreds of code samples,
it is very likely that you will find a code sample that resembles your intended usage scenario.
Another valuable resource is the API reference which provides detailed information on the
object hierarchy as well as the settings available on every object.
Getting Help
If you are still not able to find the information that you are looking for in the self-help
resources mentioned above then please contact us by creating a support ticket in our
support site or ask your query. with tag syncfusion-ej2 .
10
Installation
Installing Essential JS 2 for ASP.NET Core

Download the setup file (.exe) of Essential Studio for ASP.NET Core product from this link
with your Syncfusion account.
Follow the steps mentioned in the setup guide and install the specific/entire platform in your
machine.
Install Location and Samples

Here, the default location on your machine is illustrated where the Essential Studio package or
the Essential Studio for ASP.NET Core suite gets installed, from that the Syncfusion assemblies
and dashboard samples can be accessed.
The following specified location is the place where all the assemblies, scripts, CSS files, and
samples are available.
(installed location)\Syncfusion\Essential Studio\16.1.0.24\
For example, If you have installed the Essential Studio package within C:\Program Files(x86),
then navigate to the following location. C:\Program Files (x86)\Syncfusion\Essential
Studio\16.1.0.24\Samples
The Dashboard can be opened by running the Dashboard.exe file present within the following
location.
(installed location)\Syncfusion\Essential Studio\16.1.0.24\Infrastructure\Dashboard\4.0
For example, If you have installed the Essential Studio package within C:\Program Files(x86),
navigate to the following location. C:\Program Files (x86)\Syncfusion\Essential
Studio\16.1.0.24\Infrastructure\Dashboard\4.0
To run the local samples from dashboard and other online samples, refer to the link here.
11
System Requirements
Essential JS 2 for ASP.NET Core

To get start with ASP.NET Core application, need to ensure the following software to be installed
on the machine.
Integrated Development Environment

By using the following IDEs, you can develop ASP.NET Core Applications
Visual Studio 2017

Visual Studio Code
Framework & SDK

The below tool required to run the Essential JS 2 for ASP.NET Core application.
.NET Core 2.0
Essential JS 2 for ASP.NET MVC

To get start with ASP.NET MVC application, need to ensure the following software to be installed
on the machine.
Integrated Development Environment (IDE)

By using the following IDEs, you can develop ASP.NET MVC Applications
Visual Studio 2015

Visual Studio 2017
Frameworks & SDK

The below tools required to run the Essential JS 2 for ASP.Net MVC application.
.Net Framework 4.5 or above.

ASP.NET MVC 4 or ASP.NET MVC 5
12
Getting Started
Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the
NuGet feed, you also have to include a license key in your projects. Please refer to this link
to know about registering Syncfusion license key in your ASP.NET Core application to use
our components.
Prerequisites
on the machine.
Visual Studio 2017

DotNet Core 2.0
Setup ASP.NET Core application with Essential JS 2 for

ASP.NET Core
The following steps to create ASP.NET Core Application.
Step 1: Create ASP.NET Core Web Application with default template project in Visual Studio
2017.
13
Step 2: Once your project created. We need to add Syncfusion EJ2 package into your
application by using Nuget Package Manager.
Open the NuGet Package Manager.
Install the Syncfusion.EJ2 package to the application
After Installation complete this will included in the project. You can refer it from the Project
Assembly Reference.
14
Note: We need install NewtonSoft.JSON as dependency since it Syncfusion.EJ2 dependent to
NewtonSoft.JSON package.
Step 3: Open the Views/_ViewImports.cshtml to import Syncfusion.EJ2 package.
@addTagHelper *, Syncfusion.EJ2
Step 4: Add client side resource through CDN or local package in the layout page
Views/Shared/_Layout.cshtml.
<head>
@* Syncfusion Essential JS 2 Styles *@
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css" />
@* Syncfusion Essential JS 2 Scripts *@

<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
</head>
Step 5: Adding Script Manager in layout page Views/Shared/_Layout.cshtml. The Script

Manager need to be added after body rendered.
<body>
@RenderBody()
@RenderSection("Scripts", required: false)
<ejs-scripts></ejs-scripts>
</body>
Step 6: Adding Syncfusion Essential JS 2 for ASP.Net Core component in any page you want.
For Example, We have added the Calendar component in Views/Home/Index.cshtml page.
<div>
<ejs-calendar id="calendar"></ejs-calendar>
</div>
Output be like the below.
15
16
NuGet Packages for ASP.NET Core
You can use the Syncfusion ASP.NET Core NuGet packages without installing the
Essential Studio or ASP.NET Core platform installation to implement the Syncfusion
ASP.NET Core controls.
Get the Syncfusion NuGet feed URL

our components.
You should get the private Syncfusion ASP.NET Core NuGet feed URL to install or upgrade the
Syncfusion ASP.NET Core NuGet packages. To get the URL from Syncfusion website use the
following steps:
1. Navigate to nuget.syncfusion.com , and select WEB tab.
2. Navigate to WEB(Essential JS 2), click the Copy URL label under ASP.NET Core platform
to copy the Syncfusion ASP.NET Core platform NuGet feed to clipboard or directly use the
following URL:
http://nuget.syncfusion.com/nuget_aspnetcore-js2/nuget/getsyncfusionpackages/aspnetcore-
js2
3. Now, use this NuGet feed URL to access the Syncfusion NuGet Packages in Visual Studio.
Add the Syncfusion NuGet feed URL
Windows
1. Open your Visual Studio application.
2. On the Tools menu, select Options.
3. Expand the NuGet Package Manager and select Package Sources.
4. Click the Add button (green plus), and enter the ‘Package Name’ and ‘Package Source URL’
of the Syncfusion ASP.NET Core NuGet packages.
17
Name: Name of the package listed in the available package sources. Source: Syncfusion
ASP.NET Core NuGet Feed URL http://nuget.syncfusion.com/nuget_aspnetcore-
js2/nuget/getsyncfusionpackages/aspnetcore-js2.
5. Click the Update button to add the name and source details to package sources.
macOS
1. Open your Visual Studio application.
2. Right-click on the Packages folder in the project, and then select Add Packages…
3. Choose the Configure Sources… from the dropdown that appears in the left corner of the
Add Packages dialog.
4. At the bottom right corner of the dialog, click the Add button to enter the feed name and the
URL.
Name: Enter the name (For e.g., Syncfusion ASP.NET Core Packages).
Location: Enter the following URL – http://nuget.syncfusion.com/nuget_aspnetcore-

js2/nuget/getsyncfusionpackages/aspnetcore-js2.
5. Now, click Add Source and then click OK.
Installing NuGet Packages
Using NuGet Package Manager

The NuGet Package Manager can be used to search and install NuGet packages in the Visual
Studio solution or project:
1. On the Tools, menu, NuGet Package Manager | Manage NuGet Packages for Solution...
Alternatively, right-click on the project/solution in Solution Explorer tab, and choose Manage
NuGet Packages…
2. By default, the NuGet.org package is selected in the Package source drop-down. Select
your appropriate feed name that you configured.
18
3. The Syncfusion ASP.NET Core NuGet Packages are listed and available in the package
source feed URL. Search and install the required packages in your application, by clicking
Install button.
Using Package Manager Console

To reference the Syncfusion ASP.NET Core component using the Package Manager Console as
NuGet packages,
1. On the Tools menu, select NuGet Package Manager and then Package Manager
Console.
2. Run the following NuGet installation commands:
#install specified package in default project

Install-Package <Package Name>
#install specified package in default project with specified package source

Install-Package <Package Name> -Source <Source Location>
#install specified package in specified project

Install-Package <Package Name> - ProjectName <Project Name>
For example:
#install specified package in default project

Install-Package Syncfusion.EJ2
#install specified package in default project with specified Package Source

Install-Package Syncfusion.EJ2 -Source “http://nuget.syncfusion.com/nuget_aspnetco
re-js2/nuget/getsyncfusionpackages/aspnetcore-js2”
#install specified package in specified project

Install-Package Syncfusion.EJ2 -ProjectName SyncfusionDemoApplication
Using Visual Studio for macOS

Add packages can be used to search and install NuGet packages to the Visual Studio project in
macOS:
1. Right-click on the folder in the project, and then select Add Packages…
19
2. By default, the NuGet.org package is selected in the Package source drop-down. Select
the appropriate feed name.
3. The Syncfusion ASP.NET Core NuGet Packages available in the package source location
will be listed. Search and install the required packages in your application, by clicking Add
Package button.
Managing NuGet package using NuGet CLI

The NuGet Command Line Interface (CLI), nuget.exe , provides the full extent of NuGet
functionality to install, create, publish, and manage packages without making any change to the
project files.
Configure NuGet feed URL

1. Download the latest NuGet CLI from here.
To update the existing nuget.exe to latest version use the following command:
nuget update -self
2. Open the downloaded executable location in the command window, and run the following
commands to configure the Syncfusion ASP.NET Core NuGet packages:
#Add specified package source in NuGet.config file for Windows platform

nuget.exe Sources Add –Name <Source name> –Source <Source location>
#Add specified Package Source in Nuget.config file for MAC/Linux platform

mono nuget.exe Sources Add –Name <Source name> –Source <Source location>
For example:
#For Windows platform

nuget.exe Sources Add –Name “Syncfusion Source” –Source “http://nuget.syncfusion.c
om/nuget_aspnetcore-js2/nuget/getsyncfusionpackages/aspnetcore-js2”
#For MAC/Linux platform

mono nuget.exe Sources Add –Name “Syncfusion Source” –Source “http://nuget.syncfus
ion.com/nuget_aspnetcore-js2/nuget/getsyncfusionpackages/aspnetcore-js2”
NuGet installation
20
Download and install the required NuGet packages to a project specified in the package.config .
#install specified package in default project from specified package source for Windows
Platform
nuget.exe install <Package name | ConfigFilePath > <Options>
#install specified package in default project from specified package source for MAC/Lin
ux Platform
mono nuget.exe install <Package name | ConfigFilePath > <Options>
configPath is optional. This identifies the package.config or solutions file that lists the
packages utilized in the project.
For example:
#install specific package for Windows

nuget.exe install “Syncfusion.EJ2”
#install all package which mention in package.config path for Windows

nuget.exe install “C:\Users\SyncfusionApplication\package.config”
#install specific Syncfusion NuGet package with Syncfusion ASP.NET Core NuGet feed for
Windows
nuget.exe install “Syncfusion.EJ2” –Source “http://nuget.syncfusion.com/nuget_aspnetco
re-js2/nuget/getsyncfusionpackages/aspnetcore-js2”
#install specific package for Mac and Linux

mono nuget.exe install “ Syncfusion.EJ2”
#install all package which mention in package.config path for Mac and Linux
mono nuget.exe install “C:\Users\SyncfusionApplication\package.config”
#install specific Syncfusion NuGet package with Syncfusion ASP.NET Core NuGet feed for
Mac and Linux
mono nuget.exe install “Syncfusion.EJ2” –Source “http://nuget.syncfusion.com/nuget_asp
netcore-js2/nuget/getsyncfusionpackages/aspnetcore-js2”
Managing NuGet package using Dotnet CLI

The NuGet Command Line Interface (CLI), Dotnet.exe , provides the full extent of NuGet
functionality to add, restore, pack, publish, and manage packages without making any change to
the project files.
1. Open command prompt window with administrator privileges and navigate to your project
folder.
21
2. The specified ASP.NET Core NuGet package command as below,
Add
#Add specified package in specified project from Package Source

dotnet add package <Package name> [-s|--source] <Source location>
For example :
dotnet add package Syncfusion.EJ2 -s “http://nuget.syncfusion.com/nuget_aspnetcor

e-js2/nuget/getsyncfusionpackages/aspnetcore-js2”
Restore
#Restore all package which specified in project

dotnet restore
To know more command about the dotnet CLI, refer here.
Upgrading NuGet packages
Using NuGet Package Manger

NuGet packages can be updated to their specific version or latest version available in the Visual
Studio solution or project:
1. On the Tools menu, NuGet Package Manager | Manage NuGet Packages for Solution...
Alternatively, right-click on project/solution in the Solution Explorer tab, and choose Manage
NuGet Packages…
2. Select the Updates tab to see the packages available for update from the desired package
sources. Select the required packages and the specific version from the dropdown, and click
the Update button.
Using Visual Studio for macOS

Using Update context menu from Visual Studio for Mac application, NuGet packages can be
updated:
1. Right-click on the Packages folder in the project, and select Update.
22
2. This will update the NuGet package to the latest version. You can double-click Add
packages and choose the specific version.
To update all the projects from solution, use update option in the solution level.
Using Package Manger Console

To update the installed Syncfusion ASP.NET Core NuGet packages using the Package Manager
Console:
1. On the Tools menu, select NuGet Package Manager, and then Package Manager
Console.
2. Run the following NuGet installation commands:
#Update specific NuGet package in default project

Update-Package <Package Name>
#Update all the packages in default project

Update-Package
#Update specified package in default project with specified package source

Update-Package <Package Name> -Source <Source Location>
#Update specified package in specified project

Update-Package <Package Name> - ProjectName <Project Name>
For example:
#Update specified Syncfusion ASP.NET Core NuGet package

Update-Package Syncfusion.EJ2
#Update specified package in default project with specified Package Source

Update-Package Syncfusion.EJ2 –Source “http://nuget.syncfusion.com/nuget_aspnetcor
e-js2/nuget/getsyncfusionpackages/aspnetcore-js2”
#Update specified package in specified project
Update-Package Syncfusion.EJ2 -ProjectName SyncfusionDemoApplication
Using NuGet CLI

Using the NuGet CLI, all the NuGet packages in the project can be updated to the available latest
version:
1. Download the latest NuGet CLI from here.
To update the existing nuget.exe to latest version use the following command:
23
nuget update -self
2. Open the downloaded executable location in the command window. Run the following
“update commands” to update the Syncfusion ASP.NET Core NuGet packages.
#update all NuGet packages from config file

nuget update <configPath> [options]
#update all NuGet packages from specified Packages Source

nuget update -Source <Source Location> [optional]
configPath is optional. This identifies the package.config or solutions file lists the
packages utilized in the project.
For example:
#Update all NuGet packages from config file

nuget update “C:\Users\SyncfusionApplication\package.config”
#Update all NuGet packages from specified Packages Source

nuget update -Source “http://nuget.syncfusion.com/nuget_aspnetcore-js2/nuget/getsy
ncfusionpackages/aspnetcore-js2”
Update command is not working as expected in Mono (Mac and Linux) and projects
using PackageReference format.
24
State Persistence
Essential JS 2 has support for persisting component’s state across page refreshes or navigation.
To enable this feature, set EnablePersistence property as true to the required component. This
will store the component’s state in browser’s localStorage object on page unload event. For
example, we have enabled persistence to grid component in the following code.
view
<ejs-grid id="Grid" enablePersistence="true" allowPaging="true">

<e-grid-pageSettings pageCount="5"></e-grid-pageSettings>
<e-datamanager url='http://services.odata.org/V4/Northwind/Northwind.svc/Products/'
adaptor="ODataV4Adaptor" crossdomain="true"></e-datamanager>
<e-grid-columns>
<e-grid-column field="ProductID" headerText="ProductID" textAlign="Right" width=
"160"></e-grid-column>
<e-grid-column field="ProductName" headerText="Product Name" width="170"></e-gr
id-column>
<e-grid-column field="UnitPrice" headerText="Unit Price" format="C2" textAlign=
"Right" width="170"></e-grid-column>
<e-grid-column field="UnitsInStock" headerText="Units in Stock" textAlign="Righ
t" width="170"></e-grid-column>
<e-grid-column field="Discontinued" headerText="Discontinued" width="150" displ
ayAsCheckBox="true" textAlign="Center" type="boolean"></e-grid-column>
</e-grid-columns>
</ejs-grid>
25
Accessibility
All the Syncfusion Essential JS 2 components follows WAI-ARIA accessibility standard by
default. This enables you to build accessible web application which are fully navigable by user
with disabilities.
Keyboard Navigation
Keyboard navigation support enables users to interact with components using Keyboard
shortcuts. Each component has its own set of shortcuts, please refer the following documents to
get details for each component.
AutoComplete
Calendar
Combobox
DatePicker
Dialog
DropDownList
Grid
ListView
TimePicker
26
Browser Support
Syncfusion Essential JS 2 Component support modern browsers. This include the below
versions.
Windows
Chrome Firefox Opera Edge IE Safari IOS Android
Mobile
11
Latest Latest Latest 13 + 9+ 9+ 4.4 + IE 11 +
+
Required Polyfills
The below polyfills are required to run Essential JS 2 components in each browser.
Browser Polyfills
Chrome(latest), Firefox(latest), Opera(latest), Edge, Safari 9+ NONE
IE 11 ES6 Promise
27
Theming
THe Essential JS 2 has provided the below list of in-built themes those are,
1. Google’s Material
2. Microsoft Office’s Fabric
3. Bootstrap
4. High Contrast
The Essential JS 2 Bootstrap theme is designed based on Bootstrap v3 , however it can

be usable in Bootstrap v4 applications.
Themes are shipped as individual and combined CSS files. Combined CSS file can be referred
from the npm package @syncfusion/ej2 and individual CSS files are available within same
component repository’s style folder. In ej2 npm packages, we have shipped both CSS and
SCSS files for all components.
Referring All components CSS
@import "./node_modules/@syncfusion/ej2/<theme_name>.css";
Referring All components SCSS
@import "ej2/<theme_name>.scss";
Referring Individual Component Theme

We can get the individual theme from individual package or from ej2 package.
Referring individual Component from individual package
@import "ej2-buttons/button/<theme_name>.scss";
Referring individual Component from ej2 package
@import "ej2/button/<theme_name>.scss";
28
Overview
Avatars are icons or figures representing a particular person, used in popular media formats like
images, SVG, font icons, and letters.
Key features
Types - Provided 2 types of Avatar.
Sizes - Supports different sizes to adapt the various application scenario.
29
Getting Started
This section briefly explains about how to render Avatar component 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.
Starting with v16.2.0.x , if you reference Syncfusion assemblies from trial setup or from
the NuGet feed, you also have to include a license key in your projects. Please refer to this
link to know about registering Syncfusion license key in your ASP .NET Core application to
use our components.
Adding Avatar component to the Application

Since the Avatar is a CSS component there is no need to html tag helper, the component is
added by using CSS classes. Add the below code to your index.cshtml page which is present
under Views/Home folder.
<span class="e-avatar">GR</span>
Run the application

After successful compilation of your application, simply press F5 to run the application.
The following example shows a basic Avatar.
view
HomeController.cs
<div id='element'>
<span class="e-avatar e-avatar-xlarge"></span>
<span class="e-avatar e-avatar-large"></span>
<span class="e-avatar"></span>
<span class="e-avatar e-avatar-small"></span>
<span class="e-avatar e-avatar-xsmall"></span>
</div>
<style>
#element {
display: block;
width: 300px;
margin: 130px auto;
border-radius: 3px;
justify-content: center;
30
}
.e-avatar {
background-image: url(./pic01.png);
margin: 2px;
}
</style>
31
Types and Styles
This section explains different types of avatar.
Avatar size
The Essential JS 2 Avatar has the following predefined sizes that can be used with the .e-
avatar class to change the appearance of the avatar.
Class Name Description
e-avatar-xlarge Displays xlarge size avatar.
e-avatar-large Displays apply large size avatar.
e-avatar Displays apply default size avatar.
e-avatar-small Displays apply small size avatar.
e-avatar-xsmall Displays apply xsmall size avatar.
view
HomeController.cs
<div id='element'>
<span class="e-avatar e-avatar-xlarge"></span>
<span class="e-avatar e-avatar-large"></span>
<span class="e-avatar"></span>
<span class="e-avatar e-avatar-small"></span>
<span class="e-avatar e-avatar-xsmall"></span>
</div>
<style>
#element {
display: block;
width: 300px;
margin: 100px auto;
border-radius: 3px;
}
.e-avatar {
}
</style>
32
Avatar types
The types of Essential JS 2 avatar are:
Default
Circle
Default
The default style of the avatar is rectangular shape with rounded corners, which can be applied
from adding the modifier class .e-avatar to the target element.
view
HomeController.cs
<div id='element'>
<span class="e-avatar e-avatar-xlarge">RT</span>
<span class="e-avatar e-avatar-large">RT</span>
<span class="e-avatar">RT</span>
<span class="e-avatar e-avatar-small">RT</span>
<span class="e-avatar e-avatar-xsmall">RT</span>
</div>
<style>
#element {
display: block;
width: 260px;
margin: 100px auto;
border-radius: 3px;
}
</style>
Circle
The circle avatar style can be applied by adding the modifier class .e-avatar-circle to the
target element.
view
HomeController.cs
<div id='element'>
<span class="e-avatar e-avatar-xlarge e-avatar-circle">SJ</span>
<span class="e-avatar e-avatar-large e-avatar-circle">SJ</span>
33
<span class="e-avatar e-avatar-circle">SJ</span>
<span class="e-avatar e-avatar-small e-avatar-circle">SJ</span>
<span class="e-avatar e-avatar-xsmall e-avatar-circle">SJ</span>
</div>
<style>
#element {
display: block;
width: 300px;
margin: 100px auto;
border-radius: 3px;
}
</style>
34
How To
As the avatar is a completely customizable and integral component, this section shows some of
the customization and integration of avatar with other components.
Customize avatars
Colour customization
The avatar comes with default background colour (grey). This can be easily customized to
desired colour by adding custom class or directly selecting the avatar class from the CSS.
view
HomeController.cs
<div id='element'>
<span class="e-avatar e-avatar-xlarge e-avatar-circle green">AJ</span>
<span class="e-avatar e-avatar-xlarge e-avatar-circle violet">JK</span>
<span class="e-avatar e-avatar-xlarge e-avatar-circle rose">EL</span>
<span class="e-avatar e-avatar-xlarge e-avatar-circle blue">SR</span>
<span class="e-avatar e-avatar-xlarge e-avatar-circle red">PD</span>
</div>
<style>
#element {
display: flex;
width: 400px;
margin: 100px auto;
border-radius: 3px;
}
.e-avatar {
margin: 2px;
}
.e-avatar.green {
background-color: #87eb87;
}
.e-avatar.violet {
background-color: #ee82ee;
}
.e-avatar.blue {
35
background-color: #7171e4;
}
.e-avatar.red {
background-color: #d86e6e;
}
.e-avatar.rose {
background-color: #bc8f8f;
}
</style>
Customize avatar sizes

Even though the avatar comes with five predefined sizes, sometimes it's not enough. So, the
avatar is designed in such a way that the width and height will be relative to font-size. By
changing the font-size of the avatar element, you can change the width and height
automatically.
view
HomeController.cs
<div id='element'>
<span class="e-avatar">26px</span>
</div>
<style>
#element {
display: block;
width: 400px;
margin: 100px auto;
border-radius: 3px;
}
#element :nth-child(5) {
font-size: 18px;
}
font-size: 20px;
36
}
font-size: 22px;
}
font-size: 24px;
}
font-size: 26px;
}
</style>
Use various media in avatar

Avatars can be used with a wide variety of media formats like SVG, font-icons, images, letters,
words, etc. Some of them are given below.
view
HomeController.cs
<div class="sample_container avatar-types">

<div class="avatar-block">

<div class="e-card e-avatar-showcase">
<div class="e-card-content">

<div class="e-avatar e-avatar-xlarge e-avatar-circle image"></div>
</div>
<div>Image</div>
</div>
</div>
</div>
<div class="e-avatar e-avatar-xlarge e-avatar-circle">
<div class="svg_icons chrome"></div>
37
</div>
</div>
<div>SVG</div>
</div>
</div>
</div>
<div class="e-avatar e-avatar-xlarge e-avatar-circle">GR</div>
</div>
<div>Initial</div>
</div>
</div>
</div>
<div class="e-avatar e-avatar-xlarge e-avatar-circle">
<div class="e-people icons"></div>
</div>
</div>
<div>FontIcon</div>
</div>
</div>
</div>
<div class="e-avatar e-avatar-xlarge e-avatar-circle">User</div>
</div>
<div>Word</div>
</div>
</div>
</div>
38
<div class="e-avatar e-avatar-xlarge e-avatar-circle custom">
<div class="e-people icons"></div>
</div>
</div>
<div>Custom</div>
</div>
</div>
</div>
</div>
<style>
/* Media Quries for various devices */
@media only screen and (max-width: 965px) {

.sample_container.avatar-types {
max-width: 265px;
margin: auto;
margin-top: 0;
}
.e-avatar-showcase.e-card {
width: 120px;
}
}
@media only screen and (min-width: 965px) {

.sample_container.avatar-types {
max-width: 488px;
margin: auto;
margin-top: 35px;
}
width: 150px;
}
}
.sample_container.avatar-types .avatar-block {
display: inline-block;
vertical-align: top;
}
/* Avatar image source in 'background-image' property */
.e-avatar.image {
39
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/* SVG Icons */
.chrome {
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/200
0/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' d='M16.033 11.049a5.155 5.155 0 1
1 0 10.312 5.156 5.156 0 0 1 0-10.312zM16.124 0c1.281-.003 9.659.318 14.268 9.043h-.01
6l.01.018c.33.578 3.745 6.94-.485 14.969 0 0-4.215 8.107-14.565 7.968l-.452-.012-.004.0
07-.004.007.02-.037c.564-.98 5.112-8.884 6.357-11.067l.016-.028.007-.008.04-.069.11-.12
7a7.085 7.085 0 0 0 1.457-2.967l.01-.046.035-.151c.088-.424.148-.944.128-1.549l-.006-.1
17v-.004l-.007-.143-.006-.07-.005-.079-.012-.116v-.01l-.001-.008-.016-.158a7.2 7.2 0 0
0-.096-.572l-.018-.081-.013-.064a9.801 9.801 0 0 0-.692-2.016c-.165-.243-.332-.489-.512
-.733l-.142-.187 8.728-2.554s-10.538-.01-13.018-.001l.021.005H16.642l-.14-.013a7.034 7.
034 0 0 0-1.132-.003l-.167.016h-.047l-.034-.001c-.193.002-1.213.045-2.492.764l-.005.003
-.033.016a7.158 7.158 0 0 0-3.25 3.533l-.059.148-6.485-6.404s4.74 8.311 6.165 10.779l.0
65.113.023.088a7.14 7.14 0 0 0 7.777 5.118l.144-.02L14.854 32h-.027c-.667-.005-7.894-.2
34-12.744-7.906 0 0-4.925-7.698.37-16.573l.252-.411.001-.002C2.822 6.904 6.58.374 15.95
8.003c0 0 .057-.003.166-.003z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
.svg_icons {
width: 32px;
height: 32px;
}
/* Card Customization */
height: 113px;
padding: 5px;
margin: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
border-radius: 8px;
}
.e-avatar-showcase.e-card .e-card-header .e-card-header-title {

align-self: center;
font-size: 18px;
letter-spacing: 1px;
text-shadow: #eaeaea 1px 1px 2px;
}
.e-avatar-showcase.e-card .e-card-header .e-card-sub-title {
40
color: rgba(0, 0, 0, 0.75);
white-space: pre-line;
font-size: 14px;
text-shadow: #eaeaea 1px 1px 2px;
}
.e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {

margin: 0;
}
.e-avatar-showcase.e-card .e-card-content {
align-self: center;
padding: 10px 0 10px 0;
overflow: visible;
}
.e-avatar-showcase.e-card .e-card-content .e-avatar {

font-size: 18px;
}
/* Font Icons */
@font-face {
font-family: 'Contacts';
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gS
RgAAAEoAAAAVmNtYXDnEOdaAAABjAAAADhnbHlmiAnWagAAAcwAAADwaGVhZBD04psAAADQAAAANmhoZWEHiwNu
AAAArAAAACRobXR4C9AAAAAAAYAAAAAMbG9jYQAwAHgAAAHEAAAACG1heHABDwA1AAABCAAAACBuYW1lby+ImAA
AArwAAAIxcG9zdGUbI4AAAATwAAAAOwABAAADUv9qAFoEAAAAAAAD3QABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQ
AAWW9ja18PPPUACwPoAAAAANb8zuYAAAAA1vzO5gAAAAAD3QPqAAAACAACAAAAAAAAAAEAAAADACkAAgAAAAAAA
gAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAUGZFZABA5wDnAQNS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAM
AAQAAABQABAAkAAAABAAEAAEAAOcB//8AAOcA//8AAAABAAQAAAABAAIAAAAAADAAeAACAAAAAAO+A+oADQAZAA
A3FBYXIT4BNS4BJyEOARMeARc+ATcuAScOAS4YFwMzFxgDq4H+zYGr4QOCY2KCAwOCYmGCnCtOISFOK3qiAwOiA
e1igwICg2JjggICggAAAAACAAAAAAPdA+oAFAAoAAABDgEHIicjDgEHLgEnLgEnPgE3HgEFFBYfARYfATcXFhc2
JDcmJCcGBAOkBfK3KioXEFcpBBEMRUsBBfK3tvL8cVRLDggBBsQKLDDPARMFBf7tz87+7QI+ndEEBwI/Izh2DS+
RVZ3RBATRnWCmN3BIETecAgcBBPK1tfIEBPIAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAgAAQABAAAAAA
ACAAcACQABAAAAAAADAAgAEAABAAAAAAAEAAgAGAABAAAAAAAFAAsAIAABAAAAAAAGAAgAKwABAAAAAAAKACwAM
wABAAAAAAALABIAXwADAAEECQAAAAIAcQADAAEECQABABAAcwADAAEECQACAA4AgwADAAEECQADABAAkQADAAEE
CQAEABAAoQADAAEECQAFABYAsQADAAEECQAGABAAxwADAAEECQAKAFgA1wADAAEECQALACQBLyBDb250YWN0c1J
lZ3VsYXJDb250YWN0c0NvbnRhY3RzVmVyc2lvbiAxLjBDb250YWN0c0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bm
NmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAQwBvAG4AdABhAGMAdABzAFIAZQBnAHUAb
ABhAHIAQwBvAG4AdABhAGMAdABzAEMAbwBuAHQAYQBjAHQAcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAQwBvAG4A
dABhAGMAdABzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHM
AaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG
8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQABHVzZXIKY2hhdC0wMS13ZgAAA
A==) format('truetype');
font-weight: normal;
font-style: normal;
}
41
.people,
.e-people {
font-family: 'Contacts';
}
.e-people:before {
content: '\e700';
}
.e-avatar .e-people.icons {
font-size: 24px;
}
/* Custom Avatar Background Color */
.e-avatar.custom {
background-color: blueviolet;
}
</style>
Integrate avatars
Avatar can be integrated into various components to make a wide variety of applications. Some
of the integrations are shown in the following section.
Listview
Avatar is integrated into the listview to create contacts applications. The xsmall size avatar is
used to match the size of the list item. Letters and images are also used as avatar content.
view
HomeController.cs
@section ControlsSection{
@{ var template = "<div class='listWrapper'>" +
"${if(avatar!=='')}" +
"<span class='e-avatar e-avatar-small e-avatar-circle'>${avatar}</span>" +
"${else}" +
"<span class='${pic} e-avatar e-avatar-small e-avatar-circle'> </span>" +
"${/if}" +
"<span class='text'>" +
"${text} </span> </div>";}
42
<div class="col-lg-12 control-section">
<ejs-listview id='letterAvatarList' dataSource=@ViewBag.dataSource headerTitle=
'Contacts' template="@template" showHeader=true sortOrder="Ascending">
</ejs-listview>
</div>
}
<style>
.control-section {
overflow: auto;
}
/* Listview Customization */
#letterAvatarList {
max-width: 350px;
margin: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
#letterAvatarList .listWrapper {
width: inherit;
height: inherit;
position: relative;
}
#letterAvatarList .e-list-header {
height: 54px;
}
.material #letterAvatarList .e-list-header .e-text {

line-height: 22px;
}
.fabric #letterAvatarList .e-list-header .e-text {

line-height: 22px;
}
.bootstrap #letterAvatarList .e-list-header .e-text {

line-height: 13px;
}
.highcontrast #letterAvatarList .e-list-header .e-text {

line-height: 20px;
}
#letterAvatarList .e-list-item {
cursor: pointer;
43
height: 50px;
line-height: 44px;
border: 0;
}
/* Badge Positioning */
#letterAvatarList .e-badge {
margin-top: 12px;
}
#letterAvatarList .listWrapper .text {

width: 60%;
vertical-align: middle;
margin: 0 50px;
}
/* Avatar Positioning */
#letterAvatarList .listWrapper .e-avatar {

position: absolute;
top: calc(100% - 40px);
font-size: 10px;
left: 5px;
}
/* Avatar Background Customization */
#letterAvatarList .e-list-item:nth-child(1) .e-avatar {

background-color: #039BE5;
}

background-color: #E91E63;
}

background-color: #009688;
}
/* Avatar images using 'background-image' property */
.pic01 {
background-image: url('./../css/avatar/images/pic01.png');
}
.pic02 {
44
}
.pic03 {
}
.pic04 {
}
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace EJ2MVCSampleBrowser.Controllers.Avatar
{
public partial class AvatarController : Controller
{
public ActionResult Listview()
{
List<object> data = new List<object>();
data.Add(new { text = "Robert", id = "s_01", avatar= "", pic= "pic04" });
data.Add(new { text = "Nancy", id = "s_02", avatar= "N", pic= "" });
data.Add(new { text = "John", id = "s_03", pic= "pic01", avatar= "" });
data.Add(new { text = "Andrew", id = "s_04", avatar= "A", pic= "" });
data.Add(new { text = "Michael", id = "s_05", pic= "pic02", avatar= "" });
data.Add(new { text = "Steven", id = "s_06", pic= "pic03", avatar= "" });
data.Add(new { text = "Margaret", id = "s_07", avatar= "M", pic= "" });
ViewBag.dataSource = data;
return View();
}
}
45
Overview
Badges can be used to alert users about new or unread messages, notifications, and additional
information to the content. This can be used in conjunction with lists to represent each list’s
timeline such as ‘new’, ‘old’, and ‘preview’.
Key features
Types - Provided 8 different types of Badges.
Predefined Colours - Provided 8 predefined situational colours of Badges.
Position - Supports 3 different positions, such as default , top and bottom .
46
Getting Started
This section briefly explains about how to render Badge component in your ASP.NET Core
use our components.
Adding Badge component to the Application

Since the Badge is a CSS component there is no need to html tag helper, the component is
added by using CSS classes. Add the below code to your index.cshtml page which is present
under Views/Home folder.
<h1>Badge Component <span class="e-badge">New</span></h1>
Run the application

The following example shows a basic Badge.
view
HomeController.cs
<div id='element'>
<h1>Badge Component <span class="e-badge e-badge-primary">New</span></h1>
</div>
<style>
#element {
display: flex;
width: 400px;
margin: auto;
border-radius: 3px;
}
</style>
47
public ActionResult Badge()
{
return View();
}
48
Types and Styles
This section explains different styles and types of the badges.
Badge styles
The Essential JS 2 Badge has the following predefined styles that can be used with .e-badge
class to change the appearance of a badge.
e-badge-primary Represents a primary notification.
e-badge-secondary Represents a secondary notification.
e-badge-success Represents a positive notification.
e-badge-danger Represents a negative notification.
e-badge-warning Represents notification with caution.
e-badge-info Represents an informative notification.
e-badge-light Represents notification in light variant.
e-badge-dark Represents notification in dark variant.
view
HomeController.cs

{
return View();
}
Badge types
The types of Essential JS 2 badges are as follows:
Circle
Pill
Link
Notification
Overlap
49
Dot
Position
Circle
The circle badge style can be applied by adding the modifier class .e-badge-circle to the
target element.
view
HomeController.cs
<div id='element'>
<div style="position:relative;display:inline-block;margin:20px 20px 10px 20px;">
<div class="skype svg_icons"></div>
<span class="e-badge e-badge-success e-badge-overlap e-badge-notification e-bad
ge-circle">18</span>
</div>

<div class="twitter svg_icons"></div>
<span class="e-badge e-badge-info e-badge-overlap e-badge-notification e-badge-
circle">9</span>
</div>

<div class="facebook svg_icons"></div>
<span class="e-badge e-badge-info e-badge-overlap e-badge-notification e-badge-
circle">2</span>
</div>

<div class="firefox svg_icons"></div>
<span class="e-badge e-badge-danger e-badge-overlap e-badge-notification e-badg
e-circle">35</span>
</div>
</div>
<style>
#element {
display: flex;
width: 400px;
margin: auto;
border-radius: 3px;
position: relative;
top: 130px;
}
50
.facebook {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg id='Layer_1' data-name
='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cdefs%3e%3cstyle%
3e.cls-1%7bfill:%233c5a99;%7d.cls-2%7bfill:%23fff;%7d%3c/style%3e%3c/defs%3e%3ctitle%3e
Icon%3c/title%3e%3crect class='cls-1' x='1' y='1' width='28' height='28' rx='5.75' ry='
5.75'/%3e%3cpath class='cls-2' d='M22.53,8.7h2.58V4.64H21.24a5.25,5.25,0,0,0-4,2s-1.06,
1-1.08,3.92h0v3H12.36v4.31h3.82V29h4.41V17.86h3.8l.53-4.31H20.59v-3h0A1.78,1.78,0,0,1,2
2.53,8.7Z'/%3e%3c/svg%3e");
}
.skype {
3e.cls-1%7bfill:%2331c4ed;%7d.cls-2%7bfill:%23fff;fill-rule:evenodd;%7d%3c/style%3e%3c/
defs%3e%3ctitle%3eIcon%3c/title%3e%3crect class='cls-1' x='1' y='1' width='28' height='
28' rx='5.75' ry='5.75'/%3e%3cpath class='cls-2' d='M19.5,19.14a4,4,0,0,1-1.75,1.31,7.2
2,7.22,0,0,1-2.68.46A6.6,6.6,0,0,1,12,20.27,4,4,0,0,1,10.58,19,2.71,2.71,0,0,1,10,17.51
a1.05,1.05,0,0,1,.36-.8,1.28,1.28,0,0,1,.9-.33,1.14,1.14,0,0,1,.75.26,1.89,1.89,0,0,1,.
51.73,4.54,4.54,0,0,0,.49.86,2,2,0,0,0,.72.55A3.08,3.08,0,0,0,15,19a3,3,0,0,0,1.73-.45,
1.23,1.23,0,0,0,.63-1.06,1,1,0,0,0-.33-.8,2.3,2.3,0,0,0-.92-.49c-.39-.12-.92-.26-1.57-.
39a12.2,12.2,0,0,1-2.25-.67,3.64,3.64,0,0,1-1.48-1.06,2.47,2.47,0,0,1-.29-.47,2.84,2.84
,0,0,1-.26-1.22,2.71,2.71,0,0,1,.58-1.72,3.71,3.71,0,0,1,1.67-1.14A7.37,7.37,0,0,1,15,9
.14a7,7,0,0,1,2,.26,4.38,4.38,0,0,1,1.42.7,3.1,3.1,0,0,1,.84.92,2.11,2.11,0,0,1,.26,1,1
.13,1.13,0,0,1-.35.82,1.18,1.18,0,0,1-.88.36,1.09,1.09,0,0,1-.74-.23,2.68,2.68,0,0,1-.5
1-.67,3,3,0,0,0-.77-.94A2.42,2.42,0,0,0,14.87,11a2.76,2.76,0,0,0-1.49.36,1,1,0,0,0-.53.
81.78.78,0,0,0,.17.5,1.63,1.63,0,0,0,.52.38,4.48,4.48,0,0,0,.69.27l.15,0,1,.24c.69.15,1
.33.32,1.89.49a6.29,6.29,0,0,1,1.47.67,2.81,2.81,0,0,1,1,1,3,3,0,0,1,.35,1.49,3.15,3.15
,0,0,1-.6,1.89Zm4-2.23a7.73,7.73,0,0,0,.2-1.81c0-.22,0-.43,0-.64a8.53,8.53,0,0,0-8.56-7
.83,8.72,8.72,0,0,0-1.46.12A5.08,5.08,0,0,0,11,6a5,5,0,0,0-5,4.91,4.83,4.83,0,0,0,.68,2
.48,7.33,7.33,0,0,0-.13.94,6.51,6.51,0,0,0,0,.77,8.52,8.52,0,0,0,8.58,8.46,8.9,8.9,0,0,
0,1.57-.14A5.09,5.09,0,0,0,19,24a4.94,4.94,0,0,0,5-4.91,4.86,4.86,0,0,0-.52-2.18Z'/%3e%
3c/svg%3e");
}
.twitter {
3e.cls-1%7bfill:%231da1f2;%7d.cls-2%7bfill:%23fff;%7d%3c/style%3e%3c/defs%3e%3ctitle%3e
5.75'/%3e%3cpath class='cls-2' d='M11.67,23.11A11.3,11.3,0,0,0,23.05,11.73c0-.17,0-.35,
0-.52a8,8,0,0,0,2-2.07,8,8,0,0,1-2.29.63,4,4,0,0,0,1.75-2.21,8,8,0,0,1-2.54,1,4,4,0,0,0
-6.81,3.65A11.36,11.36,0,0,1,6.89,8a4,4,0,0,0-.54,2,4,4,0,0,0,1.78,3.33,4,4,0,0,1-1.81-
.5v.05a4,4,0,0,0,3.2,3.92,4,4,0,0,1-1,.14,3.67,3.67,0,0,1-.75-.07,4,4,0,0,0,3.74,2.78,8
.06,8.06,0,0,1-5,1.71,7.61,7.61,0,0,1-1-.06,11.31,11.31,0,0,0,6.14,1.8'/%3e%3c/svg%3e")
;
}
.firefox {
51
0-.52a8,8,0,0,0,2-2.07,8,8,0,0,1-2.29.63,4,4,0,0,0,1.75-2.21,8,8,0,0,1-2.54,1,4,4,0,0,0
-6.81,3.65A11.36,11.36,0,0,1,6.89,8a4,4,0,0,0-.54,2,4,4,0,0,0,1.78,3.33,4,4,0,0,1-1.81-
.5v.05a4,4,0,0,0,3.2,3.92,4,4,0,0,1-1,.14,3.67,3.67,0,0,1-.75-.07,4,4,0,0,0,3.74,2.78,8
.06,8.06,0,0,1-5,1.71,7.61,7.61,0,0,1-1-.06,11.31,11.31,0,0,0,6.14,1.8'/%3e%3c/svg%3e")
;
}
.svg_icons {
width: 32px;
height: 32px;
}
</style>

{
return View();
}
Pill
The pill badge style can be applied by adding the modifier class .e-badge-pill to the target
element.
view
HomeController.cs
<div id='element'>
<h1>Badge Component <span class="e-badge e-badge-primary e-badge-pill">New</span></
h1>
</div>

{
return View();
}
Link
52
When badge modifier classes are applied to the anchor tag, the badge’s appearance will change
from normal state to hover state on mouseover.
view
HomeController.cs
<div id='element'>
<div style="display: inline-block; margin-top: 15px;">
<a href="#" class="e-badge e-badge-primary">Link Badge</a>
</div>
</div>
<style>
#element {
display: flex;
width: 400px;
height: 50px;
margin: auto;
border-radius: 3px;
position: relative;
top: 130px;
}
</style>

{
return View();
}
Notification
The notification badge style can be applied by adding the modifier class .e-badge-notification
to the target element. Notification badges are used when a content or a context needs special
attention. While using the notification badge, set the parent element to position: relative .
view
HomeController.cs
<div id='element'>
<span class="e-badge e-badge-success e-badge-overlap e-badge-notification">99+</
span>
53
</div>

<span class="e-badge e-badge-info e-badge-overlap e-badge-notification">27</span
>
</div>

<span class="e-badge e-badge-info e-badge-overlap e-badge-notification">2</span>
</div>

<span class="e-badge e-badge-danger e-badge-overlap e-badge-notification">35</s
pan>
</div>
</div>
<Style>
#element {
display: flex;
width: 400px;
margin: auto;
border-radius: 3px;
position: relative;
top: 130px;
}
.facebook {
1-1.08,3.92h0v3H12.36v4.31h3.82V29h4.41V17.86h3.8l.53-4.31H20.59v-3h0A1.78,1.78,0,0,1,2
2.53,8.7Z'/%3e%3c/svg%3e");
}
.skype {
54
2,7.22,0,0,1-2.68.46A6.6,6.6,0,0,1,12,20.27,4,4,0,0,1,10.58,19,2.71,2.71,0,0,1,10,17.51
a1.05,1.05,0,0,1,.36-.8,1.28,1.28,0,0,1,.9-.33,1.14,1.14,0,0,1,.75.26,1.89,1.89,0,0,1,.
51.73,4.54,4.54,0,0,0,.49.86,2,2,0,0,0,.72.55A3.08,3.08,0,0,0,15,19a3,3,0,0,0,1.73-.45,
1.23,1.23,0,0,0,.63-1.06,1,1,0,0,0-.33-.8,2.3,2.3,0,0,0-.92-.49c-.39-.12-.92-.26-1.57-.
39a12.2,12.2,0,0,1-2.25-.67,3.64,3.64,0,0,1-1.48-1.06,2.47,2.47,0,0,1-.29-.47,2.84,2.84
,0,0,1-.26-1.22,2.71,2.71,0,0,1,.58-1.72,3.71,3.71,0,0,1,1.67-1.14A7.37,7.37,0,0,1,15,9
.14a7,7,0,0,1,2,.26,4.38,4.38,0,0,1,1.42.7,3.1,3.1,0,0,1,.84.92,2.11,2.11,0,0,1,.26,1,1
.13,1.13,0,0,1-.35.82,1.18,1.18,0,0,1-.88.36,1.09,1.09,0,0,1-.74-.23,2.68,2.68,0,0,1-.5
1-.67,3,3,0,0,0-.77-.94A2.42,2.42,0,0,0,14.87,11a2.76,2.76,0,0,0-1.49.36,1,1,0,0,0-.53.
81.78.78,0,0,0,.17.5,1.63,1.63,0,0,0,.52.38,4.48,4.48,0,0,0,.69.27l.15,0,1,.24c.69.15,1
.33.32,1.89.49a6.29,6.29,0,0,1,1.47.67,2.81,2.81,0,0,1,1,1,3,3,0,0,1,.35,1.49,3.15,3.15
,0,0,1-.6,1.89Zm4-2.23a7.73,7.73,0,0,0,.2-1.81c0-.22,0-.43,0-.64a8.53,8.53,0,0,0-8.56-7
.83,8.72,8.72,0,0,0-1.46.12A5.08,5.08,0,0,0,11,6a5,5,0,0,0-5,4.91,4.83,4.83,0,0,0,.68,2
.48,7.33,7.33,0,0,0-.13.94,6.51,6.51,0,0,0,0,.77,8.52,8.52,0,0,0,8.58,8.46,8.9,8.9,0,0,
0,1.57-.14A5.09,5.09,0,0,0,19,24a4.94,4.94,0,0,0,5-4.91,4.86,4.86,0,0,0-.52-2.18Z'/%3e%
3c/svg%3e");
}
.twitter {
0-.52a8,8,0,0,0,2-2.07,8,8,0,0,1-2.29.63,4,4,0,0,0,1.75-2.21,8,8,0,0,1-2.54,1,4,4,0,0,0
-6.81,3.65A11.36,11.36,0,0,1,6.89,8a4,4,0,0,0-.54,2,4,4,0,0,0,1.78,3.33,4,4,0,0,1-1.81-
.5v.05a4,4,0,0,0,3.2,3.92,4,4,0,0,1-1,.14,3.67,3.67,0,0,1-.75-.07,4,4,0,0,0,3.74,2.78,8
.06,8.06,0,0,1-5,1.71,7.61,7.61,0,0,1-1-.06,11.31,11.31,0,0,0,6.14,1.8'/%3e%3c/svg%3e")
;
}
.firefox {
0-.52a8,8,0,0,0,2-2.07,8,8,0,0,1-2.29.63,4,4,0,0,0,1.75-2.21,8,8,0,0,1-2.54,1,4,4,0,0,0
-6.81,3.65A11.36,11.36,0,0,1,6.89,8a4,4,0,0,0-.54,2,4,4,0,0,0,1.78,3.33,4,4,0,0,1-1.81-
.5v.05a4,4,0,0,0,3.2,3.92,4,4,0,0,1-1,.14,3.67,3.67,0,0,1-.75-.07,4,4,0,0,0,3.74,2.78,8
.06,8.06,0,0,1-5,1.71,7.61,7.61,0,0,1-1-.06,11.31,11.31,0,0,0,6.14,1.8'/%3e%3c/svg%3e")
;
}
.svg_icons {
width: 32px;
height: 32px;
}
55
</Style>

{
return View();
}
Dot
Dot can be applied by adding the modifier class .e-badge-dot to the target element. Dot badges
are similar to notification badges, but in a minimalistic way. While using the dot badge, set the
parent element to position: relative .
view
HomeController.cs
<div id='element'>
<span class="e-badge e-badge-success e-badge-overlap e-badge-dot"></span>
</div>

<span class="e-badge e-badge-info e-badge-overlap e-badge-dot"></span>
</div>

</div>

<span class="e-badge e-badge-danger e-badge-overlap e-badge-dot"></span>
</div>
</div>
<style>
#element {
display: flex;
width: 400px;
margin: auto;
56
border-radius: 3px;
position: relative;
top: 130px;
}
.facebook {
1-1.08,3.92h0v3H12.36v4.31h3.82V29h4.41V17.86h3.8l.53-4.31H20.59v-3h0A1.78,1.78,0,0,1,2
2.53,8.7Z'/%3e%3c/svg%3e");
}
.skype {
2,7.22,0,0,1-2.68.46A6.6,6.6,0,0,1,12,20.27,4,4,0,0,1,10.58,19,2.71,2.71,0,0,1,10,17.51
a1.05,1.05,0,0,1,.36-.8,1.28,1.28,0,0,1,.9-.33,1.14,1.14,0,0,1,.75.26,1.89,1.89,0,0,1,.
51.73,4.54,4.54,0,0,0,.49.86,2,2,0,0,0,.72.55A3.08,3.08,0,0,0,15,19a3,3,0,0,0,1.73-.45,
1.23,1.23,0,0,0,.63-1.06,1,1,0,0,0-.33-.8,2.3,2.3,0,0,0-.92-.49c-.39-.12-.92-.26-1.57-.
39a12.2,12.2,0,0,1-2.25-.67,3.64,3.64,0,0,1-1.48-1.06,2.47,2.47,0,0,1-.29-.47,2.84,2.84
,0,0,1-.26-1.22,2.71,2.71,0,0,1,.58-1.72,3.71,3.71,0,0,1,1.67-1.14A7.37,7.37,0,0,1,15,9
.14a7,7,0,0,1,2,.26,4.38,4.38,0,0,1,1.42.7,3.1,3.1,0,0,1,.84.92,2.11,2.11,0,0,1,.26,1,1
.13,1.13,0,0,1-.35.82,1.18,1.18,0,0,1-.88.36,1.09,1.09,0,0,1-.74-.23,2.68,2.68,0,0,1-.5
1-.67,3,3,0,0,0-.77-.94A2.42,2.42,0,0,0,14.87,11a2.76,2.76,0,0,0-1.49.36,1,1,0,0,0-.53.
81.78.78,0,0,0,.17.5,1.63,1.63,0,0,0,.52.38,4.48,4.48,0,0,0,.69.27l.15,0,1,.24c.69.15,1
.33.32,1.89.49a6.29,6.29,0,0,1,1.47.67,2.81,2.81,0,0,1,1,1,3,3,0,0,1,.35,1.49,3.15,3.15
,0,0,1-.6,1.89Zm4-2.23a7.73,7.73,0,0,0,.2-1.81c0-.22,0-.43,0-.64a8.53,8.53,0,0,0-8.56-7
.83,8.72,8.72,0,0,0-1.46.12A5.08,5.08,0,0,0,11,6a5,5,0,0,0-5,4.91,4.83,4.83,0,0,0,.68,2
.48,7.33,7.33,0,0,0-.13.94,6.51,6.51,0,0,0,0,.77,8.52,8.52,0,0,0,8.58,8.46,8.9,8.9,0,0,
0,1.57-.14A5.09,5.09,0,0,0,19,24a4.94,4.94,0,0,0,5-4.91,4.86,4.86,0,0,0-.52-2.18Z'/%3e%
3c/svg%3e");
}
.twitter {
0-.52a8,8,0,0,0,2-2.07,8,8,0,0,1-2.29.63,4,4,0,0,0,1.75-2.21,8,8,0,0,1-2.54,1,4,4,0,0,0
-6.81,3.65A11.36,11.36,0,0,1,6.89,8a4,4,0,0,0-.54,2,4,4,0,0,0,1.78,3.33,4,4,0,0,1-1.81-
.5v.05a4,4,0,0,0,3.2,3.92,4,4,0,0,1-1,.14,3.67,3.67,0,0,1-.75-.07,4,4,0,0,0,3.74,2.78,8
57
.06,8.06,0,0,1-5,1.71,7.61,7.61,0,0,1-1-.06,11.31,11.31,0,0,0,6.14,1.8'/%3e%3c/svg%3e")
;
}
.firefox {
0-.52a8,8,0,0,0,2-2.07,8,8,0,0,1-2.29.63,4,4,0,0,0,1.75-2.21,8,8,0,0,1-2.54,1,4,4,0,0,0
-6.81,3.65A11.36,11.36,0,0,1,6.89,8a4,4,0,0,0-.54,2,4,4,0,0,0,1.78,3.33,4,4,0,0,1-1.81-
.5v.05a4,4,0,0,0,3.2,3.92,4,4,0,0,1-1,.14,3.67,3.67,0,0,1-.75-.07,4,4,0,0,0,3.74,2.78,8
.06,8.06,0,0,1-5,1.71,7.61,7.61,0,0,1-1-.06,11.31,11.31,0,0,0,6.14,1.8'/%3e%3c/svg%3e")
;
}
.svg_icons {
width: 32px;
height: 32px;
}
.svg_icons + .e-badge.e-badge-overlap {
transform: translateX(-100%);
}
</style>

{
return View();
}
Overlap
The overlap badge can be used with notification or dot badge, which overlaps with the
target element by adding the modifier class .e-badge-overlap . While using the overlap badge,
set the parent element to position: relative .
view
HomeController.cs
<div id='element'>
58
<span class="e-badge e-badge-success e-badge-overlap e-badge-notification">99+</
span>
</div>

<span class="e-badge e-badge-info e-badge-overlap e-badge-notification">27</span
>
</div>

<span class="e-badge e-badge-info e-badge-overlap e-badge-notification">2</span>
</div>

<span class="e-badge e-badge-danger e-badge-overlap e-badge-notification">35</s
pan>
</div>
</div>
<Style>
#element {
display: flex;
width: 400px;
margin: auto;
border-radius: 3px;
position: relative;
top: 130px;
}
.facebook {
1-1.08,3.92h0v3H12.36v4.31h3.82V29h4.41V17.86h3.8l.53-4.31H20.59v-3h0A1.78,1.78,0,0,1,2
2.53,8.7Z'/%3e%3c/svg%3e");
}
.skype {
59
2,7.22,0,0,1-2.68.46A6.6,6.6,0,0,1,12,20.27,4,4,0,0,1,10.58,19,2.71,2.71,0,0,1,10,17.51
a1.05,1.05,0,0,1,.36-.8,1.28,1.28,0,0,1,.9-.33,1.14,1.14,0,0,1,.75.26,1.89,1.89,0,0,1,.
51.73,4.54,4.54,0,0,0,.49.86,2,2,0,0,0,.72.55A3.08,3.08,0,0,0,15,19a3,3,0,0,0,1.73-.45,
1.23,1.23,0,0,0,.63-1.06,1,1,0,0,0-.33-.8,2.3,2.3,0,0,0-.92-.49c-.39-.12-.92-.26-1.57-.
39a12.2,12.2,0,0,1-2.25-.67,3.64,3.64,0,0,1-1.48-1.06,2.47,2.47,0,0,1-.29-.47,2.84,2.84
,0,0,1-.26-1.22,2.71,2.71,0,0,1,.58-1.72,3.71,3.71,0,0,1,1.67-1.14A7.37,7.37,0,0,1,15,9
.14a7,7,0,0,1,2,.26,4.38,4.38,0,0,1,1.42.7,3.1,3.1,0,0,1,.84.92,2.11,2.11,0,0,1,.26,1,1
.13,1.13,0,0,1-.35.82,1.18,1.18,0,0,1-.88.36,1.09,1.09,0,0,1-.74-.23,2.68,2.68,0,0,1-.5
1-.67,3,3,0,0,0-.77-.94A2.42,2.42,0,0,0,14.87,11a2.76,2.76,0,0,0-1.49.36,1,1,0,0,0-.53.
81.78.78,0,0,0,.17.5,1.63,1.63,0,0,0,.52.38,4.48,4.48,0,0,0,.69.27l.15,0,1,.24c.69.15,1
.33.32,1.89.49a6.29,6.29,0,0,1,1.47.67,2.81,2.81,0,0,1,1,1,3,3,0,0,1,.35,1.49,3.15,3.15
,0,0,1-.6,1.89Zm4-2.23a7.73,7.73,0,0,0,.2-1.81c0-.22,0-.43,0-.64a8.53,8.53,0,0,0-8.56-7
.83,8.72,8.72,0,0,0-1.46.12A5.08,5.08,0,0,0,11,6a5,5,0,0,0-5,4.91,4.83,4.83,0,0,0,.68,2
.48,7.33,7.33,0,0,0-.13.94,6.51,6.51,0,0,0,0,.77,8.52,8.52,0,0,0,8.58,8.46,8.9,8.9,0,0,
0,1.57-.14A5.09,5.09,0,0,0,19,24a4.94,4.94,0,0,0,5-4.91,4.86,4.86,0,0,0-.52-2.18Z'/%3e%
3c/svg%3e");
}
.twitter {
0-.52a8,8,0,0,0,2-2.07,8,8,0,0,1-2.29.63,4,4,0,0,0,1.75-2.21,8,8,0,0,1-2.54,1,4,4,0,0,0
-6.81,3.65A11.36,11.36,0,0,1,6.89,8a4,4,0,0,0-.54,2,4,4,0,0,0,1.78,3.33,4,4,0,0,1-1.81-
.5v.05a4,4,0,0,0,3.2,3.92,4,4,0,0,1-1,.14,3.67,3.67,0,0,1-.75-.07,4,4,0,0,0,3.74,2.78,8
.06,8.06,0,0,1-5,1.71,7.61,7.61,0,0,1-1-.06,11.31,11.31,0,0,0,6.14,1.8'/%3e%3c/svg%3e")
;
}
.firefox {
0-.52a8,8,0,0,0,2-2.07,8,8,0,0,1-2.29.63,4,4,0,0,0,1.75-2.21,8,8,0,0,1-2.54,1,4,4,0,0,0
-6.81,3.65A11.36,11.36,0,0,1,6.89,8a4,4,0,0,0-.54,2,4,4,0,0,0,1.78,3.33,4,4,0,0,1-1.81-
.5v.05a4,4,0,0,0,3.2,3.92,4,4,0,0,1-1,.14,3.67,3.67,0,0,1-.75-.07,4,4,0,0,0,3.74,2.78,8
.06,8.06,0,0,1-5,1.71,7.61,7.61,0,0,1-1-.06,11.31,11.31,0,0,0,6.14,1.8'/%3e%3c/svg%3e")
;
}
.svg_icons {
width: 32px;
height: 32px;
60
}
</Style>

{
return View();
}
Position
The default position of the notification or dot badge is top. But, the position can be changed
to bottom using the modifier class .e-badge-bottom . For example, the bottom class modifier is
used with dot badge to display the status in the avatar as shown in the following sample.
view
HomeController.cs
<div id='element'>
<div class="badge-block">
<div class="contact svg_icons"></div>

<span class="e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom"
></span>
</div>

<span class="e-badge e-badge-info e-badge-overlap e-badge-dot e-badge-bottom"></
span>
</div>

</div>
<div class="pinterest svg_icons"></div>

<span class="e-badge e-badge-danger e-badge-overlap e-badge-dot"></span>
</div>
61
</div>
<style>
#element {
display: flex;
width: 400px;
margin: auto;
border-radius: 3px;
position: relative;
top: 130px;
}
.badge-block {
position: relative;
margin: 10px 13px 10px 10px;
}
/* SVG Icons */
.facebook {
1-1.08,3.92h0v3H12.36v4.31h3.82V29h4.41V17.86h3.8l.53-4.31H20.59v-3h0A1.78,1.78,0,0,1,2
2.53,8.7Z'/%3e%3c/svg%3e");
}
.skype {
2,7.22,0,0,1-2.68.46A6.6,6.6,0,0,1,12,20.27,4,4,0,0,1,10.58,19,2.71,2.71,0,0,1,10,17.51
a1.05,1.05,0,0,1,.36-.8,1.28,1.28,0,0,1,.9-.33,1.14,1.14,0,0,1,.75.26,1.89,1.89,0,0,1,.
51.73,4.54,4.54,0,0,0,.49.86,2,2,0,0,0,.72.55A3.08,3.08,0,0,0,15,19a3,3,0,0,0,1.73-.45,
1.23,1.23,0,0,0,.63-1.06,1,1,0,0,0-.33-.8,2.3,2.3,0,0,0-.92-.49c-.39-.12-.92-.26-1.57-.
39a12.2,12.2,0,0,1-2.25-.67,3.64,3.64,0,0,1-1.48-1.06,2.47,2.47,0,0,1-.29-.47,2.84,2.84
,0,0,1-.26-1.22,2.71,2.71,0,0,1,.58-1.72,3.71,3.71,0,0,1,1.67-1.14A7.37,7.37,0,0,1,15,9
.14a7,7,0,0,1,2,.26,4.38,4.38,0,0,1,1.42.7,3.1,3.1,0,0,1,.84.92,2.11,2.11,0,0,1,.26,1,1
.13,1.13,0,0,1-.35.82,1.18,1.18,0,0,1-.88.36,1.09,1.09,0,0,1-.74-.23,2.68,2.68,0,0,1-.5
1-.67,3,3,0,0,0-.77-.94A2.42,2.42,0,0,0,14.87,11a2.76,2.76,0,0,0-1.49.36,1,1,0,0,0-.53.
81.78.78,0,0,0,.17.5,1.63,1.63,0,0,0,.52.38,4.48,4.48,0,0,0,.69.27l.15,0,1,.24c.69.15,1
.33.32,1.89.49a6.29,6.29,0,0,1,1.47.67,2.81,2.81,0,0,1,1,1,3,3,0,0,1,.35,1.49,3.15,3.15
62
,0,0,1-.6,1.89Zm4-2.23a7.73,7.73,0,0,0,.2-1.81c0-.22,0-.43,0-.64a8.53,8.53,0,0,0-8.56-7
.83,8.72,8.72,0,0,0-1.46.12A5.08,5.08,0,0,0,11,6a5,5,0,0,0-5,4.91,4.83,4.83,0,0,0,.68,2
.48,7.33,7.33,0,0,0-.13.94,6.51,6.51,0,0,0,0,.77,8.52,8.52,0,0,0,8.58,8.46,8.9,8.9,0,0,
0,1.57-.14A5.09,5.09,0,0,0,19,24a4.94,4.94,0,0,0,5-4.91,4.86,4.86,0,0,0-.52-2.18Z'/%3e%
3c/svg%3e");
}
.twitter {
0-.52a8,8,0,0,0,2-2.07,8,8,0,0,1-2.29.63,4,4,0,0,0,1.75-2.21,8,8,0,0,1-2.54,1,4,4,0,0,0
-6.81,3.65A11.36,11.36,0,0,1,6.89,8a4,4,0,0,0-.54,2,4,4,0,0,0,1.78,3.33,4,4,0,0,1-1.81-
.5v.05a4,4,0,0,0,3.2,3.92,4,4,0,0,1-1,.14,3.67,3.67,0,0,1-.75-.07,4,4,0,0,0,3.74,2.78,8
.06,8.06,0,0,1-5,1.71,7.61,7.61,0,0,1-1-.06,11.31,11.31,0,0,0,6.14,1.8'/%3e%3c/svg%3e")
;
}
.whatsapp {
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/
svg' viewBox='0 0 32 32'%3E%3Cpath fill='#25D366' d='M11.863 8.305c-.444-.011-.813.335-
1.18.677-.12.11-.235.228-.344.35-.489.552-.798 1.186-.703 1.935.103.807.187 1.63.423 2.
402.65 2.13 1.962 3.843 3.605 5.309 1.51 1.346 3.162 2.47 5.151 2.977a9.847 9.847 0 0 0
1.966.268c.984.044 2.378-.942 2.728-1.86a.37.37 0 0 0 .022-.158c-.028-.435-.052-.87-.0
97-1.303-.009-.088-.083-.212-.158-.242a276.61 276.61 0 0 0-3.316-1.281c-.277-.105-.526-
.057-.749.159-.337.325-.707.617-1.029.956-.207.217-.384.257-.617.078-.619-.48-1.26-.933
-1.853-1.443-.93-.8-1.7-1.744-2.38-2.763-.19-.284-.199-.483.077-.724.294-.256.517-.592.
804-.856.366-.336.37-.69.192-1.12a85.3 85.3 0 0 1-.964-2.46c-.3-.792-.294-.795-1.258-.8
33a.894.894 0 0 0-.32-.068zm4.016-5.566c5.806-.062 10.95 3.973 12.154 9.89 1.123 5.523-
1.825 11.269-6.975 13.536-3.56 1.568-7.1 1.477-10.606-.216-.13-.063-.337-.05-.479.004-1
.39.532-2.777 1.08-4.164 1.625-.069.027-.14.049-.266.093.412-1.455.8-2.847 1.205-4.235.
064-.216.03-.357-.112-.526-2.056-2.454-3.018-5.292-2.889-8.483.226-5.636 4.415-10.442 9
.968-11.475.727-.136 1.45-.205 2.164-.213zm.203-2.086a14.416 14.416 0 0 0-4.595.74c-5.6
36 1.87-9.435 6.872-9.764 12.803-.189 3.43.773 6.54 2.82 9.307.133.182.178.333.12.563-.
576 2.266-1.137 4.535-1.718 6.866.178-.065.31-.111.438-.162 2.147-.838 4.297-1.67 6.44-
2.521.324-.128.598-.141.925-.005 1.091.452 2.228.737 3.4.883 3.548.44 6.831-.306 9.797-
2.291 5.426-3.631 7.685-10.342 5.562-16.54A14.243 14.243 0 0 0 16.082.654zM16.032 0c.49
4.004.992.03 1.492.078 6.504.613 12.026 5.686 13.158 12.108.805 4.565-.231 8.687-3.16 1
2.275-2.333 2.857-5.366 4.599-9.012 5.227a14.618 14.618 0 0 1-7.895-.793.818.818 0 0 0-
.649 0c-2.55 1.005-5.105 1.999-7.659 2.996-.08.031-.162.058-.305.108l.783-3.13c.393-1.5
73.791-3.144 1.172-4.72a.617.617 0 0 0-.089-.442c-1.92-2.71-2.94-5.725-2.8-9.04.26-6.17
1 3.233-10.635 8.781-13.33C11.81.386 13.89-.017 16.032 0z'/%3E%3C/svg%3E") no-repeat 10
0% 100%;
}
.firefox {
63
0-.52a8,8,0,0,0,2-2.07,8,8,0,0,1-2.29.63,4,4,0,0,0,1.75-2.21,8,8,0,0,1-2.54,1,4,4,0,0,0
-6.81,3.65A11.36,11.36,0,0,1,6.89,8a4,4,0,0,0-.54,2,4,4,0,0,0,1.78,3.33,4,4,0,0,1-1.81-
.5v.05a4,4,0,0,0,3.2,3.92,4,4,0,0,1-1,.14,3.67,3.67,0,0,1-.75-.07,4,4,0,0,0,3.74,2.78,8
.06,8.06,0,0,1-5,1.71,7.61,7.61,0,0,1-1-.06,11.31,11.31,0,0,0,6.14,1.8'/%3e%3c/svg%3e")
;
}
.contact {
svg' viewBox='0 0 32 32'%3E%3Cellipse cx='16' cy='16' fill='#4285f4' rx='16' ry='16'/%3
E%3Cpath fill='#FFF' d='M13.55 16.95h4.9c2.7 0 4.85 2.05 4.85 4.6 0 .9-.25 1.75-.75 2.4
5H9.45c-.5-.7-.75-1.55-.75-2.45 0-2.55 2.15-4.6 4.85-4.6zM16.05 8c2.05 0 3.7 1.65 3.7 3
.7 0 2.05-1.65 3.7-3.7 3.7-2.05 0-3.7-1.65-3.7-3.7.05-2.05 1.7-3.7 3.7-3.7z'/%3E%3C/svg
%3E") no-repeat 100% 100%;
}
.chrome {
svg' viewBox='0 0 32 32'%3E%3Cpath fill='#ffffff' d='M16.033 11.049a5.155 5.155 0 1 1 0
10.312 5.156 5.156 0 0 1 0-10.312zM16.124 0c1.281-.003 9.659.318 14.268 9.043h-.016l.0
1.018c.33.578 3.745 6.94-.485 14.969 0 0-4.215 8.107-14.565 7.968l-.452-.012-.004.007-.
004.007.02-.037c.564-.98 5.112-8.884 6.357-11.067l.016-.028.007-.008.04-.069.11-.127a7.
085 7.085 0 0 0 1.457-2.967l.01-.046.035-.151c.088-.424.148-.944.128-1.549l-.006-.117v-
.004l-.007-.143-.006-.07-.005-.079-.012-.116v-.01l-.001-.008-.016-.158a7.2 7.2 0 0 0-.0
96-.572l-.018-.081-.013-.064a9.801 9.801 0 0 0-.692-2.016c-.165-.243-.332-.489-.512-.73
3l-.142-.187 8.728-2.554s-10.538-.01-13.018-.001l.021.005H16.642l-.14-.013a7.034 7.034
0 0 0-1.132-.003l-.167.016h-.047l-.034-.001c-.193.002-1.213.045-2.492.764l-.005.003-.03
3.016a7.158 7.158 0 0 0-3.25 3.533l-.059.148-6.485-6.404s4.74 8.311 6.165 10.779l.065.1
13.023.088a7.14 7.14 0 0 0 7.777 5.118l.144-.02L14.854 32h-.027c-.667-.005-7.894-.234-1
2.744-7.906 0 0-4.925-7.698.37-16.573l.252-.411.001-.002C2.822 6.904 6.58.374 15.958.00
3c0 0 .057-.003.166-.003z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
.pinterest {
svg' viewBox='0 0 32 32'%3E%3Cellipse cx='16' cy='16' fill='#bd081c' rx='16' ry='16'/%3
E%3Cpath fill='#FFF' d='M16.22 6.458c4.807-.009 9.028 1.888 9.663 5.307.787 4.256-2.438
8.866-8.213 8.535-1.565-.09-2.222-.666-3.448-1.22-.675 2.628-1.5 5.147-3.942 6.463-.75
4-3.972 1.107-6.954 1.971-10.12-1.474-1.842.177-5.547 3.284-4.634 3.824 1.123-3.31 6.84
5 1.48 7.56 5 .746 7.04-6.441 3.94-8.779-4.48-3.376-13.042-.077-11.989 4.755.256 1.181
1.9 1.54.657 3.17-2.868-.471-3.724-2.15-3.614-4.39.178-3.664 4.435-6.229 8.705-6.583.50
6-.043 1.01-.064 1.507-.064z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
.svg_icons {
64
width: 32px;
height: 32px;
}
.svg_icons + .e-badge.e-badge-overlap {
}
</style>

{
return View();
}
65
How To
The badge is a completely customizable and integral component, and this section shows how to
customize and integrate badges with other components.
Customize badges
Colour customization
Even though badges come with 8 predefined colors , you can also customize the colour of the
badge as desired.
view
HomeController.cs
<div id='element'>
<h1>Color Customization <span class="e-badge e-badge-primary e-badge-pill green">New
</span></h1>
<h1>Color Customization <span class="e-badge e-badge-primary e-badge-pill bue">New</
span></h1>
<h1>Color Customization <span class="e-badge e-badge-primary e-badge-pill purple">N
ew</span></h1>
<h1>Color Customization <span class="e-badge e-badge-primary e-badge-pill gradient">
New</span></h1>
</div>
<style>
#element {
display: table;
width: 560px;
margin: auto;
height: 200px;
border-radius: 3px;
position: relative;
top: 55px;
}
h1 {
text-align: center;
}
#element .e-badge.green {
background: #329378;
color: #fff;
66
}
#element .e-badge.blue {
background: #5f65b8;
color: #fff;
}
#element .e-badge.gradient {
background: #4776E6;
/* fallback for old browsers */
background: -webkit-linear-gradient(to top, #8E54E9, #4776E6);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #8E54E9, #4776E6);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #fff;
}
#element .e-badge.purple {
background: #9a428f;
color: #fff;
}
</style>

{
return View();
}
Customize badge size

Badges are designed to change its size based on the content. To change the size of a badge,
adjust the font size of the badge.
view
HomeController.cs
<div id='element'>
<h1>Badge Component <span class="e-badge e-badge-primary size_1">New</span></h1>
</div>
<Style>
#element {
display: block;
67
width: 400px;
margin: auto;
border-radius: 3px;
}
h1 {
text-align: center;
}
.e-badge.size_1 {
font-size: 12px;
}
.e-badge.size_2 {
font-size: 16px;
}
.e-badge.size_3 {
font-size: 18px;
}
</Style>

{
return View();
}
Custom position
Even though the badges support the conventional top and bottom positions, the position of
the badges can be changed as desired. This can be done by adding a custom class to the badge
element to override the default position applied from the source.
view
HomeController.cs
<div id='element'>
<div style="width: 200px;margin: 10px auto;">
<div class="whatsapp svg_icons"></div>

<span class="e-badge e-badge-warning e-badge-notification e-badge-overlap l
eftTop">99+</span>
</div>
68

<span class="e-badge e-badge-danger e-badge-notification e-badge-overlap le
ftTop">99+</span>
</div>

<span class="e-badge e-badge-secondary e-badge-notification e-badge-overlap
leftTop">18</span>
</div>
</div>
<div style="width: 200px;margin: 10px auto;">
<div class="whatsapp svg_icons"></div>

<span class="e-badge e-badge-warning e-badge-notification e-badge-overlap l
eftBottom">99+</span>
</div>

<span class="e-badge e-badge-danger e-badge-notification e-badge-overlap le
ftBottom">99+</span>
</div>

<span class="e-badge e-badge-secondary e-badge-notification e-badge-overlap
leftBottom">18</span>
</div>
</div>
</div>
<style>
#element {
display: flex;
width: 500px;
margin: auto;
border-radius: 3px;
position: relative;
top: 130px;
69
}
.badge-block {
position: relative;
}
.badge-block .e-badge.leftBottom {
transform: translateX(-150%) translateY(200%);
}
.badge-block .e-badge.leftTop {
}
/* SVG Icons */
.facebook {
svg' viewBox='0 0 32 32'%3E%3Cpath fill='#3b5998' d='M1.82 0h28.36c.908 0 1.645.819 1.6
45 1.829v28.342c0 1.011-.737 1.829-1.645 1.829h-8.188V18.852h3.934v-4.271h-3.934V13.15c
0-1.04.828-1.883 1.853-1.883h2.081V6.998h-4.505c-2.737 0-4.955 2.251-4.955 5.029v2.554h
-3.55v4.271h3.55V32H1.82c-.908 0-1.645-.818-1.645-1.829V1.829C.175.819.912 0 1.82 0z'/%
3E%3C/svg%3E") no-repeat 100% 100%;
}
.skype {
svg' viewBox='0 0 32 32'%3E%3Cpath fill='#00aff0' d='M16.067 5.579c-1.68 0-3.166.234-4.
416.696-1.265.468-2.247 1.15-2.92 2.028a4.893 4.893 0 0 0-1.022 3.046c0 1.192.328 2.207
.974 3.016.636.796 1.505 1.433 2.585 1.891 1.056.449 2.383.847 3.944 1.181 1.148.24 2.0
77.471 2.76.684.657.204 1.198.502 1.606.885.392.367.582.833.582 1.428 0 .752-.364 1.366
-1.114 1.878-.767.523-1.787.789-3.031.789-.905 0-1.64-.131-2.187-.389-.541-.257-.965-.5
85-1.261-.976-.308-.406-.599-.922-.864-1.533-.24-.56-.537-.995-.883-1.288-.363-.307-.80
9-.462-1.326-.462-.63 0-1.157.196-1.57.584a1.89 1.89 0 0 0-.628 1.421c0 .882.325 1.797.
964 2.719a7.062 7.062 0 0 0 2.478 2.199c1.413.75 3.226 1.131 5.388 1.131 1.8 0 3.383-.2
78 4.702-.827 1.333-.554 2.362-1.335 3.058-2.32a5.711 5.711 0 0 0 1.053-3.358c0-1.037-.
206-1.928-.612-2.65a5.125 5.125 0 0 0-1.697-1.792c-.706-.46-1.572-.856-2.574-1.176-.99-
.317-2.11-.61-3.327-.871a55.674 55.674 0 0 1-2.082-.51 6.642 6.642 0 0 1-1.211-.47c-.38
2-.191-.683-.42-.897-.681a1.328 1.328 0 0 1-.301-.876c0-.559.306-1.031.933-1.443.652-.4
27 1.529-.643 2.608-.643 1.16 0 2.006.195 2.512.579.52.397.976.959 1.35 1.672.325.558.6
17.946.898 1.195.302.268.74.404 1.297.404.613 0 1.133-.217 1.545-.646.41-.425.617-.914.
617-1.452 0-.559-.158-1.136-.47-1.717-.31-.574-.801-1.127-1.463-1.644-.657-.514-1.493-.
931-2.485-1.24-.987-.306-2.168-.462-3.513-.462zM8.95 0c1.708 0 3.298.492 4.643 1.339.83
6-.144 1.696-.22 2.575-.22 8.31 0 15.049 6.738 15.049 15.049 0 1.109-.121 2.189-.35 3.2
29a8.728 8.728 0 0 1-11.945 11.567c-.892.166-1.814.253-2.754.253-8.311 0-15.05-6.738-15
.05-15.049 0-1.037.105-2.049.304-3.026A8.727 8.727 0 0 1 8.95 0z'/%3E%3C/svg%3E") no-re
peat 100% 100%;
70
}
.twitter {
svg' viewBox='0 0 32 32'%3E%3Cpath fill='#1da1f2' d='M22.155 5.26c1.888 0 3.594.658 4.7
92 1.712a14.9 14.9 0 0 0 4.169-1.316c-.49 1.267-1.531 2.33-2.887 3A15.3 15.3 0 0 0 32 7
.802a12.298 12.298 0 0 1-3.276 2.807c.013.233.019.467.019.703 0 7.164-6.604 15.427-18.6
79 15.427-3.708 0-7.158-.897-10.064-2.436.514.05 1.037.076 1.566.076 3.076 0 5.907-.867
8.153-2.322-2.872-.043-5.297-1.612-6.132-3.766a7.864 7.864 0 0 0 2.964-.093c-3.003-.49
8-5.266-2.688-5.266-5.316l.001-.067a7.637 7.637 0 0 0 2.974.678c-1.762-.974-2.921-2.633
-2.921-4.514 0-.994.324-1.925.889-2.726 3.238 3.28 8.075 5.438 13.532 5.666a4.542 4.542
0 0 1-.17-1.237c0-2.994 2.939-5.421 6.565-5.421z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
.whatsapp {
svg' viewBox='0 0 32 32'%3E%3Cpath fill='#25D366' d='M11.863 8.305c-.444-.011-.813.335-
1.18.677-.12.11-.235.228-.344.35-.489.552-.798 1.186-.703 1.935.103.807.187 1.63.423 2.
402.65 2.13 1.962 3.843 3.605 5.309 1.51 1.346 3.162 2.47 5.151 2.977a9.847 9.847 0 0 0
1.966.268c.984.044 2.378-.942 2.728-1.86a.37.37 0 0 0 .022-.158c-.028-.435-.052-.87-.0
97-1.303-.009-.088-.083-.212-.158-.242a276.61 276.61 0 0 0-3.316-1.281c-.277-.105-.526-
.057-.749.159-.337.325-.707.617-1.029.956-.207.217-.384.257-.617.078-.619-.48-1.26-.933
-1.853-1.443-.93-.8-1.7-1.744-2.38-2.763-.19-.284-.199-.483.077-.724.294-.256.517-.592.
804-.856.366-.336.37-.69.192-1.12a85.3 85.3 0 0 1-.964-2.46c-.3-.792-.294-.795-1.258-.8
33a.894.894 0 0 0-.32-.068zm4.016-5.566c5.806-.062 10.95 3.973 12.154 9.89 1.123 5.523-
1.825 11.269-6.975 13.536-3.56 1.568-7.1 1.477-10.606-.216-.13-.063-.337-.05-.479.004-1
.39.532-2.777 1.08-4.164 1.625-.069.027-.14.049-.266.093.412-1.455.8-2.847 1.205-4.235.
064-.216.03-.357-.112-.526-2.056-2.454-3.018-5.292-2.889-8.483.226-5.636 4.415-10.442 9
.968-11.475.727-.136 1.45-.205 2.164-.213zm.203-2.086a14.416 14.416 0 0 0-4.595.74c-5.6
36 1.87-9.435 6.872-9.764 12.803-.189 3.43.773 6.54 2.82 9.307.133.182.178.333.12.563-.
576 2.266-1.137 4.535-1.718 6.866.178-.065.31-.111.438-.162 2.147-.838 4.297-1.67 6.44-
2.521.324-.128.598-.141.925-.005 1.091.452 2.228.737 3.4.883 3.548.44 6.831-.306 9.797-
2.291 5.426-3.631 7.685-10.342 5.562-16.54A14.243 14.243 0 0 0 16.082.654zM16.032 0c.49
4.004.992.03 1.492.078 6.504.613 12.026 5.686 13.158 12.108.805 4.565-.231 8.687-3.16 1
2.275-2.333 2.857-5.366 4.599-9.012 5.227a14.618 14.618 0 0 1-7.895-.793.818.818 0 0 0-
.649 0c-2.55 1.005-5.105 1.999-7.659 2.996-.08.031-.162.058-.305.108l.783-3.13c.393-1.5
73.791-3.144 1.172-4.72a.617.617 0 0 0-.089-.442c-1.92-2.71-2.94-5.725-2.8-9.04.26-6.17
1 3.233-10.635 8.781-13.33C11.81.386 13.89-.017 16.032 0z'/%3E%3C/svg%3E") no-repeat 10
0% 100%;
}
.firefox {
svg' viewBox='0 0 32 32'%3E%3Cpath fill='#e66000' d='M27.579 8.902l.048.09a.54.54 0 0 1
-.045-.082zm-7.06-4.054c-.351.003-.712.024-1.081.067 1.2.192 2.284.501 2.729 1.457-.625
-.005-1.3-.054-1.58.291 2.275 1.189 5.035 1.886 5.315 5.096-.36-.17-.48-.58-1.005-.582.
23 1.595.78 3.799.145 5.388-.35-.422-.365-1.185-.865-1.457.105 2.68-.025 5.119-1.29 6.4
07-.035-.572.405-1.424 0-1.892-1.15 3.86-8.29 5.12-10.2 1.746 3.016.292 3.73-1.751 6.17
6-2.038-.125-.937-.915-1.676-2.01-1.748-1.19-.076-2.215 1.096-3.305 1.02-.56-.04-1.18-.
71
554-1.725-1.02-1.77-1.514-.894-2.931 1.58-1.892.325-.797-.145-1.698-.43-2.33.64-.954 2.
245-.928 2.3-2.475-1.76-.012-2.745-.81-3.45-1.894.33-1.317 1.165-2.124 2.015-2.912-1.65
.172-2.605 1.05-3.734 1.748-1.075-.346-2.275.005-3.16.29-1-.539-1.15-1.941-1.58-3.057-1
.1 1.167-1.445 3.102-1.44 5.388-.765 1.018-1.57 1.998-1.575 3.786.42.168.53-.698.715-.2
92-2.335 8.76 5.49 16.323 13.644 16.018 8.354-.313 13.649-8.231 13.219-17.182-.65-.12.0
3 1.098-.575 1.019.025-2.797-.825-5.474-2.155-6.407.31.28.204.983.35 1.428l.032.083-.08
3-.157c-1.265-2.286-3.702-3.923-6.977-3.897zM16.103 0c2.763-.007 5.09.615 6.784 1.421 4
.995 2.381 9.719 7.97 9.049 16.162-.73 8.88-8.514 14.467-16.088 14.417C6.794 31.937-.64
5 24.6.045 14.816.32 10.992 1.724 8.529 2.634 7.1 4.599 3.998 8.959.67 14.123.111a18.88
7 18.887 0 0 1 1.98-.11z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
.contact {
svg' viewBox='0 0 32 32'%3E%3Cellipse cx='16' cy='16' fill='#4285f4' rx='16' ry='16'/%3
E%3Cpath fill='#FFF' d='M13.55 16.95h4.9c2.7 0 4.85 2.05 4.85 4.6 0 .9-.25 1.75-.75 2.4
5H9.45c-.5-.7-.75-1.55-.75-2.45 0-2.55 2.15-4.6 4.85-4.6zM16.05 8c2.05 0 3.7 1.65 3.7 3
.7 0 2.05-1.65 3.7-3.7 3.7-2.05 0-3.7-1.65-3.7-3.7.05-2.05 1.7-3.7 3.7-3.7z'/%3E%3C/svg
%3E") no-repeat 100% 100%;
}
.chrome {
svg' viewBox='0 0 32 32'%3E%3Cpath fill='#ffffff' d='M16.033 11.049a5.155 5.155 0 1 1 0
10.312 5.156 5.156 0 0 1 0-10.312zM16.124 0c1.281-.003 9.659.318 14.268 9.043h-.016l.0
1.018c.33.578 3.745 6.94-.485 14.969 0 0-4.215 8.107-14.565 7.968l-.452-.012-.004.007-.
004.007.02-.037c.564-.98 5.112-8.884 6.357-11.067l.016-.028.007-.008.04-.069.11-.127a7.
085 7.085 0 0 0 1.457-2.967l.01-.046.035-.151c.088-.424.148-.944.128-1.549l-.006-.117v-
.004l-.007-.143-.006-.07-.005-.079-.012-.116v-.01l-.001-.008-.016-.158a7.2 7.2 0 0 0-.0
96-.572l-.018-.081-.013-.064a9.801 9.801 0 0 0-.692-2.016c-.165-.243-.332-.489-.512-.73
3l-.142-.187 8.728-2.554s-10.538-.01-13.018-.001l.021.005H16.642l-.14-.013a7.034 7.034
0 0 0-1.132-.003l-.167.016h-.047l-.034-.001c-.193.002-1.213.045-2.492.764l-.005.003-.03
3.016a7.158 7.158 0 0 0-3.25 3.533l-.059.148-6.485-6.404s4.74 8.311 6.165 10.779l.065.1
13.023.088a7.14 7.14 0 0 0 7.777 5.118l.144-.02L14.854 32h-.027c-.667-.005-7.894-.234-1
2.744-7.906 0 0-4.925-7.698.37-16.573l.252-.411.001-.002C2.822 6.904 6.58.374 15.958.00
3c0 0 .057-.003.166-.003z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
.pinterest {
svg' viewBox='0 0 32 32'%3E%3Cellipse cx='16' cy='16' fill='#bd081c' rx='16' ry='16'/%3
E%3Cpath fill='#FFF' d='M16.22 6.458c4.807-.009 9.028 1.888 9.663 5.307.787 4.256-2.438
8.866-8.213 8.535-1.565-.09-2.222-.666-3.448-1.22-.675 2.628-1.5 5.147-3.942 6.463-.75
4-3.972 1.107-6.954 1.971-10.12-1.474-1.842.177-5.547 3.284-4.634 3.824 1.123-3.31 6.84
5 1.48 7.56 5 .746 7.04-6.441 3.94-8.779-4.48-3.376-13.042-.077-11.989 4.755.256 1.181
1.9 1.54.657 3.17-2.868-.471-3.724-2.15-3.614-4.39.178-3.664 4.435-6.229 8.705-6.583.50
6-.043 1.01-.064 1.507-.064z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
72
.svg_icons {
width: 32px;
height: 32px;
}
</style>

{
return View();
}
Integration
Listview
The badges can be integrated with the listview component to indicate new notification with
colour based on priority.
In the following sample, default badges are used and there is no need to customize the badge
size. The component will automatically adjust the size based on the container element.
view
HomeController.cs
<div class="sample_container badge-list">
<ejs-listview id='lists' dataSource=@ViewBag.dataSource headerTitle='Inbox'
template="@Html.Raw("<div class='listWrapper' style='width: inherit; height: inherit;'><
span class='${icons} list_svg'> </span><span class='list_text'>${text}</span>${if(
messages !== '')}<span class='${badge}' style='float: right; margin-top: 16px; font-siz
e: 12px;'>${messages}</span>${/if}</div>")" showHeader=true actionComplete="onActionCom
plete">
<e-listview-fieldsettings groupBy="type">
</e-listview-fieldsettings>
</ejs-listview>
</div>
</div>
}
<style>
.control-section {
overflow: auto;
}
73
.sample_container.badge-list {
max-width: 350px;
margin: auto;
}
#lists {
margin: auto;
border: 1px solid rgba(0, 0, 0, 0.12)
}
#lists .e-list-item {
cursor: pointer;
height: 50px;
line-height: 48px;
border: 0;
}
/* SVG Icons and Customization */
.list_svg {
width: 24px;
height: 24px;
margin-top: 11px;
margin-right: 16px;
}
.list_text {
width: 60%;
}
.updates {
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org
/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M17.024 13.812l.022.162v.8
93c0 .487-.007.942-.022 1.366-.012.423-.027.833-.042 1.23v2.435c0 .415.022.799.064 1.15
.042.35.11.559.202.622.091.063.232.095.422.095h.328l.105.324c-.041.073-.125.136-.253.18
9-.127.055-.226.063-.296.028H14.126a.556.556 0 0 1-.34-.109v-.27c.086-.108.22-.162.403-
.162h.38c.185-.109.294-.219.328-.328.036-.108.054-.3.054-.573a7.32 7.32 0 0 0 .042-.819
c0-.29.007-.527.021-.709V17.233c0-.636-.018-1.041-.053-1.213-.034-.173-.082-.386-.138-.
64a20.09 20.09 0 0 1-.455.19c-.176.072-.291.108-.348.108l-.105-.162c0-.162.09-.307.274-
.434l.38-.27a6.472 6.472 0 0 1 .847-.406c.227-.144.469-.265.73-.365.26-.1.554-.176.878-
.229zm-.952-5.736a.9.9 0 0 1 .613.243c.184.162.343.361.477.595.135.235.2.451.2.65 0 .45
1-.129.802-.39 1.054-.261.254-.453.397-.572.434a1.424 1.424 0 0 1-.412.054.934.934 0 0
1-.455-.122c-.15-.082-.293-.23-.433-.447a1.834 1.834 0 0 1-.277-.676c-.027-.307.044-.63
.213-.974.17-.342.373-.577.613-.703.17-.072.31-.108.423-.108zM16 3.465C9.088 3.465 3.46
4 9.088 3.464 16c0 6.913 5.624 12.536 12.536 12.536S28.536 22.913 28.536 16c0-6.912-5.6
74
24-12.535-12.536-12.535zM16 1.6c7.94 0 14.4 6.46 14.4 14.4S23.94 30.4 16 30.4 1.6 23.94
1.6 16 8.06 1.6 16 1.6z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
.promotion {
/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M6 4c.4 0 .7.2 1 .4.5.6.5
1.5-.1 2-.5.5-1.4.5-1.9-.1s-.5-1.4.1-1.9c.2-.3.6-.4.9-.4zm0-1c-.6 0-1.2.2-1.6.6-1 .9-1.
1 2.4-.2 3.4.9 1 2.4 1 3.4.2 1-.9 1-2.4.1-3.4C7.3 3.2 6.6 3 6 3zm.3-3l7.1 1 18 19.6L18.
9 32 .9 12.4.6 5.3z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
.social {
/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M15.254 19.089c.996 0 3.58
7 1.992 3.786 8.27l-19.03.199s-.498-7.97 5.579-8.37c2.392-.398 4.783 1.993 6.178 1.793
1.295-.198 2.59-1.892 3.487-1.892zm3.886-2.69c.797 0 1.793 1.495 2.989 1.694 1.096.198
3.188-1.993 5.18-1.595 5.082.3 4.684 7.573 4.684 7.573l-11.558-.1c-.697-3.687-2.391-5.1
81-3.288-5.38.598-1.594 1.495-2.192 1.993-2.192zm-8.17-9.963c2.79 0 4.98 2.49 4.98 5.67
9 0 3.089-2.19 5.679-4.98 5.679-2.79 0-4.982-2.491-4.982-5.68 0-3.088 2.192-5.678 4.982
-5.678zm11.657-1.994c2.49 0 4.583 2.293 4.583 5.082 0 2.79-2.092 5.082-4.583 5.082s-4.5
83-2.293-4.583-5.082c0-2.79 2.092-5.082 4.583-5.082z'/%3E%3C/svg%3E") no-repeat 100% 10
0%;
}
.primary {
/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M1 7.5h10v2H2v18h28v-18h-9
v-2h10a1 1 0 0 1 1 1v20a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-20a1 1 0 0 1 1-1zm14-5h2v13.172l
2.536-2.536 1.414 1.414L17 18.5l-1 1-1-1-3.95-3.95 1.414-1.414L15 15.672z'/%3E%3C/svg%3
E") no-repeat 100% 100%;
}
.draft {
/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M10.262 23.448l2.295 2.298
-3.443 1.149zm6.886-6.895l2.296 2.298-5.739 5.746-2.295-2.298zm3.443-3.448l2.295 2.299-
2.295 2.298-2.295-2.298zM21 3.414V7h3.785zM6 2v28h20V9h-4.833C20.062 9 19 8.137 19 7.03
2V2zm.167-2h14.414L28 7.586V30c0 1.103-.73 2-1.833 2h-20C5.064 32 4 31.103 4 30V2C4 .89
7 5.064 0 6.167 0z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
.outbox {
/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M2 9.63V26h28.001V9.67L15.
998 20.08zM2 6v1.134l14.001 10.452 14-10.408L30 6zm0-2h28c1.103 0 2 .897 2 2v20c0 1.103
-.897 2-2 2H2c-1.103 0-2-.897-2-2V6c0-1.103.897-2 2-2z'/%3E%3C/svg%3E") no-repeat 100%
100%;
}
75
.sent {
/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M6.756 7.527l6.997 8.487-7
.02 8.516 20.126-8.457zM0 2.48l32 13.603L.024 29.52l11.135-13.506z'/%3E%3C/svg%3E") no-
repeat 100% 100%;
}
.important {
/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M1.3 2.7c.7 0 1.3.6 1.3 1.
3v25.2c0 .7-.6 1.3-1.3 1.3-.7 0-1.3-.6-1.3-1.3V4c0-.7.6-1.3 1.3-1.3zm10.3-1.2C18.2 1.5
23.7 5 32 2v17.5c-11.1 4-17.1-3.7-27.7 1V3.1c2.7-1.2 5-1.6 7.3-1.6z'/%3E%3C/svg%3E") no
-repeat 100% 100%;
}
.starred {
/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M16 1.6l4.45 9.48 9.95 1.5
2-7.2 7.38 1.7 10.42-8.9-4.92-8.9 4.92 1.7-10.42-7.2-7.38 9.951-1.52z'/%3E%3C/svg%3E")
no-repeat 100% 100%;
}
</style>
<script type="text/javascript">
function onActionComplete() {
var list = document.getElementById('lists').getElementsByClassName('e-list-grou
p-item')[0];
list.style.display = 'none';
}
</script>
using System;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace EJ2CoreSampleBrowser.Controllers
{
public partial class BadgeController : Controller
{
public IActionResult Listview()
{
data.Add(new { id = "p_01", text = "Primary", messages = "3 New", badge = "
e-badge e-badge-primary", icons = "primary", type = "Primary" });
76
data.Add(new { id = "p_02", text = "Social", messages = "27 New", badge = "
e-badge e-badge-secondary", icons = "social", type = "Primary" });
data.Add(new { id = "p_03", text = "Promotions", messages = "7 New", badge
= "e-badge e-badge-success", icons = "promotion", type = "Primary" });
data.Add(new { id = "p_04", text = "Updates", messages = "13 New", badge =
"e-badge e-badge-info", icons = "updates", type = "Primary" });
data.Add(new { id = "p_05", text = "Starred", messages = "", badge = "", ic
ons = "starred", type = "All Labels" });
data.Add(new { id = "p_06", text = "Important", messages = "2 New", badge =
"e-badge e-badge-danger", icons = "important", type = "All Labels" });
data.Add(new { id = "p_07", text = "Sent", messages = "", badge = "", icons
= "sent", type = "All Labels" });
data.Add(new { id = "p_08", text = "Outbox", messages = "", badge = "", ico
ns = "outbox", type = "All Labels" });
data.Add(new { id = "p_09", text = "Drafts", messages = "7 New", badge = "e
-badge e-badge-warning", icons = "draft", type = "All Labels" });
return View();
}
}
}
Dynamic Content
Badges in real-time needs to be updated dynamically based on the requirements. The following
sample demonstrates how to update the badges content dynamically. Click the increment button
to change the badge value.
view
HomeController.cs
<div class="sample_container badge-list">
<ejs-listview id='lists' dataSource=@ViewBag.dataSource headerTitle='Inbox'
template="@Html.Raw("<div class='listWrapper' style='width: inherit; height: inherit;'><
span class='${icons} list_svg'> </span><span class='list_text'>${text}</span>${if(
messages !== '')}<span class='${badge}' style='float: right; margin-top: 16px; font-siz
e: 12px;'>${messages}</span>${/if}</div>")" showHeader=true actionComplete="onActionCom
plete">
<e-listview-fields groupBy="type">
</e-listview-fields>
</ejs-listview>
<p class='crossline'></p>
<span class='incr_button'>
77
<button class='e-btn e-primary' id='button'>Increment Badge Count</butt
on>
</span>
</div>
</div>
}
<style>
.control-section {
overflow: auto;
}
.sample_container.badge-list {
max-width: 650px;
margin: auto;
height: 540px;
}
#lists {
width: 370px;
border: 1px solid rgba(0, 0, 0, 0.12)
}
#lists ul li:first-child {
display: none;
}
.incr_button {
position: relative;
top: 250px;
}
.crossline {
height: 100%;
margin: 0 20px;
width: 1px;
background: #8080805c;
}
#lists .e-list-item {
cursor: pointer;
height: 50px;
line-height: 48px;
border: 0;
}
78
/* SVG Icons and Customization */
.list_svg {
width: 24px;
height: 24px;
margin-top: 11px;
margin-right: 16px;
}
.list_text {
width: 60%;
}
.updates {
/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M17.024 13.812l.022.162v.8
93c0 .487-.007.942-.022 1.366-.012.423-.027.833-.042 1.23v2.435c0 .415.022.799.064 1.15
.042.35.11.559.202.622.091.063.232.095.422.095h.328l.105.324c-.041.073-.125.136-.253.18
9-.127.055-.226.063-.296.028H14.126a.556.556 0 0 1-.34-.109v-.27c.086-.108.22-.162.403-
.162h.38c.185-.109.294-.219.328-.328.036-.108.054-.3.054-.573a7.32 7.32 0 0 0 .042-.819
c0-.29.007-.527.021-.709V17.233c0-.636-.018-1.041-.053-1.213-.034-.173-.082-.386-.138-.
64a20.09 20.09 0 0 1-.455.19c-.176.072-.291.108-.348.108l-.105-.162c0-.162.09-.307.274-
.434l.38-.27a6.472 6.472 0 0 1 .847-.406c.227-.144.469-.265.73-.365.26-.1.554-.176.878-
.229zm-.952-5.736a.9.9 0 0 1 .613.243c.184.162.343.361.477.595.135.235.2.451.2.65 0 .45
1-.129.802-.39 1.054-.261.254-.453.397-.572.434a1.424 1.424 0 0 1-.412.054.934.934 0 0
1-.455-.122c-.15-.082-.293-.23-.433-.447a1.834 1.834 0 0 1-.277-.676c-.027-.307.044-.63
.213-.974.17-.342.373-.577.613-.703.17-.072.31-.108.423-.108zM16 3.465C9.088 3.465 3.46
4 9.088 3.464 16c0 6.913 5.624 12.536 12.536 12.536S28.536 22.913 28.536 16c0-6.912-5.6
24-12.535-12.536-12.535zM16 1.6c7.94 0 14.4 6.46 14.4 14.4S23.94 30.4 16 30.4 1.6 23.94
1.6 16 8.06 1.6 16 1.6z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
.promotion {
/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M6 4c.4 0 .7.2 1 .4.5.6.5
1.5-.1 2-.5.5-1.4.5-1.9-.1s-.5-1.4.1-1.9c.2-.3.6-.4.9-.4zm0-1c-.6 0-1.2.2-1.6.6-1 .9-1.
1 2.4-.2 3.4.9 1 2.4 1 3.4.2 1-.9 1-2.4.1-3.4C7.3 3.2 6.6 3 6 3zm.3-3l7.1 1 18 19.6L18.
9 32 .9 12.4.6 5.3z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
.social {
/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M15.254 19.089c.996 0 3.58
7 1.992 3.786 8.27l-19.03.199s-.498-7.97 5.579-8.37c2.392-.398 4.783 1.993 6.178 1.793
1.295-.198 2.59-1.892 3.487-1.892zm3.886-2.69c.797 0 1.793 1.495 2.989 1.694 1.096.198
79
3.188-1.993 5.18-1.595 5.082.3 4.684 7.573 4.684 7.573l-11.558-.1c-.697-3.687-2.391-5.1
81-3.288-5.38.598-1.594 1.495-2.192 1.993-2.192zm-8.17-9.963c2.79 0 4.98 2.49 4.98 5.67
9 0 3.089-2.19 5.679-4.98 5.679-2.79 0-4.982-2.491-4.982-5.68 0-3.088 2.192-5.678 4.982
-5.678zm11.657-1.994c2.49 0 4.583 2.293 4.583 5.082 0 2.79-2.092 5.082-4.583 5.082s-4.5
83-2.293-4.583-5.082c0-2.79 2.092-5.082 4.583-5.082z'/%3E%3C/svg%3E") no-repeat 100% 10
0%;
}
.primary {
/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M1 7.5h10v2H2v18h28v-18h-9
v-2h10a1 1 0 0 1 1 1v20a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-20a1 1 0 0 1 1-1zm14-5h2v13.172l
2.536-2.536 1.414 1.414L17 18.5l-1 1-1-1-3.95-3.95 1.414-1.414L15 15.672z'/%3E%3C/svg%3
E") no-repeat 100% 100%;
}
.draft {
/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M10.262 23.448l2.295 2.298
-3.443 1.149zm6.886-6.895l2.296 2.298-5.739 5.746-2.295-2.298zm3.443-3.448l2.295 2.299-
2.295 2.298-2.295-2.298zM21 3.414V7h3.785zM6 2v28h20V9h-4.833C20.062 9 19 8.137 19 7.03
2V2zm.167-2h14.414L28 7.586V30c0 1.103-.73 2-1.833 2h-20C5.064 32 4 31.103 4 30V2C4 .89
7 5.064 0 6.167 0z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}
.outbox {
/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M2 9.63V26h28.001V9.67L15.
998 20.08zM2 6v1.134l14.001 10.452 14-10.408L30 6zm0-2h28c1.103 0 2 .897 2 2v20c0 1.103
-.897 2-2 2H2c-1.103 0-2-.897-2-2V6c0-1.103.897-2 2-2z'/%3E%3C/svg%3E") no-repeat 100%
100%;
}
.sent {
/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M6.756 7.527l6.997 8.487-7
.02 8.516 20.126-8.457zM0 2.48l32 13.603L.024 29.52l11.135-13.506z'/%3E%3C/svg%3E") no-
repeat 100% 100%;
}
.important {
/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M1.3 2.7c.7 0 1.3.6 1.3 1.
3v25.2c0 .7-.6 1.3-1.3 1.3-.7 0-1.3-.6-1.3-1.3V4c0-.7.6-1.3 1.3-1.3zm10.3-1.2C18.2 1.5
23.7 5 32 2v17.5c-11.1 4-17.1-3.7-27.7 1V3.1c2.7-1.2 5-1.6 7.3-1.6z'/%3E%3C/svg%3E") no
-repeat 100% 100%;
}
.starred {
80
/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M16 1.6l4.45 9.48 9.95 1.5
2-7.2 7.38 1.7 10.42-8.9-4.92-8.9 4.92 1.7-10.42-7.2-7.38 9.951-1.52z'/%3E%3C/svg%3E")
no-repeat 100% 100%;
}
</style>
var badgeElements;
function onActionComplete() {
badgeElements = Array.prototype.slice.call(document.getElementById('lists').get
ElementsByClassName('e-badge'));
document.getElementById('button').addEventListener('click', function buttonClick

() {
badgeElements.forEach((element) => {
element.textContent = (Number(element.textContent.split(' ')[0])) + 1 +
' New';
})
});
}
</script>
using System;
using System.Linq;
{
public partial class BadgeController : Controller
{
public IActionResult Listview()
{
data.Add(new { id = "p_01", text = "Primary", messages = "3 New", badge = "
e-badge e-badge-primary", icons = "primary", type = "Primary" });
data.Add(new { id = "p_02", text = "Social", messages = "27 New", badge = "
e-badge e-badge-secondary", icons = "social", type = "Primary" });
data.Add(new { id = "p_03", text = "Promotions", messages = "7 New", badge
= "e-badge e-badge-success", icons = "promotion", type = "Primary" });
data.Add(new { id = "p_04", text = "Updates", messages = "13 New", badge =
"e-badge e-badge-info", icons = "updates", type = "Primary" });
data.Add(new { id = "p_05", text = "Starred", messages = "", badge = "", ic
ons = "starred", type = "All Labels" });
data.Add(new { id = "p_06", text = "Important", messages = "2 New", badge =
81
"e-badge e-badge-danger", icons = "important", type = "All Labels" });
data.Add(new { id = "p_07", text = "Sent", messages = "", badge = "", icons
= "sent", type = "All Labels" });
data.Add(new { id = "p_08", text = "Outbox", messages = "", badge = "", ico
ns = "outbox", type = "All Labels" });
data.Add(new { id = "p_09", text = "Drafts", messages = "7 New", badge = "e
-badge e-badge-warning", icons = "draft", type = "All Labels" });
return View();
}
}
}
82
Common
Breaking Changes
The API types are corrected from static Object to its corresponding type references in
16.2.41 version of Essential JS 2. Please refer this Migration from 16.1 to 16.2 link for
further details.
Starting with version 16.2 (2018 Vol 2), you need to include a valid license key (either paid or trial
key) within your applications. Please refer to this help topic for more information.
Accumulation Chart
New Features
Support has been provided to group the pie slice based on count.
AutoComplete
Breaking Changes
Provided enum support for floatLabelType property.
Badge
Badge can be used to alert users about new or unread messages, notifications, and additional
timeline such as new , old , and preview .

Button
Breaking Changes
Default color changed for the flat button
ButtonGroup
83
ButtonGroup is a graphical user interface that groups series of buttons horizontally or vertically.
Types, Sizes, and Styles - Provided with different types, sizes and predefined styles of
button.
Selection - Supports single and multiple selection behaviors.
Orientation - Supports horizontal and vertical orientations.
Nesting - Supports nesting with drop-down and split button components.
Accessibility - Built-in accessibility features to access all the button group using the
keyboard, screen readers, or other assistive technology devices.
Calendars
New Features
Event arguments for all Calendar components has been streamlined.
Chart
Bug Fixes
Now, tooltip is working properly when the container for chart is initialized without ID.
The performance issue with loading 800 series in chart has been fixed.
Mean value for Box and Whisker is now rendering properly with multiple series.
New Features
Histogram series type has been added to chart.
Scrollbar feature has been added to zoom and pan the chart.
CircularGauge
Bug Fixes
Provided one way binding support for Axes properties in Angular platform.
ColorPicker
Color picker is a user interface that is used to select and adjust color values.
Color specification: Supports Red Green Blue , Hue Saturation Value and Hex codes.
Mode: Supports Picker and Palette mode.
Inline: Supports inline type rendering of color picker.
84
Custom palettes: Allows you to customize palettes and supports multiple palette groups
rendering.
Opacity: Allows to set and change the opacity of the selected color.
Accessibility: Built-in accessibility features to access color picker using the keyboard,
screen readers, or other assistive technology devices.
ComboBox
Breaking Changes
DatePicker
Breaking Changes
Now, you can access the floatLabelType Enum type directly instead of mentioning along with
the namespace as Syncfusion.EJ2.Inputs.FloatLabelType .
DateRangePicker
Breaking Changes
New Features
DrillDown support has been provided for DateRangePicker component that allows to quick
navigate back and forth from month, year, and decade views to select a range easier.
Value property support has been provided for DateRangePicker component to set a date
range.
DateTimePicker
Breaking Changes
85
Diagram
The diagram component visually represents information. It is also used to create diagrams like
flow charts, organizational charts, mind maps, and BPMN either through code or a visual
interface.
Nodes - Nodes are used to host graphical objects (path or controls) that can be arranged
and manipulated on a diagram page. Many predefined standard shapes are included.
Custom shapes can also be created and added easily.
Connectors - The relationship between two nodes is represented using a connector.
Labels - Labels are used to annotate nodes and connectors.
Interactive Features - Interactive features are used to improve the run time editing
experience of a diagram.
Data Binding - Generates diagram with nodes and connectors based on the information
provided from an external data source.
Commands - Supports a set of predefined commands that helps edit the diagram using
keyboard. It is also possible to configure new commands and key combinations.
Automatic Layout - Automatic layouts are used to arrange nodes automatically based on a
predefined layout logic. There is built-in support for organizational chart layout, hierarchical
tree layout, symmetric layout, radial tree layout, and mind map layout.
Overview Panel - The overview panel is used to improve navigation experience when
exploring large diagrams.
SymbolPalettes - The symbol palette is a gallery of reusable symbols and nodes that can
be dragged and dropped on the surface of a diagram.
Rulers - The ruler provides horizontal and vertical guides for measuring diagram objects in
diagram control.
Serialization - When saved in JSON format a diagram’s state persists, and then it can be
loaded back using serialization.
Exporting and Printing - Diagrams can be exported as .png, .jpeg, .bmp, and .svg image
files, and can also be printed as documents.
Gridlines - Gridlines are the pattern of lines drawn behind diagram elements. It provides a
visual guidance while dragging or arranging the objects on a diagram surface.
Page Layout - The drawing surface can be configured to page-like appearance using page
size, orientation, and margins.
Context Menu - Frequently used commands can easily be mapped to the context menu.
Document Editor
The Document Editor component is used to create, edit, view, and print Word documents in web
applications. All the user interactions and editing operations that run purely in the client-side
provides much faster editing experience to the users.
Opens the native Syncfusion Document Text (*.sfdt) format documents in the client-side.
86
Saves the documents in the client-side as Syncfusion Document Text (*.sfdt) and Word
document (*.docx) .
Supports document elements like text, inline image, table, fields, bookmark, section, header,
and footer.
Supports the commonly used fields like hyperlink, page number, page count, and table of
contents.
Supports formats like text, paragraph, bullets and numbering, table, page settings, etc.
Provides support to create, edit, and apply paragraph and character styles.
Provides support to find and replace text within the document.
Supports all the common editing and formatting operations along with undo and redo.
Provides support to cut, copy, and paste rich text contents within the component. Also allows
pasting simple text to and from other applications.
Allows user interactions like zoom, scroll, select contents through touch, mouse, and
keyboard.
Provides intuitive UI options like context menu, dialogs, and navigation pane.
Creates a lightweight Word viewer using module injection to view and prints Word
documents.
DropDownList
Breaking Changes
HeatMap
The HeatMap control is used to visualize a two-dimensional data in which the values are
represented in gradient or fixed colors.
Axis Types - Supports three different types of axes to populate the data, namely Numerical,
Categorical,and Datetime.
Axis Feature - Supports inverted axis, opposed position and axis intervals.
Legend - Supports legend which provides value information for the colors which represents
each values in HeatMap.
Data Binding - Supports binding data in JSON and two-dimensional array formats.
Rendering Modes - Supports automatic switching between SVG and Canvas rendering
modes based on the data source length.
Input
New Features
87
The clear button can be enabled/disabled dynamically through setClearButton method.
ListView
Breaking Changes
The following API namings are renamed.
Existing API Name New API Name
unCheckAllItem uncheckAllItems
unCheckItem uncheckItem
New Features
UI-Virtualization implemented to render only viewable list items in a view port on loading
large number of data.
Maps
New Features
Support has been added for animating the shapes on zooming.
Support has been added to trim the maps title, when it exceeds the available width.
Support had been provided for printing and exporting the maps.
Support has been provided for printing.
MaskedTextBox
New Features
Provided option to show/hide clear button to reset the value in MaskedTextBox
MultiSelect
Breaking Changes
NumericTextBox
88
New Features
Provided option to show/hide clear button to reset the value in NumericTextBox.
Prevented to type unwanted text and symbols in NumericTextBox.
Pivot Grid
The pivot grid is a multidimensional data visualization component built on top of relational data
sources. The pivot report can be managed dynamically at runtime along with other capabilities
like aggregation, filtering, and sorting based on fields and values.
Data Sources - Binds the component with an array of JavaScript objects.

Filtering - Allows user to view only specific/desired records in the component.
Sorting - Both member and value sorting are supported. It’s allows user to order fields and
values (column) either in ascending or descending order respectively.
Field List & Grouping Bar - Supports UI interaction at runtime to dynamically change the
report along with sorting, filtering and remove options.
Aggregation - Provides built in aggregation types like sum, average, min, max and count.
Calculated Field - Users can add new value field(s) to the report dynamically using this
option.
Adaptive Rendering - Adapts with optimal user interfaces for mobile and desktop form-
factors, thus helping the user’s application to scale elegantly across all the form-factors
without any additional effort.
Exporting - Provides the option to exporting records to Excel, CSV and PDF formats.
RadioButton
Bug Fixes
Wrapped text of a RadioButton label overlaps with next RadioButton label issue fixed.
RangeNavigator
The range navigator provides an intuitive interface for selecting a smaller range from a larger
collection. It is commonly used in financial dashboards to filter a date range for which the data
needs to be visualized. This control easily combines with other controls such as Chart, Data Grid,
etc., to create rich and powerful dashboards.
Data Binding - Binds the data with local and remote data source.
Chart - To represent the data in RangeNavigator and its supports line, step line and area
type series.
Slider - To handle the selected data in RangeNavigator.
89
Data Types - Supports three different types of data, namely Numerical, Datetime, and
Logarithmic.
Animation - Chart series and slider will be animated when rendering and changing the
selected data.
Period Selector - Supports period selector to select data based on predefined periods.
Light Weight - Supports light weight RN to navigate through the data based on range.
Tooltip - Supports tooltip for the selected data.
Export - Supports to print the range navigator directly from the browser and exports the
range navigator in both JPEG and PNG format.
RichTextEditor
The rich text editor component is WYSIWYG ("what you see is what you get") editor used to
create and edit the content and return valid HTML markup or markdown (MD) of the content. The
editor provides a standard toolbar to format content using its commands. Modular library features
to load the necessary functionality on demand. The toolbar contains commands to align the text,
insert link, insert image, insert list, undo/redo operation, HTML view, and more.
Provides IFRAME and DIV mode.

Handles markdown editing.
Contains a modular library to load the necessary functionality on demand.
Provides a fully customizable toolbar.
HTML view to edit the source directly for developers.
Supports to integrate third-party library.
Preview the modified content before saving it.
Handles images, hyperlinks, video,hyperlinks, uploads, and more.
Contains undo/redo manager.
Creates bulleted and numbered lists.
Schedule
New Features
Distinct time interval option with customizable major and minor slots has been introduced to
view the appointments clearly and accurately.
An enhancement has been made to extend the default view range with customized intervals,
to display 'n' number of days, weeks and months.
Validation support on recurrence appointment(s) has been added.
Multiple resources support has been added with the following options.
Group By Child - To group the same child resource(s) under different parent resource(s).
Group By Date - To group the resource(s) on day basis.
Group Editing - To edit all resource events simultaneously.
90
Custom Work Days - To display the custom work days for each resource.
Provided public methods to add or remove the resources dynamically.
Breaking Changes
Appearance enhancement has been done on quick popup that opens, when single clicked
on cells and events. Also, the same popup opens on single tap of events on mobile mode.
Sidebar
Breaking Changes
Target property supports both the id and class selectors to locate the target element.
New Features
Support for setting the open/close state of the Sidebar has been provided with isOpen
property.
Slider
Breaking Changes
readOnly readonly
New Features
Limits implemented to limit movement interval of min and max values to certain range.
Drag interval implemented to interact with the range slider by dragging the range.
Provided to support custom value arrays.
Bootstrap theme tooltip appearance improved by enabling tooltip pointer.
Smith Chart
Smith chart is one of the most useful data visualization tools for high frequency circuit
applications. It contains two sets of circles to plot the parameters of transmission lines.
Types - Smithchart had two type of rendering. Impedance and Admittance.

Marker - Smithchart supports the marker feature. It used to identify point position.
91
Datalabel - Smithchart supports the datalabel feature. It used to identify point values.
Legend - Smithchart supports the legend feature. It used to denote each series names.
Tooltip - Smithchart supports the tooltip feature. It used to get point values on user
interaction like mouse and touch actions.
Print and Export - Smithchart supports printing and exporting as different file types.
Sparkline
Sparklines are easy to interpret and also it conveys much more information to the user by
visualizing the data in a small amount of space.
Types - Sparklines had five type of series. Line, Area, Column and WinLoss and Pie.
Marker - Sparklines support the marker feature.
DataLabel - Sparklines support the datalabel feature. It uses to identify the x and y value for
the current point.
Range Band - Sparklines support the rangeband feature. It used to denote the certain range
sparkline points.
Tooltip - Sparklines support the tooltip feature. It used to interact with points to get more
about current point.
SplitButton
Breaking Changes
UI changes based on design guidelines
Switch
Switch is a graphical user interface element that allows you to toggle between checked and
unchecked states.
Text - Supports text.

Sizes - Provided with different sizes of Switch.
TimePicker
Breaking Changes
Toast
92
The toast is a small container, in which user can show a single or multiple informative lines with
actions.
Position: Enables to position the toast anywhere on the screen. It has a predefined set of
positions and custom inputs for position based on the target.
Autohide and TimeOut: Toast can be expired based on the timeOut property; it hides toast
automatically when reaches specific time without user interaction.
Multi Toast: Toasts can support to display multiple toasts with various time delay.
Progress Bar: Supports to visually indicate time lapse when the toast expires.
Action Buttons: Supports to add buttons in the toast for archiving any actions within the
toast.
Template: User customized element can be defined for the toast using the template
property.
Tooltip
Bug Fixes
Tooltip positioning issue fixed while target placed right of the page.
TreeMap
The TreeMap is used to displayed the hierarchical or multi-level data to visualize the nested
rectangles.
Layout Mode - TreeMap supports different type of layouts like Squarified,

SliceAndDiceHorizontal, SliceAndDiceVertical and SliceAndDiceAuto.
Legend - TreeMap supports legend feature with different mode. Default and Interactive.
LabelTemplate - Leaf item labels can be customized by the label template.
ColorMapping - TreeMap supports the color mapping feature. It used to customize the leaf
item fill colors based on range or values.
User-Interactions - TreeMap supports the Drilldown, Tooltip, Highlight and Selection user
interaction features.
Print and Export - TreeMap supports printing and exporting as different file types.
Uploader
New Features
Added chunked upload support to upload large files asynchronously with pause and
resume options.
Support has been provided to resume automatically on failed chunk up to maximum retry
93
options.
Included option to handle retry upload through UI (User Interface).
Support to cancel the request while uploading a file is added.
94
Common
Starting with version 16.2 (2018 Vol 2), you need to include a valid license key (either paid
or trial key) within your applications. Please refer to this help topic for more information.
Breaking Changes
The API types are corrected from static Object to its corresponding type references in
16.2.41 version of Essential JS 2. Please refer this Migration from 16.1 to 16.2 link for
further details.
Badge
Badge can be used to alert users about new or unread messages, notifications, and additional
timeline such as new , old , and preview .

Button
Breaking Changes
Default color changed for the flat button
ButtonGroup
ButtonGroup is a graphical user interface that groups series of buttons horizontally or vertically.
Types, Sizes, and Styles - Provided with different types, sizes and predefined styles of
button.
Selection - Supports single and multiple selection behaviors.
Orientation - Supports horizontal and vertical orientations.
Nesting - Supports nesting with drop-down and split button components.
Accessibility - Built-in accessibility features to access all the button group using the
keyboard, screen readers, or other assistive technology devices.
CircularGauge
95
Bug Fixes
Provided one way binding support for Axes properties in Angular platform.
ColorPicker
Color picker is a user interface that is used to select and adjust color values.
Color specification: Supports Red Green Blue , Hue Saturation Value and Hex codes.
Mode: Supports Picker and Palette mode.
Inline: Supports inline type rendering of color picker.
Custom palettes: Allows you to customize palettes and supports multiple palette groups
rendering.
Opacity: Allows to set and change the opacity of the selected color.
Accessibility: Built-in accessibility features to access color picker using the keyboard,
screen readers, or other assistive technology devices.
Diagram
The diagram component visually represents information. It is also used to create diagrams like
flow charts, organizational charts, mind maps, and BPMN either through code or a visual
interface.
Nodes - Nodes are used to host graphical objects (path or controls) that can be arranged
and manipulated on a diagram page. Many predefined standard shapes are included.
Custom shapes can also be created and added easily.
Connectors - The relationship between two nodes is represented using a connector.
Labels - Labels are used to annotate nodes and connectors.
Interactive Features - Interactive features are used to improve the run time editing
experience of a diagram.
Data Binding - Generates diagram with nodes and connectors based on the information
provided from an external data source.
Commands - Supports a set of predefined commands that helps edit the diagram using
keyboard. It is also possible to configure new commands and key combinations.
Automatic Layout - Automatic layouts are used to arrange nodes automatically based on a
predefined layout logic. There is built-in support for organizational chart layout, hierarchical
tree layout, symmetric layout, radial tree layout, and mind map layout.
Overview Panel - The overview panel is used to improve navigation experience when
exploring large diagrams.
SymbolPalettes - The symbol palette is a gallery of reusable symbols and nodes that can
be dragged and dropped on the surface of a diagram.
Rulers - The ruler provides horizontal and vertical guides for measuring diagram objects in
diagram control.
96
Serialization - When saved in JSON format a diagram’s state persists, and then it can be
loaded back using serialization.
Exporting and Printing - Diagrams can be exported as .png, .jpeg, .bmp, and .svg image
files, and can also be printed as documents.
Gridlines - Gridlines are the pattern of lines drawn behind diagram elements. It provides a
visual guidance while dragging or arranging the objects on a diagram surface.
Page Layout - The drawing surface can be configured to page-like appearance using page
size, orientation, and margins.
Context Menu - Frequently used commands can easily be mapped to the context menu.
HeatMap
Input
New Features
The clear button can be enabled/disabled dynamically through setClearButton method.
ListView
Breaking Changes
unCheckAllItem uncheckAllItems
unCheckItem uncheckItem
New Features
97
UI-Virtualization implemented to render only viewable list items in a view port on loading
large number of data.
Maps
New Features
Support has been added for animating the shapes on zooming.
Support has been added to trim the maps title, when it exceeds the available width.
Support had been provided for printing and exporting the maps.
Support has been provided for printing.
MaskedTextBox
New Features
Provided option to show/hide clear button to reset the value in MaskedTextBox
NumericTextBox
New Features
Provided option to show/hide clear button to reset the value in NumericTextBox.
Prevented to type unwanted text and symbols in NumericTextBox.
RadioButton
Bug Fixes
Wrapped text of a RadioButton label overlaps with next RadioButton label issue fixed.
Sidebar
Breaking Changes
Target property supports both the id and class selectors to locate the target element.
New Features
Support for setting the open/close state of the Sidebar has been provided with isOpen
98
property.
Slider
Breaking Changes
readOnly readonly
New Features
Limits implemented to limit movement interval of min and max values to certain range.
Drag interval implemented to interact with the range slider by dragging the range.
Provided to support custom value arrays.
Bootstrap theme tooltip appearance improved by enabling tooltip pointer.
SplitButton
Breaking Changes
UI changes based on design guidelines
Switch
Switch is a graphical user interface element that allows you to toggle between checked and
unchecked states.
Text - Supports text.

Sizes - Provided with different sizes of Switch.
Toast
actions.
Position: Enables to position the toast anywhere on the screen. It has a predefined set of
Autohide and TimeOut: Toast can be expired based on the timeOut property; it hides toast
Multi Toast: Toasts can support to display multiple toasts with various time delay.
99
Progress Bar: Supports to visually indicate time lapse when the toast expires.
Action Buttons: Supports to add buttons in the toast for archiving any actions within the
toast.
Template: User customized element can be defined for the toast using the template
property.
Tooltip
Bug Fixes
Tooltip positioning issue fixed while target placed right of the page.
TreeMap
The TreeMap is used to displayed the hierarchical or multi-level data to visualize the nested
rectangles.
Layout Mode - TreeMap supports different type of layouts like Squarified,

SliceAndDiceHorizontal, SliceAndDiceVertical and SliceAndDiceAuto.
Legend - TreeMap supports legend feature with different mode. Default and Interactive.
LabelTemplate - Leaf item labels can be customized by the label template.
ColorMapping - TreeMap supports the color mapping feature. It used to customize the leaf
item fill colors based on range or values.
User-Interactions - TreeMap supports the Drilldown, Tooltip, Highlight and Selection user
interaction features.
Print and Export - TreeMap supports printing and exporting as different file types.
Uploader
New Features
Added chunked upload support to upload large files asynchronously with pause and
resume options.
Support has been provided to resume automatically on failed chunk up to maximum retry
options.
Included option to handle retry upload through UI (User Interface).
Support to cancel the request while uploading a file is added.
100
Common
Bug Fixes
Resolved api comments issue.
101
DropDownList
Breaking Changes
Resolved floatLabelType and sortOrder enumeration issue.
102
Common
Breaking Changes
Datamanager selector name changes from e-datamanager to e-data-manager .
Resolved ASP.NET MVC version conflict issue.
103
Common
Bug Fixes
Resolved newtonsoft incompatible version warning.
104
Common
Essential JS 2 for ASP.NET Core and ASP.NET MVC is now available. It is a modern enterprise
UI toolkit that has been built from the ground up to be lightweight, responsive, modular, and
touch-friendly. All the component assemblies are published to NuGet.org as a public NuGet
package for your convenience and ease of setup. It comes with following list of components:
Chart
Maps
Circular Gauge
Linear Gauge
Grid
Schedule
Calendar
Autocomplete
Button
Check Box
Radio Button
Split Button
Drop-down Button
Combo Box
Date Picker
Date-Range Picker
Date-Time Picker
Drop-Down List
Form Validator
Multiselect Drop-Down
Masked Text Box
Numeric Text Box
Slider
Text Boxes
Time Picker
Uploader
List View
Dialog
Tooltip
Card
Navigation
Sidebar
Tree View
Tab
105
Toolbar
Context Menu
Accordion
Pager
Schedule
Schedule is an event calendar which facilitates user with the common Outlook-calendar features,
thus allowing the users to plan and manage their appointments and its time in an efficient way.
Views - Schedule is now availed with 6 different view modes – day, week, work week,
month, agenda and month agenda. It is possible to configure view-based settings on each
view mode. The Week view is set as active view by default.
Data binding - Seamless data binding with various client-side and remote data sources thus
allowing the data to load on demand by default to reduce the data transfer and loading time.
Recurrence - Allows the user to repeat a set of events on a daily, weekly, monthly, or yearly
basis.
Template - The key elements like events, date header, work cells and event tooltip comes
with the default template support which allows the flexible end-user customization to embed
any kind of text, images, or styles to it.
Time zone - Regardless of whatever time zone your system follows, Schedule supports
setting your own required time zone value to it as well as to each event – thus allowing the
events to display on its exact local time.
Customizable working days and hours - Users can set specific work hour range which is
visually differentiated with active colour. Also, the working days collection can be customized
with specific days, so that the remaining days will be considered as weekend.
Custom editor template - Template option is availed for event editor, thus allowing the
users to add their own custom editor design and also provides option to add additional fields
onto the default event editor.
Adaptive rendering - Adapts with optimal user interfaces for mobile and desktop form-
Keyboard interaction - All the common actions such as traversing through the
appointments, multiple cell selection, add/edit/delete the appointments, navigate to other
views, dates and much more can be performed through keyboard inputs.
Localization - All the static text and date content can be localized to any desired language.
Also, it can be displayed with appropriate time mode and date-format as per the localized
language.
RTL - Supports displaying the component to display in the direction from right to left.
106
Breaking Changes
The below API types are corrected from 16.2.41 version of Essential JS 2.
Components Properties Old Type
Maps ColorMapping object List
HighlightSettings object MapsHighlightSettings
SelectionSettings object MapsSelectionSettings
TooltipSettings object MapsTooltipSettings
DataLabelSettings object MapsDataLabelSettings
ShapeSettings object MapsShapeSettings
ShapeBorder object MapsBorder
TextStyle object MapsFont
Title object MapsCommonTitleSettin
TitleStyle object MapsFont
Margin object MapsMargin
ArrowSettings object ArrowSettings
SubtitleSettings object MapsSubTitleSettings
Schedule fields object ScheduleField
views List object
Lineargauge Font object LinearGaugeFont
LableStyle object LinearGaugeLabel
Line object LinearGaugeLine
MajorTicks object LinearGaugeTick
MinorTicks object LinearGaugeTick
Border object LinearGaugeBorder
Container object LinearGaugeContainer
Margin object LinearGaugeMargin
TitleStyle object LinearGaugeFont
ToolTip object LinearGaugeTooltipSett
Circulargauge TitleStyle object CircularGaugeFont
ToolTip object CircularGaugeTooltipSe
107
Border object CircularGaugeBorder
Animation object CircularGaugeAnimation
Cap object CircularGaugeCap
NeedleTail object CircularGaugeNeedleTa
AccumulationChart Annotations List List
Series List List
Border AccumulationChartBorde object
DataLabel object AccumulationDataLabel
EmptyPointSettings object AccumulationChartEmpt
Chart X object string
End object string
Start object string
Animation object ChartAnimation
CornerRadius object ChartCornerRadius
EmptyPointSettings object ChartEmptyPointSetting
ErrorBar object ChartErrorBarSettings
Marker object ChartMarkerSettings
Border ChartBorder object
TitleStyle ChartFont object
ChartArea ChartChartArea ChartArea
Accordion Effect object string
Collapse AccordionAccordionActionSettings object
Expand AccordionAccordionActionSettings object
ContextMenu AnimationSettings object ContextMenuMenuAnim
Sidebar Change object string
Close object string
Destroyed object string
Open object string
Tab Effect object string
Previous TabTabActionSettings object
Next TabTabActionSettings object
namespace
ListView ListView Lists
changed
108
Tooltip IsSticky object bool
Calendar FirstDayOfWeek double int
DatePicker FirstDayOfWeek double int
FloatLabelType object Syncfusion.EJ2.Inputs.F
ZIndex double int
DateRangePicker ZIndex double int
DatetimePicker FirstDayOfWeek double int
FloatLabelType object Syncfusion.EJ2.Inputs.F
ZIndex double int
Autocomplete FloatLabelType object Syncfusion.EJ2.Inputs.F
combobox FloatLabelType object Syncfusion.EJ2.Inputs.F
dropdownlist FloatLabelType object Syncfusion.EJ2.Inputs.F
MultiSelect Value object string[]
Toolbar Template string object
Treeview Expand TreeViewActionSettings object
Collapse TreeViewActionSettings object
109
Overview
The ButtonGroup is a pure CSS component that groups the series of buttons together in a
vertical or horizontal manner. It supports checkbox and radio type ButtonGroup.
Key features
ButtonGroup types
Predefined styles
Orientation
Selection
Nesting
110
Getting Started
This section briefly explains about how to create a simple ButtonGroup in your ASP.NET Core
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.
view
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();
}
Run the application

The following example shows a default rendering of ButtonGroup.
view
default.cs
111
</div>

{
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.
view
default.cs
<div class='e-btn-group e-vertical'>

</div>

{
return View();
}
ButtonGroup does not support SplitButton component nesting in a vertical orientation.
112
Types and Styles
This section explains about different types and styles of ButtonGroup.
ButtonGroup types
Outline ButtonGroup
An Outline ButtonGroup has a border with transparent background. To create Outline
ButtonGroup, e-outline class should be added to the target element and to each button
elements using CssClass property.
The following sample illustrates how to achieve an Outline ButtonGroup,
view
default.cs
<div class='e-btn-group e-outline'>

<ejs-button id="html" content="HTML" cssClass='e-outline'></ejs-button>
<ejs-button id="css" content="CSS" cssClass='e-outline'></ejs-button>
<ejs-button id="javascript" content="Javascript" cssClass='e-outline'></ejs-button>
</div>

{
return View();
}
ButtonGroup does not have support for flat and round types.
ButtonGroup styles
The Essential JS 2 ButtonGroup has the following predefined styles. This can be achieved by
adding corresponding class name in each button elements using CssClass property.
Class Description
e-primary Used to represent a primary action.
e-success Used to represent a positive action.
e-info Used to represent an informative action.
e-warning Used to represent an action with caution.
113
e-danger Used to represent a negative action.
The following example illustrates how to achieve predefined styles in ButtonGroup.
view
default.cs
<ejs-button id="approve" content="Approve" cssClass='e-success'></ejs-button>
<ejs-button id="reject" content="Reject" cssClass='e-warning'></ejs-button>
<ejs-button id="view" content="View" cssClass='e-info'></ejs-button>
<ejs-button id="edit" content="Edit" cssClass='e-primary'></ejs-button>
<ejs-button id="delete" content="Delete" cssClass='e-danger'></ejs-button>
</div>

{
return View();
}
Predefined ButtonGroup styles provide only the visual indication. So, ButtonGroup content
should define the ButtonGroup style for the users of assistive technologies such as screen
readers.
114
Selection and Nesting
Selection
Single selection
ButtonGroup supports radio type selection in which only one button can be selected. This can be
achieved by adding input element along with id attribute with its corresponding label along with
for attribute inside the target element. In this ButtonGroup, the type of the input element should
be radio and e-btn is added to the label element.
The following example illustrates the single selection behavior in ButtonGroup.
view
default.cs
<input type="radio" id="radioleft" name="align" value="left" />
<label class="e-btn" for="radioleft">Left</label>
<input type="radio" id="radiomiddle" name="align" value="middle" />
<label class="e-btn" for="radiomiddle">Center</label>
<input type="radio" id="radioright" name="align" value="right"/>
<label class="e-btn" for="radioright">Right</label>
</div>

{
return View();
}
Multiple selection
ButtonGroup supports checkbox type selection in which multiple button can be selected. This can
be achieved by adding input element along with id attribute with its corresponding label along
with for attribute inside the target element. In this ButtonGroup, the type of the input element
should be checkbox and e-btn is added to the label element.
The following example illustrates the multiple selection behavior in ButtonGroup.
view
default.cs
115
<input type="checkbox" id="checkbold" name="font" value="bold"/>
<label class="e-btn" for="checkbold">Bold</label>
<input type="checkbox" id="checkitalic" name="font" value="italic" />
<label class="e-btn" for="checkitalic">Italic</label>
<input type="checkbox" id="checkline" name="font" value="underline"/>
<label class="e-btn" for="checkline">Underline</label>
</div>

{
return View();
}
Nesting
Nesting with other components can be possible in ButtonGroup. The following components can
be nested in ButtonGroup.
DropDownButton
SplitButton
DropDownButton
To initialize DropDownButton component refer DropDownButton Getting Started documentation .
In the following example, the DropDownButton component is rendered in ButtonGroup.
view
default.cs
<ejs-dropdownbutton id="element" content="More" items="ViewBag.items"></ejs-dropdow
nbutton>
</div>

{
//define the array of JSON
List<object> items = new List<object>();
items.Add(new
{
text = "Learn SQL"
116
});
items.Add(new
{
text = "Learn PHP"
});
items.Add(new
{
text = "Learn Bootstrap"
});
ViewBag.items = items;
return View();
}
SplitButton
To initialize SplitButton component refer SplitButton Getting Started documentation .
In the following example, the SplitButton component is rendered in ButtonGroup.
view
default.cs
<ejs-button id="cut" content="Cut"></ejs-button>
<ejs-button id="copy" content="Copy"></ejs-button>
<ejs-splitbutton id="element" content="Paste" items="@ViewBag.items"></ejs-splitbutt
on>
</div>

{
items.Add(new
{
text = "Paste"
});
items.Add(new
{
text = "Paste Text"
});
items.Add(new
{
text = "Paste Special"
});
return View();
117
}
118
Accessibility
The web accessibility makes web content and web applications more accessible for people with
disabilities. It especially helps in dynamic content change and development of advanced user
interface controls with AJAX, HTML, JavaScript, and related technologies. ButtonGroup provides
built-in compliance with WAI-ARIA specifications. It helps the people with disabilities by providing
information about the widget for assistive technology in the screen readers. ButtonGroup
component contains the group role.
Properties Functionality
role Indicates the group for the container that holds two or more buttons.
Keyboard interaction
Normal behavior
Keyboard shortcuts Actions

Tab Focuses the next button in the ButtonGroup.
Enter/Space Activates the focused button in the ButtonGroup.
Checkbox type behavior

Tab Focuses the next button in the ButtonGroup.
Space Activates the focused button in the ButtonGroup.
Radiobutton type behavior

Tab Focuses the active button in the ButtonGroup.
Arrow Keys Activates next/previous button in the ButtonGroup.
view
default.cs
<h5>Normal behavior</h5>
<div class='e-btn-group' role='group'>
<ejs-button id="html"></ejs-button>
119
<ejs-button id="css"></ejs-button>
<ejs-button id="javascript"></ejs-button>
</div>
<h5>Checkbox type behavior</h5>
<input type="checkbox" id="checkbold" name="font" />
<input type="checkbox" id="checkitalic" name="font" />
<input type="checkbox" id="checkunderline" name="font" />
<label class="e-btn" for="checkunderline">Underline</label>
</div>
<h5>Radiobutton type behavior</h5>
<input type="radio" id="radioleft" name="align" />
<label class="e-btn" for="radioleft">Left</label>
<input type="radio" id="radiomiddle" name="align" />
<label class="e-btn" for="radiomiddle">Center</label>
<input type="radio" id="radioright" name="align" />
<label class="e-btn" for="radioright">Right</label>
</div>

{
return View();
}
120
How to
Initialize ButtonGroup using UTIL function

Though, it is a CSS component for easy initialization of ButtonGroup createButtonGroup util
function can be used.
Using createButtonGroup method, the Button options, selector, and cssClass is passed and the
corresponding classes is added to the elements.
Create basic ButtonGroup

To create a basic ButtonGroup, the target element along with the button elements should be
created.
Create radio type ButtonGroup

To create a radio type ButtonGroup, the target element along with the input elements should be
created with type radio .
Create checkbox type ButtonGroup

Checkbox type ButtonGroup creation is similar to radio type ButtonGroup, instead the type of the
input elements should be checkbox .
The following example illustrates how to create ButtonGroup using createButtonGroup method
for basic, checkbox, and radio type behaviors.
view
default.cs
<h5>Normal behavior</h5>
<div id='basic'>
<button></button>
<button></button>
<button></button>
</div>
<h5>Checkbox type behavior</h5>
<div id='checkbox'>
<input type="checkbox" id="checkbold" name="font" value="bold"/>
<input type="checkbox" id="checkitalic" name="font" value="italic"/>
<input type="checkbox" id="checkundeline" name="font" value="underline"/>
</div>
<h5>Radiobutton type behavior</h5>
121
<div id='radio'>
<input type="radio" id="radioleft" name="align" value="left"/>
<input type="radio" id="radiomiddle" name="align" value="middle"/>
<input type="radio" id="radioright" name="align" value="right"/>
</div>
<script>
ej.splitbuttons.createButtonGroup('#basic', {
buttons: [
{ content: 'HTML' },
{ content: 'CSS' },
{ content: 'Javascript'}
]
});
ej.splitbuttons.createButtonGroup('#checkbox', {
buttons: [
{ content: 'Bold' },
{ content: 'Italic' },
{ content: 'Undeline'}
]
});
ej.splitbuttons.createButtonGroup('#radio', {
buttons: [
{ content: 'Left' },
{ content: 'Center' },
{ content: 'Right'}
]
});
</script>

{
return View();
}
If null value is passed in button options, then that particular button will be skipped from
processing in createButtonGroup util function.
Create ButtonGroup with icons

ButtonGroup with icons can be achieved by IconCss property of the Button component.
The following example illustrates how to create ButtonGroup with icons.
view
122
default.cs
<ejs-button id="left" content="Left" iconCss="e-icons e-left-icon"></ejs-button>
<ejs-button id="middle" content="Center" iconCss="e-icons e-middle-icon"></ejs-butt
on>
<ejs-button id="right" content="Right" iconCss="e-icons e-right-icon"></ejs-button>
</div>
<style>
.e-btn-group {
}
.e-left-icon::before {
content: '\e75e';
}
.e-right-icon::before {
content: '\e75f';
}
.e-middle-icon::before {
content: '\e74b';
}
</style>

{
return View();
}
Create ButtonGroup with rounded corner

The ButtonGroup with rounded corner has round edges on both sided. To ButtonGroup with
rounded corner, e-round-corner class is to be added to the target element.
The following example illustrates how to create ButtonGroup with rounded corner.
view
default.cs
<div class='e-btn-group e-round-corner'>

</div>
123
{
return View();
}
Enable RTL
ButtonGroup supports RTL functionality. This can be achieved by adding e-rtl class to the
target element.
The following example illustrates how to create ButtonGroup with RTL support.
view
default.cs
<div class='e-btn-group e-round-corner'>

</div>

{
return View();
}
Disable
Particular button
To disable a particular button in a ButtonGroup, disabled attribute should be added to
corresponding button element.
Whole ButtonGroup
To disable whole ButtonGroup, disabled attribute should be added to all the button elements.
The following example illustrates how to disable the particular and the whole ButtonGroup.
view
default.cs
124
<ejs-button id="css" content="CSS" disabled="true"></ejs-button>
</div>
<ejs-button id="html" content="HTML" disabled="true"></ejs-button>
<ejs-button id="css" content="CSS" disabled="true"></ejs-button>
<ejs-button id="javascript" content="Javascript" disabled="true"></ejs-button>
</div>

{
return View();
}
To disable radio/checkbox type ButtonGroup, the disabled attribute should be added to

the particular input element.
Enable ripple
Ripple can be enabled by importing rippleEffect method from ej2-base and initialize
rippleEffect with .e-btn-group element, and selector as e-btn .
The following example illustrates how to enable ripple for ButtonGroup.
view
default.cs
@Html.EJS().Button("html").Content("HTML").Render()
@Html.EJS().Button("css").Content("CSS").Render()
@Html.EJS().Button("javacript").Content("Javascript").Render()
</div>
<script>
ej.base.enableRipple(true);
var button = document.querySelector('.e-btn-group');
ej.base.rippleEffect(button, {selector: 'e-btn'});
</script>

{
return View();
}
125
Form submit
The name attribute of the input element is used to group the radio/checkbox type ButtonGroup.
When the radio/checkbox type are grouped in the form, the checked items value attribute will be
posted to the server on form submit that can be retrieved through the name. The disabled
radio/checkbox type value will not be sent to the server on form submit.
In the following code snippet, the radio type ButtonGroup is explained with male value as
checked. Now, the value that is in checked state will be sent on form submit.
view
default.cs
<form>
<input type="radio" id="male" name="gender" value="male"/>
<label class="e-btn" for="male">Male</label>
<input type="radio" id="female" name="gender" value="female"/>
<label class="e-btn" for="female">Female</label>
<input type="radio" id="transgender" name="gender" value="transgender"/>
<label class="e-btn" for="transgender">Transgender</label>
</div>
<button class='e-btn e-primary'>Submit</button>
</form>
<script>
document.getElementById('male').checked = true;
</script>
<style>
.e-btn-group, button {
}
</style>

{
return View();
}
Show ButtonGroup selected state on initial render

To show selected state on initial render, checked property should to added to the corresponding
input element.
The following example illustrates how to show selected state on initial render.
view
126
default.cs
<input type="checkbox" id="checkbold" name="font" value="bold" checked/>
<input type="checkbox" id="checkitalic" name="font" value="italic" />
<input type="checkbox" id="checkline" name="font" value="underline"/>
<label class="e-btn" for="checkline">Underline</label>
</div>

{
return View();
}
127
Overview
The purpose of this document is to build and run a simple Essential JS 2 application in ASP.NET
Core.
128
Localization
Localization library allows you to localize the text content of the Essential JS 2 component.
Loading translations
To load translation object in your application use load function of L10n class.
<script>
ej.base.L10n.load({
'fr-BE': {
'Button': {
'id': 'Numéro de commande',
'date':'Date de commande'
}
}
});
</script>
Changing current locale

Current locale can be changed for all the Essential JS 2 components in your application by
invoking setCulture function with your desired culture name.
<script>
ej.base.L10n.load({
'fr-BE': {
'Button': {
'id': 'Numéro de commande',
'date':'Date de commande'
}
}
});
ej.base.setCulture('fr-BE');
</script>
Note: Before changing a culture globally, ensure that locale text for the concerned culture is
loaded through L10n.load function.
129
Internationalization
The Internationalization library provides support for formatting and parsing date and number
objects using the official Unicode CLDR JSON data. The en-US locale is set as default culture
and USD is set as default currencyCode for all Essential JS 2 components.
Loading Culture Data

It requires the following CLDR data to be loaded using loadCldr function for cultures other than
en-US .
File Name Path
ca-gregorian cldr/main/en/ca-gregorian.json
timeZoneNames cldr/main/en/timeZoneNames.json
numbers cldr/main/en/numbers.json
numberingSystems cldr/supplemental/numberingSystems.json
currencies cldr/main/en/currencies.json
Note: For en , dependency files are already loaded in the library.
Installing CLDR Data

CLDR data is available as npm package. So, you can install it through the below command to our
package.
npm install cldr-data
Binding to i18n library
<script>
ej.base.loadcldr(enNumberData, entimeZoneData);
</script>
Changing Global Culture and Currency Code

To set the default culture and the currencyCode for all Essential JS 2 components, you can use
the methods setCulture for setting default locale and setCurrencyCode for setting the
currencyCode.
130
Setting Global Culture
<script>
ej.base.setCulture('ar');
</script>
Setting Currency Code
<script>
ej.base.setCurrencyCode('QAR');
</script>
Note: If global culture is not set then en-US is set as default locale and USD is set as
default currency code.
Manipulating Numbers
Supported Format String

Based on the NumberFormatOptions number formatting and parsing operations are processed.
You need to specify some or all of the following properties mentioned in the below table.
No Properties Description
Denotes the format to be set .Possible values are

1. N - denotes numeric type.
2. C - denotes currency type.
3. P - denotes percentage type.
1 format E.g:
formatNumber ( 1234344 ,{format:'N4'}).
Note: If no format is specified it takes numeric as

default format type.
Indicates the minimum number of fraction digits .

2 minimumFractionDigits
Possible values are 0 to 20.
Indicates the maximum number of fraction digits.

3 maximumFractionDigits
Indicates he minimum number of significant digits.

4 minimumSignificantDigits
Note: If minimumSignificantDigits is given it is
mandatory to give maximumSignificantDigits
Indicates he maximum number of significant digits. .

5 maximumSignificantDigits
Note: If maximumSignificantDigits is given it is
mandatory to give minimumSignificantDigits
131
Indicates whether to enable the group separator or
6 useGrouping
not . By default grouping value will be true.
Indicates the minimum number of the integer digits to

7 minimumIntegerDigits
be placed in the value. Possible values are 1 to 21.
Indicates the currency code which needs to

8 currency
considered for the currency formatting.
Note: The minimumIntegerDigits , minimumFractionDigits and maximumFractionDigits

are categorized as group one, minimumSignificantDigits and maximumSignificantDigits
are categorized as group two. If group two properties are defined, then the group one
properties will be ignored.
Custom number formatting and parsing

Custom number formatting and parsing are also supported by specifying the pattern directly in
the format property of NumberFormatOptions . Custom number format can be achieved by using
one or more custom format specifiers listed in the below table.
Format
Specifier Description Input
Output
Replaces the zero with

the corresponding digit
if one is present. instance.formatNumber (123,
0 '0123'
Otherwise, zero {format: '0000' })
appears in the result
string.
Replaces the "#"

symbol with the
corresponding digit if
instance.formatNumber (1234,
# one is present; ‘1234’
{format: '####' })
otherwise, no digit
appears in the result
string.
Denotes the number of

digits allowed after the
decimal points if it’s instance.formatNumber (546321,
. ‘546321.000’
not specified then no {format: '###0.##0#' })
need to specify
decimal point values.
Percent specifier
denotes the instance.formatNumber (1,
% ‘0100 %’
percentage type {format: '0000 %' })
format.
Denotes the currency

type format based on instance.formatNumber (13,
$ ‘$ 13.00’
the global currency {format: '$ ###.00' });
code specified.
132
Denotes separate
instance.formatNumber (-120,
; formats for positive, ‘(120.00)’
negative and zero {format: '###.##;(###.00);-0'});
values.
Denotes the
'String' characters enclosed
instance.formatNumber (-123.44,
(single within single Quote(') ‘123.44 @’
{format: "####.## '@'"})
Quotes) to be replaced in the
resultant string.
Note: If custom format pattern is specified other NumberFormatOptions properties will not
be considered.
Number formatting
getNumberFormat
The getNumberFormat method which will return a function that formats given number based on
the NumberFormatOptions specified.
<script>
var intl = new ej.base.Internationalization();
var nFormatter = intl.getNumberFormat({ skeleton: 'C3', currency: 'USD',minimumInte
gerDigits:8});
var formattedValue = nFormatter(1234545.65)
document.querySelector('.result').innerHTML = formattedValue;
</script>
formatNumber
The formatNumber method which takes two arguments numeric value and
NumberFormatOptions and returns the formatted string.
<script>
var formattedString = intl.formatNumber(12345.65, { format:'C5' , useGrouping: false
,
minimumSignificantDigits:1, maximumSignificantDigits:3 });
document.querySelector('.result').innerHTML = formattedString;
</script>
Parsing
getNumberParser
133
The getNumberParser method which will return a function that parses given string based on the
NumberFormatOptions specified.
<script>
var nParser = intl.getNumberParser({ format:'P2' , useGrouping: false});
var val = nParser('123567.45%');
document.querySelector('.result').innerHTML = val + '';
</script>
parseNumber
The parseNumber method which takes two arguments the string value, NumberFormatOptions
and returns the numeric value.
<script>
var val = intl.parseNumber('$01,234,545.650', { format: 'C3', currency: 'USD', mini
mumIntegerDigits: 8 });
document.querySelector('.result').innerHTML = val + '';
</script>
Manipulating DateTime
Supported Format String

Based on the DateFormatOptions date formatting and parsing operations are processed. You
need to specify some or all of the following properties mentioned below table.
Options Descriptions
It specifies the type of format to be used supported types .

1. date
2. dateTime
3. time
Based on the type specified the supported skeletons are given below.
Type 1. short
2. medium,
3. long
4. full
E.g: formatDate (new Date(), {type: 'date', skeleton:medium})
Note: If no type is specified then date type is set by default.
skeleton Specifies the format in which the dateTime format will process
Date type skeletons
134
skeleton Option input Format Output
short {type: 'date', skeleton:'short'}) 11/4/16
medium {type: 'date', skeleton:'medium'}) Nov 4, 2016
long {type: 'date', skeleton:'long'} November 4, 2016
full {type: 'date', skeleton:full}) Friday, November 4, 2016
Time type skeletons
short {type: 'time', skeleton:'short'} 1:03 PM
medium {type: 'time', skeleton:'medium'} 1:03:04 PM
Long {type: 'time', skeleton:'long'}) 1:03:04 PM GMT+5
full {type: 'time', skeleton:'full'}) 1:03:04 PM GMT+05:30
DateTime type skeletons
Skeleton Option input Format Output
{type: ' dateTime ',

short 11/4/16, 1:03 PM
skeleton:'short'}
{type: ' dateTime ,

medium Nov 4, 2016, 1:03:04 PM
skeleton:'medium'}
{type: ' dateTime ',

Long November 4, 2016 at 1:03:04 PM GMT+5
skeleton:'long'})
{type: ' dateTime ', Friday, November 4, 2016 at 1:03:04 PM

full
skeleton:'full'}) GMT+05:30
Additional skeletons
Apart from the standard date type formats additional format are supported by using the additional
skeletons given in below table.
d {skeleton:'d'} 7
E {skeleton:'E'} Mon
Ed {skeleton:'Ed'} 7 Mon
Ehm {skeleton:'Ehm'}) Mon 12:43 AM
EHm {skeleton:'EHm;}); Mon 12:43
Ehms {skeleton:'Ehms' } Mon 2:45:23 PM
EHms {skeleton:'EHms'}) Mon 12:45:45
135
Gy {skeleton:'Gy' } 2016 AD
GyMMM {skeleton:'GyMMM'} : Nov 2016 AD
GyMMMd {skeleton:'GyMMMd'} Nov 7, 2016 AD
GyMMMEd {skeleton:'GyMMMEd'} Mon, Nov 7, 2016 AD
h {skeleton:'h'} 12 PM
H {skeleton:'H'} 12
hm {skeleton:'hm'} 12:59 PM
Hm {skeleton:'Hm'} 12:59
hms {skeleton:'hms'} 12:59:13 PM
Hms {skeleton:'Hms'} 12:59:13
M {skeleton:'M'} 11
Md {skeleton:'Md'} 11/7
MEd {skeleton:'hms'} Mon, 11/7
MMM {skeleton:'MMM'} Nov
MMMEd {skeleton:'MMMEd'} Mon, Nov 7
MMMd {skeleton:'MMMEd'} Nov 7
ms {skeleton:'ms'} 59:13
y {skeleton:'y' } 2016
yM {skeleton:'yM' } 11/2016
yMd {skeleton:'yMd' } 11/7/2016
yMEd {skeleton:'yMEd' } Mon, 11/7/2016
yMMM {skeleton:'yMMM' } Nov 2016
yMMMd {skeleton:'yMMMd'} Nov 7, 2016
yMMMEd {skeleton:'yMMMEd'} Mon, Nov 7, 2016
yMMM {skeleton:'yMMM'} Nov 2016
Note: Culture specific format skeletons are also supported.
Custom Formats
To use the custom date and time formats we need to specify the date/time pattern directly in the
format property. Custom format string must contain one or more of the following standard
date/time symbols
Symbols Description
136
G Denotes the era in the date
y Denotes the year.
M/L Denotes month.
E/c Denotes the day of week.
d Denotes the day of month.
h/H Denotes the hour. h for 12 hour and H for 24 hours format.
m Denotes minutes.
s Denotes seconds.
Denotes the am/pm designator it will only be displayed if hour is specified in

a
the h format.
z Denotes the time zone.
' (single To display words in the formatted date you can specify the words with in
quotes) the single quotes
Custom format example
<script>
var formattedString = intl.formatDate(new Date('1/12/2014 10:20:33'), { format: '\'
year:\'y' \'month:\' MM' });
//Output: "year:2014 month:01"
</script>
Note: If format property is given in options other properties are not considered.
Formatting
getDateFormat
The getDateFormat method which will return a function that formats given date object based on
the DateFormatOptions specified.
<script>
var dFormatter = intl.getDateFormat({ skeleton: 'full', type: 'dateTime' });
var formattedString = dFormatter(new Date('1/12/2014 10:20:33'));
</script>
formatDate
137
The formatDate method which takes two arguments date object, DateFormatOptions and
returns the formatted string.
<script>
var date = new Date();
var formattedString = intl.formatDate(new Date('1/12/2014 10:20:33'), { skeleton:
'GyMMM' });
</script>
Parsing
getDateParser
The getDateParser method which will return a function that parses given string based on the
DateFormatOptions specified.
<script>
var dParser = intl.getDateParser({skeleton: 'full', type: 'dateTime'});
var val = dParser('Friday, November 4, 2016 at 1:03:04 PM GMT+05:30');
document.querySelector('.result').innerHTML = val.toString();
</script>
parseDate
The parseDate method which takes two arguments string value, DateFormatOptions and
returns the date Object.
<script>
var val = intl.parseDate('11/2016',{skeleton: 'yM'});
document.querySelector('.result').innerHTML = val.toString();
</script>
138
Right-To-Left
Right To Left (RTL) can be enabled for Essential JS 2 components by calling enableRtl with
true . This will render all the Essential JS 2 components in right to left direction. Find the code
snippet for this below.
<script>
// Enables Right to left alignment for all controls
ej.base.enableRtl(true);
</script>
Enable RTL to individual component

To control a component’s direction individually you can directly set the component’s EnableRtl
property as true. For illustration, we have enabled RTL for Button component in following code
snippet.
view
<ejs-button id="normalbtn" enableRtl="true" content="Normal"></ejs-button>
139
Overview
The Button is a graphical user interface element that triggers an event on its click action. It can
contain a text, an image, or both.
Key Features
Button types .
Predefined Button styles .
Supports text and icon in the Button .
140
Getting Started
This section briefly explains about how to create a simple Button in your ASP.NET Core
Add Button to the project

To create simple Button add the ejs-button tag with id attribute as element in your
Index.cshtml page.
view
default.cs
<ejs-button id="element" content="Button"></ejs-button>

{
return View();
}
Run the application

The following example shows a default rendering of Button.
view
default.cs
<ejs-button id="element" content="Button"></ejs-button>

{
return View();
}
141
Change Button type
To change the default Button to flat Button, set the cssClass property to e-flat .
view
flatbutton.cs
<ejs-button id="element" cssClass="e-flat" content="Button"></ejs-button>
public IActionResult FlatButton()

{
return View();
}
142
Types and Styles
This section explains the different styles and types of Buttons.
Button styles
The Essential JS 2 Button has the following predefined styles that can be defined using the
cssClass property.
Class Description
e-primary Used to represent a primary action.
e-success Used to represent a positive action.
e-info Used to represent an informative action.
e-warning Used to represent an action with caution.
e-danger Used to represent a negative action.
e-link Changes the appearance of the Button like a hyperlink.
view
styles.cs
<ejs-button id="primarybtn" cssClass="e-primary" content="Primary"></ejs-button>
<ejs-button id="successbtn" cssClass="e-success" content="Success"></ejs-button>
<ejs-button id="infobtn" cssClass="e-info" content="Info"></ejs-button>
<ejs-button id="warningbtn" cssClass="e-warning" content="Warning"></ejs-button>
<ejs-button id="dangerbtn" cssClass="e-danger" content="Danger"></ejs-button>
<ejs-button id="linkbtn" cssClass="e-link" content="Link"></ejs-button>
}
<style>
button {
}
</style>
public ActionResult Styles()

{
143
return View();
}
Predefined Button styles provide only the visual indication. So, Button content should define
the Button style for the users of assistive technologies such as screen readers.
Button types
The types of Essential JS 2 Button are as follows:
Basic types
Flat Button
Outline Button
Round Button
Toggle Button
Basic types
The basic Button types are explained below.
Type Description
Button Defines a click Button.
Submit This Button submits the form data to the server.
Reset This Button resets all the controls to their initial values.
view
basicbutton.cs
<ejs-button type="submit" id="submit" content="Submit"></ejs-button>
<ejs-button type="reset" id="reset" content="Reset"></ejs-button>
}
<style>
button {
}
</style>
144
public ActionResult BasicButton()
{
return View();
}
Flat Button
The Flat Button is styled with no background color. To create a flat Button, set the cssClass
property to e-flat .
Outline Button
An outline Button has a border with transparent background. To create an outline Button, set the
cssClass property to e-outline .
Round Button
A round Button is shaped like a circle. Usually, it contains an icon representing its action. To
create a round Button, set the cssClass property to e-round .
view
buttontypes.cs
<ejs-button id="flat" cssClass="e-flat" content="Flat"></ejs-button>
<ejs-button id="outline" cssClass="e-outline" content="Outline"></ejs-button>
<ejs-button id="round" cssClass="e-round" iconCss="e-icons e-plus-icon" isPrimary="
true"></ejs-button>
}
<style>
button {
}
.e-plus-icon::before {
content: '\e823';
}
</style>
145
public ActionResult ButtonTypes()
{
return View();
}
Toggle Button
A toggle Button allows you to change between the two states. The Button is active in toggled
state and can be recognized through the e-active class. The functionality of the toggle Button
is handled by click event. To create a toggle Button, set the isToggle property to true . In the
following code snippet, the toggle Button text changes to play/pause based on the state of the
Button with the use of click event.
view
togglebutton.cs
<ejs-button id="togglebtn" cssClass="e-flat" iconCss="e-icons e-play-icon" content=
"Play" isToggle="true"></ejs-button>
}
<style>
.e-play-icon::before {
content: '\e798';
}
.e-pause-icon::before {
content: '\e753';
}
</style>
<script>
document.getElementById('toggelbtn').onclick = (): void => {

if (document.getElementById('toggelbtn').classList.contains('e-active')) {
togglebtn.content = 'Pause';
togglebtn.iconCss = 'e-icons e-pause-icon';
} else {
togglebtn.content = 'Play';
togglebtn.iconCss = 'e-icons e-play-icon';
}
};
</script>
146
public ActionResult ToggleButton()
{
return View();
}
Icons
The Button can have an icon to provide the visual representation of the action. To place the icon
on a Button, set the iconCss property to e-icons with the required icon CSS. By default, the
icon is positioned to the left side of the Button. You can customize the icon's position by using the
iconPosition property.
view
buttonicon.cs
<ejs-button id="iconbutton" iconCss="e-icons e-prev-icon" content="PREVIOUS"></ejs-
button>
<ejs-button id="iconposbtn" iconCss="e-icons e-open-icon" content="STOP"></ejs-butt
on>
}
<style>
button {
}
.e-open-icon::before {
content: '\e782';
}
.e-prev-icon::before {
content: '\e797';
}
</style>
public ActionResult ButtonIcon()

{
return View();
}
147
The Essential JS 2 provides a set of icons that can be loaded by applying e-icons class
name to the element. You can also use third party icons on the Button using the iconCss
property.
Button size
The two types of Button sizes are default and small. To change the size of the default Button to
small Button, set the cssClass property to e-small .
view
size.cs
<ejs-button id="smallbtn" cssClass="e-small" content="SMALL"></ejs-button>
<ejs-button id="normalbtn" content="NORMAL"></ejs-button>
}
<style>
button {
}
</style>
public ActionResult Size()

{
return View();
}
148
How To
The following section explains how to customize various aspects of the Button.
Create a Block Button

You can customize a Button into a Block Button that will span the entire width of its parent
element. To create a Block Button, set the cssClass property to e-block .
view
blockbutton.cs
<ejs-button id="blockbtn" content="BLOCKBUTTON" cssClass="e-block"></ejs-button>
<ejs-button id="primarybtn" content="BLOCKBUTTON" cssClass="e-block" isPrimary="tru
e"></ejs-button>
<ejs-button id="successbtn" content="BLOCKBUTTON" cssClass="e-block e-success"></ej
s-button>
}
<style>
button {
margin: 25px 0;
}
</style>
public ActionResult blockButton()

{
return View();
}
Customize Button Appearance

You can customize the appearance of the Button by using the Cascading Style Sheets (CSS).
Define the CSS according to your requirement, and assign the class name to the cssClass
property. In the following code snippet the background color, text color, height, width, and sharp
corner of the Button can be customized through the e-custom class for all states (hover, focus,
and active).
149
view
custombutton.cs
<ejs-button id="custom" cssClass="e-custom" content="CUSTOM"></ejs-button>
}
<style>
.e-custom {
border-radius: 0;
height: 30px;
width: 80px;
}
.e-custom, .e-custom:hover, .e-custom:focus, .e-custom:active {

background-color: #ff6e40;
color: #fff;
}
button {
}
</style>
public ActionResult CustomButton()

{
return View();
}
Customize Button Size

Button size can be customized by setting height and width for the button element.
In the following sample, the height and width of the large button is customized as 50px and
120px and the height and width of the small button is customized as 30px and 25px .
view
customsize.cs
<ejs-button id="largebtn" cssClass="e-big-btn" content="Large Button"></ejs-button>
<ejs-button id="smallbtn" cssClass="e-small-btn" iconCss="e-icons e-add-icon"></ejs
150
-button>
}
<style>
.e-big-btn {
height: 50px;
width: 120px;
}
/* To Customize small button */

.e-small-btn {
height: 30px;
width: 25px;
}
.e-small-btn.e-icon-btn {
padding: 0 6px;
line-height: 24px;
}
button {
}
.e-add-icon::before {
content: '\e823';
}
</style>
public ActionResult CustomSize()

{
return View();
}
Customize input and anchor elements

You can customize the appearance of the input and anchor elements using predefined styles
through the class property. In the following code snippet, the input element is customized as a
link Button by setting the e-btn e-link class, and the anchor element is customized as a
primary Button by setting the e-btn e-primary class.
view
151
<div>
<input type="button" id="inputbtn" value="Input Button" class="e-btn e-link">
</div><br>
<div>
<a id="anchorbtn" class="e-btn e-primary" href="#">Google</a>
</div>
}
Repeat Button
The Repeat button is a type of Button in that the click event is triggered at regular time interval
from the pressed state till the released state.
The following example explains about how to achieve Repeat Button in mouse and touch events.
view
repeatbutton.cs
<div class='btncontainer'>
<ejs-button id="button" content="Button"></ejs-button>
</div>
<div class='event' style="height:auto;">
<table title='Event Trace' style="width:100%">
<tbody>
<tr>
<th>Event Trace</th>
</tr>
<tr>
<td>
<div class="eventarea" style="height: 250px;overflow: auto">
<span id="eventlog" style="word-break: normal;"></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="evtbtn" style="padding:20px 0 0 20px">
<ejs-button id="clear" content="Clear"></ejs-button>
</div>
</td>
</tr>
</tbody>
</table>
152
</div>
}
<style>
hr {
border-top: 1px solid #eee;
}
.btncontainer {
float: left;
width: 40%;
}
.event {
float: right;
width: 60%;
border-left: 1px solid #D7D7D7;
}
#eventlog b {
color: #388e3c;
}
</style>
<script>
document.getElementById("clear").addEventListener('click', function () {
document.getElementById('eventlog').innerHTML = '';
});
document.getElementById("button").addEventListener('mousedown', function () {
event.preventDefault();
timeout = setInterval(clickEventHandler, 200);
});
document.getElementById("button").addEventListener('touchstart', function () {
event.preventDefault();
timeout = setInterval(clickEventHandler, 200);
});
document.getElementById("button").addEventListener('mouseup', function () {
clearInterval(timeout);
});
document.getElementById("button").addEventListener('touchend', function () {
clearInterval(timeout);
});
document.getElementById("button").addEventListener('click', function () {
appendSpanElement('Button click event triggered.<hr>');
});
153
function clickEventHandler(e){
appendSpanElement('Button click event triggered.<hr>');
}
function appendSpanElement(text){
var span = document.createElement('span');
span.innerHTML = text;
var log = document.getElementById('eventlog');
log.insertBefore(span, log.firstChild);
}
</script>
public ActionResult RepeatButton()

{
return View();
}
Set the disabled state

Button component can be enabled/disabled by giving disabled property. To disable Button
component, the disabled property can be set as true .
The following example demonstrates Button in disabled state.
view
disabledbutton.cs
<ejs-button id="disabled" disabled="true" content="Disabled"></ejs-button>
}
<style>
button {
}
</style>
public ActionResult DisabledButton()

{
return View();
154
}
Right-To-Left
Button component has RTL support. This can be achieved by setting enableRtl as true.
The following example illustrates how to enable right-to-left support in Button component.
view
rtl.cs
<ejs-button id="rtl" iconCss="e-icons e-setting-icon" content="Settings" enableRtl="
true"></ejs-button>
}
<style>
button {
}
.e-setting-icon::before {
content: '\e7cf';
}
</style>
public ActionResult rtl()

{
return View();
}
Tooltip for Button

Tooltip can be shown on Button hover and it can be achieved by setting title attribute.
The following snippets illustrates how to show tooltip on Button hover.
view
tooltip.cs
155
<ejs-button id="primarybtn" title="Primary Button" content="Button" isPrimary="true">
</ejs-button>
}
<style>
button {
}
</style>
public ActionResult tooltip()

{
return View();
}
Add link to a Button

Link can be added to the Button by adding e-link using cssClass property and <a> tag with
href attribute should be added inside the button element.
The following example illustrates how to add link to a Button.
view
link.cs
<ejs-button id="button" cssClass='e-link'><a href="https://www.google.com/" target='
_blank'>Go to Google</a></ejs-button>
}
<style>
button {
}
</style>
public ActionResult tooltip()

{
156
return View();
}
157
Overview
The Calendar is a graphical user interface component that displays a Gregorian Calendar, and
allows a user to select a date.
Key Features
The features of the Calendar are:
Date Range
Globalization
Customization
Calendar Views
Accessibility
158
Date Range
Calendar provides an option to select a date value within a specified range by defining the min
and max properties. The min date should always be lesser than the max date. If the value of
min or max properties are changed through code behind, then update the value property to
be set within the specified range. Or else, if the value is out of specified date range and less than
min date, value property will be updated with min date or the value is higher than max date,
value property will be updated with max date.
The following example allows you to select a date within the range of 7th to 27th days in a month.
view
daterange.cs
<ejs-calendar id="calendar" value="ViewBag.value" min="ViewBag.minDate" max="ViewBag.ma

xDate"></ejs-calendar>
using System;
using System.Linq;
// For more information on enabling MVC for empty projects, visit https://go.microsoft.
com/fwlink/?LinkID=397860
{
public partial class CalendarController : Controller
{
// GET: /<controller>/
public IActionResult DateRange()
{
ViewBag.minDate= new DateTime(DateTime.Now.Year,DateTime.Now.Month,07);
ViewBag.maxDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 27);
ViewBag.value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 14);
return View();
}
}
}
159
Globalization
Globalization is the combination of internationalization and localization. You can adapt the
component to various languages by parsing and formatting the date or number
(Internationalization), and also add culture specific customization and translation to the text
(localization).
By default, Calendar date format, week and month names are specific to American English
culture. It utilizes the Essential JavaScript 2 Internationalization package to parse and
format the date object based on the culture by uses the official UNICODE CLDR JSON data.
Set the culture by using the locale property.
To go with the different culture other than English , follow the below steps.
Install the CLDR-Data package by using the below command (it installs the CLDR JSON
data). To know more about CLDR-Data refer the CLDR-Data link.
npm install cldr-data --save
Once the package installed, you can find the culture specific JSON data under the location
\node_modules\cldr-data .
Now use the loadCldr method to load the culture specific CLDR JSON data.
In ASP.NET MVC refer the culture files directly from \node_modules\cldr-data location. But in
ASP.NET Core, the static file contents are should present under wwwroot folder. For this,
manually copy the CLDR-Data from the node_modules folder and place inside the wwwroot
folder and refer from the \wwwroot\cldr-data location as like the below code examples
Example for ASP.NET Core
function loadCultureFiles(name) {
var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json'];
var loader = ej.base.loadCldr;
var loadCulture = function (prop) {
var val, ajax;
ajax = new ej.base.Ajax(location.origin + location.pathname + '/../wwwroot/
cldr-data/main/' + name + '/' + files[prop], 'GET', false);
ajax.onSuccess = function (value) {
val = value;
};
ajax.send();
loader(JSON.parse(val));
};
160
for (var prop = 0; prop < files.length; prop++) {
loadCulture(prop);
}
}
Example for ASP.NET MVC
function loadCultureFiles(de) {
var val, ajax;
ajax = new ej.base.Ajax(location.origin + location.pathname + '/../node_mod
ules/cldr-data/main/' + name + '/' + files[prop], 'GET', false);
val = value;
};
ajax.send();
};
loadCulture(prop);
}
}
Before changing to a culture other than English , ensure that locale text for the concerned
culture is loaded through load method of L10n class.
var L10n = ej.base.L10n;

L10n.load({
"de": {
"calendar": {
"today": "heute"
}
}
});
The following example demonstrates the Calendar in German culture.
view
international.cs
<script>
161
document.addEventListener('DOMContentLoaded', function () {
calendarObject = document.getElementById('calendar').ej2_instances[0];
L10n.load({
"de": {
"calendar": {
"today": "heute"
}
}
});
loadCultureFiles('de');
calendarObject.locale = 'de';
});
if (name === 'ar') {
files.push('numberingSystems.json');
}
var val, ajax;
if (name === 'ar' && prop === files.length - 1) {
ajax = new ej.base.Ajax(location.origin + location.pathname + '/../wwwr
oot/scripts/cldr-data/supplemental/' + files[prop], 'GET', false);
} else {
oot/scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false);
}
val = value;
};
ajax.send();
};
loadCulture(prop);
}
}
</script>
using System;
using System.Linq;
162
{
{
public IActionResult sample()
{
return View();
}
}
}
Right-To-Left
The Calendar supports right-to-left functionality for languages like Arabic, Hebrew, etc. To display
the text in the right-to-left direction, use enableRtl property.
The following example demonstrates the Calendar in Arabic culture with Right-To-Left
direction.
view
rtl.cs
<ejs-calendar id="calendar" enablertl=true></ejs-calendar>
<script>
L10n.load({
"en": {
"calendar": {
"today": "Today"
}
}
});
loadCultureFiles('ar');
calendarObject.locale = 'ar';
});
163
}
var val, ajax;
ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../s
cripts/cldr-data/supplemental/' + files[prop], 'GET', false);
} else {
ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../s
cripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false);
}
val = value;
};
ajax.send();
};
loadCulture(prop);
}
}
</script>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
164
Customization
Each day cell of the Calendar can be customized by using the renderDayCell event.
The following section demonstrates how to disable or highlight specific dates in a Calendar.
Disable weekends
You can disable weekends of every month in a Calendar by using the renderDayCell event. The
renderDayCell event offers the following arguments on each day cell creation to help you
disable the dates.
View Description
date Defines the current date of the Calendar.

isDisabled Specifies whether the current date is to be disabled or not.
isOutOfRange Defines whether the current date is out of range or not.
The following example demonstrates how to disable weekends of every month.
view
customization.cs
<ejs-calendar id="calendar" renderDayCell="disableDate" value="@ViewBag.value"></ejs-ca

lendar>
<script>
function disableDate(args) {
if (args.date.getDay() === 0 || args.date.getDay() === 6) {
args.isDisabled = true;
}
}
</script>
using System;
using System.Linq;
165
{
{
{
ViewBag.value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTim
e.Now.Date);
return View();
}
}
}
Day cell format

You can also highlight specific dates by adding custom CSS or element to the day cell by using
the renderDayCell event.
You can customize the appearance of the Calendar by overriding the existing styles. The
following list of CSS class names are used to customize the Calendar component.
e-calendar Applied to the Calendar.
e-header Applied to the header.
e-title Applied to the title.
e-icon-container Applied to the previous and next icon container.
e-prev Applied to the previous icon.
e-next Applied to the next icon.
e-weekend Applied to weekends.
e-other-month Applied to days of other months.
e-day Applied to each day cell.
e-selected Applied to the selected dates.
e-disabled Applied to the disabled dates.
The following example highlights the World Health Day (every 7th April) and World Forest Day
(every 21st March) by using the custom icon and ToolTip.
view
cellformat.cs
166
<ejs-calendar id="calendar" value="@ViewBag.value" renderDayCell="customDates"></ejs-ca
lendar>
<script>
var addClass = ej.base.addClass;
function customDates(args) {
/*Date need to be customized*/
var span;
if (args.date.getDate() === 7 && args.date.getMonth() == 3) {
span = document.createElement('span');
span.setAttribute('class', 'e-icons highlight');
addClass([args.element], ['special']);
args.element.setAttribute('title', 'World health day !');
args.element.setAttribute('data-val', 'World health day !');
args.element.appendChild(span);
}
if (args.date.getDate() === 21 && args.date.getMonth() == 2) {
span = document.createElement('span');
span.setAttribute('class', 'e-icons highlight');
addClass([args.element], ['special']);
args.element.setAttribute('title', 'World forest day !');
args.element.setAttribute('data-val', 'World forest day !');
args.element.appendChild(span);
}
}
</script>
using System;
using System.Linq;
{
{
public IActionResult SpecialDates()
{
ViewBag.value = new DateTime(2017, 3, 10);
return View();
167
}
}
}
168
Calendar Views
The Calendar has the following pre-defined views that provide a flexible way to navigate back
and forth when selecting dates.
View Description
month (default) Displays the days in a month.
year Displays the months in a year.
decade Displays the years in a decade.
When view is defined to the start property of the Calendar, it allows you to set the initial view
on rendering.
The following example demonstrates how to set the year as the start view of the Calendar.
view
views.cs
<ejs-calendar id="calendar" value="@ViewBag.value" start=Year></ejs-calendar>
using System;
using System.Linq;
{
{
{
ViewBag.value = new DateTime(DateTime.Now.Year, DateTime.Now.Month,DateTime
.Now.Date );
return View();
}
}
}
169
View restriction
By defining the start and depth property with the different view, drilldown and drill-up views
navigation can be limited to the user. Calendar views will be drill-down up to the view which is set
in depth property and drill-up up to the view which is set in start property.
The following example displays the Calendar in decade view, and allows you to select a date in
month view.
Depth view should always be smaller than the start view. If the depth and start views
are the same, then the Calendar view remains unchanged.
view
restriction.cs
<ejs-calendar id="calendar" value="@ViewBag.value" start=Decade depth=Year></ejs-calend

ar>
using System;
using System.Linq;
{
{
{
ViewBag.value = new DateTime(DateTime.Now.Year, DateTime.Now.Month,DateTime
.Now.Date );
return View();
}
}
}
170
Accessibility
The web accessibility makes web content and web applications more accessible for disabled
people. It especially helps in dynamic content change and development of advanced user
interface controls with AJAX, HTML, JavaScript, and related technologies.
Calendar provides built-in compliance with WAI-ARIA specifications. WAI-ARIA support is

achieved through attributes like aria-label , aria-selected , aria-disabled , and aria-
activedescendant applied for navigation buttons, and disable and active day cells.
It helps disabled persons by providing information about the widget for assistive technology in the
screen readers. Calendar component contains grid role and grid cell for each day cell.
Aria-label: This attribute provides text labels for an object for the previous and next month's
elements. It helps the screen reader object to read.
Aria-selected: Indicates the currently selected date of the Calendar component.
Aria-disabled: Indicates the disabled state of the Calendar component.
Aria-activedescendent: Helps in managing the current active child of the Calendar

component.
Role: Gives information to assistive technologies about how to handle each element in a
widget.
Grid-cell: Defines the individual cell that can be focussed and selected.
You can use the following keys to interact with the Calendar. This component implements
keyboard navigation support by following the WAI-ARIA practices.
It supports the following list of shortcut keys:
Press To do this
Upper Arrow Focuses the same day of the previous week.
Down Arrow Focuses the same day of the next week.

Left Arrow Focuses the day before.
Right Arrow Focuses the next day.
Home Focuses the first day of the month.

End Focuses the last day of the month.
Page Up Focuses the same date of the previous month.
171
Page Down Focuses the same date of the next month.
Enter Selects the currently focused date.

Shift + Page Up Focuses the same date for the previous year.
Shift + Page Down Focuses the same date for the next year.
Control + Upper Moves to the inner level of view like month to year and year to
Arrow decade.
Control + Down Moves out from the depth level view like decade to year and
Arrow year to month.
Control +Home Focuses the first date of the current year.

Control +End Focuses the last date of the current year.
To focus the Calendar component, use alt+t keys.
view
accessibility.cs
<script>
document.addEventListener('keyup', function (e) {
if (e.altKey && e.keyCode === 84) {
// press alt+t to focus the control.
var calendarObj = document.getElementById("calendar").ej2_instances[0];
calendarObj.element.querySelectorAll('.e-content table')[0].focus();
}
})
</script>
using System;
using System.Linq;
{
{
{
172
return View();
}
}
}
173
How To
The following section explains how to customize various aspects of Calendar.
Set today and clear buttons

To configure today and clear buttons in Calendar UI, do the following:
1. To the created event of the Calendar, add the required elements to make clear and today
buttons visible. In the following example, div with two Essential JS 2 button components are
used.
2. When the e-footer class is used, the div tag acts as the footer.
3. Using these two buttons, today's date can be selected and cleared.
4. Bind the required event handler to the button tags to update the value.
Code example is as follows:
view
settoday.cs
<ejs-calendar id="calendar" created="onCreate"></ejs-calendar>
<script>
document.querySelector('.e-footer-container .e-clear').addEventListener('click', fu
nction () {
calendarObject.value = new Date();
calendarObject.dataBind();
});
});
function onCreate() {
//creates the custom element for clear button.
var clearBtn = document.createElement('button');
var footerElement = document.getElementsByClassName('e-footer-container')[0];
clearBtn.className = 'e-btn e-clear e-flat';
clearBtn.textContent = 'Clear';
footerElement.prepend(clearBtn);
this.element.appendChild(footerElement);
}
</script>
174
<style>
.e-clear { /* csslint allow: adjoining-classes*/
margin-right: 81px;
}
</style>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
Show dates of other months

The following example demonstrates how to show dates of other months.
Using the styles below, you can bring the dates of other months to visibility from its hidden state.
.e-calendar .e-content tr.e-month-hide,

.e-calendar .e-content td.e-other-month>span.e-day {
display: block;
}
.e-calendar .e-content td.e-month-hide,

.e-calendar .e-content td.e-other-month {
pointer-events: auto;
touch-action: auto;
}
175
view
showdates.cs
<style>
.e-calendar .e-content tr.e-month-hide, /* csslint allow: adjoining-classes*/

.e-calendar .e-content td.e-other-month > .e-day { /* csslint allow: adjoining-classes*/
display: block;
}
.e-calendar .e-content td.e-month-hide, /* csslint allow: adjoining-classes*/

.e-calendar .e-content td.e-other-month { /* csslint allow: adjoining-classes*/
pointer-events: auto;
touch-action: auto;
}
</style>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
Skip a month in the Calendar
176
The following example demonstrates how to skip a month in the Calendar while clicking the
previous and next icons. In the example below, the navigated event is used to skip a month
with navigateTo method.
view
skipmonth.cs
<ejs-calendar id="calendar" navigated="onNavigate"></ejs-calendar>
<script>
function onNavigate(args) {
var date;
if ((args.event.currentTarget).classList.contains('e-next')) {
//Increments the month while clicking the next icon.
date = new Date(args.date.setMonth(args.date.getMonth() + 1));
}
if ((args.event.currentTarget).classList.contains('e-prev')) {
//Decrements the month while clicking the previous icon.
date = new Date(args.date.setMonth(args.date.getMonth() - 1));
}
if (args.view == 'month') {
calendarObject.navigateTo('month', date);
}
}
</script>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
177
Render the Calendar with week numbers
You can enable weekNumbers in the Calendar by using the weekNumber property.
view
weeknumber.cs
<ejs-calendar id="calendar" weeknumber="true"></ejs-calendar>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
Change the first day of the week

The Calendar provides an option to change the first day of the week by using the
firstDayOfWeek property. Generally, the day of the week starts from 0 (Sunday) and ends with 6
(Saturday).
By default, the first day of the week is culture specific.
The following example shows the Calendar with Tuesday as the first day of the week.
view
firstday.cs
178
<ejs-calendar id="calendar" firstdayofweek=2></ejs-calendar>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
179
Overview
The Card is a small container in which user can show defined content in specific structure. It is a
pure CSS component built with markup and styles.
Key features
1. Header: Header supports to include title, subtitle along with image.
2. Images and Title: Support to include images with customizable caption positions in it.
3. Action Buttons: Supports to add buttons within the card either in vertical or horizontal
alignment.
4. Horizontal Card: Allows to align card elements horizontally and also allows to stack the
content vertically within horizontal alignment.
180
Getting Started
This section briefly explains about how to include a simple Card in your ASP.NET Core
Adding a simple Card

Add the HTML div element with e-card class into your sample file.
<div class = "e-card">

Sample Card
</div>
Adding a header and content

You can create Card with a header in a specific structure. For adding header you need to create
a div element with e-card-header class added.
You can include heading inside the Card header by adding a div element with e-card-
header-caption class, and also content will be added by adding element with e-card-
content . For detailed information, refer to the Header and Content.
<div class = "e-card"> --> Root Element

<div class="e-card-header"> --> Root Header Element
<div class="e-card-header-caption"> --> Root Heading Element
<div class="e-card-header-title"></div> --> Heading Title Element
</div>
<div class="e-card-content"></div> --> Card content Element
</div>
</div>
view
controller.cs
<div tabindex="0" class="e-card">

<div class="e-card-header">
<div class="e-card-header-image football"></div>
<div class="e-card-header-caption">
<div class="e-card-header-title"> Camp Randall Stadium</div>
<div class="e-card-sub-title">1440 Monroe St, Madison, WI 53711, USA
</div>
181
</div>
</div>
</div>
using System;
using System.Linq;
namespace WebApplication.Controllers
{
public partial class CardController : Controller
{
public IActionResult htmldom()
{
return View();
}
}
}
182
Header and Content
Header
The Card can be created with header title, sub title and images. For adding header you need to
create div element with the class e-card-header added.
Card provides below elements and corresponding class definitions to include header.
Elements Description
Caption It is the wrapper element to include title and sub-title.
Image It supports to include header images with the specified dimensions.
Class Description
e-card-header- To group the title and subtitle within the header which acts as
caption wrapper.
e-card-header-title Main title text with in the header.
e-card-sub-title A sub-title within the header.
e-card-header-image To include heading image within the header.

e-card-corner To add rounded corner for the image.
Title and Subtitle

For adding header to the Card , you need to create wrapper div element with e-card-header-
caption class.
Place the div element with e-card-header-title class inside the header caption for
adding main title.
Place the div element with e-card-sub-title class inside the header caption element for
adding sub-title.
Image
Card header has an option for adding images in the header. It is aligned with either before or
after the header based on the HTML element positioned in the header structure.
The header image can be added by creating a div element with e-card-header-image
class which can be placed before or after the header caption wrapper element.
view
183
controller.cs
@section ControlsSection {
<div tabindex="0" class="e-card" id="basic">

<div class="e-card-header-title">Advanced UWP</div>
</div>
</div>
Advanced UWP: Communicating with Windows 10 and Other Apps, the second
in a five-part series written by Succinctly series
author Matteo Pagani. To download the complete white paper, and other p
apers in the series, visit
the White Paper section of Syncfusion’s Technology Resource Portal.
</div>
</div>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
Content
Content in Card holds texts, images, links and all possible HTML elements. Its adaptable within
the Card root element.
Create a div element with the class e-card-content .

Place content div element in the Card root element or within any Card inner elements.
184
view
controller.cs
<div tabindex="0" class="e-card">

<div class="e-card-header-image football"></div>
<div class="e-card-header-title"> Camp Randall Stadium</div>
<div class="e-card-sub-title">1440 Monroe St, Madison, WI 53711, USA
</div>
</div>
</div>
Camp Randall Stadium is an outdoor stadium in Madison, Wisconsin, locat
ed on the University of Wisconsin–Madison campus. It has been the home of Wisconsin Bad
gers football since 1895, with a fully functioning stadium since 1917.
</div>
</div>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
185
Images and Divider
Images
The Card supports to include images within the elements, you can add image as direct element
anywhere inside card root by adding the e-card-image class to div element. Using the class
defined, you can write CSS styles to load images to that element.
By default, card images occupies full width of its parent element.

<div class="e-card-image">
</div>
</div>
Title
Card image is supported to include a title or caption for the image. By default, Title is placed over
the image on left-bottom position with overlay.

<div class="e-card-title"></div>
</div>
</div>
view
controller.cs
<div class="e-card">
<div class="e-card-title">JavaScript </div>
</div>
<div class="e-card-content"> JavaScript Succinctly was written to give read
ers an accurate, concise examination of JavaScript objects and their supporting nuances
, such as complex values, primitive values, scope, inheritance, the head object, and mo
re. </div>
</div>
186
using System;
using System.Linq;
{
{
{
return View();
}
}
}
Divider
Divider used to separate the elements inside the card. You can add divider inside the card
elements to separate it.
Place the div element with e-card-separator class inside the card element for adding a
divider.
view
controller.cs

<div class="e-card-title">Explore Cities</div>
<div class="e-card-separator"></div>
Sydney is a city on the east coast of Australia. Sydney is the capital
city of New South Wales. About four million people
live in Sydney which makes it the biggest city in Oceania.
</div>
New York City has been described as the cultural, financial, and media
capital of the world, and exerts a significant impact
upon commerce and etc.,
</div>
187
Malaysia is one of the Southeast Asian countries, on a peninsula of the
Asian continent, to a certain extent; it can be recognized
as part of the Asian continent.
</div>
</div>
}
using System;
using System.Linq;
{
{
{
return View();
}
}
}
188
Action Buttons
You can include Action buttons within the Card and customize them. Action button is a div
element with e-card-actions class followed by button tag or anchor tag within the card root
element.
For adding action buttons you can create button or anchor tag with e-card-btn class within
the card action element.

<div class="e-card-actions">
<button class="e-card-btn"></button>
<a href="#"></a>
</div>
</div>
Vertical
By default, action buttons positioned in horizontal alignment , and also it can be aligned to show
in vertical alignment by adding e-card-vertical class.

<div class="e-card-actions e-card-vertical">
<button class="e-card-btn">More</button>
<a href="#">Share</a>
</div>
</div>
view
controller.cs
<div class="e-card" style="max-width:400px">

<div class="e-card-header-title">Eiffel Tower</div>
The Eiffel Tower is acknowledged as the universal symbol of Paris and France. It
was originally designed by Émile Nouguier
and Maurice Koechlin.
</div>
<div class="e-card-actions e-card-vertical">
<button class="e-card-btn">LIKE</button>
<button class="e-card-btn">SHARE</button>
189
</div>
</div>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
190
Horizontal Card
By default, all the card elements are aligned vertically one after the other as in the DOM. You can
achieve the element to align horizontally as well by adding the class e-card-horizontal in the
root card element.
Stacked cards
An horizontally aligned card can push a specific column to align vertical using e-card-
stacked class. This will align the stacked section vertically aligned differentiating from
horizontal layout.
Class Description
e-card-horizontal To align card elements horizontally.
e-card-stacked To align elements vertically within the horizontal layout.
<div tabindex="0" class="e-card e-card-horizontal">

<img src="code1.png" alt="Sample"> --> Aligned in horizontal
<div class="e-card-stacked"> --> Aligned in horizontal
// Inside the element all are aligned vertical directions
</div>
</div>
view
controller.cs
<div tabindex="0" class="e-card e-card-horizontal" style="width:400px">

<img src="Code.png" alt="Sample" style="height: 180px">
<div class="e-card-stacked">
<div class="e-card-header-title">Philips Trimmer</div>
</div>
</div>
Powered by the innovative DuraPower Technology which optimizes powe
r consumption, Philips trimmers are designed to last longer
than 4 ordinary trimmers.
</div>
</div>
</div>
191
}
using System;
using System.Linq;
{
{
{
return View();
}
}
}
192
How To
Customize the card image title position

Card Image titles are placed as always Bottom-Left Corner only, You can manually customize to
placing titles anywhere over the image by adding styles.
view
controller.cs
<script>
function changed(e) {
let cardEle = document.querySelector('.e-card');
let titleEle = cardEle.querySelector('.e-card-image .e-card-title');
titleEle.className = ''
titleEle.classList.add('e-card-title');
titleEle.classList.add(e.value.toLowerCase());
}
</script>
<div class="e-card">
<div class="e-card-title">Node.js</div>
</div>
Node.js is a wildly popular platform for writing web applications t
hat has revolutionized web development in many ways, enjoying
support across the open source community as well as industry.
</div>
</div>
<div id="default" style='padding-top:75px;'>
<ejs-dropdownlist id="games" dataSource="@ViewBag.dataSource" placeholder="Sele
ct Position" change= "changed"></ejs-dropdownlist>
</div>
using System;
193
using System.Linq;
{
public class DropDownListController : Controller
{
public IActionResult simpledata()
{
ViewBag.dataSource = new string[] { "BottomLeft", "TopLeft", "TopRight", "B
ottomRight"};
return View();
}
}
}
Integrate other component inside the card

You can integrate any component inside the card element. Here ListView component is placed
inside the card for showcasing the To-Do list.
view
controller.cs

<div class="e-card-title">To-Do List</div>
<ejs-listview id="listview" dataSource="ViewBag.dataSource" showCheckBox
="true">
<e-listview-fieldsettings Text="todoList"></e-listview-fieldset
tings>
</ejs-listview>
</div>
</div>
using System;
194
using System.Linq;
{
public class ListViewController : Controller
{
public IActionResult arraydata()
{
List<object> listdata = new List<object>();
listdata.Add(new { todoList = "Pay Bills" });
listdata.Add(new { todoList = "Call Chris" });
listdata.Add(new { todoList = "Meet Andrew" });
listdata.Add(new { todoList = "Visit Manager" });
listdata.Add(new { todoList = "Customer Meeting" });
ViewBag.dataSource = listdata;
return View();
}
}
}
195
Overview
The Chart control is used to visualize the data with user interactivity and provides customizing
options to configure the data visually. It can bind data from datasource such as array of JSON
objects , OData web services or DataManager . All chart elements are rendered using Scalable
Vector Graphics (SVG).
Key Features
Supports 16 interactive chart types starting from line series to stacking series.
Support to bind local and remote datasource.
Supports multiple axes, and able to plot data with different data types such as numbers,
datetime, logarithmic and string.
Supports interactive features like zooming, crosshair, trackball, tooltip and selection.
196
Getting Started
ASP.NET Core 1.0 Application Using Visual Studio 2017
System Requirements
To work with ASP.NET Core 1.0, you need to make sure is whether you have installed the
following software on your machine
Visual Studio 2017
DotNetCore 2.0
Configure Syncfusion UI Components in ASP.NET Core

Application
The following steps helps to create a ASP.NET Core web application to configure our
components.
Open Visual Studio 2017 to create ASP.NET Core web application.
After project creation, install the Syncfusion Packages in your application.
Select the Tools->Nuget Package Manager->Package Manager settings the dialog window
will open.
Navigate to the Nuget Package Manager->Package Sources from the options dialog.
Click the Add button to create the new package sources.
Select the newly created Package Source and rename the source name using the Name
input box.
Name: Name of the package that listed in Available package sources
Source: Syncfusion ASP.NET Core NuGet Package feed URL
https://api.nuget.org/v3/index.json
Adding TagHelpers
Now open _viewImports.cshtml file from the views folder and add the following namespace
for components references and Tag Helper support.
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
197
Adding ScriptManager
Add ScriptManager to the bottom of the layout.cshtml page. The ScriptManager used to
place our control initialization script in the page.
<ej-scripts> </ej-scripts>
Adding component to the Application

Now open your view page to render our Syncfusion components.
<ejs-chart id="container"></ejs-chart>
Enable Legend
You can use legend for the chart by setting the visible property to true in legendSettings
object.
view
legend.cs
<ejs-chart id="container" load="window.onChartLoad" title="Inflation - Consumer Price"

width="60%">
<e-chart-tooltipsettings enable="true">
</e-chart-tooltipsettings>
<e-primaryxaxis valueType="DateTime"
labelFormat="y"
intervalType="Years"
edgeLabelPlacement="Shift"
majorGridLines="majorGridLines"></e-primaryxaxis>
<e-primaryyaxis labelFormat="{value}%"
rangePadding="None"
minimum=0
maximum=100
interval=20
lineStyle="lineStyle"
majorTickLines="majorTickLines"
minorTickLines="minorTickLines"></e-primaryyaxis>
<e-chart-chartarea border="border"></e-chart-chartarea>
198
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" marker="marker" name="Ger
many" xName="xValue" width="2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.
ChartSeriesType.Line"></e-series>
</e-series-collection>
</ejs-chart>
using System;
using System.Linq;
using Syncfusion.EJ2.Charts;
{
public partial class ChartController : Controller
{
public IActionResult Line()

{
List chartData = new List
{
new LineChartData { xValue = new DateTime(2005, 01, 01), yValue = 21, y
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
ViewBag.dataSource = chartData;
return View();
}
public class LineChartData

{
public DateTime xValue;
public double yValue;
public double yValue1;
199
}
}
}
Add Data Label

You can add data labels to improve the readability of the chart. This can be achieved by setting
the visible property to true in the dataLabel object. Now, the data labels are arranged smartly
based on series.
view
datalabel.cs

width="60%">
labelFormat="y"
rangePadding="None"
minimum=0
maximum=100
interval=20
</ejs-chart>
using System;
using System.Linq;
200
{
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
}
}
}
Enable Tooltip
The tooltip is useful when you cannot display information by using the data labels due to space
constraints. You can enable tooltip by setting the enable property as true in tooltip object.
view
tooltip.cs

width="60%">
201
labelFormat="y"
rangePadding="None"
minimum=0
maximum=100
interval=20
</ejs-chart>
using System;
using System.Linq;
{
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
202
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
}
}
}
203
Working with Data
Chart can visualise data bound from local or remote data.
Local Data
You can bind a simple JSON data to the chart using dataSource property in series. Now map
the fields in JSON to xName and yName properties.
view
local-data.cs
<ejs-chart id="lineContainer" load="window.onChartLoad" title="Stock Price Analysis">

<e-chart-primaryxaxis title="Years"
skeleton="y"
majorGridLines="line"
valueType="DateTime"
edgeLabelPlacement="Shift"></e-chart-primaryxaxis>
<e-chart-primaryyaxis title="Price"
labelFormat="${value}"
rangePadding="None"
lineStyle="line"
majorTickLines="line"
minorTickLines="line"></e-chart-primaryyaxis>
<e-series name="Product X" xName="x" animation="animation" marker="
marker" width=2 yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"></e-series>
</ejs-chart>
<script>
var series1 = [];
var point1;
var value = 80;
var i;
for (i = 1; i < 500; i++) {
if (Math.random() > .5) {
value += Math.random();
}
else {
value -= Math.random();
}
point1 = { x: new Date(1960, (i + 1), i), y: Math.round(value) };
series1.push(point1);
204
}
args.chart.series[0].dataSource = series1;
}
</script>
using System;
using System.Linq;
namespace EJ2CoreSampleBrowser.Controllers.Chart
{
{
public IActionResult LocalData()
{
return View();
}
}
}
Remote Data
You can also bind remote data to the chart using DataManager . The DataManager requires
minimal information like webservice URL, adaptor and crossDomain to interact with service
endpoint properly. Assign the instance of DataManager to the dataSource property in series and
map the fields of data to xName and yName properties. You can also use the query property of
the series to filter the data.
view
remote-data.cs
<ejs-chart id="lineContainer" title="Sprint Task Analysis">

<e-chart-primaryxaxis title="Assignee" rangePadding="Additional" valueType=
"Category" majorGridLines="line"></e-chart-primaryxaxis>
<e-chart-primaryyaxis majorGridLines="line" majorTickLines="line" labelStyle
="labelStyle" lineStyle="line"></e-chart-primaryyaxis>
<e-chart-legendsettings visible="false"></e-chart-legendsettings>
<e-chart-tooltipsettings enable="true"></e-chart-tooltipsettings>
<e-series name="Story Point" xName="Assignee" animation="animation" mar
205
ker="marker" width=2
yName="Estimate" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"
query="new ej.data.Query().take(5).where('Estimate', 'lessThan', 3, fal
se)"></e-series>
</ejs-chart>
<script src="~/scripts/chart/financial-data.js"></script>
<script>
window.onChartLoad = function (args) {
var dataManager = new ej.data.DataManager({
url: 'https://mvc.syncfusion.com/Services/Northwnd.svc/Tasks/'
});
args.chart.series[0].dataSource = dataManager;
}
using System;
using System.Linq;
using System.Web;
namespace EJ2MVCSampleBrowser.Controllers.Chart
{
{
// GET: RemoteData
public ActionResult RemoteData()
{
ViewBag.labelStyle = new
{
color = "transparent"
};
ViewBag.majorGridLines = new { width = 0.00001 };
ViewBag.lineStyle = new { width = 0.00001 };
ViewBag.majorTickLines = new { width = 0.00001 };
ViewBag.animation = new { enable = false };
ViewBag.chartBorder = new ChartBorder { Color = "transparent" };
ViewBag.marker = new
{
dataLabel = new
{
visible = true,
position = "Top",
font = new { fontWeight = "600", color = "#ffffff" }
}
};
206
return View();
}
}
}
Empty points
The Data points that uses the null or undefined as value are considered as empty points.
Empty data points are ignored and not plotted in the Chart. When the data is provided by using
the points property, By using emptyPointSettings property in series, you can customize the
empty point. Default mode of the empty point is Gap .
view
empty-points.cs
<ejs-chart id="emtpyContainer" load="window.onChartLoad" title="Annual Product-Wise Pro

fit Analysis">
<e-chart-primaryxaxis title="Product" valueType="Category" interval=1></
e-chart-primaryxaxis>
<e-chart-legendsettings visible="false">
</e-chart-legendsettings>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" name=
"Profit" marker="marker"
emptyPointSettings=(ViewBag.emptyPointSettings) width=2 type="@Sync
fusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
// GET: EmptyPointChart
public ActionResult EmptyPointChart()
207
{
List<EmptyPointChartData> chartData = new List<EmptyPointChartData>
{
new EmptyPointChartData { xValue = "Rice", yValue = 80 },

new EmptyPointChartData { xValue = "Wheat", yValue = null },
new EmptyPointChartData { xValue = "Oil", yValue = 70 },
new EmptyPointChartData { xValue = "Corn", yValue = 60 },
new EmptyPointChartData { xValue = "Gram", yValue = null },
new EmptyPointChartData { xValue = "Milk", yValue = 70 },
new EmptyPointChartData { xValue = "Peas", yValue = 80 },
new EmptyPointChartData { xValue = "Fruit", yValue = 60 },
new EmptyPointChartData { xValue = "Butter",yValue = null },
};
ViewBag.marker = new { visible = true, width = 10, height = 10 };
ViewBag.emptyPointSettings = new
{
mode="Average"
};
return View();
}
public class EmptyPointChartData
{
public string xValue;
public Nullable<double> yValue;
}
}
}
Customizing empty point
Specific color for empty point can be set by fill property in emptyPointSettings . Border for a
empty point can be set by border property.
view
custom-emptypoint.cs
<ejs-chart id="emtpyContainer" load="window.onChartLoad" title="Annual Product-Wise Pro

fit Analysis">
<e-chart-primaryxaxis title="Product" valueType="Category" interval=1></
e-chart-primaryxaxis>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" name=
208
"Profit" marker="marker"
emptyPointSettings=(ViewBag.emptyPointSettings) width=2 type="@Sync
fusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
// GET: EmptyPointChart
public ActionResult EmptyPointChart()
{
List<EmptyPointChartData> chartData = new List<EmptyPointChartData>
{
new EmptyPointChartData { xValue = "Rice", yValue = 80 },

new EmptyPointChartData { xValue = "Wheat", yValue = null },
new EmptyPointChartData { xValue = "Oil", yValue = 70 },
new EmptyPointChartData { xValue = "Corn", yValue = 60 },
new EmptyPointChartData { xValue = "Gram", yValue = null },
new EmptyPointChartData { xValue = "Milk", yValue = 70 },
new EmptyPointChartData { xValue = "Peas", yValue = 80 },
new EmptyPointChartData { xValue = "Fruit", yValue = 60 },
new EmptyPointChartData { xValue = "Butter",yValue = null },
};
ViewBag.marker = new { visible = true, width = 10, height = 10 };
ViewBag.emptyPointSettings = new
{
mode="Average",
fill="green",
border= new { color: "black", width: 2}
};
return View();
}
public class EmptyPointChartData
{
209
public Nullable<double> yValue;
}
}
}
210
Chart Dimensions
Size for Container

Chart can render to its container size. You can set the size via inline or CSS as demonstrated
below.
view
size.cs
<ejs-chart id="lineContainer" title="Olympic Medal Counts - RIO">
<e-chart-primaryxaxis style="width='450px'" valueType="Category" minimum
=2 maximum=5 interval=2></e-chart-primaryxaxis>
<e-series dataSource="ViewBag.dataSource" xName='x' yName='yValue'
name='Gold' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Co
lumn"></e-series>
<e-chart-annotations>
<e-chart-annotation Content="ViewBag.content" X="USA" Y="50" Coordi
nateUnits='@Syncfusion.EJ2.Charts.Units.Point' VerticalAlignment='@Syncfusion.EJ2.Chart
s.Position.Top'></e-chart-annotation>
<e-chart-annotation X="GBR" Y="50" Content="ViewBag.content1" Coord
inateUnits='@Syncfusion.EJ2.Charts.Units.Point' VerticalAlignment='@Syncfusion.EJ2.Char
ts.Position.Top'></e-chart-annotation>
</e-chart-annotations>
</ejs-chart>
}
using System;
using System.Linq;
{
{
public IActionResult Column()
{
List<ColumnChartData> chartData = new List<ColumnChartData>
211
{
new ColumnChartData { x= "USA", yValue= 46 },
new ColumnChartData { x= "GBR", yValue= 27 },
new ColumnChartData { x= "CHN", yValue= 26 },
new ColumnChartData { x= "UK", yValue= 26 },
new ColumnChartData { x= "AUS", yValue= 26 },
new ColumnChartData { x= "IND", yValue= 26 },
new ColumnChartData { x= "DEN", yValue= 26 },
new ColumnChartData { x= "MEX", yValue= 26 },
};
return View();
}
public class ColumnChartData
{
public string x;
}
}
}
Size for Chart

You can also set size for chart directly through width and height properties.
In Pixel
You can set the size of chart in pixel as demonstrated below.
view
pixel.cs
<ejs-chart id="lineContainer" title="Olympic Medal Counts - RIO" size="450">
<e-chart-primaryxaxis valueType="Category" minimum=2 maximum=5 interval=
2></e-chart-primaryxaxis>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue"
lumn"></e-series>
212
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
return View();
}
{
public string x;
}
}
}
In Percentage
By setting value in percentage, chart gets its dimension with respect to its container. For
example, when the height is ‘50%’, chart renders to half of the container height.
view
percentage.cs
213
<ejs-chart id="lineContainer" title="Olympic Medal Counts - RIO" size="75%">
lumn"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
return View();
214
}
{
public string x;
}
}
}
Note: When you do not specify the size, it takes 450px as the height and window size as
its width.
215
Category Axis
Category axis are used to represent, the string values instead of numbers.
view
column.cs
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
lumn"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
216
};
return View();
}
{
public string x;
}
}
}
Labels Placement
By default, category labels are placed between the ticks in an axis, this can also be placed on
ticks using labelPlacement property.
view
placement.cs
<e-chart-primaryxaxis valueType="Category" labelPlacement="OnTicks"></e
-chart-primaryxaxis>
lumn"></e-series>
</ejs-chart>
}
using System;
217
using System.Linq;
{
{
{
{
};
return View();
}
{
public string x;
}
}
}
Range
Range of the category axis can be customized using minimum , maximum and interval
property of the axis.
view
range.cs
218
lumn"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
return View();
}
{
public string x;
}
}
219
}
Indexed category axis

Category axis also can be rendered based on the index values of data source. This can be
achieved by defining the isIndexed property to true in the axis.
view
index.cs
<e-chart-primaryxaxis valueType="Category" isIndexed="true"></e-chart-p
rimaryxaxis>
lumn"></e-series>
<e-series dataSource="ViewBag.dataSource1" xName='x' yName='yValue'
name='Gold' type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></
e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
220
{
{
};
List<ColumnChartData> chartData1 = new List<ColumnChartData>
{
new ColumnChartData { x= "USA1", yValue= 46 },
new ColumnChartData { x= "GBR1", yValue= 27 },
new ColumnChartData { x= "CHN1", yValue= 26 },
new ColumnChartData { x= "UK1", yValue= 26 },
new ColumnChartData { x= "AUS1", yValue= 26 },
new ColumnChartData { x= "IND1", yValue= 26 },
new ColumnChartData { x= "DEN1", yValue= 26 },
new ColumnChartData { x= "MEX1", yValue= 26 },
};
return View();
}
{
public string x;
}
}
}
221
Numeric Axis
You can use numeric axis to represent numeric values of data in chart. By default, the
valueType of an axis is Double .
view
double.cs
@ControlSection{
<ejs-chart id="container" title="Inflation - Consumer Price" width="60%">
<e-primaryxaxis rangePadding="Additional"></e-primaryxaxis>
<e-primaryyaxis labelFormat="{value}%" rangePadding="None" minimum=0 maximum=100 in
terval=20></e-primaryyaxis>
<e-series dataSource="ViewBag.dataSource" marker="marker" name="Germany" xN
ame="xValue" width="2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSer
iesType.Line"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
new ChartData { xValue = 10, yValue = 21, yValue1 = 28 },
222
};
return View();
}
public class ChartData

{
public double xValue;
}
}
}
Range
Range for an axis, will be calculated automatically based on the provided data, you can also
customize the range of the axis using minimum , maximum and interval property of the axis.
view
range.cs
@ControlSection{
</ejs-chart>
}
using System;
using System.Linq;
{
223
{

{
{
};
return View();
}

{
}
}
}
Range Padding
Padding can be applied to the minimum and maximum extremes of the axis range by using the
rangePadding property. Numeric axis supports following types of padding.
None
Round
Additional
Normal
Auto
Numeric - None
When the rangePadding is set to None , minimum and maximum of an axis is based on the
data.
view
none.cs
@ControlSection{
224
<e-primaryxaxis rangePadding="None"></e-primaryxaxis>
</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
};
return View();
}

{
}
225
}
}
Numeric - Round
When the rangePadding is set to Round , minimum and maximum will be rounded to the nearest
possible value divisible by interval. For example, when the minimum is 3.5 and the interval is 1,
then the minimum will be rounded to 3.
view
round.cs
@ControlSection{
<e-primaryxaxis rangePadding="Round"></e-primaryxaxis>
</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
226
};
return View();
}

{
}
}
}
Numeric - Additional
When the rangePadding is set to Additional , interval of an axis will be padded to the minimum
and maximum of the axis.
view
additional.cs
@ControlSection{
</ejs-chart>
}
using System;
using System.Linq;
{
227
{

{
{
};
return View();
}

{
}
}
}
Numeric - Normal
When the rangePadding is set to Normal , padding is applied to the axis based on default range
calculation.
view
normal.cs
@ControlSection{
<e-primaryxaxis rangePadding="Normal" minimum=10 maximum=80 interval=5></e-primaryx

axis>
228
</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
};
return View();
}

{
}
}
}
Numeric - Auto
When the rangePadding is set to Auto ,horizontal numeric axis takes None as padding
calculation, while the vertical numeric axis takes Normal as padding calculation.
view
auto.cs
229
@ControlSection{
<e-primaryxaxis rangePadding="Auto"></e-primaryxaxis>
<e-primaryyaxis labelFormat="{value}%" rangePadding="Auto" minimum=0 maximum=100 in
</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
};
return View();
}

{
230
}
}
}
Label Format
Numeric Label Format
Numeric labels can be formatted by using the labelFormat property. Numeric labels supports all
globalize format.
view
label-format.cs
@ControlSection{
<e-primaryxaxis rangePadding="Additional" labelFormat="n1"></e-primaryxaxis>

</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
231
};
return View();
}

{
}
}
}
The following table describes the result of applying some commonly used label formats on
numeric values.
Label Label Format

Result Description
Value property value
1000 n1 1000.0 The Number is rounded to 1 decimal place
The Number is converted to percentage with 1

0.01 p1 1.0%
decimal place

0.01 p2 1.00%
decimal place

0.01 p3 1.000%
decimal place
The Currency symbol is appended to number

1000 c1 $1,000.0
and number is rounded to 1 decimal place

1000 c2 $1,000.00
Custom Label Format

Axis also supports custom label format using placeholder like {value}°C, in which the value
represent the axis label e.g 20°C.
view
232
custom.cs
@ControlSection{
<e-primaryxaxis rangePadding="Additional" labelFormat="{value}K"></e-primaryxaxis>

</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
};
return View();
}

{
233
}
}
}
234
DateTime and DateTimeCategory Axis
DateTime Axis
Date time axis uses date time scale and displays the date time values as axis labels in the
specified format.
view
datetime.cs
@CntrolSection {
<e-primaryxaxis valueType="DateTime" labelFormat="y" ></e-primaryxaxis>

<e-primaryyaxis labelFormat="{value}%" rangePadding="None" minimum=0 maximum=100 i
nterval=20></e-primaryyaxis>
<e-series dataSource="ViewBag.dataSource" marker="marker" name="Germany" xName=
"xValue" width="2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesT
ype.Line"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
Value1 = 28 },
Value1 = 44 },
235
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
}
}
}
DateTimeCategory Axis
Date-time category axis is used to display the date-time values with non-linear intervals. For
example, the business days alone have been depicted in a week here.
view
dateCategory.cs
@CntrolSection {
<e-primaryxaxis valueType="DateTimeCategory" labelFormat="y" ></e-primaryxaxis>

</ejs-chart>
}
236
using System;
using System.Linq;
{
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
}
}
}
Range
237
Range for an axis, will be calculated automatically based on the provided data, you can also
view
range.cs
@CntrolSection {
<e-primaryxaxis valueType="DateTime" labelFormat="y" minimum = "ViewBag.minimum" m

aximum= "ViewBag.maximum"></e-primaryxaxis>
</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
238
Value1 = 78 },
Value1 = 84 },
};
ViewBag.minimum = new DateTime(2015, 1, 1);
ViewBag.maximum = new DateTime(2012, 01, 01)
return View();
}

{
}
}
}
Interval Customization
Date time intervals can be customized by using the interval and intervalType properties of
the axis. For example, when you set interval as 2 and intervalType as years, it considers 2 years
as interval. DateTime axis supports following interval types,
Auto
Years
Months
Days
Hours
Minutes
Seconds
view
interval.cs
@CntrolSection {
<e-primaryxaxis valueType="DateTime" labelFormat="y" interval="Months"></e-primaryx

axis>
239
</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
}
240
}
}
Applying Padding to the Range
Padding can be applied to the minimum and maximum extremes of the range by using the
rangePadding property. Date time axis supports the following types of padding,
None
Round
Additional
DateTime - None
When the rangePadding is set to None , minimum and maximum of the axis is based on the
data.
view
none.cs
@CntrolSection {

</ejs-chart>
}
using System;
using System.Linq;
{
{
241
{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
}
}
}
DateTime - Round
When the rangePadding is set to Round , minimum and maximum will be rounded to the nearest
possible value divisible by interval. For example, when the minimum is 15th Jan, interval is 1 and
the interval type is ‘month’, then the axis minimum will be Jan 1st.
view
round.cs
@CntrolSection {
<e-primaryxaxis valueType="DateTime" labelFormat="y" rangePadding="Round" ></e-prim

aryxaxis>
242
</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
243
}
}
}
DateTime - Additional
When the rangePadding is set to Additional , interval of an axis will be padded to the minimum
and maximum of the axis.
Label Format
You can format and parse the date to all globalize format using labelFormat property in an axis.
view
label-format.cs
@CntrolSection {
<e-primaryxaxis valueType="DateTime" labelFormat="yMd" ></e-primaryxaxis>

</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
244
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
}
}
}
The following table describes the result of applying some common date time formats to the
labelFormat property
Label Format
Label Value Result Description
Property Value
new
The Date is displayed in day
Date(2000, EEEE Monday
format
03, 10)
new
The Date is displayed in
Date(2000, yMd 04/10/2000
month/date/year format
03, 10)
new
The Shorthand month for the
Date(2000, MMM Apr
date is displayed
03, 10)
new
Time of the date value is
Date(2000, hm 12:00 AM
displayed as label
03, 10)
new The Label is displayed in

Date(2000, 12:00:00
hms hours:minutes:seconds format
245
03, 10) hours:minutes:seconds format
Custom Label Format

Axis also supports custom label format using placeholder like {value}°C, in which the value
represent the axis label e.g 20°C.
view
custom.cs
@CntrolSection {

</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
246
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
}
}
}
247
Logarithmic Axis
Logarithmic axis uses logarithmic scale and it is very useful in visualizing data, when it has
numeric values in both lower order of magnitude (eg: 10-6) and higher order of magnitude (eg:
106).
view
log.cs
@CntrolSection {
<ejs-chart id="container">
<e-primaryyaxis valueType= "Logarithmic" rangePadding="None"></e-primaryyaxis>
<e-series dataSource="ViewBag.dataSource" name="Germany" xName="xValue" width="
2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"></e-se
ries>
</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
new ChartData { xValue = new DateTime(2005, 01, 01), yValue = 100, yVal
ue1 = 28 },
ue1 = 44 },
ue1 = 48 },
new ChartData { xValue = new DateTime(2008, 01, 01), yValue = 1000, yVa
lue1 = 50 },
248
lue1 = 66 },
new ChartData { xValue = new DateTime(2010, 01, 01), yValue = 90000, yV
alue1 = 78 },
alue1 = 84 },
};
return View();
}

{
}
}
}
Range
Range of an axis, will be calculated automatically based on the provided data, you can also
view
range.cs
@CntrolSection {
<e-primaryyaxis valueType= "Logarithmic" rangePadding="None" minimuum=10 maximum=10
00></e-primaryyaxis>
ries>
</ejs-chart>
}
using System;
using System.Linq;
249
{
{

{
{
ue1 = 28 },
ue1 = 44 },
ue1 = 48 },
lue1 = 50 },
lue1 = 66 },
alue1 = 78 },
alue1 = 84 },
};
return View();
}

{
}
}
}
Logarithmic Base
Logarithmic base can be customized by using the logBase property of the axis. For example
when the logBase is 5, the axis values follows 5-2, 5-1, 50, 51, 52 etc.
view
base.cs
250
@CntrolSection {
<e-primaryyaxis valueType= "Logarithmic" logBase=8></e-primaryyaxis>
ries>
</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
ue1 = 28 },
ue1 = 44 },
ue1 = 48 },
lue1 = 50 },
lue1 = 66 },
alue1 = 78 },
alue1 = 84 },
};
return View();
}
251
{
}
}
}
Logarithmic Interval
Logarithmic axis interval can be customized by using the interval property of the axis. When
the logarithmic base is 10 and logarithmic interval is 2, then the axis labels are placed at an
interval of 102. The default value of the interval is 1.
view
interval.cs
@CntrolSection {
<e-primaryyaxis valueType= "Logarithmic" interval=2></e-primaryyaxis>
ries>
</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
252
ue1 = 28 },
ue1 = 44 },
ue1 = 48 },
lue1 = 50 },
lue1 = 66 },
alue1 = 78 },
alue1 = 84 },
};
return View();
}

{
}
}
}
253
Axis Labels
Smart Axis Labels

When the axis labels overlap with each other, you can use labelIntersectAction property in
the axis, to place them smartly.
When setting labelIntersectAction as Hide
view
hide.cs
width="60%">
<e-chart-tooltipsettings enable="true"> </e-chart-tooltipsettings>
<e-primaryxaxis
labelFormat="y"
labelIntersectAction="Hide"
majorGridLines="majorGridLines">
</e-primaryxaxis>
<e-primaryyaxis
labelFormat="{value}%"
rangePadding="None"
minimum=0
maximum=100
interval=20
minorTickLines="minorTickLines">
</e-primaryyaxis>
</ejs-chart>
}
using System;
using System.Linq;
254
{
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
}
}
}
When setting labelIntersectAction as Rotate45
view
rotate45.cs
255
width="60%">
<e-primaryxaxis
labelFormat="y"
</e-primaryxaxis>
<e-primaryyaxis
rangePadding="None"
minimum=0
maximum=100
interval=20
</e-primaryyaxis>
</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
Value1 = 28 },
256
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
}
}
}
When setting labelIntersectAction as Rotate90
view
rotate90.cs
width="60%">
<e-primaryxaxis
labelFormat="y"
</e-primaryxaxis>
<e-primaryyaxis
rangePadding="None"
minimum=0
maximum=100
interval=20
257
</e-primaryyaxis>
</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}
258
{
}
}
}
Axis Labels Positioning

By default, the axis labels can be placed at outside the axis line and this also can be placed at
inside the axis line using the labelPosition property.
view
position.cs
<ejs-chart id="container" load="load" title="Inflation - Consumer Price" width="60%">
<e-primaryxaxis
labelFormat="y"
labelPosition="Inside"
</e-primaryxaxis>
<e-primaryyaxis
rangePadding="None"
minimum=0
maximum=100
interval=20
</e-primaryyaxis>
</ejs-chart>
<script>
var load = function (args) {
259
var selectedTheme = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.s
lice(1));
args.chart.width = ej.base.Browser.isDevice ? "100%" : "60%";
args.chart.primaryXAxis.border = { type: "Rectangle", width: 1 };
args.chart.primaryXAxis.multiLevelLabels = (ej.base.Browser.isDevice ? ([
{
border: { type: 'Rectangle' },
categories: [
{ start: -0.5, end: 2.5, text: 'In Season', },
{ start: 2.5, end: 5.5, text: 'Out of Season', },
{ start: 5.5, end: 7.5, text: 'In Season', },
]
}, {
textStyle: { fontWeight: 'Bold' },
categories: [
{ start: -0.5, end: 5.5, text: 'Fruits', },
{ start: 5.5, end: 9.5, text: 'Vegetables', },
]
}]) : [
{
categories: [
{ start: -0.5, end: 0.5, text: 'Seedless', },
{ start: 0.5, end: 2.5, text: 'Seeded', },
{ start: 2.5, end: 3.5, text: 'Seedless', },
{ start: 8.5, end: 9.5, text: 'Seeded', }
]
}, {
categories: [
{ start: -0.5, end: 2.5, text: 'In Season', },
{ start: 5.5, end: 7.5, text: 'In Season', },
]
}, {
textStyle: { fontWeight: 'Bold' },
categories: [
{ start: -0.5, end: 5.5, text: 'Fruits', },
{ start: 5.5, end: 9.5, text: 'Vegetables', },
260
]
}])
};
</script>
}
using System;
using System.Linq;
{
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
261
}
}
}
Multilevel Labels
Any number of levels of labels can be added to an axis using the multiLevelLabels property.
This property can be configured using the following properties:
• Categories • Overflow • Alignment • Text style • Border
Categories
Using the categories property, you can configure the start , end , text , and
maximumTextWidth of multilevel labels.
view
category.cs

width="60%">
<e-primaryxaxis valueType="Category"
></e-primaryxaxis>
rangePadding="None"
minimum=0
maximum=100
interval=20
></e-primaryyaxis>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
using Syncfusion.EJ2.Chart;
262
{
{
// GET: MultiLevelLabels
public ActionResult MultiLevelLabels()
{
List<MultiLevelLabelsData> chartData = new List<MultiLevelLabelsData>
{
new MultiLevelLabelsData { x = "Grapes", y = 28 },
new MultiLevelLabelsData { x = "Apples", y = 87 },
new MultiLevelLabelsData { x = "Pears", y = 42 },
new MultiLevelLabelsData { x = "Tomato", y = 31 },
new MultiLevelLabelsData { x = "Potato", y = 96 },
new MultiLevelLabelsData { x = "Cucumber",y = 41 },
new MultiLevelLabelsData { x = "Onion", y = 59 }
};
return View();
}
public class MultiLevelLabelsData
{
public string x;
public double y;
}
}
}
Overflow
Using the overflow property, you can trim or wrap the multilevel labels.
view
overflow.cs

width="60%">
labelFormat="y"
263
rangePadding="None"
minimum=0
maximum=100
interval=20
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
{
{
};
return View();
}
264
{
public string x;
public double y;
}
}
}
Alignment
The alignment property provides option to position the multilevel labels at far , center , or
near .
view

width="60%">
labelFormat="y"
rangePadding="None"
minimum=0
maximum=100
interval=20
</ejs-chart>
Text customization
The textStyle property of multilevel labels provides options to customize the size , color ,
fontFamily , fontWeight , fontStyle , opacity , textAlignment and textOverflow .
view
265
text-custom.cs

width="60%">
labelFormat="y"
rangePadding="None"
minimum=0
maximum=100
interval=20
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
{
{
266
};
return View();
}
{
public string x;
public double y;
}
}
}
Border customization
Using the border property, you can customize the width , color , and type . The type of
border are Rectangle , Brace , WithoutBorder , WithoutTopBorder ,
WithoutTopandBottomBorder and CurlyBrace .
view
border-custom.cs

width="60%">
labelFormat="y"
rangePadding="None"
minimum=0
maximum=100
interval=20
267
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
{
{
};
return View();
}
{
public string x;
public double y;
}
}
}
Edge Label Placement
268
Labels with long text at the edges of an axis may appear partially in the chart. To avoid this, use
edgeLabelPlacement property in axis, which moves the label inside the chart area for better
appearance or hides it.
view
edge.cs
width="60%">
<e-primaryxaxis
labelFormat="y"
edgeLabelPlacement="Hide"
</e-primaryxaxis>
<e-primaryyaxis
rangePadding="None"
minimum=0
maximum=100
interval=20
</e-primaryyaxis>
</ejs-chart>
}
using System;
using System.Linq;
{
269
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
}
}
}
Labels Customization
The labelStyle property of an axis provides options to customize the color , font-family ,
font-size and font-weight of the axis labels.
view
labels-custom.cs
width="60%">
<e-primaryxaxis
270
labelFormat="y"
labelStyle="ViewBag.label"
</e-primaryxaxis>
<e-primaryyaxis
rangePadding="None"
minimum=0
maximum=100
interval=20
</e-primaryyaxis>
</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
Value1 = 28 },
Value1 = 44 },
271
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
ViewBag.label = new { font-weigth = '800', font-style = 'italic'}
return View();
}

{
}
}
}
Customizing Specific Point

You can customize the specific text in the axis labels using axisLabelRender event.
view
custom-point.cs
<ejs-chart id="container" axisLabelRender="axisLabel" title="Inflation - Consumer Price"
width="60%">
<e-primaryxaxis
labelFormat="y"
</e-primaryxaxis>
<e-primaryyaxis
rangePadding="None"
minimum=0
maximum=100
272
interval=20
</e-primaryyaxis>
</ejs-chart>
<script>
function axislabel(args) {
if(args.text === 'France') {
args.labelStyle.color = 'Red';
}
}
</script>
}
using System;
using System.Linq;
{
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
273
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
}
}
}
274
Axis Customization
Axis Crossing
An axis can be positioned in the chart area using crossesAt and crossesInAxis properties.
The crossesAt property specifies the values (datetime, numeric, or logarithmic) at which the
axis line has to be intersected with the vertical axis or vice-versa, and the crossesInAxis
property specifies the axis name with which the axis line has to be crossed.
view
axis-cross.cs
<e-chart-primaryxaxis valueType="Category" crossesAt="15"></e-chart-pri
maryxaxis>
lumn"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
275
};
return View();
}
{
public string x;
}
}
}
Title
You can add a title to the axis using title property to provide quick information to the user
about the data plotted in the axis.
view
title.cs
<e-chart-primaryxaxis valueType="Category" titleStyle="ViewBag.titleSty
le"></e-chart-primaryxaxis>
lumn"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
276
{
{
};
ViewBag.titleStyle = new { size="16px", color="grey", fontFamily="Segoe UI"
, fontWeight="bold"}
return View();
}
{
public string x;
}
}
}
Tick Lines Customization

You can customize the width , color and size of the minor and major tick lines, using
majorTickLines and minorTickLines properties in the axis.
view
tick.cs
<e-chart-primaryxaxis valueType="Category" majorTickLines="ViewBag.maj
orTickLines"
minorTickLines="ViewBag.minorTickLines"></e-chart-primaryxaxis>
<e-chart-primaryyaxis valueType="Category" majorTickLines="ViewBag.ma
jorTickLines"
minorTickLines="ViewBag.minorTickLines"></e-chart-primaryyaxis>
lumn"></e-series>
277
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
ViewBag.majorTickLines = new { color = 'red', width = 5 }
ViewBag.minorTickLines = new { color = 'blue', width = 0 }
return View();
}
{
public string x;
}
}
}
Grid Lines Customization

You can customize the width , color and dashArray of the minor and major grid lines, using
majorGridLines and minorGridLines properties in the axis.
view
278
grid.cs
<e-chart-primaryxaxis valueType="Category" majorGridLines="ViewBag.maj
orGridLines"
minorGridLines="ViewBag.minorGridLines"></e-chart-primaryxaxis>
<e-chart-primaryyaxis valueType="Category" majorTickLines="ViewBag.ma
jorTickLines"
minorTickLines="ViewBag.minorTickLines"></e-chart-primaryyaxis>
lumn"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
ViewBag.majorGridLines = new { color = 'red', width = 1 }
ViewBag.minorGridLines = new { color = 'blue', width = 0 }
return View();
}
279
{
public string x;
}
}
}
Multiple Axis
In addition to primary X and Y axis, we can add n number of axis to the chart. Series can be
associated with this axis, by mapping with axis's unique name.
view
multiple.cs
<ejs-chart id="lineContainer" title="Weather condition JPN vs DEU">
<e-chart-primaryxaxis title="Country" valueType="Category"></e-chart-pr
imaryxaxis>
<e-chart-axes>
<e-chart-axis minimum="24" maximum="36" interval="2" opposedPosition
="true" rowIndex="0" name="yAxis2" labelFormat="{value}°C" lineStyle="line">
</e-chart-axis>
</e-chart-axes>
many" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSerie
sType.Column"></e-series>
many" xName="x" width="2" opacity="1" yName="y2" type="@Syncfusion.EJ2.Charts.ChartSeri
esType.Line" yAxisName="yAxis2"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
using System.Web;
280
{
{
public ActionResult MultipleAxes()
{
List<MultipleAxesChartData> chartData = new List<MultipleAxesChartData>
{
new MultipleAxesChartData { x = "Sun", y = 35, y1 = 30 },
new MultipleAxesChartData { x = "Mon", y = 40, y1 = 28 },
new MultipleAxesChartData { x = "Tue", y = 80, y1 = 29 },
new MultipleAxesChartData { x = "Wed", y = 70, y1 = 30 },
new MultipleAxesChartData { x = "Thu", y = 65, y1 = 33 },
new MultipleAxesChartData { x = "Fri", y = 55, y1 = 32 },
new MultipleAxesChartData { x = "Sat", y = 50, y1 = 34 }
};
ViewBag.marker = new { visible = true, width = 10, height = 10, border = new
{ width = 2, color = "#F8AB1D" } };
return View();
}
public class MultipleAxesChartData
{
public string x;
public double y;
public double y1;
}
}
}
Inversed Axis
When an axis is inversed, highest value of the axis comes closer to origin and vice versa. To
place an axis in inversed manner set this property isInversed to true.
view
inversed.cs
<e-chart-primaryxaxis valueType="Category" isInversed="true"></e-chart-
primaryxaxis>
281
name='Gold' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Li
ne"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
return View();
}
{
public string x;
}
}
}
Opposed Position
To place an axis opposite from its original position, set opposedPosition property of the axis to
true.
282
view
opposed.cs
<e-chart-primaryxaxis valueType="Category" OpposedPosition="true"></e-c
hart-primaryxaxis>
lumn"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
return View();
}
{
public string x;
}
283
}
}
284
Strip lines
EJ2 chart supports horizontal and vertical strip lines and customization of stripline in both
orientation.
Horizontal Strip lines

You can create Horizontal stripline by adding the stripline in the vertical axis and set
visible option to true. Striplines are rendered in the specified start to end range and you can
add more than one stripline for an axis.
view
horizontal.cs

<e-chart-primaryxaxis valueType="Category" stripLines="ViewBag.yAxisStr
ipLine "></e-chart-primaryxaxis>
<e-series dataSource="ViewBag.dataSource" xName='x' yName='y'
lumn"></e-series>
</ejs-chart>
using System;
using System.Linq;
{
{
{
List<StripLineChartData> chartData = new List<StripLineChartData>
{
new StripLineChartData { x = "Sun", y = 28 },
new StripLineChartData { x = "Mon", y = 27 },
new StripLineChartData { x = "Tue", y = 33 },
new StripLineChartData { x = "Wed", y = 36 },
new StripLineChartData { x = "Thu", y = 28 },
285
new StripLineChartData { x = "Fri", y = 30 },
new StripLineChartData { x = "Sat", y = 31 }
};
List<ChartStripLine> yAxisStripline = new List<ChartStripLine>();
ChartStripLine ystripline1 = new ChartStripLine();
ystripline1.Start = "30";
ystripline1.End = "35";
ystripline1.Visible = true;
yAxisStripline.Add(ystripline1);
ViewBag.yAxisStripLine = yAxisStripline;
return View();
}
{
public string x;
}
}
}
Vertical Striplines
You can create vertical stripline by adding the stripline in the horizontal axis and set visible
option to true. Striplines are rendered in the specified start to end range and you can add more
than one stripline for an axis.
view
vertical.cs

<e-chart-primaryxaxis valueType="Category" stripLines="ViewBag.xAxisStr
ipLine"></e-chart-primaryxaxis>
lumn"></e-series>
</ejs-chart>
using System;
using System.Linq;
286
{
{
{
{
};
ChartStripLine xstripline1 = new ChartStripLine();
xstripline1.Start = "1";
xstripline1.End = "2.5";
xstripline1.Visible = true;
xAxisStripline.Add(xstripline1);
ViewBag.xAxisStripLine = xAxisStripline;
return View();
}
{
public string x;
}
}
}
Customize the strip line

Starting value in specific strip line can be customized by start property in strip line. Similarly,
ending value is customized by end . It can be also set for starting from the corresponding origin
of the axis by startFromOrigin . Size of the strip line is customized by size . Border for the
stripline is customized by border . Order of the strip line such that whether it should be rendered
in behind or over the series elements is customized by zIndex .
view
custom-stripline.cs
287
lumn"></e-series>
</ejs-chart>
using System;
using System.Linq;
{
{
{
{
};
xstripline1.startFromOrigin = true;
xstripline1.Size = 4;
xstripline1.ZIndex = "Behind";
xstripline1.Opacity = 0.5;
return View();
}
{
288
public string x;
}
}
}
Customize the stripline text

You can customize the text rendered in stripline by textStyle property. Rotation of the strip line
text can be changed by rotation property. Horizontal and Vertical alignment of stripline text
can be changed by horizontalAlignment and verticalAlignment property.
view
custom-striptext.cs

lumn"></e-series>
</ejs-chart>
using System;
using System.Linq;
{
{
{
{
289
};
xstripline1.startFromOrigin = true;
xstripline1.Size = 3;
xstripline1.ZIndex = "Behind";
xstripline1.Opacity = 0.5;
xstripline1.Text = "Good";
xstripline1.TextStyle = new { size = "18px" };
xstripline1.VerticalAlignment = "Middle";
xstripline1.HorizontalAlignment= "Middle";
xstripline1.Rotation = 90;

xstripline2.Start = "4";
xstripline2.End = "6";
xstripline2.Text = "Poor";
xstripline1.VerticalAlignment = "Start";
xstripline1.HorizontalAlignment= "End";
xstripline1.Rotation = 90;
return View();
}
{
public string x;
}
}
}
290
Multiple Panes
Chart area can be divided into multiple panes using rows and columns .
Rows
To split the chart area vertically into number of rows, use rows property of the chart.
You can allocate space for each row by using the height property. The value can be either
in percentage or in pixel.
To associate a vertical axis to a particular row, specify its index to rowIndex property of the
axis.
To customize each row’s bottom line, use border property.
view
row.cs
imaryxaxis>
<e-chart-axes>
</e-chart-axis>
</e-chart-axes>
</ejs-chart>
}
using System;
291
using System.Linq;
using System.Web;
{
{
{
{
};
return View();
}
{
public string x;
public double y;
public double y1;
}
}
}
For spanning the vertical axis along multiple row, you can use span property of an axis.
view
row-span.cs
<e-chart-primaryxaxis title="Country" valueType="Category" span="2"></e
292
<e-chart-axes>
</e-chart-axis>
</e-chart-axes>
</ejs-chart>
}
using System;
using System.Linq;
using System.Web;
{
{
{
{
};
return View();
}
{
293
public string x;
public double y;
public double y1;
}
}
}
Columns
To split the chart area horizontally into number of columns, use columns property of the chart.
You can allocate space for each column by using the width property. The given width can
be either in percentage or in pixel.
To associate a horizontal axis to a particular column, specify its index to columnIndex
property of the axis.
To customize each column’s bottom line, use border property.
view
column.cs
imaryxaxis>
<e-chart-axes>
="true" columnIndex="0" name="yAxis2" labelFormat="{value}°C">
</e-chart-axis>
</e-chart-axes>
</ejs-chart>
}
294
using System;
using System.Linq;
using System.Web;
{
{
{
{
};
return View();
}
{
public string x;
public double y;
public double y1;
}
}
}
For spanning the horizontal axis along multiple column, you can use span property of an axis.
view
column-span.cs
295
<e-chart-primaryxaxis title="Country" valueType="Category" span="2"></e
<e-chart-axes>
</e-chart-axis>
</e-chart-axes>
</ejs-chart>
}
using System;
using System.Linq;
using System.Web;
{
{
{
{
};
return View();
296
}
{
public string x;
public double y;
public double y1;
}
}
}
297
Chart Types
Essential JS 2 Chart chart supports 14 types of series.
Line Charts
Line
To render a line series, use series type as Line .
view
line.cs
rimaryxaxis>
ne"></e-series>
name='Gold' type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"></e-
series>
</ejs-chart>
}
using System;
using System.Linq;
namespace Chart.Controllers
{
{
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= "USA", yValue= 46 },
298
new ChartData { x= "GBR", yValue= 27 },
new ChartData { x= "CHN", yValue= 26 },
new ChartData { x= "UK", yValue= 56 },
new ChartData { x= "AUS", yValue= 12 },
new ChartData { x= "IND", yValue= 26 },
new ChartData { x= "DEN", yValue= 26 },
new ChartData { x= "MEX", yValue= 34 },
};
List<ChartData> chartData1 = new List<ChartData>
{
};
ViewBag.dataSource = chartData1;
return View();
}
{
public string x;
}
}
}
Step Line
To render a step line series, use series type as StepLine .
view
stepline.cs
rimaryxaxis>
name='Gold' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.St
epLine"></e-series>
name='Gold' type="@Syncfusion.EJ2.Charts.ChartSeriesType.StepLine">
299
</e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
{
};
return View();
}
{
public string x;
300
}
}
}
Spline
To render a spline series, use series type as Spline .
view
spline.cs
rimaryxaxis>
name='Gold' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Sp
line"></e-series>
name='Gold' type="@Syncfusion.EJ2.Charts.ChartSeriesType.Spline"></
e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
301
};
{
};
return View();
}
{
public string x;
}
}
}
Spline Area
To render a spline series, use series type as Spline .
view
splinearea.cs
rimaryxaxis>
lineArea"></e-series>
name='Gold' type="@Syncfusion.EJ2.Charts.ChartSeriesType.SplineArea"
></e-series>
</ejs-chart>
}
302
using System;
using System.Linq;
{
{
{
{
};
{
};
return View();
}
{
public string x;
}
}
}
303
Multicolored Line
To render a multicolored line series, use the series type as MultiColoredLine . Here, the
individual colors to the data can be mapped by using pointColorMapping .
view
multi-line.cs
rimaryxaxis>
pointColorMapping="color"
name='Gold' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Mu
ltiColoredLine"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
new ChartData { x= "USA", yValue= 46, color="FF0000" },
new ChartData { x= "GBR", yValue= 27, color= "00FF00" },
new ChartData { x= "CHN", yValue= 26, color= "00F000" },
new ChartData { x= "UK", yValue= 56, color= "0000FF" },
new ChartData { x= "AUS", yValue= 12, color= "FE0000" },
new ChartData { x= "IND", yValue= 26, color= "00EECC" },
new ChartData { x= "DEN", yValue= 26, color= "CCFFEE" },
new ChartData { x= "MEX", yValue= 34, color= "CCDDBB" },
};
return View();
}
304
{
public string x;
public string color;
}
}
}
Customization of Line Charts
stroke , stroke-width and dashArray of all line type series can be customized by using
fill , width and dashArray properties.
view
custom-line.cs
rimaryxaxis>
lumn"></e-series>
e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
305
{
};
{
};
return View();
}
{
public string x;
}
}
}
Area Charts
Area
To render a area series, use series type as Area .
view
area.cs
rimaryxaxis>
306
name='Gold' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Ar
ea"></e-series>
name='Gold' type="@Syncfusion.EJ2.Charts.ChartSeriesType.Area"></e-
series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
{
};
return View();
307
}
{
public string x;
}
}
}
Range Area
To render a range area series, use series type as RangeArea .
view
rangearea.cs

<e-series dataSource="ViewBag.dataSource" xName="x" high="yValue" l
ow="yValue2"
name='Gold' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Ra
ngeArea"></e-series>
</ejs-chart>
using System;
using System.Linq;
{
{
{
{
new ChartData { x= "USA", yValue = 46, yValue2 = 23},
new ChartData { x= "GBR", yValue = 27, yValue2 = 43 },
new ChartData { x= "CHN", yValue = 26,, yValue2 = 54 }
};
return View();
308
}
{
public string x;
}
}
}
Stacked Area
To render a stacked area series, use series type as StackingArea .
view
stackedarea.cs
rimaryxaxis>
ackedArea"></e-series>
name='Gold' type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackedAre
a"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
309
{
};
{
};
return View();
}
{
public string x;
}
}
}
100% Stacked Area
To render a 100% stacked area series, use series type as StackingArea100 .
view
stackedarea100.cs
rimaryxaxis>
ackedArea100"></e-series>
310
name='Gold' type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackedAre
a100"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
{
};
return View();
}
{
311
public string x;
}
}
}
Step Area
To render a step area series, use series type as StepArea .
view
steparea.cs
rimaryxaxis>
line"></e-series>
name='Gold' type="@Syncfusion.EJ2.Charts.ChartSeriesType.Spline"></
e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
312
};
{
};
return View();
}
{
public string x;
}
}
}
Multicolored area
To render a multicolored area series, use the series type as MultiColoredArea . The required
segments of the series can be customized using the value , color , and dashArray .
view
multicolor-area.cs
rimaryxaxis>
ea"></e-series>
series>
313
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
new ChartData { x= "USA", yValue= 46, color="FF0000" },
new ChartData { x= "GBR", yValue= 27, color= "00FF00" },
new ChartData { x= "CHN", yValue= 26, color= "00F000" },
new ChartData { x= "UK", yValue= 56, color= "0000FF" },
new ChartData { x= "AUS", yValue= 12, color= "FE0000" },
new ChartData { x= "IND", yValue= 26, color= "00EECC" },
new ChartData { x= "DEN", yValue= 26, color= "CCFFEE" },
new ChartData { x= "MEX", yValue= 34, color= "CCDDBB" },
};
return View();
}
{
public string x;
public string color;
}
}
}
Customization of Area Charts
fill, width and dashArray properties can be customized by fill , width and dashArray
properties.
view
custom-area.cs
314
rimaryxaxis>
ea"></e-series>
series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
{
315
};
return View();
}
{
public string x;
}
}
}
Column Charts
Column
To render a column series, use series type as Column .
view
column.cs
rimaryxaxis>
lumn"></e-series>
e-series>
</ejs-chart>
}
using System;
using System.Linq;
316
{
{
{
{
};
{
};
return View();
}
{
public string x;
}
}
}
Range Column
To render a range column series, use series type as RangeColumn .
view
rangecolumn.cs
317
<e-series dataSource="ViewBag.dataSource" xName="x" high="yValue" l
ow="yValue2"
name='Gold' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Ra
ngeColumn"></e-series>
</ejs-chart>
using System;
using System.Linq;
{
{
{
{
new ChartData { x= "USA", yValue = 46, yValue2 = 23},
new ChartData { x= "GBR", yValue = 27, yValue2 = 43 },
new ChartData { x= "CHN", yValue = 26,, yValue2 = 54 }
};
return View();
}
{
public string x;
}
}
}
Stacked Column
To render a stacked column series, use series type as StackingColumn .
view
stackedcolumn.cs
318
rimaryxaxis>
ackingColumn"></e-series>
name='Gold' type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingCo
lumn"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
{
319
};
return View();
}
{
public string x;
}
}
}
100% Stacked Column
To render a 100% stacked column series, use series type as StackingColumn100 .
view
stackedcolumn100.cs
rimaryxaxis>
ackingColumn100"></e-series>
lumn100"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
320
{
{
{
};
{
};
return View();
}
{
public string x;
}
}
}
Stacking Group
You can use the stackingGroup property to group the stacked columns and 100% stacked
columns. Columns with same group name are stacked on top of each other.
view
group.cs
321
rimaryxaxis>
ackingColumn100"></e-series>
lumn100"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
{
322
};
return View();
}
{
public string x;
}
}
}
Customization of Column Charts
fill and border of all column type series can be customized using fill and border
properties. For customizing a specify point, please refer the pointRender .
Bar Charts
Bar
To render a bar series, use series type as Bar .
view
bar.cs
rimaryxaxis>
name='Gold' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Ba
r"></e-series>
name='Gold' type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bar"></e-s
eries>
</ejs-chart>
}
using System;
using System.Linq;
323
{
{
{
{
};
{
};
return View();
}
{
public string x;
}
}
}
Stacked bar
To render a stacked bar series, use series type as StackingBar .
view
stackedbar.cs
324
rimaryxaxis>
ackingBar"></e-series>
name='Gold' type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBa
r"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
{
325
};
return View();
}
{
public string x;
}
}
}
100% Stacked Bar
To render a 100% stacked bar series, use series type as StackingBar100 .
view
stackedbar100.cs
rimaryxaxis>
ackingBar100"></e-series>
name='Gold' type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBa
r100"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
326
{
{
{
};
{
};
return View();
}
{
public string x;
}
}
}
Stacking Group
You can use the stackingGroup property to group the stacked bar and 100% stacked bar.
Columns with same group name are stacked on top of each other.
view
group.cs
327
rimaryxaxis>
lumn"></e-series>
e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
{
328
};
return View();
}
{
public string x;
}
}
}
Customization of Bar Charts
fill and border of all bar type series can be customized using fill and border . For
customizing a specify point, please refer the pointRender .
view
custom-bar.cs
rimaryxaxis>
lumn"></e-series>
e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
329
{
{
};
{
};
return View();
}
{
public string x;
}
}
}
Scatter Charts
To render a scatter series, use series type as Scatter .
view
scatter.cs
330
lumn"></e-series>
</ejs-chart>
<script>
function load(args) {
args.chart.series[0].dataSource = [
{ 'x': 115, 'y': 57 }, { 'x': 138, 'y': 57 }, { 'x': 166, 'y': 57 }, { 'x': 122, 'y'
: 57 },
{ 'x': 126, 'y': 57 }, { 'x': 130, 'y': 57 }, { 'x': 125, 'y': 57 }, { 'x': 144, 'y'
: 57 },
{ 'x': 150, 'y': 57 }, { 'x': 120, 'y': 57 }, { 'x': 125, 'y': 57 }, { 'x': 130, 'y'
: 57 },
{ 'x': 103, 'y': 58 }, { 'x': 116, 'y': 58 }, { 'x': 130, 'y': 58 }, { 'x': 126, 'y'
: 58 },
{ 'x': 136, 'y': 58 }, { 'x': 148, 'y': 58 }, { 'x': 119, 'y': 58 }, { 'x': 141, 'y'
: 58 },
{ 'x': 159, 'y': 58 }, { 'x': 120, 'y': 58 }, { 'x': 135, 'y': 58 }, { 'x': 163, 'y'
: 58 },
{ 'x': 119, 'y': 59 }, { 'x': 131, 'y': 59 }, { 'x': 148, 'y': 59 }, { 'x': 123, 'y'
: 59 },
{ 'x': 137, 'y': 59 }, { 'x': 149, 'y': 59 }, { 'x': 121, 'y': 59 }, { 'x': 142, 'y'
: 59 },
{ 'x': 160, 'y': 59 }, { 'x': 118, 'y': 59 }, { 'x': 130, 'y': 59 }, { 'x': 146, 'y'
: 59 },
{ 'x': 119, 'y': 60 }, { 'x': 133, 'y': 60 }, { 'x': 150, 'y': 60 }, { 'x': 133, 'y'
: 60 },
{ 'x': 149, 'y': 60 }, { 'x': 165, 'y': 60 }, { 'x': 130, 'y': 60 }, { 'x': 139, 'y'
: 60 },
{ 'x': 154, 'y': 60 }, { 'x': 118, 'y': 60 }, { 'x': 152, 'y': 60 }, { 'x': 154, 'y'
: 60 },
{ 'x': 130, 'y': 61 }, { 'x': 145, 'y': 61 }, { 'x': 166, 'y': 61 }, { 'x': 131, 'y'
: 61 },
{ 'x': 143, 'y': 61 }, { 'x': 162, 'y': 61 }, { 'x': 131, 'y': 61 }, { 'x': 145, 'y'
: 61 },
{ 'x': 162, 'y': 61 }, { 'x': 115, 'y': 61 }, { 'x': 149, 'y': 61 }, { 'x': 183, 'y'
: 61 },
{ 'x': 121, 'y': 62 }, { 'x': 139, 'y': 62 }, { 'x': 159, 'y': 62 }, { 'x': 135, 'y'
: 62 },
{ 'x': 152, 'y': 62 }, { 'x': 178, 'y': 62 }, { 'x': 130, 'y': 62 }, { 'x': 153, 'y'
: 62 },
{ 'x': 172, 'y': 62 }, { 'x': 114, 'y': 62 }, { 'x': 135, 'y': 62 }, { 'x': 154, 'y'
: 62 },
{ 'x': 126, 'y': 63 }, { 'x': 141, 'y': 63 }, { 'x': 160, 'y': 63 }, { 'x': 135, 'y'
: 63 },
{ 'x': 149, 'y': 63 }, { 'x': 180, 'y': 63 }, { 'x': 132, 'y': 63 }, { 'x': 144, 'y'
: 63 },
{ 'x': 163, 'y': 63 }, { 'x': 122, 'y': 63 }, { 'x': 146, 'y': 63 }, { 'x': 156, 'y'
: 63 },
331
{ 'x': 133, 'y': 64 }, { 'x': 150, 'y': 64 }, { 'x': 176, 'y': 64 }, { 'x': 133, 'y'
: 64 },
{ 'x': 149, 'y': 64 }, { 'x': 176, 'y': 64 }, { 'x': 136, 'y': 64 }, { 'x': 157, 'y'
: 64 },
{ 'x': 174, 'y': 64 }, { 'x': 131, 'y': 64 }, { 'x': 155, 'y': 64 }, { 'x': 191, 'y'
: 64 },
{ 'x': 136, 'y': 65 }, { 'x': 149, 'y': 65 }, { 'x': 177, 'y': 65 }, { 'x': 143, 'y'
: 65 },
{ 'x': 149, 'y': 65 }, { 'x': 184, 'y': 65 }, { 'x': 128, 'y': 65 }, { 'x': 146, 'y'
: 65 },
{ 'x': 157, 'y': 65 }, { 'x': 133, 'y': 65 }, { 'x': 153, 'y': 65 }, { 'x': 173, 'y'
: 65 },
{ 'x': 141, 'y': 66 }, { 'x': 156, 'y': 66 }, { 'x': 175, 'y': 66 }, { 'x': 125, 'y'
: 66 },
{ 'x': 138, 'y': 66 }, { 'x': 165, 'y': 66 }, { 'x': 122, 'y': 66 }, { 'x': 164, 'y'
: 66 },
{ 'x': 182, 'y': 66 }, { 'x': 137, 'y': 66 }, { 'x': 157, 'y': 66 }, { 'x': 176, 'y'
: 66 },
{ 'x': 149, 'y': 67 }, { 'x': 159, 'y': 67 }, { 'x': 179, 'y': 67 }, { 'x': 156, 'y'
: 67 },
{ 'x': 179, 'y': 67 }, { 'x': 186, 'y': 67 }, { 'x': 147, 'y': 67 }, { 'x': 166, 'y'
: 67 },
{ 'x': 185, 'y': 67 }, { 'x': 140, 'y': 67 }, { 'x': 160, 'y': 67 }, { 'x': 180, 'y'
: 67 },
{ 'x': 145, 'y': 68 }, { 'x': 155, 'y': 68 }, { 'x': 170, 'y': 68 }, { 'x': 129, 'y'
: 68 },
{ 'x': 164, 'y': 68 }, { 'x': 189, 'y': 68 }, { 'x': 150, 'y': 68 }, { 'x': 157, 'y'
: 68 },
{ 'x': 183, 'y': 68 }, { 'x': 144, 'y': 68 }, { 'x': 170, 'y': 68 }, { 'x': 180, 'y'
: 68 }
];
}
</script>
}
using System;
using System.Linq;
{
{
332
return View();
}
}
Bubble Chart
To render a bubble series, use series type as Bubble .
view
bubble.cs
name='Gold' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bu
bble"></e-series>
</ejs-chart>
using System;
using System.Linq;
{
{
{
{
new ColumnChartData { x= "CHN", yValue= 26 }
};
return View();
}
{
333
public string x;
}
}
}
Bubble Size Mapping
size property can be used to map the size value specified in data source.
view
bubble-size.cs

size = "size"
name='Gold' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bu
bble"></e-series>
</ejs-chart>
using System;
using System.Linq;
{
{
{
{
new ColumnChartData { x= "USA", yValue= 46, size = 100 },
new ColumnChartData { x= "GBR", yValue= 27, size = 20 },
new ColumnChartData { x= "CHN", yValue= 26, size = 200 }
};
return View();
}
{
334
public string x;
public double size;
}
}
}
335
Polar Chart and Radar Chart
Polar Chart
To render a polar series, use series type as Polar .
Draw Types
Polar drawType property is used to change the series plotting type to line, column, area, range
column, spline, scatter, stacking area and stacking column. The default value of drawType is
Line .
Line
To render a line draw type, use series drawType as Line . isClosed property specifies
whether to join start and end point of a line series used in polar chart to form a closed path.
Default value of isClosed is true.
view
polar-line.cs
<ejs-chart id="container" load="window.onChartLoad" title="Alaska Weather Statistics

- 2016">
<e-chart-primaryxaxis interval="1" labelPlacement="OnTicks" valueType="Cate
gory" title="Months"></e-chart-primaryxaxis>
<e-chart-primaryyaxis title="Temperature (Celsius)" minimum="-25" maximum="
25" interval="10" edgeLabelPlacement="Shift" labelFormat="{value}°C"></e-chart-primaryy
axis>
<e-series dataSource="ViewBag.dataSource" marker="marker" name="Germany"
xName="xValue" width="2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.Chart
SeriesType.Polar"></e-series>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
336
{
{
public ActionResult PolarLine()
{
List<PolarLineChartData> chartData = new List<PolarLineChartData>
{
new PolarLineChartData { xValue = "Jan", yValue = -7.1 },
new PolarLineChartData { xValue = "Feb", yValue = -3.7 },
new PolarLineChartData { xValue = "Mar", yValue = 0.8 },
new PolarLineChartData { xValue = "Apr", yValue = 6.3 },
new PolarLineChartData { xValue = "May", yValue = 13.3 },
new PolarLineChartData { xValue = "Jun", yValue = 18.0 },
new PolarLineChartData { xValue = "Jul", yValue = 19.8 },
new PolarLineChartData { xValue = "Aug", yValue = 18.1 },
new PolarLineChartData { xValue = "Sep", yValue = 13.1 },
new PolarLineChartData { xValue = "Oct", yValue = 4.1 },
new PolarLineChartData { xValue = "Nov", yValue = -3.8 },
new PolarLineChartData { xValue = "Dec", yValue = -6.8 },
};
ViewBag.marker1 = new {
visible = true,
height = 10,
width = 10,
shape = "Pentagon",
};
return View();
}
public class PolarLineChartData
{
}
}
}
Spline
To render a spline line draw type, use series drawType as Spline .
view
polar-spline.cs

- 2016">
337
axis>
xName="xValue" width="2" opacity="1" yName="yValue"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar" drawType="@Syncfusi
on.EJ2.Charts.ChartDrawType.Spline"></e-series>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult PolarSpline()
{
List<PolarSplineChartData> chartData = new List<PolarSplineChartData>
{
new PolarSplineChartData { xValue = "Jan", yValue = -7.1 },
new PolarSplineChartData { xValue = "Feb", yValue = -3.7 },
new PolarSplineChartData { xValue = "Mar", yValue = 0.8 },
new PolarSplineChartData { xValue = "Apr", yValue = 6.3 },
new PolarSplineChartData { xValue = "May", yValue = 13.3 },
new PolarSplineChartData { xValue = "Jun", yValue = 18.0 },
new PolarSplineChartData { xValue = "Jul", yValue = 19.8 },
new PolarSplineChartData { xValue = "Aug", yValue = 18.1 },
new PolarSplineChartData { xValue = "Sep", yValue = 13.1 },
new PolarSplineChartData { xValue = "Oct", yValue = 4.1 },
new PolarSplineChartData { xValue = "Nov", yValue = -3.8 },
new PolarSplineChartData { xValue = "Dec", yValue = -6.8 },
};
visible = true,
height = 10,
338
width = 10,
shape = "Pentagon",
};
return View();
}
{
}
}
}
Area
To render a area line draw type, use series drawType as Area .
view
polar-area.cs

- 2016">
axis>
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar" drawType="@Syncfus
ion.EJ2.Charts.ChartDrawType.Area"></e-series>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
339
{
public ActionResult PolarArea()
{
List<PolarAreaChartData> chartData = new List<PolarAreaChartData>
{
new PolarAreaChartData { xValue = "Jan", yValue = -7.1 },
new PolarAreaChartData { xValue = "Feb", yValue = -3.7 },
new PolarAreaChartData { xValue = "Mar", yValue = 0.8 },
new PolarAreaChartData { xValue = "Apr", yValue = 6.3 },
new PolarAreaChartData { xValue = "May", yValue = 13.3 },
new PolarAreaChartData { xValue = "Jun", yValue = 18.0 },
new PolarAreaChartData { xValue = "Jul", yValue = 19.8 },
new PolarAreaChartData { xValue = "Aug", yValue = 18.1 },
new PolarAreaChartData { xValue = "Sep", yValue = 13.1 },
new PolarAreaChartData { xValue = "Oct", yValue = 4.1 },
new PolarAreaChartData { xValue = "Nov", yValue = -3.8 },
new PolarAreaChartData { xValue = "Dec", yValue = -6.8 },
};
visible = true,
height = 10,
width = 10,
shape = "Pentagon",
};
return View();
}
{
}
}
}
Stacked Area
To render a stacked area draw type, use series drawType as StackingArea .
view
polar-stackedarea.cs
<ejs-chart id="container" load="window.onChartLoad" title="GDP, Current Prices (in B

illions)">
<e-chart-legendsettings visible="true">
340
<e-chart-primaryxaxis valueType="Category" labelPlacement="OnTicks" int
erval="1" coefficient="100"></e-chart-primaryxaxis>
<e-chart-primaryyaxis minimum="0" maximum="20000" interval="5000"></e-c
hart-primaryyaxis>
<e-series dataSource="ViewBag.dataSource" name="2013" xName="x" wid
th="2" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar" drawType="@Syncfus
ion.EJ2.Charts.ChartDrawType.StackingArea"></e-series>
th="2" yName="y1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar" drawType="@Syncfu
sion.EJ2.Charts.ChartDrawType.StackingArea"></e-series>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult PolarStackedArea()
{
List<PolarStackedAreaData> data = new List<PolarStackedAreaData>
{
new PolarStackedAreaData { x= "JPN", text = "Japan", y= 5156, y1= 48
49, y2= 4382, y3= 4939 },
new PolarStackedAreaData { x= "DEU", text = "Germany", y= 3754, y1=
3885, y2= 3365, y3= 3467 },
new PolarStackedAreaData { x= "FRA", text = "France", y= 2809, y1= 2
844, y2= 2420, y3= 2463 },
new PolarStackedAreaData { x= "GBR", text = "UK", y= 2721, y1= 3002,
y2= 2863, y3= 2629 },
new PolarStackedAreaData { x= "BRA", text = "Brazil", y= 2472, y1= 2
456, y2= 1801, y3= 1799 },
new PolarStackedAreaData { x= "RUS", text = "Russia", y= 2231, y1= 2
341
064, y2= 1366, y3= 1281 },
new PolarStackedAreaData { x= "ITA", text = "Italy", y= 2131, y1= 21
55, y2= 1826, y3= 1851 },
new PolarStackedAreaData { x= "IND", text = "India", y= 1857, y1= 20
34, y2= 2088, y3= 2256 },
new PolarStackedAreaData { x= "CAN", text = "Canada", y= 1843, y1= 1
793, y2= 1553, y3= 1529 }
};
return View();
}
public class PolarStackedAreaData
{
public string x;
public double y;
public double y1;
public double y2;
public double y3;
public string text;
}
}
}
Column
To render a column draw type, use series drawType as Column .
view
polar-column.cs

- 2016">
axis>
on.EJ2.Charts.ChartDrawType.Column"></e-series>
</ejs-chart>
342
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult PolarColumn()
{
List<PolarColumnChartData> chartData = new List<PolarColumnChartData>
{
new PolarColumnChartData { xValue = "Jan", yValue = -7.1 },
new PolarColumnChartData { xValue = "Feb", yValue = -3.7 },
new PolarColumnChartData { xValue = "Mar", yValue = 0.8 },
new PolarColumnChartData { xValue = "Apr", yValue = 6.3 },
new PolarColumnChartData { xValue = "May", yValue = 13.3 },
new PolarColumnChartData { xValue = "Jun", yValue = 18.0 },
new PolarColumnChartData { xValue = "Jul", yValue = 19.8 },
new PolarColumnChartData { xValue = "Aug", yValue = 18.1 },
new PolarColumnChartData { xValue = "Sep", yValue = 13.1 },
new PolarColumnChartData { xValue = "Oct", yValue = 4.1 },
new PolarColumnChartData { xValue = "Nov", yValue = -3.8 },
new PolarColumnChartData { xValue = "Dec", yValue = -6.8 },
};
visible = true,
height = 10,
width = 10,
shape = "Pentagon",
};
return View();
}
{
}
}
}
Stacked Column
To render a stacked column draw type, use series drawType as StackingColumn .
343
view
polar-stackedcolumn.cs
<ejs-chart id="container" load="window.onChartLoad" title="GDP, Current Prices (in B

illions)">
<e-chart-primaryxaxis valueType="Category" labelPlacement="OnTicks" int
erval="1" coefficient="100"></e-chart-primaryxaxis>
<e-chart-primaryyaxis minimum="0" maximum="20000" interval="5000"></e-c
hart-primaryyaxis>
th="2" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar" drawType="@Syncfus
ion.EJ2.Charts.ChartDrawType.StackingColumn"></e-series>
sion.EJ2.Charts.ChartDrawType.StackingColumn"></e-series>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult PolarStackedColumn()
{
List<PolarStackedColumnData> data = new List<PolarStackedColumnData>
{
new PolarStackedColumnData { x= "JPN", text = "Japan", y= 5156, y1=
4849, y2= 4382, y3= 4939 },
new PolarStackedColumnData { x= "DEU", text = "Germany", y= 3754, y1
344
= 3885, y2= 3365, y3= 3467 },
new PolarStackedColumnData { x= "FRA", text = "France", y= 2809, y1=
2844, y2= 2420, y3= 2463 },
new PolarStackedColumnData { x= "GBR", text = "UK", y= 2721, y1= 3002
, y2= 2863, y3= 2629 },
new PolarStackedColumnData { x= "BRA", text = "Brazil", y= 2472, y1=
2456, y2= 1801, y3= 1799 },
new PolarStackedColumnData { x= "RUS", text = "Russia", y= 2231, y1=
2064, y2= 1366, y3= 1281 },
new PolarStackedColumnData { x= "ITA", text = "Italy", y= 2131, y1=
2155, y2= 1826, y3= 1851 },
new PolarStackedColumnData { x= "IND", text = "India", y= 1857, y1=
2034, y2= 2088, y3= 2256 },
new PolarStackedColumnData { x= "CAN", text = "Canada", y= 1843, y1=
1793, y2= 1553, y3= 1529 }
};
return View();
}
public class PolarStackedColumnData
{
public string x;
public double y;
public double y1;
public double y2;
public double y3;
public string text;
}
}
}
Range Column
To render a range column draw type, use series drawType as RangeColumn .
view
polar-rangecolumn.cs
<ejs-chart id="container" load="window.onChartLoad" title="Maximum and Minimum Tempera

ture">
<e-chart-primaryxaxis interval="1" coefficient="100" labelPlacement="On
Ticks" startAngle=90 valueType="Category"></e-chart-primaryxaxis>
<e-chart-primaryyaxis minimum="0" maximum="20" interval="5" labelFormat=
"{value}˚C"></e-chart-primaryyaxis>
345
<e-series dataSource="ViewBag.dataSource" border="border" name="Ger
many" xName="x" width="2" low="low" high="high" type="@Syncfusion.EJ2.Charts.ChartSerie
sType.Polar" drawType="@Syncfusion.EJ2.Charts.ChartDrawType.RangeColumn"></e-series>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
// GET: PolarRadarRangeColumn
public ActionResult PolarRadarRangeColumn()
{
List<PolarRangeColumnData> data = new List<PolarRangeColumnData>
{
new PolarRangeColumnData { x= "Jan", low= 2.7, high= 7.1 },
new PolarRangeColumnData { x= "Feb", low= 3.9, high= 7.7 },
new PolarRangeColumnData { x= "Mar", low= 3.2, high= 7.5 },
new PolarRangeColumnData { x= "Apr", low= 4.5, high= 9.8 },
new PolarRangeColumnData { x= "May", low= 6.7, high= 11.4 },
new PolarRangeColumnData { x= "June", low= 8.4, high= 14.4 },
new PolarRangeColumnData { x= "July", low= 11.6, high= 17.2 },
new PolarRangeColumnData { x= "Aug", low= 12.7, high= 17.9 },
new PolarRangeColumnData { x= "Sep", low= 9.5, high= 15.1 },
new PolarRangeColumnData { x= "Oct", low= 5.0, high= 10.5 },
new PolarRangeColumnData { x= "Nov", low= 3.2, high= 7.9 },
new PolarRangeColumnData { x= "Dec", low= 6.1, high= 9.1 }
};
ViewBag.border = new ChartBorder { Width = 3, Color = "white" };
ViewBag.data = new string[] { "Polar", "Radar" };
return View();
}
public class PolarRangeColumnData
{
public string x;
public double low;
public double high;
346
}
}
}
Scatter
To render a scatter draw type, use series drawType as Scatter .
view
polar-scatter.cs
<ejs-chart id="container" load="window.onChartLoad" title="Real GDP Growth">

<e-chart-primaryyaxis minimum="0" maximum="8" interval="2"></e-char
t-primaryyaxis>
<e-chart-primaryxaxis interval="1" coefficient="100" labelPlacement=
"OnTicks" valueType="Category"></e-chart-primaryxaxis>
<e-series dataSource="ViewBag.dataSource" marker="marker" name=
"2015" xName="x" width="2" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar"
drawType="@Syncfusion.EJ2.Charts.ChartDrawType.Scatter"></e-ser
ies>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
// GET: PolarRadarScatter
public ActionResult PolarRadarScatter()
{
List<PolarScatterData> data = new List<PolarScatterData>
{
new PolarScatterData { text= "Myanmar", x= "MMR", y= 7.3 },
347
new PolarScatterData { text= "India", x= "IND", y= 7.9 },
new PolarScatterData { text= "Bangladesh", x= "BGD", y= 6.8 },
new PolarScatterData { text= "Cambodia", x= "KHM", y= 7.0 },
new PolarScatterData { text= "China", x= "CHN", y= 6.9 },
new PolarScatterData { text= "Bhutan", x= "BTN", y= 6.1 },
new PolarScatterData { text= "Iceland", x= "ISL", y= 4.1 },
new PolarScatterData { text= "Nepal", x= "NPL", y= 2.7 },
new PolarScatterData { text= "Pakistan", x= "PAK", y= 4.0 },
new PolarScatterData { text= "Poland", x= "POL", y= 3.9 },
new PolarScatterData { text= "Australia", x= "AUS", y= 2.4 },
new PolarScatterData { text= "Korea", x= "KOR", y= 2.8 },
new PolarScatterData { text= "Singapore", x= "SGP", y= 1.9 },
new PolarScatterData { text= "Canada", x= "CAN", y= 0.9 },
new PolarScatterData { text= "Germany", x= "DEU", y= 1.5 },
new PolarScatterData { text= "Denmark", x= "DNK", y= 1.6 },
new PolarScatterData { text= "France", x= "FRA", y= 1.3 },
new PolarScatterData { text= "Austria", x= "AUT", y= 1.0 }
};
height = 10,
width = 10,
dataLabel = new { name = "text" }
};
return View();
}
public class PolarScatterData
{
public string text;
public string x;
public double y;
}
}
}
Radar Chart
To render a radar series, use series type as Radar .
Draw Type
Line
To render a line draw type, use series drawType as Line . isClosed property specifies
whether to join start and end point of a line series used in polar chart to form a closed path.
Default value of isClosed is true.
348
view
radar-line.cs

- 2016">
axis>
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Radar"></e-series>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult PolarLine()
{
List<RadarLineChartData> chartData = new List<RadarLineChartData>
{
new RadarLineChartData { xValue = "Jan", yValue = -7.1 },
new RadarLineChartData { xValue = "Feb", yValue = -3.7 },
new RadarLineChartData { xValue = "Mar", yValue = 0.8 },
new RadarLineChartData { xValue = "Apr", yValue = 6.3 },
new RadarLineChartData { xValue = "May", yValue = 13.3 },
new RadarLineChartData { xValue = "Jun", yValue = 18.0 },
new RadarLineChartData { xValue = "Jul", yValue = 19.8 },
new RadarLineChartData { xValue = "Aug", yValue = 18.1 },
new RadarLineChartData { xValue = "Sep", yValue = 13.1 },
new RadarLineChartData { xValue = "Oct", yValue = 4.1 },
new RadarLineChartData { xValue = "Nov", yValue = -3.8 },
new RadarLineChartData { xValue = "Dec", yValue = -6.8 },
349
};
visible = true,
height = 10,
width = 10,
shape = "Pentagon",
};
return View();
}
public class RadarLineChartData
{
}
}
}
Customization
Start Angle
You can customize the start angle of the polar series using startAngle property. By default,
startAngle is 0 degree.
view
start-angle.cs

- 2016">
gory" title="Months"
startAngle="90"></e-chart-primaryxaxis>
axis>
on.EJ2.Charts.ChartDrawType.Column"></e-series>
</ejs-chart>
350
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult PolarColumn()
{
List<PolarColumnChartData> chartData = new List<PolarColumnChartData>
{
new PolarColumnChartData { xValue = "Jan", yValue = -7.1 },
new PolarColumnChartData { xValue = "Feb", yValue = -3.7 },
new PolarColumnChartData { xValue = "Mar", yValue = 0.8 },
new PolarColumnChartData { xValue = "Apr", yValue = 6.3 },
new PolarColumnChartData { xValue = "May", yValue = 13.3 },
new PolarColumnChartData { xValue = "Jun", yValue = 18.0 },
new PolarColumnChartData { xValue = "Jul", yValue = 19.8 },
new PolarColumnChartData { xValue = "Aug", yValue = 18.1 },
new PolarColumnChartData { xValue = "Sep", yValue = 13.1 },
new PolarColumnChartData { xValue = "Oct", yValue = 4.1 },
new PolarColumnChartData { xValue = "Nov", yValue = -3.8 },
new PolarColumnChartData { xValue = "Dec", yValue = -6.8 },
};
visible = true,
height = 10,
width = 10,
shape = "Pentagon",
};
return View();
}
{
}
}
}
Coefficient in axis
351
You can customize the radius of the polar series and radar series using coefficient property.
By default, coefficient is 100.
view
co-efficient.cs

- 2016">
axis>
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Polar" drawType="@Syncfus
ion.EJ2.Charts.ChartDrawType.Area"></e-series>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult PolarArea()
{
List<PolarAreaChartData> chartData = new List<PolarAreaChartData>
{
new PolarAreaChartData { xValue = "Jan", yValue = -7.1 },
new PolarAreaChartData { xValue = "Feb", yValue = -3.7 },
new PolarAreaChartData { xValue = "Mar", yValue = 0.8 },
new PolarAreaChartData { xValue = "Apr", yValue = 6.3 },
new PolarAreaChartData { xValue = "May", yValue = 13.3 },
new PolarAreaChartData { xValue = "Jun", yValue = 18.0 },
new PolarAreaChartData { xValue = "Jul", yValue = 19.8 },
new PolarAreaChartData { xValue = "Aug", yValue = 18.1 },
352
new PolarAreaChartData { xValue = "Sep", yValue = 13.1 },
new PolarAreaChartData { xValue = "Oct", yValue = 4.1 },
new PolarAreaChartData { xValue = "Nov", yValue = -3.8 },
new PolarAreaChartData { xValue = "Dec", yValue = -6.8 },
};
visible = true,
height = 10,
width = 10,
shape = "Pentagon",
};
return View();
}
{
}
}
}
See Also
Data label
Tooltip
353
Financial Charts
Financial charts are used to illustrate the movements in the price of a financial instrument over
time.
Chart supports the following financial series
Hilo
Hilo Series illustrates the price movements in stock using the high and low values. To render a
Hilo series, use series type as Hilo .
Hilo series requires 3 fields (x, high and low) to show the high and low price in the stock.
view
hilo.cs
<ejs-chart id="BollingerContainer" title="AAPL Historical"

load="window.onChartLoad" >
<e-chart-tooltipsettings enable="true" shared="true">
<e-chart-primaryxaxis valueType="DateTime" crosshairTooltip="crosshairT
ooltip"></e-chart-primaryxaxis>
<e-chart-crosshairsettings enable=true lineType="Vertical" line="line">
</e-chart-crosshairsettings>
<e-series xName="x" yName="y" low="low" high="high" name="Apple Inc"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Hilo"></e-se
ries>
</ejs-chart>
<script src="chart/series/hilo/financial-data.js"></script>
var date1 = new Date(2017,01,01);
var returnValue = window.chartData.filter(filterValue);
function filterValue(value) {
return value.x >= date1;
}
args.chart.series[0].dataSource = returnValue;
args.chart.primaryXAxis.minimum = new Date(2016, 12, 31);
args.chart.primaryXAxis.maximum = new Date(2017, 09, 31);
354
}
</script>
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult Hilo()
{
ViewBag.line = new
{
width = 0.02,
};
ViewBag.crosshairTooltip = new { enable = true };
return View();
}
}
}
High Low Open Close

HiloOpenClose series is used to represent the low, high, open and closing values over time. To
render a HiloOpenClose series, use series type as HiloOpenClose .
HiloOpenClose series requires 5 fields (x, high, low, open and close) to show the high, low, open
and close price values in the stock.
view
hilo-openclose.cs

355
<e-chart-crosshairsettings enable=true lineType="Vertical"></e-chart-cr
osshairsettings>
<e-series xName="x" yName="y" low="low" high="high" close="close" o
pen="open" name="Apple Inc"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.HiloOpenClos
e"></e-series>
</ejs-chart>
var date1 = new Date(2017, 01, 01);
}
}
</script>
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult HiloOpenClose()
{
ViewBag.line =new {
width= 0.02,
};
356
return View();
}
}
}
Customization of HiloOpenClose Series

In HiloOpenClose series, bullFillColor is used to fill the segment when the open value is
greater than the close value and bearFillColor is used to fill the segment when the open value
is less than the close value.
By default, bullFillColor is set as red and bearFillColor is set as green.
view
custom-openclose.cs

osshairsettings>
<e-series xName="x" yName="y" low="low" high="high" close="close" o
pen="open" name="Apple Inc"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.HiloOpenClos
e" bearFillColor="#2ecd71" bullFillColor="#e74c3d"></e-series>
</ejs-chart>
var date1 = new Date(2017, 01, 01);
}
357
}
</script>
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult HiloOpenClose()
{
ViewBag.line =new {
width= 0.02,
};
return View();
}
}
}
Candle
Candle series are similar to Hilo Open Close series, are used to represent the low, high, open
and closing price over time. To render a candle series, use series type as Candle .
view
candle.cs

load="window.onChartLoad" axisLabelRender="axisLabelRender">
<e-chart-primaryxaxis valueType="DateTime" crosshairTooltip="ViewBag.cr
osshairTooltip"></e-chart-primaryxaxis>
<e-chart-primaryyaxis title="Volume" majorGridLines="ViewBag.majorGridL
ines"
lineStyle="line" opposedPosition="true"
358
majorTickLines="line"></e-chart-primaryyaxis>
<e-chart-rows>
<e-chart-row height="30%"></e-chart-row>
</e-chart-rows>
<e-chart-axes>
<e-chart-axis name="secondary" opposedPosition=true rowIndex=1 mini
mum="100" maximum="180" interval="20"
labelFormat="${value}" title="Price" plotOffset=30 lineStyle="line"></e-ch
art-axis>
</e-chart-axes>
<e-series xName="x" yName="volume"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-
series>
<e-series xName="x" yName="y" low="low" high="high" open="open" clo
se="close" name="Apple Inc" yAxisName="secondary"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Candle"></e-
series>
</ejs-chart>
<script src="chart/series/candle/financial-data.js"></script>
}
}
</script>
using System;
using System.Linq;
using System.Web;
359
{
{
public ActionResult Candle()
{
ViewBag.crosshairTooltip= new { enable= true };
ViewBag.majorGridLines= new { width= 0.00001 };
return View();
}
}
}
Hollow Candles
Candle charts allow to visually compare the current price with previous price by customizing the
appearance.
Candles are filled/left as hollow based on the following criteria.
States Description
Filled candle sticks are filled when the close value is lesser than the open value
Unfilled candle sticks are unfilled when the close value is greater than the open value
The color of the candle will be defined by comparing with previous values.
Bear color will be applied when the current closing value is greater than the previous closing
value. Bull color will be applied when the current closing value is less than the previous closing
value.
By default, bullFillColor is set as red and bearFillColor is set as green.
Solid Candles
enableSolidCandles is used to enable/disable the solid candles. By default is set to be false.

The fill color of the candle will be defined by its opening and closing values.
bearFillColor will be applied when the opening value is less than the closing value.
bullFillColor will be applied when the opening value is greater than closing value.
view
solid-candles.cs
360
load="window.onChartLoad" axisLabelRender="axisLabelRender">
osshairTooltip"></e-chart-primaryxaxis>
<e-chart-primaryyaxis title="Volume" majorGridLines="ViewBag.majorGridL
ines"
lineStyle="line" opposedPosition="true"
majorTickLines="line"></e-chart-primaryyaxis>
<e-chart-rows>
</e-chart-rows>
<e-chart-axes>
<e-chart-axis name="secondary" opposedPosition=true rowIndex=1 mini
mum="100" maximum="180" interval="20"
labelFormat="${value}" title="Price" plotOffset=30 lineStyle="line"></e-ch
art-axis>
</e-chart-axes>
<e-series xName="x" yName="volume"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-
series>
<e-series xName="x" yName="y" low="low" high="high" open="open" clo
se="close" name="Apple Inc" yAxisName="secondary" bearFillColor="#2ecd71" bullFillColor=
"#e74c3d"
series>
</ejs-chart>
<script src="chart/series/candle/financial-data.js"></script>
}
}
361
</script>
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult Candle()
{
return View();
}
}
}
See Also
Data label
Tooltip
362
Box and whisker
To render a box and whisker chart, use series type as BoxAndWhisker . The field y requires n
number of data or it should contains minimum of five values to plot a segment.
view
box.cs
<ejs-chart id="container" title="Employee Age Group in Various Department">

<e-chart-primaryxaxis valueType="Category" edgeLabelPlacement="Shift" l
abelIntersectAction="Trim"></e-chart-primaryxaxis>
<e-chart-primaryyaxis minimum="10" maximum="60" interval="10" title="A
ge"></e-chart-primaryyaxis>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y"
name="Department" marker="marker" type="@Syncfusion.EJ2.C
harts.ChartSeriesType.BoxAndWhisker"></e-series>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult BoxAndWhisker()
{
Double[] y1 = { 22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34,
32, 34, 36, 35, 38 };
Double[] y2 = { 22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50 };
Double[] y3 = { 22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56 };
Double[] y4 = { 26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45 };
Double[] y5 = { 26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58 };
Double[] y6 = { 27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53 };
363
Double[] y7 = { 21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38 };
Double[] y8 = { 26, 28, 29, 30, 32, 33, 35, 36, 52 };
Double[] y9 = { 28, 29, 30, 31, 32, 34, 35, 36 };
List<BoxAndWhiskerChartData> chartData = new List<BoxAndWhiskerChartData>

{
new BoxAndWhiskerChartData { xValue = "Development", yValue = y1 },
new BoxAndWhiskerChartData { xValue = "Testing", yValue = y2},
new BoxAndWhiskerChartData { xValue = "HR", yValue = y3 },
new BoxAndWhiskerChartData { xValue = "Finance", yValue = y4 },
new BoxAndWhiskerChartData { xValue = "R&D", yValue = y5 },
new BoxAndWhiskerChartData { xValue = "Sales", yValue = y6 },
new BoxAndWhiskerChartData { xValue = "Inventory", yValue = y7 },
new BoxAndWhiskerChartData { xValue = "Graphics", yValue = y8 },
new BoxAndWhiskerChartData { xValue = "Training", yValue = y9 },
};
{
visible = true,
height = 10,
width = 10
};
ViewBag.gridlines = new { width = 0.00001 };
ViewBag.ticklines = new { width = 0.00001 };
return View();
}
public class BoxAndWhiskerChartData
{
public double[] yValue;
}
}
}
Customization of Box and Whisker series
boxPlotMode
You can change the rendering mode of the Box and Whisker series using the boxPlotMode
property. The default boxPlotMode is exclusive .The other boxPlotMode available are
inclusive and normal .
To render a box and whisker chart, use series type as BoxAndWhisker . The field y requires n
number of data or it should contains minimum of five values to plot a segment.
364
view
box-plot.cs

name="Department" marker="marker" type="@Syncfusion.EJ2.Charts.Char
tSeriesType.BoxAndWhisker" boxPlotMode="Normal"></e-series>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
{
Double[] y1 = { 22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34,
32, 34, 36, 35, 38 };
Double[] y2 = { 22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50 };
Double[] y3 = { 22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56 };
Double[] y4 = { 26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45 };
Double[] y5 = { 26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58 };
Double[] y6 = { 27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53 };
Double[] y7 = { 21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38 };
Double[] y8 = { 26, 28, 29, 30, 32, 33, 35, 36, 52 };
Double[] y9 = { 28, 29, 30, 31, 32, 34, 35, 36 };

{
365
};
{
visible = true,
height = 10,
width = 10
};
return View();
}
{
}
}
}
showMean
In Box and Whisker series showMean property is used to show the box and whisker average
value. The default value of showMean is false.
view
box-mean.cs

366
name="Department" marker="marker" type="@Syncfusion.EJ2.Charts.Char
tSeriesType.BoxAndWhisker" boxPlotMode="Normal" showMean="false" ></e-series>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
{
Double[] y1 = { 22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34,
32, 34, 36, 35, 38 };
Double[] y2 = { 22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50 };
Double[] y3 = { 22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56 };
Double[] y4 = { 26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45 };
Double[] y5 = { 26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58 };
Double[] y6 = { 27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53 };
Double[] y7 = { 21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38 };
Double[] y8 = { 26, 28, 29, 30, 32, 33, 35, 36, 52 };
Double[] y9 = { 28, 29, 30, 31, 32, 34, 35, 36 };

{
};
{
367
visible = true,
height = 10,
width = 10
};
return View();
}
{
}
}
}
Waterfall Chart
Waterfall chart helps to understand the cumulative effect of the sequentially introduced positive
and negative values. To render a Waterfall series, use series type as Waterfall .
intermediateSumIndexes property of waterfall is used to represent the in between the sum
values and sumIndexes is used to represent the cumulative sum values.
view
waterfall.cs
<ejs-chart id="container" title="Company Revenue and Profit">

<e-chart-primaryxaxis valueType="Category" plotOffset="20"></e-chart-pr
imaryxaxis>
<e-chart-primaryyaxis minimum="0" maximum="5000" interval="1000" title=
"Expenditure"></e-chart-primaryyaxis>
<e-series dataSource="ViewBag.dataSource" width=2
xName="x" yName="y" intermediateSumIndexes="ViewBag.inter
mediateSumIndexes" sumIndexes="ViewBag.sumIndexes"
name="USA" marker="marker" type="@Syncfusion.EJ2.Charts.C
hartSeriesType.Waterfall"></e-series>
</ejs-chart>
368
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult Waterfall()
{
List<WaterfallChartData> chartData = new List<WaterfallChartData>
{
new WaterfallChartData { xValue = "Income", yValue = 4711 },
new WaterfallChartData { xValue = "Sales", yValue = -1015 },
new WaterfallChartData { xValue = "Development", yValue = -688 },
new WaterfallChartData { xValue = "Revenue", yValue = 1030 },
new WaterfallChartData { xValue = "Balance" },
new WaterfallChartData { xValue = "Expense", yValue = -361 },
new WaterfallChartData { xValue = "Tax", yValue = -695 },
new WaterfallChartData { xValue = "Net Profit" },
};
ViewBag.intermediateSumIndexes = new int[] {4};
ViewBag.sumIndexes = new int[] {7};
ViewBag.chartArea = new
{
border = new
{
width = 0.1
}
};
ViewBag.marker=new
{
dataLabel= new { visible =true, font= new { color= "#ffffff" } }
};
return View();
}
public class WaterfallChartData
{
}
369
}
}
Customization of Waterfall Series
The negative changes of waterfall charts is represented by using negativeFillColor and the
summary changes are represented by using summaryFillColor properties.
By default, the negativeFillColor as ‘#E94649’ and the summaryFillColor as ‘#4E81BC’.
view
custom-waterfall.cs
<ejs-chart id="container" title="Company Revenue and Profit">

<e-chart-primaryxaxis valueType="Category" plotOffset="20"></e-chart-pr
imaryxaxis>
<e-chart-primaryyaxis minimum="0" maximum="5000" interval="1000" title=
"Expenditure"></e-chart-primaryyaxis>
<e-series dataSource="ViewBag.dataSource" width=2 negativeFillColor=
"#e56590"
xName="x" yName="y" intermediateSumIndexes="ViewBag.inter
mediateSumIndexes" sumIndexes="ViewBag.sumIndexes"
name="USA" marker="marker" type="@Syncfusion.EJ2.Charts.C
hartSeriesType.Waterfall"></e-series>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
// GET: Waterfall
public ActionResult Waterfall()
{
370
List<WaterfallChartData> chartData = new List<WaterfallChartData>
{
new WaterfallChartData { xValue = "Income", yValue = 4711 },
new WaterfallChartData { xValue = "Sales", yValue = -1015 },
new WaterfallChartData { xValue = "Development", yValue = -688 },
new WaterfallChartData { xValue = "Revenue", yValue = 1030 },
new WaterfallChartData { xValue = "Balance" },
new WaterfallChartData { xValue = "Expense", yValue = -361 },
new WaterfallChartData { xValue = "Tax", yValue = -695 },
new WaterfallChartData { xValue = "Net Profit" },
};
ViewBag.intermediateSumIndexes = new int[] {4};
ViewBag.sumIndexes = new int[] {7};
ViewBag.chartArea = new
{
border = new
{
width = 0.1
}
};
ViewBag.marker=new
{
dataLabel= new { visible =true, font= new { color= "#ffffff" } }
};
return View();
}
public class WaterfallChartData
{
}
}
}
Error Bar Chart

Error bars are graphical representations of the variability of data and used on graphs to indicate
the error or uncertainty in a reported measurement. To render the error bar for the series, set
visible as true in error bar object.
view
errorbar.cs
371
<ejs-chart id="container" load="window.onChartLoad" title="Sales Distribution of Car
by Region"
pointRender="pointRender">
<e-chart-primaryxaxis valueType="Category" interval=1></e-chart-primaryxaxis
>
<e-chart-primaryyaxis labelFormat="{value}%"
minimum=15 maximum=45 lineStyle="line"></e-chart-primaryyax
is>
<e-series dataSource="ViewBag.dataSource" name="Sales" xName="x" yName=
"y" marker="marker" errorBar="ViewBag.errorBar" type="@Syncfusion.EJ2.Charts.ChartSerie
sType.Line">
</e-series>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult ErrorBar()
{
List<ErrorBarChartData> chartData = new List<ErrorBarChartData>
{
new ErrorBarChartData { xValue = "IND", yValue = 24 },
new ErrorBarChartData { xValue = "AUS", yValue = 20 },
new ErrorBarChartData { xValue = "USA", yValue = 35 },
new ErrorBarChartData { xValue = "DEU", yValue = 27 },
new ErrorBarChartData { xValue = "ITA", yValue = 30 },
new ErrorBarChartData { xValue = "UK", yValue = 41 },
new ErrorBarChartData { xValue = "RUS", yValue = 26 }
};
372
ViewBag.gridlines = new { width = 0 };
ViewBag.linestyle = new { width = 0 };
ViewBag.marker = new {
Width = 10,
Height = 10
};
ViewBag.errorBar = new { visible = true, verticalError = 3, horizontalError
= 3 };
return View();
}
public class ErrorBarChartData
{
}
}
}
Changing Error Bar Type
To change the error bar rendering type using type option of error bar. To change the error bar
line length you can use verticalError property.
view
error-type.cs

by Region"
>
is>
sType.Line">
</e-series>
</ejs-chart>
373
using System;
using System.Linq;
using System.Web;
{
{
{
{
};
Width = 10,
Height = 10
};
ViewBag.errorBar = new { visible = true, type=Percentage, verticalError = 3
};
return View();
}
{
}
}
}
Customizing Error Bar Type
374
To customize the error bar type, set error bar type as Custom and then change the
horizontal/vertical positive and negative error of error bar.
view
custom-error.cs

by Region"
>
is>
sType.Line">
</e-series>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
{
{
375
};
Width = 10,
Height = 10
};
ViewBag.errorBar = new { visible = true, type="Custom", mode="Both", verti
calPostiveError=3, horizontalPositiveError=2,
verticalNegativeError=3, horizontalNegativeError=2
};
return View();
}
{
}
}
}
Changing Error Bar Mode
Error bar mode is used to define whether the error bar line has to be drawn horizontally, vertically
or in both side. To change the error bar mode use mode option.
view
error-mode.cs

by Region"
>
is>
376
sType.Line">
</e-series>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
{
{
};
Width = 10,
Height = 10
};
ViewBag.errorBar = new { visible = true, mode = "Horizontal" };
return View();
}
{
377
}
}
}
Changing Error Bar Direction
To change the error bar direction to plus, minus or both side using direction option.
view
error-direction.cs

by Region"
>
is>
sType.Line">
</e-series>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
{
378
{
};
Width = 10,
Height = 10
};
ViewBag.errorBar = new { visible = true, mode = "Horizontal", direction = "
Minus" };
return View();
}
{
}
}
}
Customizing Error Bar Cap
To customize the error bar cap length, width and fill color, you can use errorBarCap option.
view
error-cap.cs

by Region"
>
is>
379
sType.Line">
</e-series>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
{
{
};
Width = 10,
Height = 10
};
ViewBag.errorBar = new { visible = true, errorBarCap = new {
length = 10,
width = 10,
color = '#0000ff'
} };
380
return View();
}
{
}
}
}
Vertical Chart
In EJ2 chart, you can draw a chart in vertical manner by changing orientation of the axis. All
series types support this feature. You can use isTransposed property in chart to render a chart
in vertical manner.
view
vertical.cs
<ejs-chart id="lineContainer" title="Olympic Medal Counts - RIO" isTransposed="true">

<e-series dataSource="ViewBag.dataSource" xName='xValue' yName='yVa
lue'
line"></e-series>
</ejs-chart>
using System;
using System.Linq;
{
{
{
List<VerticalChartData> chartData = new List<VerticalChartData>
{
new VerticalChartData { xValue = "Sun", yValue = 15 },
new VerticalChartData { xValue = "Mon", yValue = 22 },
381
new VerticalChartData { xValue = "Tue", yValue = 32 },
new VerticalChartData { xValue = "Wed", yValue = 31 },
new VerticalChartData { xValue = "Thu", yValue = 29 },
new VerticalChartData { xValue = "Fri", yValue = 24 },
new VerticalChartData { xValue = "Sat", yValue = 18 },
};
return View();
}
{
}
}
}
See Also
Data label
Tooltip
382
Chart Series
Multiple Series
You can add multiple series to the chart by using series property. The series are rendered in
the order as it is added to the series array.
view
multiple-series.cs
rimaryxaxis>
lumn"></e-series>
e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
383
};
{
};
return View();
}
{
public string x;
}
}
}
Combination Series
Combination of different types like Line, column etc, can be rendered in a chart.
Bar series cannot be combined with any other series as the axis orientation is different from
other series.
view
combination.cs
rimaryxaxis>
lumn"></e-series>
384
name='Gold' type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"></e-
series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
{
};
return View();
}
{
385
public string x;
}
}
}
386
Technical Indicators
A technical indicator is a mathematical calculation based on historic price, volume or open
interest information that aims to forecast financial market direction.
Chart supports 10 types of technical indicators.
Accumulation Distribution
Accumulation Distribution combines price and volume to show how money may be flowing into or
out of stock. To render a Accumulation Distribution Indicator, use indicator type as
AccumulationDistribution . To calculate the signal line volume field is additionally added with
dataSource .
view
ad.cs
<ejs-chart id="ADIContainer" title="AAPL - 2012-2017" axisLabelRender="axisLabel"

load="window.onChartLoad">
<e-chart-primaryxaxis valueType= "DateTime" intervalType= "Months" majo
rGridLines="line"
zoomFactor=0.2 zoomPosition=0.6 crosshairTooltip="crosshairTooltip"></e-cha
rt-primaryxaxis>
<e-chart-primaryyaxis title = "Price" labelFormat = "${value}" minimum=
50 majorTickLines="line"
maximum=170 plotOffset=25 interval=30 rowIndex=1 opposedPosition=true
lineStyle = "line"></e-chart-primaryyaxis>
<e-chart-chartarea></e-chart-chartarea>
<e-chart-border width="0"></e-chart-border>
<e-chart-zoomsettings enablePinchZooming="true" enableSelectionZooming=
"true" mode="X"></e-chart-zoomsettings>
osshairsettings>
<e-chart-axes>
<e-chart-axis name="secondary"
opposedPosition=true rowIndex=0 interval=6000000000
lineStyle="line" minimum=-7000000000 maximum=50000000
00
majorTickLines="line" title="Accumulation Distributio
n">
</e-chart-axis>
387
</e-chart-axes>
<e-chart-rows>
</e-chart-rows>
<e-series xName="x" yName="y" low="low" high="high" close="close" v
olume="volume" open="open" width=2
name="Apple Inc" bearFillColor="#2ecd71" bullFillColor="
#e74c3d"
series>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Accum
ulationDistribution" field="Close" seriesName="Apple Inc" yAxisName="secondary" fill="#
6063ff"
period=3>
</e-indicator>
</e-indicators>
</ejs-chart>
<script src="chart/technical-indicators/ad/financial-data.js"></script>
args.chart.series[0].dataSource = window.chartData;
}
using System;
using System.Linq;
using System.Web;
{
{
// GET: AccumulationDistribution
public ActionResult AccumulationDistribution()
{
return View();
388
}
}
}
Average True Range (ATR)

ATR measures the stock volatility by comparing the current value with the previous value. To
render a Average True Range (ATR) Indicator, use indicator type as Atr .
view
atr.cs
<ejs-chart id="BollingerContainer" title="AAPL - 2012-2017"

<e-chart-primaryxaxis title="Price" valueType="DateTime" majorGridLines=
"line"
zoomFactor="0.2" zoomPosition="0.6" crosshairTooltip="crosshairTooltip"
></e-chart-primaryxaxis>
labelFormat="${value}" rowIndex=1 opposedPosition=true plotOffset="25" min
imum="50" maximum="170" interval="30"
lineStyle="line" majorTickLines="line"></e-chart-primaryyaxis>
<e-chart-zoomsettings enableSelectionZooming="true" mode="X"></e-chart-
zoomsettings>
osshairsettings>
<e-chart-axes>
opposedPosition=true rowIndex=0
majorGridLines="line" lineStyle="line"
majorTickLines="line" title="ATR">
</e-chart-axis>
</e-chart-axes>
<e-chart-rows>
</e-chart-rows>
name="Apple Inc" bearFillColor="#2ecd71" bullFillColor="#
e74c3d"
389
series>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Atr"
xName='x' field="Close" yAxisName='secondary' fill="bl
ue" period=3 seriesName="Apple Inc">
</e-indicator>
</e-indicators>
</ejs-chart>
<script src="chart/technical-indicators/atr/financial-data.js"></script>
}
using System;
using System.Linq;
using System.Web;
{
{
// GET: ATR
public ActionResult ATR()
{
ViewBag.Line = new
{
width = 0.0001
};
return View();
}
}
}
Bollinger Band
A chart overlay that shows the upper and lower limits of normal price movements based on the
standard deviation of prices. To render a Bollinger Band, use indicator type as BollingerBand .
Bollinger band will be represented by three lines (upperLine, lowerLine, signalLine).Bollinger
Band default values of the period is 14 and standardDeviations is 2.
390
view
bollinger.cs
<ejs-chart id="container" title="AAPL - 2012-2017"

<e-chart-primaryxaxis valueType="DateTime"
intervalType="Months"
zoomFactor=0.2 zoomPosition=0.6 crosshairTooltip="ViewBag.c
rosshairTooltip"></e-chart-primaryxaxis>
<e-chart-primaryyaxis title="Price" labelFormat="${value}M" minimum=50
maximum=170 interval=30 lineStyle="line" minorTickLines="li
ne"></e-chart-primaryyaxis>
<e-chart-zoomsettings enableSelectionZooming="true" enableDeferredZooming="
true"
enablePinchZooming="true" mode="@Syncfusion.EJ2.Chart
s.ZoomMode.X"></e-chart-zoomsettings>
<e-series xName="x" yName="y" low="low" high="high" close="close" volume
="volume" open="open" width=2
name="Apple Inc" animation="animation" bearFillColor="#2ecd71"
bullFillColor="#e74c3d"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Candle"></e-seri
es>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Bollinger
Bands" field="Close" seriesName="Apple Inc" fill="#606eff"
period=14 animation="indicatorAnimation" upperLine="ViewBa
g.upperLine" lowerLine="ViewBag.lowerLine">
</e-indicator>
</e-indicators>
<e-chart-crosshairsettings enable="true" lineType="Vertical"></e-chart-cros
shairsettings>
</ejs-chart>
<script src="chart/technical-indicators/bollinger/financial-data.js"></script>
}
using System;
391
using System.Linq;
using System.Web;
{
{
public ActionResult Bollinger()
{
ViewBag.animation = new { enable = true };
ViewBag.upperline = new { color = "#ffb735", width = 1 };
ViewBag.lowerline = new { color = "#f2ec2f", width = 1 };
ViewBag.linestyle = new { width = 0.00001 };
ViewBag.crosshairtooltip = new { enable = true };
return View();
}
}
}
Customization of BollingerBand
stroke , stroke-width , and color of upperLine can be customized by using, upperLine , and
the lowerLine can be customized by using lowerLine properties of indicator.
Exponential Moving Average (EMA)

Moving average Indicators are used to define the direction of the trend. To render a EMA
Indicator, use indicator type as Ema .
view
ema.cs

zoomFactor=0.2 zoomPosition=0.6 crosshairTooltip="crosshairTooltip"></e-ch
art-primaryxaxis>
392
labelFormat="${value}M" minimum=50 maximum=170 interval=30 majorTickLines="
line"
lineStyle="line"></e-chart-primaryyaxis>
<e-chart-zoomsettings enableSelectionZooming="true" mode="X"></e-chart-
zoomsettings>
osshairsettings>
name="Apple Inc" animation="animation" bearFillColor="#2e
cd71" bullFillColor="#e74c3d"
series>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Ema"
xName='x' field="Close" fill="blue" period=14 seriesName="Apple Inc">
</e-indicator>
</e-indicators>
</ejs-chart>
<script src="chart/technical-indicators/ema/financial-data.js"></script>
}
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult Bollinger()
{
393
return View();
}
}
}
Momentum
Momentum shows the speed at which the price of the stock is changing. To render a Momentum
indicator, use indicator type as Momentum . Momentum indicator will be represented by two
lines (upperLine, signalLine).In momentum indicator the upperBand value is always render at the
value 100.
view
momentum.cs

majorGridLines="line" crosshairTooltip="cross"
zoomFactor=0.2
zoomPosition=0.6
minimum=50
maximum=170
plotOffset=25
interval=30
rowIndex=1
opposedPosition=true
"true" mode="@Syncfusion.EJ2.Charts.ZoomMode.X"></e-chart-zoomsettings>
osshairsettings>
<e-chart-axes>
majorTickLines="line" minimum=80 maximum=120 interval=
394
20 title="Momentum">
</e-chart-axis>
</e-chart-axes>
<e-chart-rows>
</e-chart-rows>
e74c3d"
series>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Momen
tum"
field="Close" seriesName="Apple Inc" yAxisName="second
ary" fill="#6063ff"
period=3 upperLine="upperLine">
</e-indicator>
</e-indicators>
</ejs-chart>
<script src="chart/technical-indicators/momentum/financial-data.js"></script>
}
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult Momentum()
{
395
return View();
}
}
}
Customization of MomentumIndicator
stroke , stroke-width , and color of upperLine can be customized by using, upperLine ,

property of indicator.
view
custom-momentum.cs

majorGridLines="line" crosshairTooltip="cross"
zoomFactor=0.2
zoomPosition=0.6
minimum=50
maximum=170
plotOffset=25
interval=30
rowIndex=1
osshairsettings>
<e-chart-axes>
20 title="Momentum">
396
</e-chart-axis>
</e-chart-axes>
<e-chart-rows>
</e-chart-rows>
e74c3d"
series>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Momen
tum"
ary" fill="#6063ff"
period=3 upperLine="upperLine">
</e-indicator>
</e-indicators>
</ejs-chart>
<script src="chart/technical-indicators/momentum/financial-data.js"></script>
}
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult Momentum()
{
ViewBag.upperline = new { color = "#ff0000", width = 1 };
397
return View();
}
}
}
Moving Average Convergence Divergence (MACD)

MACD is based on the difference between two EMA's. To render a MACD Indicator, use indicator
type as MACD .MACD indicator will be represented by MACD line,signal line, MACD histogram.
MACD histogram is used to differentiate MACD line and signal line.
view
macd.cs

load="onChartLoad">
zoomFactor=0.2
zoomPosition=0.6
crosshairTooltip="crosshairTooltip"></e-chart-primaryxaxis>
minimum=50
maximum=170
plotOffset=25
interval=30
rowIndex=1
osshairsettings>
<e-chart-axes>
majorGridLines="line" lineStyle="lineStyle" minimum=-
3.5 maximum=3.5
398
interval=3 majorTickLines="line" title="MACD">
</e-chart-axis>
</e-chart-axes>
<e-chart-rows>
</e-chart-rows>
#e74c3d"
series>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Macd"
period=3
fastPeriod=8 slowPeriod=5 seriesName="Apple Inc" macdT
ype="Both"
width=2 macdPositiveColor="#2ecd71" macdNegativeColor=
"#e74c3d"
fill="#6063ff" yAxisName="secondary">
</e-indicator>
</e-indicators>
</ejs-chart>
<script src="chart/technical-indicators/macd/financial-data.js"></script>
}
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult MACD()
{
399
return View();
}
}
}
Customization of MACD
stroke , stroke-width , and color of macdLine can be customized by using, macdLine ,

property of indicator. The positive and negative changes of histogram can be customized by
macdPositiveColor and macdNegativeColor properties. The macdType is used to define the
type of MACD indicator. To customize the MACD period using slowPeriod and fastPeriod
properties.
view
custom-macd.cs

load="onChartLoad">
zoomFactor=0.2
zoomPosition=0.6
crosshairTooltip="crosshairTooltip"></e-chart-primaryxaxis>
minimum=50
maximum=170
plotOffset=25
interval=30
rowIndex=1
osshairsettings>
<e-chart-axes>
400
majorGridLines="line" lineStyle="lineStyle" minimum=-
3.5 maximum=3.5
interval=3 majorTickLines="line" title="MACD">
</e-chart-axis>
</e-chart-axes>
<e-chart-rows>
</e-chart-rows>
#e74c3d"
series>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Macd"
period=3
fastPeriod=8 slowPeriod=5 seriesName="Apple Inc" macdT
ype="Both"
width=2 macdPositiveColor="#2ecd71" macdNegativeColor=
"#e74c3d"
fill="#6063ff" yAxisName="secondary">
</e-indicator>
</e-indicators>
</ejs-chart>
<script src="chart/technical-indicators/macd/financial-data.js"></script>
}
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult MACD()
{
401
return View();
}
}
}
Relative Strength Index (RSI)

RSI shows how strongly a stock is moving in its current direction. To render a RSI Indicator, use
indicator type as Rsi .RSI indicator will be represented by three lines (upperBand, lowerBand,
signalLine). The upperBand and lowerBand values are customized by overBought and
overSold properties of indicator and the signalLine is calculated by RSI formula.
view
rsi.cs
<ejs-chart id="BollingerContainer" title="AAPL - 2012-2017" load="window.onChar

tLoad" >
<e-chart-primaryxaxis majorGridLines="line" valueType="DateTime" zoomFa
ctor="0.2" zoomPosition="0.6" crosshairTooltip="crosshair"></e-chart-primaryxaxis>
<e-chart-primaryyaxis minimum="50" maximum="170" interval="30" title="P
rice" lineStyle="line" majorTickLines="line" labelFormat="${value}M" rowIndex="1" oppos
edPosition="true"></e-chart-primaryyaxis>
<e-chart-axes>
lineStyle="line"
60 title="RSI">
</e-chart-axis>
</e-chart-axes>
<e-chart-rows>
</e-chart-rows>
#e74c3d"
series>
402
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Rsi"
ary" fill="#6063ff"
showZones=true overBought=70 overSold=30
period=3 upperLine="upperLine" lowerLine="lowerLine">
</e-indicator>
</e-indicators>
<e-chart-crosshairsettings enable="true" lineType="Vertical"></e-chart-
crosshairsettings>
<e-chart-tooltipsettings enable="true" shared="true"></e-chart-tooltips
ettings>
</ejs-chart>
<script src="chart/technical-indicators/rsi/financial-data.js"></script>
}
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult RSI()
{
ViewBag.upperLine = new { color = "#e74c3d" };
ViewBag.lowerLine = new { color = "#2ecd71" };
return View();
}
}
}
403
Simple Moving Average (SMA)
Moving average Indicators are used to define the direction of the trend. To render a SMA
Indicator, use indicator type as Sma .
view
sma.cs

<e-chart-primaryxaxis valueType="DateTime" intervaltype="Months" zoomFa
ctor="0.2" zoomPosition="0.6" majorGridLines="line" crosshairTooltip="crossHairTooltip">
</e-chart-primaryxaxis>
<e-chart-primaryyaxis minimum="50" maximum="170" interval="30" title="P
rice" lineStyle="line" majorTickLines="line" labelFormat="${value}M"></e-chart-primaryy
axis>
e74c3d"
series>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Sma"
field="Close" seriesName="Apple Inc" fill="#6063ff"
period=14 animation="indicatorAnimation">
</e-indicator>
</e-indicators>
<e-chart-zoomsettings enableDeferredZooming="true" enablePinchZooming="
true" enableSelectionZooming="true" mode="X"></e-chart-zoomsettings>
crosshairsettings>
ettings>
</ejs-chart>
<script src="chart/technical-indicators/sma/financial-data.js"></script>
}
using System;
404
using System.Linq;
using System.Web;
{
{
public ActionResult SMA()
{
return View();
}
}
}
Stochastic
It shows how a stock is, when compared to previous state. To render a Stochastic indicator, use
indicator type as Stochastic . stochastic indicator will be represented by four lines (upperLine,
lowerLine, periodLine, signalLine). In stochastic indicator the upperBand value and lowerBand
value is customized by overBought and overBought properties of indicators and the periodLine
and signalLine is render based on stochastic formula.
view
stochastic.cs

<e-chart-primaryxaxis valueType="DateTime" intervalType="Months" zoomF
actor="0.2" zoomPosition="0.6" crosshairTooltip="crosshairTooltip" majorGridLines="line"
<e-chart-primaryyaxis title="Price" minimum="75" maximum="170" interval=
"30" plotOffset="25" rowIndex="1" opposedPosition="true" majorTickLines="line" lineStyle
="line" labelFormat="{value}%"></e-chart-primaryyaxis>
<e-chart-axes>
lineStyle="line" minimum=0 maximum=120 interval=60
majorTickLines="line" title="Stochastic">
405
</e-chart-axis>
</e-chart-axes>
<e-chart-rows>
</e-chart-rows>
e74c3d"
series>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Stoch
astic" field="Close" seriesName="Apple Inc" yAxisName="secondary" fill="#6063ff"
kPeriod=2 dPeriod=3 showZones=true periodLine="periodL
ine"
</e-indicator>
</e-indicators>
ettings>
crosshairsettings>
</ejs-chart>
<script src="chart/technical-indicators/stochastic/financial-data.js"></script>
}
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult Stochastic()
406
{
ViewBag.upperLine =new { color = "#e74c3d" };
ViewBag.lowerLine = new { color = "#2ecd71" };
ViewBag.periodLine =new { color = "#f2ec2f" };
return View();
}
}
}
Customization of StochasticIndicator
stroke , stroke-width , and color of upperLine can be customized by using, upperLine , the
lowerLine can be customized by using lowerLine and the periodLine can be customized by
using periodLine properties of indicator. To customize the period to find the average price
using kPeriod and dPeriod properties.
view
custom-stochastic.cs

actor="0.2" zoomPosition="0.6" crosshairTooltip="crosshairTooltip" majorGridLines="line"
"30" plotOffset="25" rowIndex="1" opposedPosition="true" majorTickLines="line" lineStyle
="line" labelFormat="{value}%"></e-chart-primaryyaxis>
<e-chart-axes>
lineStyle="line" minimum=0 maximum=120 interval=60
majorTickLines="line" title="Stochastic">
</e-chart-axis>
</e-chart-axes>
<e-chart-rows>
</e-chart-rows>
407
e74c3d"
series>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Stoch
astic" field="Close" seriesName="Apple Inc" yAxisName="secondary" fill="#6063ff"
kPeriod=2 dPeriod=3 showZones=true periodLine="periodL
ine"
</e-indicator>
</e-indicators>
ettings>
crosshairsettings>
</ejs-chart>
<script src="chart/technical-indicators/stochastic/financial-data.js"></script>
}
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult Stochastic()
{
ViewBag.upperLine =new { color = "#0f0000" };
ViewBag.lowerLine = new { color = "#080000" };
ViewBag.periodLine =new { color = "#f2ec2f" };
408
return View();
}
}
}
Triangular Moving Average (TMA)

Moving average indicators are used to define the direction of the trend. To render a TMA
Indicator, use indicator type as TMA .
view
tma.cs
<ejs-chart id="BollingerContainer" title="AAPL - 2012-2017" load="window

.onChartLoad">
actor="0.2" zoomPosition="0.6" crosshairTooltip="crosshairtooltip" majorGridLines="line"
"30" labelFormat="{value}M" lineStyle="line" majorTickLines="line"></e-chart-primaryyax
is>
name="Apple Inc" animation="animation" bearFillColor="#2e
cd71" bullFillColor="#e74c3d"
series>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Tma"
field="Close" seriesName="Apple Inc" fill="#6063ff"
period=14 animation="animation">
</e-indicator>
</e-indicators>
crosshairsettings>
ettings>
</ejs-chart>
<script src="chart/technical-indicators/tma/financial-data.js"></script>
}
409
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult TMA()
{
return View();
}
}
}
Customization of Technical Indicators
stroke , stroke-width , and color of signalLine can be customized by using, fill , width
and dashArray properties and the period property is used to predict the data forecast
calculations. The field value is used to the compare the current price with previous price. It is
applicable to Bollinger bands and moving averages. The showZones property is used to
shows/Hides the overBought and overSold regions. It is applicable for RSI and stochastic
indicators.
view
custom-tma.cs

lumn"></e-series>
</ejs-chart>
410
using System;
using System.Linq;
{
{
{
{
};
return View();
}
{
public string x;
}
}
}
Data Source
Usually technical indicators are added along with a financial series. The seriesName represents
the series, the data of which has to be analysed through indicators.
Technical indicators can also be added without series using dataSource property of indicator.
view
datasource.cs
<ejs-chart id="ADIContainer" title="AAPL - 2012-2017" axisLabelRender="axisLabel"

<e-chart-primaryxaxis valueType= "DateTime" intervalType= "Months" majo
rGridLines="line"
zoomFactor=0.2 zoomPosition=0.6 crosshairTooltip="crosshairTooltip"></e-cha
rt-primaryxaxis>
<e-chart-primaryyaxis title = "Price" labelFormat = "${value}" minimum=
50 majorTickLines="line"
411
maximum=170 plotOffset=25 interval=30 rowIndex=1 opposedPosition=true
lineStyle = "line"></e-chart-primaryyaxis>
<e-chart-chartarea></e-chart-chartarea>
<e-chart-border width="0"></e-chart-border>
osshairsettings>
<e-chart-axes>
opposedPosition=true rowIndex=0 interval=6000000000
lineStyle="line" minimum=-7000000000 maximum=50000000
00
majorTickLines="line" title="Accumulation Distributio
n">
</e-chart-axis>
</e-chart-axes>
<e-chart-rows>
</e-chart-rows>
<e-indicators>
<e-indicator type="@Syncfusion.EJ2.Charts.TechnicalIndicators.Accum
ulationDistribution" field="Close" seriesName="Apple Inc" yAxisName="secondary" fill="#
6063ff"
period=3>
</e-indicator>
</e-indicators>
</ejs-chart>
<script src="chart/technical-indicators/ad/financial-data.js"></script>
}
using System;
using System.Linq;
using System.Web;
412
{
{
public ActionResult AccumulationDistribution()
{
return View();
}
}
}
413
Trendlines
Trendlines are used to show the direction and speed of price.
Trendlines can be generated for Cartesian type series (Line, Column, Scatter, Area, Candle, Hilo
etc.) except bar type series. You can add more than one trendline to a series.
Chart supports 6 types of trendlines.
Linear
A linear trendline is a best fit straight line that is used with simpler data sets. To render a linear
trendline, use trendline type as Linear .
view
linear.cs
<ejs-chart id="container" title="Historical Indian Rupee Rate (INR USD)">

<e-chart-primaryxaxis edgeLabelPlacement="Shift" majorGridLines="line">
<e-chart-primaryyaxis interval="10" title="Rupees against Dollars" majo
rTickLines="line" lineStyle="line"></e-chart-primaryyaxis>
<e-series name="Rupees" xName="x" yName="y" marker="marker" type="@
Syncfusion.EJ2.Charts.ChartSeriesType.Line" trendlines="ViewBag.trendLines">
</e-series>
</ejs-chart>
var series1 = [];
var yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11
, 11.36, 12.34, 12.60, 12.95,
13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41
, 48.32, 45.65, 46.61, 53.34, 58.53];
var point1;
var i;
var j = 0;
for (i = 1973; i <= 2013; i++) {
point1 = { x: i, y: yValue[j] };
j++;
}
414
var powerData = [
{ x: 1, y: 10 }, { x: 2, y: 50 }, { x: 3, y: 80 }, { x: 4, y: 110 },
{ x: 5, y: 180 }, { x: 6, y: 220 }, { x: 7, y: 300 }, { x: 8, y: 370 }, { x
: 9, y: 490 }, { x: 10, y: 500 }
];
</script>
using System;
using System.Linq;
using System.Web;
{
{
// GET: Trendlines
public ActionResult Trendlines()
{
ViewBag.marker = new { visible = true };
List<ChartTrendline> lines = new List<ChartTrendline>();
ChartTrendline line = new ChartTrendline();
line.Type = TrendlineTypes.Linear;
lines.Add(line);
ViewBag.trendLines = lines;
return View();
}
}
}
Exponential
An exponential trendline is a curved line that is most useful when data values rise or fall at
increasingly higher rates. You cannot create an exponential trendline, if your data contains zero
or negative values.
To render a exponential trendline, use trendline type as Exponential .
view
exponential.cs
415
</e-series>
</ejs-chart>
var series1 = [];
var yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11
, 11.36, 12.34, 12.60, 12.95,
13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41
, 48.32, 45.65, 46.61, 53.34, 58.53];
var point1;
var i;
var j = 0;
for (i = 1973; i <= 2013; i++) {
j++;
}
var powerData = [
{ x: 1, y: 10 }, { x: 2, y: 50 }, { x: 3, y: 80 }, { x: 4, y: 110 },
{ x: 5, y: 180 }, { x: 6, y: 220 }, { x: 7, y: 300 }, { x: 8, y: 370 }, { x
: 9, y: 490 }, { x: 10, y: 500 }
];
</script>
using System;
using System.Linq;
using System.Web;
{
{
416
// GET: Trendlines
{
line.Type = TrendlineTypes.Exponential;
lines.Add(line);
return View();
}
}
}
Logarithmic
A logarithmic trendline is a best-fit curved line that is most useful when the rate of change in the
data increases or decreases quickly and then levels out.
A logarithmic trendline can use negative and/or positive values.
To render a logarithmic trendline, use trendline type as Logarithmic .
view
logarithmic.cs

</e-series>
</ejs-chart>
var series1 = [];
var yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11
417
, 11.36, 12.34, 12.60, 12.95,
13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41
, 48.32, 45.65, 46.61, 53.34, 58.53];
var point1;
var i;
var j = 0;
for (i = 1973; i <= 2013; i++) {
j++;
}
var powerData = [
{ x: 1, y: 10 }, { x: 2, y: 50 }, { x: 3, y: 80 }, { x: 4, y: 110 },
{ x: 5, y: 180 }, { x: 6, y: 220 }, { x: 7, y: 300 }, { x: 8, y: 370 }, { x
: 9, y: 490 }, { x: 10, y: 500 }
];
</script>
using System;
using System.Linq;
using System.Web;
{
{
// GET: Trendlines
{
line.Type = TrendlineTypes.Logarithmic;
lines.Add(line);
return View();
}
}
}
418
Polynomial
A polynomial trendline is a curved line that is used when data fluctuates.
To render a polynomial trendline, use trendline type as Polynomial .
polynomialOrder used to define the polynomial value.
view
polynomial.cs

</e-series>
</ejs-chart>
var series1 = [];
var yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11
, 11.36, 12.34, 12.60, 12.95,
13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41
, 48.32, 45.65, 46.61, 53.34, 58.53];
var point1;
var i;
var j = 0;
for (i = 1973; i <= 2013; i++) {
j++;
}
var powerData = [
{ x: 1, y: 10 }, { x: 2, y: 50 }, { x: 3, y: 80 }, { x: 4, y: 110 },
{ x: 5, y: 180 }, { x: 6, y: 220 }, { x: 7, y: 300 }, { x: 8, y: 370 }, { x
: 9, y: 490 }, { x: 10, y: 500 }
];
</script>
419
using System;
using System.Linq;
using System.Web;
{
{
// GET: Trendlines
{
line.Type = TrendlineTypes.Polynomial;
lines.Add(line);
return View();
}
}
}
Power
A power trendline is a curved line that is best used with data sets that compare measurements
that increase at a specific rate.
To render a power trendline, use trendline type as Power .
view
power.cs

<e-series dataSource="powerData" name="Rupees" xName="x" yName="y"
420
marker="marker" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Scatter" trendlines="ViewB
ag.trendLines">
</e-series>
</ejs-chart>
var series1 = [];
var yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11
, 11.36, 12.34, 12.60, 12.95,
13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41
, 48.32, 45.65, 46.61, 53.34, 58.53];
var point1;
var i;
var j = 0;
for (i = 1973; i <= 2013; i++) {
j++;
}
var powerData = [
{ x: 1, y: 10 }, { x: 2, y: 50 }, { x: 3, y: 80 }, { x: 4, y: 110 },
{ x: 5, y: 180 }, { x: 6, y: 220 }, { x: 7, y: 300 }, { x: 8, y: 370 }, { x
: 9, y: 490 }, { x: 10, y: 500 }
];
</script>
using System;
using System.Linq;
using System.Web;
{
{
// GET: Trendlines
{
421
line.Type = TrendlineTypes.Power;
lines.Add(line);
return View();
}
}
}
Moving Average
A moving average trendline smoothen out fluctuations in data to show a pattern or trend more
clearly.
To render a moving average trendline, use trendline type as MovingAverage .
period property defines the period to find the moving average.
view
movingaverage.cs

ag.trendLines">
</e-series>
</ejs-chart>
var series1 = [];
var yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11
, 11.36, 12.34, 12.60, 12.95,
13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41
, 48.32, 45.65, 46.61, 53.34, 58.53];
var point1;
var i;
422
var j = 0;
for (i = 1973; i <= 2013; i++) {
j++;
}
var powerData = [
{ x: 1, y: 10 }, { x: 2, y: 50 }, { x: 3, y: 80 }, { x: 4, y: 110 },
{ x: 5, y: 180 }, { x: 6, y: 220 }, { x: 7, y: 300 }, { x: 8, y: 370 }, { x
: 9, y: 490 }, { x: 10, y: 500 }
];
</script>
using System;
using System.Linq;
using System.Web;
{
{
// GET: Trendlines
{
line.Type = TrendlineTypes.MovingAverage;
lines.Add(line);
return View();
}
}
}
Customization of Trendlines
The fill and width properties are used to customize the appearance of the trendline.
view
423
custom-trendline.cs

ag.trendLines">
</e-series>
</ejs-chart>
var series1 = [];
var yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11
, 11.36, 12.34, 12.60, 12.95,
13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41
, 48.32, 45.65, 46.61, 53.34, 58.53];
var point1;
var i;
var j = 0;
for (i = 1973; i <= 2013; i++) {
j++;
}
var powerData = [
{ x: 1, y: 10 }, { x: 2, y: 50 }, { x: 3, y: 80 }, { x: 4, y: 110 },
{ x: 5, y: 180 }, { x: 6, y: 220 }, { x: 7, y: 300 }, { x: 8, y: 370 }, { x
: 9, y: 490 }, { x: 10, y: 500 }
];
</script>
using System;
using System.Linq;
using System.Web;
424
{
{
// GET: Trendlines
{
line.Type = TrendlineTypes.MovingAverage;
line.Width = 3;
line.Name = "MovingAverage";
line.Fill = "#C64A75";
lines.Add(line);
return View();
}
}
}
Forecasting
Trendlines forecasting is the prediction of future/past situations.
Forecasting can be classified into two types as follows
Forward Forecasting Backward Forecasting
Forward Forecasting
The value set for forwardForecast is used to determine the distance moving towards the future
trend.
view
forward-forecast.cs

425
</e-series>
</ejs-chart>
var series1 = [];
var yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11
, 11.36, 12.34, 12.60, 12.95,
13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41
, 48.32, 45.65, 46.61, 53.34, 58.53];
var point1;
var i;
var j = 0;
for (i = 1973; i <= 2013; i++) {
j++;
}
var powerData = [
{ x: 1, y: 10 }, { x: 2, y: 50 }, { x: 3, y: 80 }, { x: 4, y: 110 },
{ x: 5, y: 180 }, { x: 6, y: 220 }, { x: 7, y: 300 }, { x: 8, y: 370 }, { x
: 9, y: 490 }, { x: 10, y: 500 }
];
</script>
using System;
using System.Linq;
using System.Web;
{
{
// GET: Trendlines
{
426
line.ForwardForecast = 5;
lines.Add(line);
return View();
}
}
}
Backward Forecasting
The value set for the backwardForecast is used to determine the past trends.
view
backward-forecast.cs

</e-series>
</ejs-chart>
var series1 = [];
var yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11
, 11.36, 12.34, 12.60, 12.95,
13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41
, 48.32, 45.65, 46.61, 53.34, 58.53];
var point1;
var i;
var j = 0;
for (i = 1973; i <= 2013; i++) {
j++;
}
var powerData = [
427
{ x: 1, y: 10 }, { x: 2, y: 50 }, { x: 3, y: 80 }, { x: 4, y: 110 },
{ x: 5, y: 180 }, { x: 6, y: 220 }, { x: 7, y: 300 }, { x: 8, y: 370 }, { x
: 9, y: 490 }, { x: 10, y: 500 }
];
</script> <ejs-chart id="container" title="Historical Indian Rupee Rate (INR USD)">
</e-series>
</ejs-chart>
var series1 = [];
var yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11
, 11.36, 12.34, 12.60, 12.95,
13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41
, 48.32, 45.65, 46.61, 53.34, 58.53];
var point1;
var i;
var j = 0;
for (i = 1973; i <= 2013; i++) {
j++;
}
var powerData = [
{ x: 1, y: 10 }, { x: 2, y: 50 }, { x: 3, y: 80 }, { x: 4, y: 110 },
{ x: 5, y: 180 }, { x: 6, y: 220 }, { x: 7, y: 300 }, { x: 8, y: 370 }, { x
: 9, y: 490 }, { x: 10, y: 500 }
];
</script>
using System;
using System.Linq;
using System.Web;
428
{
{
// GET: Trendlines
{
line.BackwardForecast= 5;
lines.Add(line);
return View();
}
}
}
429
Data Markers
Data markers are used to provide information about the data points in the series. You can add a
shape to adorn each data point.
Marker
Markers can be added to the points by enabling the visible option of the marker property.
view
marker.cs
@ControlSection {
ne"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
visible = true
430
};
return View();
}
{
public string x;
}
}
}
Shape
Markers can be assigned with different shapes such as Rectangle, Circle, Diamond etc using the
shape property.
view
shape.cs

marker= "ViewBag.marker"
lumn"></e-series>
</ejs-chart>
using System;
using System.Linq;
{
{
{
{
431
};
visible = true;
shape = "Diamond";
};
return View();
}
{
public string x;
}
}
}
Note : To know more about the marker shape type refer the shape .
Images
Apart from the shapes, you can also add custom images to mark the data point using the
imageUrl property.
view
images.cs
@ControlSection {
marker = "ViewBag.marker"
lumn"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
432
{
{
{
{
};
visible = true;
imageUri = "./images/sun_annotation.png";
};
return View();
}
{
public string x;
}
}
}
Customization
Marker's color and border can be customized using fill and border properties.
view
custom.cs
@ControlSection {
lumn"></e-series>
</ejs-chart>
}
433
using System;
using System.Linq;
{
{
{
{
new ChartData { x= "CHN", yValue= 26 }
};
visible = true;
height = 20;
width = 20;
}
return View();
}
{
public string x;
}
}
}

You can also customize the specific marker and label using pointRender event. pointRender
event allows you to change the shape, color and border for a point.
view
custom-point.cs

434
lumn"></e-series>
</ejs-chart>
using System;
using System.Linq;
{
{
{
{
new ChartData { x= "CHN", yValue= 26 }
};
visible = true
}
return View();
}
{
public string x;
}
}
}
435
Data Labels
Data label can be added to a chart series by enabling the visible option in the dataLabel. By
default, the labels will arrange smartly without overlapping.
view
datalabel.cs

marker="ViewBag.Marker"
lumn"></e-series>
</ejs-chart>
using System;
using System.Linq;
{
{
{
{
};
ViewBag.Marker = new
{
dataLabel = new
{
visible = true,
font = new { fontWeight = "600" }
}
436
};
return View();
}
{
public string x;
}
}
}
Position
Using position property, you can place the label either on Top , Middle , Bottom or Outer
(outer is applicable for column and bar type series).
view
position.cs

lumn"></e-series>
</ejs-chart>
using System;
using System.Linq;
{
{
{
{
437
};
{
dataLabel = new
{
visible = true,
}
};
return View();
}
{
public string x;
}
}
}
Note: The position Outer is applicable for column and bar type series.
Datalabel template
Label content can be formatted by using the template option. Inside the template, you can add
the placeholder text ${point.x} and ${point.y} to display corresponding data points x & y
value. Using template property, you can set data label template in chart.
view
template.cs

lumn"></e-series>
</ejs-chart>
using System;
using System.Linq;
438
{
{
{
{
};
{
dataLabel = new
{
visible = true,
}
};
return View();
}
{
public string x;
}
}
}
Text Mapping
Text from the data source can be mapped using name property.
view
mapping.cs

439
lumn"></e-series>
</ejs-chart>
using System;
using System.Linq;
{
{
{
{
new ColumnChartData { x= "USA", yValue= 46, name = "USA: 46" },
new ColumnChartData { x= "GBR", yValue= 27, name = "GBR: 27" },
new ColumnChartData { x= "CHN", yValue= 26, name = "CHN: 26 " }
};
{
dataLabel = new
{
visible = true,
name = "name",
}
};
return View();
}
{
public string x;
public string name;
}
}
}
Margin
440
margin for data label can be applied to using left , right , bottom and top properties.
view
margin.cs

lumn"></e-series>
</ejs-chart>
using System;
using System.Linq;
{
{
{
{
};
{
dataLabel = new
{
visible = true,
font = new { fontWeight = "600" },
margin = new { left = 13, right = 10, top= 0, bottom = 15}
}
};
return View();
}
441
{
public string x;
}
}
}
Customization
stroke and border of data label can be customized using fill and border properties.
Rounded corners can be customized using rx and ry properties.
view
custom.cs

lumn"></e-series>
</ejs-chart>
using System;
using System.Linq;
{
{
{
{
};
442
{
dataLabel = new
{
visible = true,
rx = 10, ry = 20,
border = new { color = "yellow", width = 2},
}
};
return View();
}
{
public string x;
}
}
}
Note: rx and ry properties requires border values not to be null.

You can also customize the specific marker and label using pointRender and textRender
event. pointRender event allows you to change the shape, color and border for a point, whereas
the textRender event allows you to change the text for the point.
view
custom-point.cs
@ControlSection {
<ejs-chart id="lineContainer" title="Olympic Medal Counts - RIO" textRender="text">
lumn"></e-series>
</ejs-chart>
<script>
function text(args) {
if(args.index = 2) {
args.cancel = true;
}
}
</script>
443
}
using System;
using System.Linq;
{
{
{
{
};
{
dataLabel = new
{
visible = true,
}
};
return View();
}
{
public string x;
}
}
}
444
Annotation
Annotations are used to mark the specific area of interest in the chart area with texts, shapes or
images.
You can add annotations to the chart by using the annotations option. By using the content
option of annotation object, you can specify the id of the element that needs to be displayed in
the chart area.
view
annotation.cs
lumn"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
ViewBag.content = "<div>Gold</div>";
ViewBag.content1 ="<div>Silver</div>";
445
return View();
}
{
public string x;
}
}
}
Region
Annotations can be placed either with respect to Series or Chart . by default, it will placed with
respect to Chart .
view
region.cs
lumn"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
446
};
return View();
}
{
public string x;
}
}
}
Co-ordinate Units
Specified the coordinates units of the annotation either Pixel or Point .
view
co-ordinate.cs
lumn"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
447
{
};
return View();
}
{
public string x;
}
}
}
Alignment
Annotation provides verticalAlignment and horizontalAlignment . The verticalAlignment
can be customized via Top , Bottom or Middle and the horizontalAlignment can be
customized via Near , Far or Center .
view
alignment.cs
lumn"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
448
{
{
{
{
};
return View();
}
{
public string x;
}
}
}
449
Legend
Legend provides information about the series rendered in the chart.
Position and Alignment

By using the position property, you can position the legend at left, right, top or bottom of the
chart. The legend is positioned at the bottom of the chart, by default.
view
default.cs
@CntrolSection {
<e-primaryxaxis valueType="DateTime" labelFormat="y" rangePadding="Additional"></e-

primaryxaxis>
<e-series dataSource="ViewBag.dataSource" marker="marker" name="England" xName=
"xValue" width="2" opacity="1" yName="yValue1" type="@Syncfusion.EJ2.Charts.ChartSeries
Type.Line"></e-series>
<e-series dataSource="ViewBag.dataSource" marker="marker" name="Russia" xName="
xValue" yName="yValue1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
450
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
}
}
}
Custom position helps you to position the legend anywhere in the chart using x, y coordinates.
view
position.cs
@CntrolSection {

primaryxaxis>
451
<e-chart-legend-settings position="Top"><e-chart-legend-settings>
</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}
452
{
}
}
}
Legend Alignment
You can align the legend as center , far or near to the chart using alignment property.
view
alignment.cs
@CntrolSection {

primaryxaxis>
</ejs-chart>
}
using System;
using System.Linq;
453
{
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
}
}
}
Customization
To change the legend icon shape, you can use legendShape property in the series . By default
legend icon shape is seriesType .
view
custom.cs
@CntrolSection {
454
primaryxaxis>
<e-chart-legend-settings shape="Square"><e-chart-legend-settings>
</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
455
Value1 = 84 },
};
return View();
}

{
}
}
}
Legend Size
By default, legend takes 20% - 25% of the chart's height horizontally, when it is placed on top or
bottom position and 20% - 25% of the chart's width vertically, when placed on left or right position
of the chart. You can change this default legend size by using the width and height property
of the legendSettings .
view
size.cs
@CntrolSection {

primaryxaxis>
<e-chart-legend-settings size="45%"><e-chart-legend-settings>
</ejs-chart>
}
456
using System;
using System.Linq;
{
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
}
}
}
Legend Item Size
457
You can customize the size of the legend items by using the shapeHeight and shapeWidth
property.
view
item-size.cs
@CntrolSection {

primaryxaxis>
<e-chart-legend-settings shapeWidth="10"><e-chart-legend-settings>
</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
Value1 = 28 },
458
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
}
}
}
Paging for Legend
Paging will be enabled by default, when the legend items exceeds the legend bounds. You can
view each legend items by navigating between the pages using navigation buttons.
view
paging.cs
@CntrolSection {

primaryxaxis>
459
<e-chart-legendsettings width="50"></e-chart-legendsettings>
</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
460
}
}
}
Series Selection on Legend

By default, legend click enables you to collapse the series visibility. On other hand, if you need to
select a series through legend click, disable the toggleVisibility .
view
selection.cs
@CntrolSection {

primaryxaxis>
<e-chart-legend-settings toggleVisibility=true><e-chart-legend-settings>
</ejs-chart>
}
using System;
using System.Linq;
{
461
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
}
}
}
Collapsing Legend Item

By default, series name will be displayed as legend. To skip the legend for a particular series,
you can give empty string to the series name.
view
collapse.cs
@CntrolSection {

primaryxaxis>
462
<e-series dataSource="ViewBag.dataSource" marker="marker" name="" xName="xValue"
width="2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"
></e-series>
width="2" opacity="1" yName="yValue1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Lin
e"></e-series>
yName="yValue1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
463
return View();
}

{
}
}
}
464
Tooltip
Chart will display details about the points through tooltip, when the mouse is moved over the
point.
Default Tooltip
By default, tooltip is not visible. Enable the tooltip by setting enable property to true.
view
default.cs

lumn"></e-series>
</ejs-chart>
using System;
using System.Linq;
{
{
{
{
};
return View();
}
465
{
public string x;
}
}
}
Format the Tooltip

By default, tooltip shows information of x and y value in points. In addition to that, you can show
more information in tooltip. For example the format '${series.name} ${point.x}' shows series name
and point x value.
view
format.cs

<e-chart-tooltipsettings enable="true" header="medal count" format="<b>${point.x} :
${point.y}</b>"></e-chart-tooltipsettings>
lumn"></e-series>
</ejs-chart>
using System;
using System.Linq;
{
{
{
{
466
};
return View();
}
{
public string x;
}
}
}
Tooltip Template
Any HTML elements can be displayed in the tooltip by using the ‘template’ property of the tooltip.
You can use the ${x} and ${y} as place holders in the HTML element to display the x and y
values of the corresponding data point.
view
template.cs

<e-chart-tooltipsettings enable="true" template="#Medal"></e-chart-tooltipsettings>
lumn"></e-series>
</ejs-chart>
<script id="medal" type="text/x-template">
<div id='templateWrap'>
<table style="width:100%; border: 1px solid black;">
<tr><th colspan="2" bgcolor="#00FFFF">medal</th></tr>
<tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
</table>
</div>
</script>
using System;
using System.Linq;
467
{
{
{
{
};
return View();
}
{
public string x;
}
}
}
Customize the Appearance of Tooltip

The fill and border properties are used to customize the background color and border of
the tooltip respectively. The textStyle property in the tooltip is used to customize the font of the
tooltip text.
view
custom-tooltip.cs

<e-chart-tooltipsettings enable="true" format="${series.name} ${point.x} : ${point
.y}" fill="#7bb4eb"></e-chart-tooltipsettings>
<e-series dataSource="ViewBag.dataSource" xName='x' yName='yValue' name='Go
ld' width=2
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</ejs-chart>
using System;
using System.Linq;
468
{
{
{
{
};
return View();
}
{
public string x;
}
}
}
469
Zooming and Panning
Enable Zooming
Chart can be zoomed in three ways.
Selection - By setting enableSelectionZooming property to true in zoomSettings , you can

zoom the chart by using the rubber band selection.
Mousewheel - By setting enableMouseWheelZooming property to true in zoomSettings , you
can zoomin and zoomout the chart by scrolling the mouse wheel.
Pinch - By setting enablePinchZooming property to true in zoomSettings , you can zoom the
chart through pinch gesture in touch enabled devices.
Pinch zooming is supported only in browsers that support multi-touch gestures.

Currently IE11, Chrome and Opera
browsers support multi-touch in desktop devices.
view
default.cs
<ejs-chart id="container" title="Sales History of Product X" load=" load" majorTic
kLines="majorTickLine" >
<e-chart-primaryxaxis title="Years" valueType="@Syncfusion.EJ2.Charts.Value
Type.DateTime" skeleton="yMMM" majorGridLines=(ViewBag.majorGridLines)></e-chart-prima
ryxaxis>
<e-chart-primaryyaxis title="Profit ($)" lineStyle="ViewBag.lineStyle" majo
rTickLines=(ViewBag.majorTickLines)>
</e-chart-primaryyaxis>
<e-chart-zoomsettings enableMouseWheelZooming="true" enablePinchZooming="t
rue" enableSelectionZooming="true" mode="X"></e-chart-zoomsettings>
<e-series name="Warmest" xName="x" width="2" opacity="1" yName="y" bord
er=(ViewBag.border) type="@Syncfusion.EJ2.Charts.ChartSeriesType.Area"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
470
using System.Web;
{
{
public ActionResult Zooming()
{
ViewBag.border = new ChartBorder { Width = 0.5, Color = "#00bdae" };
ViewBag.animation=new { enable= false };
return View();
}
}
}
After zooming the chart, a zooming toolbar will appear with zoom , zoomin , zoomout , pan and
reset buttons. Selecting the Pan option will allow to pan the chart and selecting the Reset
option will reset the zoomed chart.
Modes
The mode property in zoomSettings specifies whether the chart is allowed to scale along the
horizontal axis or vertical axis. The default value of the mode is XY (both axis).
There are three types of mode.
X - Allows us to zoom the chart horizontally.

Y - Allows us to zoom the chart vertically.
XY - Allows us to zoom the chart both vertically and horizontally.
view
mode.cs
ryxaxis>
471
<e-chart-zoomsettings enableSelectionZooming="true" mode="X"></e-chart-zoom
settings>
</ejs-chart>
}
<script>
var series1 = [];
var point1;
var value = 80;
var i;
for (i = 1; i < 500; i++) {
if (Math.random() > 0.5) {
value += Math.random();
}
else {
value -= Math.random();
}
point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
}
args.chart.series[0].dataSource = series1;
}
</script>
using System;
using System.Linq;
using System.Web;
{
{
{
472
return View();
}
}
}
Toolbar
By default, zoomin, zoomout, pan and reset buttons will be displayed for zoomed chart. You can
customize to show your desire tools in the toolbar using toolbarItems property.
view
toolbar.cs
<ejs-chart id="container" title="Sales History of Product X" load=" load" majorTickLines

="majorTickLine" >
ryxaxis>
<e-chart-zoomsettings enableMouseWheelZooming="true" enablePinchZooming="tr
ue" enableSelectionZooming="true" mode="X"
toolbarItems=(ViewBag.toolbarItems)></e-chart-zoomsettings>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
473
{
ViewBag.toolbarItems =new { "Zoom", "Pan", "Reset"};
return View();
}
}
}
Enable pan
Using enablePan property you can able to pan the zoomed chart without help of toolbar items.
view
pan.cs
Type.DateTime" skeleton="yMMM" majorGridLines=(ViewBag.majorGridLines)
ZoomFactor="0.5" ZoomPosition="0.2"></e-chart-primaryxaxis>
<e-chart-zoomsettings enablePan="true" mode="X"></e-chart-zoomsettings>
</ejs-chart>
}
using System;
using System.Linq;
using System.Web;
474
{
{
{
return View();
}
}
}
Auto interval on zooming

By using enableAutoIntervalOnZooming property, the axis interval will get calculated
automatically with respect to the zoomed range.
view
auto-interval.cs
kLines="majorTickLine" enableAutoIntervalOnZooming="true" >
ryxaxis>
<e-chart-zoomsettings enableSelectionZooming="true" mode="X"></e-chart-zoom
settings>
</ejs-chart>
}
475
using System;
using System.Linq;
using System.Web;
{
{
{
return View();
}
}
}
476
Crosshair
Crosshair has a vertical and horizontal line to view the value of the axis at mouse or touch
position.
Crosshair lines can be enabled by using enable property in the crosshair .
view
crosshair.cs
<ejs-chart id="container" title="Inflation - Consumer Price" >

<e-chart-primaryxaxis valueType="DateTime"></e-chart-primaryxaxis>
<e-chart-crosshairsettings enable=true lineType="Both"></e-chart-crossh
airsettings>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
public ActionResult Line()
{
List<LineChartData> chartData = new List<LineChartData>
{
new LineChartData { xValue = new DateTime(2005, 01, 01), yValue = 21 },
477
};
{
visible = true,
width = 10,
height = 10
};
return View();
}

{
}
}
}
Tooltip for axis

Tooltip label for an axis can be enabled by using enable property of crosshairTooltip in the
corresponding axis.
view
axis-tooltip.cs

oss"></e-chart-primaryxaxis>
<e-chart-primaryyaxis crosshairTooltip="ViewBag.cross"></e-chart-prima
ryyaxis>
airsettings>
</ejs-chart>
478
using System;
using System.Linq;
using System.Web;
{
{
{
{
};
{
visible = true,
width = 10,
height = 10
};
ViewBag.Cross = new
{
enable = true
};
return View();
}

{
}
}
}
Customization
479
The fill and textStyle property of the crosshairTooltip is used to customize the
background color and font style of the crosshair label respectively. Color and width of the
crosshair line can be customized by using the line property in the crosshair.
view
custom.cs

oss"></e-chart-primaryxaxis>
<e-chart-primaryyaxis crosshairTooltip="ViewBag.cross"></e-chart-prima
ryyaxis>
airsettings>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
{
{
};
480
{
visible = true,
width = 10,
height = 10
};
ViewBag.Cross = new
{
enable = true,
fill= "green"
};
ViewBag.CrossLine = new
{
enable = true,
Line = new {
width= 2,
color= "green"
}
};
return View();
}

{
}
}
}
Trackball
Trackball is used to track a data point closest to the mouse or touch position. Trackball marker
indicates the closest point and trackball tooltip displays the information about the point.
Trackball can be enabled by setting the enable property of the crosshair to true and shared
property in tooltip to true in chart.
view
trackball.cs
<ejs-chart id="lineContainer" title="Average Sales per Person" load="window.onChart

Load">
ettings>
481
crosshairsettings>
<e-chart-primaryxaxis valueType="DateTime" labelFormat="y" intervalType=
"Years" edgelabelPalcement="Shift" majorGridLines="line"></e-chart-primaryxaxis>
<e-chart-primaryyaxis labelFormat="{value}M" rangePadding="None" title=
"Revenue" minimum="10" maximum="80" lineStyle="line" majorTickLines="line"></e-chart-pr
imaryyaxis>
<e-series dataSource="ViewBag.dataSource" marker="marker" name="Joh
n" xName="xValue" width="2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.Cha
rtSeriesType.Line"></e-series>
<e-series dataSource="ViewBag.dataSource" marker="marker" name="And
rew" xName="xValue" width="2" opacity="1" yName="yValue1" type="@Syncfusion.EJ2.Charts.
<e-series dataSource="ViewBag.dataSource" marker="marker" name="Tho
mas" xName="xValue" width="2" opacity="1" yName="yValue2" type="@Syncfusion.EJ2.Charts.
</ejs-chart>
using System;
using System.Linq;
{
{
public IActionResult Trackball()

{
List<TrackballChartData> chartData = new List<TrackballChartData>
{
new TrackballChartData { xValue = new DateTime(2000, 2, 11), yValue = 14
, yValue1 = 39, yValue2 = 60 },
, yValue1 = 30, yValue2 = 55 },
, yValue1 = 28, yValue2 = 48 },
, yValue1 = 35, yValue2 = 57 },
, yValue1 = 39, yValue2 = 62 },
482
, yValue1 = 41, yValue2 = 64 },
, yValue1 = 45, yValue2 = 57 },
, yValue1 = 48, yValue2 = 53 },
, yValue1 = 54, yValue2 = 63 },
, yValue1 = 55, yValue2 = 50 },
, yValue1 = 57, yValue2 = 66 },
, yValue1 = 60, yValue2 = 65 },
, yValue1 = 60, yValue2 = 79 },
};
return View();
}
public class TrackballChartData

{
}
}
}
483
Selection
Chart provides selection support for the series and its data points on mouse click.
When Mouse is clicked on the data points, the corresponding series legend will also be
selected.
We have different type of selection mode for selecting the data. They are,
None
Point
Series
Cluster
DragXY
DragX
DragY
Point
You can select a point, by setting selectionMode to point.
view
point-selection.cs
<ejs-chart id="container" title="Age Distribution by Country"

selectionMode="Point">
<e-chart-primaryxaxis valueType="Category" interval="1" majorGridLines="lin
e"></e-chart-primaryxaxis>
<e-chart-primaryyaxis title="Countries" interval="20"></e-chart-primaryyaxis
>
<e-chart-legendsettings visible="true" toggleVisibility="false"></e-chart-l
egendsettings>
<e-series dataSource="ViewBag.dataSource" xName='x' yName='y1' name='Ag
e 0-14' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
e 65 & Above' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
<e-chart-tooltipsettings enable="false"></e-chart-tooltipsettings>
</ejs-chart>
484
using System;
using System.Linq;
using System.Web;
{
{
// GET: Selection
public ActionResult Selection()
{
List<SelectionChartData> chartData = new List<SelectionChartData>
{
new SelectionChartData { xValue = "CHN", yValue = 17, yValue1 = 54, yVa
lue2 = 9 },
new SelectionChartData { xValue = "USA", yValue = 19, yValue1 = 67, yVa
lue2 = 14 },
new SelectionChartData { xValue = "IDN", yValue = 29, yValue1 = 65, yVa
lue2 = 6 },
new SelectionChartData { xValue = "JAP", yValue = 13, yValue1 = 61, yVa
lue2 = 26 },
new SelectionChartData { xValue = "BRZ", yValue = 24, yValue1 = 68, yVa
lue2 = 8 }
};
ViewBag.data = new string[] { "Point", "Series", "Cluster", "None" };
return View();
}
public class SelectionChartData
{
}
}
}
Series
You can select a series, by setting selectionMode to series.
view
series-selection.cs
485
selectionMode="Series">
>
egendsettings>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
// GET: Selection
{
{
lue2 = 9 },
lue2 = 14 },
lue2 = 6 },
lue2 = 26 },
lue2 = 8 }
486
};
return View();
}
{
}
}
}
Cluster
You can select the points that corresponds to the same index in all the series, by setting
selectionMode to cluster.
view
cluster-selection.cs

selectionMode="Cluster">
>
egendsettings>
</ejs-chart>
using System;
487
using System.Linq;
using System.Web;
{
{
// GET: Selection
{
{
lue2 = 9 },
lue2 = 14 },
lue2 = 6 },
lue2 = 26 },
lue2 = 8 }
};
return View();
}
{
}
}
}
Rectangular selection
DragXY, DragX and DragY
To fetch the collection of data under a particular region, you have to set selectionMode as
DragXY .
DragXY - Allows us to select data with respect to horizontal and vertical axis.
488
DragX - Allows us to select data with respect to horizontal axis.
DragY - Allows us to select data with respect to vertical axis.
The selected data’s are returned as an array collection in the dragComplete event.
view
drag.cs
<ejs-chart id="container" title="Profit Comparision of A and B" load="load" select
ionMode="DragXY">
<e-chart-primaryxaxis minimum="1970" maximum="2016" majorGridLines="ViewBag
.majorTickLines")></e-chart-primaryxaxis>
<e-chart-primaryyaxis minimum="0" maximum="100" interval="25" title="Sales"
labelFormat="{value}%"></e-chart-primaryyaxis>
<e-series dataSource="ViewBag.dataSource" marker="marker1" name="Produc
t A" xName="x" opacity="1" yName="y1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Scat
ter"></e-series>
egendsettings>
</ejs-chart>
}
using System;
using System.Linq;
using System.Web;
{
{
// GET: RangeSelection
public ActionResult RangeSelection()
{
List<RangeSelectionChartData> chartData = new List<RangeSelectionChartData>
{
new RangeSelectionChartData { xValue = 1971, yValue = 50, yValue1 = 23
},
},
489
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
490
},
},
},
},
},
},
},
},
},
},
},
},
},
},
new RangeSelectionChartData { xValue = 2011, yValue = 9 , yValue1 = 35}
,
},
},
},
}
};
ViewBag.marker1= new {
shape= "Pentagon",
width= 10, height= 10
};
{
shape = "Triangle",
width = 10,
height = 10
491
};
ViewBag.data = new string[] { "DragXY", "DragyX", "DragY", "None" };
return View();
}
public class RangeSelectionChartData
{
}
}
}
Selection type
You can select multiple points or series, by enabling the isMultiSelect property.
view
selection-type.cs

selectionMode="Series" isMultiSelect="true">
>
egendsettings>
</ejs-chart>
using System;
using System.Linq;
using System.Web;
492
{
{
// GET: Selection
{
{
lue2 = 9 },
lue2 = 14 },
lue2 = 6 },
lue2 = 26 },
lue2 = 8 }
};
return View();
}
{
}
}
}
Selection on load
You can able to select a point or series programmatically on a chart using selectedDataIndexes
property.
view
onload.cs

493
>
egendsettings>
e 0-14' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" selectionStyle="ch
artSelection1"></e-series>
e 15-64' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" selectionStyle="c
hartSelection2"></e-series>
e 65 & Above' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" selectionSty
le="chartSelection3"></e-series>
</ejs-chart>
.chartSelection1 {
fill: red
}
.chartSelection2 {
fill: green
.chartSelection3 {
fill: blue
}
using System;
using System.Linq;
using System.Web;
{
{
// GET: Selection
494
{
{
lue2 = 9 },
lue2 = 14 },
lue2 = 6 },
lue2 = 26 },
lue2 = 8 }
};
return View();
}
{
}
}
}
Selection through on legend

You can able to select a point or series through on legend using toggleVisibility property.
view
selection-legend.cs

>
egendsettings>
495
</ejs-chart>
using System;
using System.Linq;
using System.Web;
{
{
// GET: Selection
{
{
lue2 = 9 },
lue2 = 14 },
lue2 = 6 },
lue2 = 26 },
lue2 = 8 }
};
return View();
}
{
}
}
496
}
Customization for selection

You can apply custom style to selected points or series with selectionStyle property.
view
custom-selection.cs

>
egendsettings>
e 0-14' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" selectionStyle="ch
artSelection1"></e-series>
e 15-64' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" selectionStyle="c
hartSelection2"></e-series>
e 65 & Above' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" selectionSty
le="chartSelection3"></e-series>
</ejs-chart>
.chartSelection1 {
fill: red
}
.chartSelection2 {
fill: green
.chartSelection3 {
fill: blue
}
497
using System;
using System.Linq;
using System.Web;
{
{
// GET: Selection
{
{
lue2 = 9 },
lue2 = 14 },
lue2 = 6 },
lue2 = 26 },
lue2 = 8 }
};
return View();
}
{
}
}
}
498
Print and Export
Print
The rendered chart can be printed directly from the browser by calling the public method print.
You can pass array of ID of elements or element to this method. By default it take element of the
chart.
view
print.cs

width="60%">
labelFormat="y"
rangePadding="None"
minimum=0
maximum=100
interval=20
</ejs-chart>
using System;
using System.Linq;
499
{
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
}
}
}
Export
The rendered chart can be exported to JPEG , PNG , SVG or PDF format by using export
method in chart. Input parameters for this method are Export Type for format and fileName of
result.
view
export.cs

width="60%">
500
labelFormat="y"
rangePadding="None"
minimum=0
maximum=100
interval=20
</ejs-chart>
using System;
using System.Linq;
{
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
501
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
}
}
}
502
Appearance
Custom Color Palette

You can customize the default color of series or points by providing a custom color palette of
your choice by using the palettes property.
view
custom.cs
<e-chart-primaryxaxis valueType="Category" palettes="ViewBag.palletes">
type="Column"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
503
new ColumnChartData { x= "GER", yValue= 26 }
new ColumnChartData { x= "UK", yValue= 26 }
};
ViewBag.palletes = ["#E94649", "#F6B53F", "#6FAAB0", "#C4C24A"];
return View();
}
{
public string x;
}
}
}
Point Level Customization

Marker, datalabel and fill color of each data point can be customized with pointRender and
textRender event.
view
point.cs
<ejs-chart id="lineContainer" title="Olympic Medal Counts - RIO" pointRender="poin
t">
lumn"></e-series>
</ejs-chart>
}
<script>
function point(args) {
args.fill = colors[args.point.index];
}
</script>
using System;
using System.Linq;
504
{
{
{
{
};
return View();
}
{
public string x;
}
}
}
Chart Area Customization

Customize the Chart Background
Using background and border properties, you can change the background color and border of
the chart.
view
area.cs
<ejs-chart id="lineContainer" title="Olympic Medal Counts - RIO" chartArea="ViewBag.ch
artBorder">
lumn"></e-series>
</ejs-chart>
505
}
using System;
using System.Linq;
{
{
{
{
};
ViewBag.chartBorder = new { color = 'red', width = 2}
return View();
}
{
public string x;
}
}
}
Chart Margin
You can set margin for chart from its container through margin property.
view
margin.cs
<ejs-chart id="lineContainer" title="Olympic Medal Counts - RIO" margin="ViewBag
.margin">
506
lumn"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
ViewBag.margin = new { right = 10, left = 20, top = 30, bottom = 40}
return View();
}
{
public string x;
}
}
}
Chart Area Background
The chart area background can be customized by using the [ background ] property in the
chartArea .
view
background.cs
507
lumn"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
return View();
}
{
public string x;
}
}
}
Animation
You can customize animation for a particular series using animation property. You can enable
or disable animation of the series using enable property, duration specifies the duration of an
animation and delay allows us to start the animation at desire time.
view
animation.cs
508
lumn"></e-series>
</ejs-chart>
}
using System;
using System.Linq;
{
{
{
{
};
return View();
}
{
public string x;
}
}
509
}
Chart Title
Chart can be given a title using title property, to show the information about the data plotted.
view
title.cs
<ejs-chart id="lineContainer" title="Olympic Medal Counts - RIO" titleStyle="ViewBag.s

tyle">
lumn"></e-series>
</ejs-chart>
using System;
using System.Linq;
{
{
{
{
};
ViewBag.style = new { fontFamily = "Arial", fontStyle = "italic", fontWeigh
t = "regular",
color = "#E27F2D", size = "23px" };
return View();
}
{
510
public string x;
}
}
}
511
Accessibility
Chart provides built-in compliance with the WAI-ARIA specifications. WAI-ARIA Accessibility
supports are achieved through the attributes like aria-label . It helps to provides information
about elements in a document for assistive technology.
Aria-label: Attribute provides the text label with some default description for below elements in
chart.
Element Default description
Datalabel Reads the Point y Value
Legend 'Click to show or hide the series'
Axis Title Reads the axis tile
Chart Title Reads the chart title
Series Points Read’s the Point x : Point y value
You can change this default description, using description property available in Datalabel ,
Legend , Axis Title and Chart object. It helps the screen reader to read for assistive
purpose.
512
Chart provide supports for internationalization for below chart elements.
Datalabel.
Axis label.
Tooltip.
For more information about number and date formatter you can refer internationalization .
Globalization
Globalization is the process of designing and developing an component that works in different
cultures/locales. Internationalization library is used to globalize number, date, time values in
Chart component using labelFormat property in axis.
Numeric Format
In the below example axis, point and tooltip labels are globalized to EUR.
view
number-format.cs

<e-chart-primaryyaxis labelFormat="n1"><e-chart-primaryyaxis>
lumn"></e-series>
</ejs-chart>
using System;
using System.Linq;
{
{
{
513
{
};
return View();
}
{
public string x;
}
}
}
514
Localization
Localization library allows to localize the default text content of Chart. In Chart component, it has
the static text on some features(like zooming toolbars) and this can be changed to any other
culture(Arabic, Deutsch, French, etc) by defining the locale value and translation object.
Locale key words Text to display
Zoom Zoom
ZoomIn ZoomIn
ZoomOut ZoomOut
Reset Reset
Pan Pan
ResetZoom Reset Zoom
To load translation object in an application use load function of L10n class.
For more information about localization, refer this localization
view
legend.cs

width="60%">
labelFormat="y"
rangePadding="None"
minimum=0
maximum=100
interval=20
515
</ejs-chart>
using System;
using System.Linq;
{
{

{
{
Value1 = 28 },
Value1 = 44 },
Value1 = 48 },
Value1 = 50 },
Value1 = 66 },
Value1 = 78 },
Value1 = 84 },
};
return View();
}

{
}
}
}
516
Overview
The CheckBox is a graphical user interface element that allows you to select one or more options
from the choices. It contains checked, unchecked, and indeterminate states.
Key Features
Supports different states.
Supports label and its position.
Supports small size.
517
Getting Started
This section briefly explains about how to create a simple CheckBox in your ASP.NET Core
Add CheckBox to the project

To create simple CheckBox add the ejs-checkbox tag with id attribute as element in your
Index.cshtml page.
view
default.cs
<ejs-checkbox id="default" label="Default"></ejs-checkbox>
public IActionResult Default()

{
return View();
}
Run the application

The following example shows a default rendering of CheckBox.
view
default.cs
<ejs-checkbox id="default" label="Default"></ejs-checkbox>

{
return View();
}
518
Change the CheckBox state
The Essential JS 2 CheckBox contains 3 different states visually, they are:
Checked
Unchecked
Indeterminate
The CheckBox checked property is used to handle the checked and unchecked state. In
checked state a tick mark will be added to the visualization of CheckBox.
Indeterminate
The CheckBox indeterminate state can be set through indeterminate property. CheckBox
indeterminate state masks the real value of CheckBox visually. The Checkbox cannot be
changed to indeterminate state through the user interface, this state can be achieved only
through the property.
view
state.cs
<ejs-checkbox id="checked" checked="true" label="Checked State"></ejs-checkbox>
<ejs-checkbox id="unchecked" label="Unchecked State"></ejs-checkbox>
<ejs-checkbox id="indeterminate" indeterminate="true" label="Intermediate State"></
ejs-checkbox>
}
<style>
.e-checkbox-wrapper {
margin-top: 18px;
}
li {
list-style: none;
}
</style>
public IActionResult State()

{
return View();
}
519
Label and Size
This section explains the different sizes and labels.
Label
The CheckBox caption can be defined by using the label property. This reduces the manual
addition of label for CheckBox. You can customize the label position before or after the
CheckBox through the labelPosition property.
view
label.cs
<ejs-checkbox id="cbox1" label="Left Side Label" labelPosition="before"></ejs-check
box>
<ejs-checkbox id="cbox2" label="Right Side Label" labelPosition="after" checked="tr
ue"></ejs-checkbox>
}
<style>
margin-top: 18px;
}
li {
list-style: none;
}
</style>
public ActionResult Label()

{
return View();
}
Size
520
The different CheckBox sizes available are default and small. To reduce the size of default
CheckBox to small, set the cssClass property to e-small .
view
size.cs
<ejs-checkbox id="cbox1" label="Small" cssClass="e-small"></ejs-checkbox>
<ejs-checkbox id="cbox2" label="Default"></ejs-checkbox>
}
<style>
margin-top: 18px;
}
li {
list-style: none;
}
</style>

{
return View();
}
521
Accessibility
interface controls with AJAX, HTML, JavaScript, and related technologies. CheckBox provides
built-in compliance with WAI-ARIA specifications. WAI-ARIA support is achieved through the
attributes like aria-checked and aria-disabled . It helps the people with disabilities by
providing information about the widget for assistive technology in the screen readers. CheckBox
component contains the checkbox role.
role Indicates the type of input element.
aria- Indicates whether the input is checked, unchecked, or represents mixture of

checked checked and unchecked values.
aria- Indicates that the element is perceivable but disabled, so it is not editable or
disabled otherwise operable.
Keyboard
Actions
shortcuts
When the checkbox has focus, pressing the Space key changes the
Space
state of the checkbox.
view
interaction.cs
<ejs-checkbox id="checked" checked="true" label="Checked State"></ejs-checkbox>
<ejs-checkbox id="unchecked" label="Unchecked State"></ejs-checkbox>
<ejs-checkbox id="indeterminate" indeterminate="true" label="Intermediate State"></
ejs-checkbox>
}
<style>
margin-top: 18px;
}
li {
list-style: none;
522
}
</style>
public IActionResult Interaction()

{
return View();
}
523
How To
Customize CheckBox Appearance

You can customize the appearance of the CheckBox component using the CSS rules. Define
own CSS rules according to your requirement and assign the class name to the cssClass
property.
The background and border color of the CheckBox is customized through the custom classes to
create primary, success, warning, and danger info type of checkbox.
view
custom.cs
<ejs-checkbox id="primary" checked="true" label="Primary" cssClass="e-primary"></ej
s-checkbox>
<ejs-checkbox id="success" checked="true" label="Success" cssClass="e-success"></ej
s-checkbox>
<ejs-checkbox id="info" checked="true" label="Info" cssClass="e-info"></ejs-checkbox
>
<ejs-checkbox id="warning" checked="true" label="Warning" cssClass="e-warning"></ej
s-checkbox>
<ejs-checkbox id="danger" checked="true" label="Danger" cssClass="e-danger"></ejs-c
heckbox>
}
<style>
margin-top: 18px;
}
li {
list-style: none;
}
.e-checkbox-wrapper.e-primary:hover .e-frame.e-check { /* csslint allow: adjoining-clas

ses */
background-color: #e03872;
}
.e-checkbox-wrapper.e-success .e-frame.e-check,
.e-checkbox-wrapper.e-success .e-checkbox:focus + .e-frame.e-check { /* csslint allow:
adjoining-classes */
524
background-color: #689f38;
}
.e-checkbox-wrapper.e-success:hover .e-frame.e-check { /* csslint allow: adjoining-clas

ses */
background-color: #449d44;
}
.e-checkbox-wrapper.e-info .e-frame.e-check,
.e-checkbox-wrapper.e-info .e-checkbox:focus + .e-frame.e-check { /* csslint allow: adj
oining-classes */
}
.e-checkbox-wrapper.e-info:hover .e-frame.e-check { /* csslint allow: adjoining-classes

*/
background-color: #0b7dda;
}
.e-checkbox-wrapper.e-warning .e-frame.e-check,
.e-checkbox-wrapper.e-warning .e-checkbox:focus + .e-frame.e-check { /* csslint allow:
adjoining-classes */
background-color: #ef6c00;
}
.e-checkbox-wrapper.e-warning:hover .e-frame.e-check { /* csslint allow: adjoining-clas

ses */
background-color: #cc5c00;
}
.e-checkbox-wrapper.e-danger .e-frame.e-check,
.e-checkbox-wrapper.e-danger .e-checkbox:focus + .e-frame.e-check { /* csslint allow: a
djoining-classes */
background-color: #d84315;
}
.e-checkbox-wrapper.e-danger:hover .e-frame.e-check { /* csslint allow: adjoining-class

es */
background-color: #ba3912;
}
</styles>
public ActionResult Custom()

{
525
return View();
}
Customize width and height

The height and width of the CheckBox component can be customized by setting height and
width property.
The following section explains about how to customize the height and width of the CheckBox
component.
view
customheight.cs
<ejs-checkbox id="customsize" cssClass="e-customsize" label="Default"></ejs-checkbox
>
}
<style>
margin-top: 30px;
}
.e-customsize.e-checkbox-wrapper .e-frame {
height: 30px;
width: 30px;
padding: 8px 0;
}
.e-customsize.e-checkbox-wrapper .e-check {
font-size: 20px;
}
.e-customsize.e-checkbox-wrapper .e-ripple-container {
height: 52px;
top: -11px;
width: 47px;
}
.e-customsize.e-checkbox-wrapper .e-label {
line-height: 30px;
font-size: 20px;
}
</style>
526
public ActionResult CustomHeight()
{
return View();
}
Name and Value in form submit

The name attribute of the CheckBox is used to group Checkboxes. When the Checkboxes are
grouped in form, the checked items value attribute will post to the server on form submit that can
be retrieved through the name. The disabled and unchecked CheckBox value will not be sent to
the server on form submit.
In the following code snippet, Cricket and Hockey are in the checked state, Tennis is in disabled
state and Basketball is in unchecked state. Now, the value that is in checked state only be sent
on form submit.
view
form.cs
<ejs-checkbox id="cbox2" name="Sport" value="Cricket" label="Cricket" checked="true"
></ejs-checkbox>
<ejs-checkbox id="cbox3" name="Sport" value="Hockey" label="Hockey" checked="true">
</ejs-checkbox>
<ejs-checkbox id="cbox4" name="Sport" value="Tennis" label="Tennis"></ejs-checkbox>
<ejs-checkbox id="cbox1" name="Sport" value="Basketball" label="Basketball"></ejs-c
heckbox>
<ejs-button id="primarybtn" content="Submit" isPrimary="true"></ejs-button>
}
<style>
margin-top: 18px;
}
button {
margin: 20px 0 0 5px;
}
li {
list-style: none;
527
}
</style>
public ActionResult Form()

{
return View();
}
Customized CheckBox
Custom Frame
CheckBox frame can be customized as per the requirement by adding CSS rules.
In the following example, to-do list is displayed with round checkbox by changing border-radius
as 100% by adding e-custom class.
view
customsize.cs
<ejs-checkbox id="cbox2" label="Buy Groceries" checked="true" cssClass="e-custom"></
ejs-checkbox>
<ejs-checkbox id="cbox3" label="Pay Rent" checked="true" cssClass="e-custom"></ejs-
checkbox>
<ejs-checkbox id="cbox4" label="Make Dinner" cssClass="e-custom"></ejs-checkbox>
<ejs-checkbox id="cbox1" label="Finish To-do List Article" cssClass="e-custom"></ej
s-checkbox>
}
<style>
li {
list-style: none;
}
margin-top: 18px;
}
.e-custom .e-frame {
border-radius: 100%;
528
}
.e-checkicon.e-checkbox-wrapper .e-frame.e-check::before {
content: '\e77d';
}
.e-checkicon.e-checkbox-wrapper .e-check {
font-size: 8.5px;
}
.e-checkicon.e-checkbox-wrapper .e-frame.e-check {
background-color: white;
border-color: grey;
color: grey;
}
.e-checkicon.e-checkbox-wrapper:hover .e-frame.e-check {
border-color: grey;
color: grey;
}
.e-checkicon.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check {

border-color: grey;
box-shadow: none;
color: grey;
}
</style>
public ActionResult CustomSize()

{
return View();
}
Custom Check Icon

CheckBox check icon can be customized as per the requirement by adding CSS rules.
In the following example, the check icon can be customized by changing check icon content,
background and border color in focus and hovered states by adding e-checkicon class.
view
529
customicon.cs
<ejs-checkbox id="cbox2" label="Buy Groceries" checked="true" cssClass="e-checkicon"
></ejs-checkbox>
<ejs-checkbox id="cbox3" label="Pay Rent" checked="true" cssClass="e-checkicon"></e
js-checkbox>
<ejs-checkbox id="cbox4" label="Make Dinner" cssClass="e-checkicon"></ejs-checkbox>
<ejs-checkbox id="cbox1" label="Finish To-do List Article" cssClass="e-checkicon"></
ejs-checkbox>
}
<style>
li {
list-style: none;
}
margin-top: 18px;
}
.e-checkicon.e-checkbox-wrapper .e-frame.e-check::before {
content: '\e77d';
}
.e-checkicon.e-checkbox-wrapper .e-check {
font-size: 8px;
}
.e-checkicon.e-checkbox-wrapper .e-frame.e-check {
border-color: grey;
color: grey;
}
.e-checkicon.e-checkbox-wrapper:hover .e-frame.e-check {
border-color: grey;
color: grey;
}
.e-checkicon.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check {

border-color: grey;
box-shadow: none;
color: grey;
}
530
.e-checkicon.e-checkbox-wrapper .e-ripple-element {
background: grey;
}
</style>
public ActionResult CustomIcon()

{
return View();
}
Right-To-Left
CheckBox component has RTL support. This can be achieved by setting enableRtl as true .
The following example illustrates how to enable right-to-left support in CheckBox component.
view
rtl.cs
<ejs-checkbox id="cbox2" label="Default" enableRtl="true"></ejs-checkbox>
}
<style>
margin-top: 18px;
}
li {
list-style: none;
}
</style>
public ActionResult Rtl()

{
return View();
531
}
532
Overview
The ColorPicker is a user interface that lets user to pick a color either by selecting the color
values or by adjusting the hue and opacity. It supports various color specifications like RGB
(Red, Green, and Blue), HSV (Hue, Saturation, and Value), and Hex codes.
Key Features
Mode And Value
Custom Palette
Accessibility
533
Getting Started
This section briefly explains about how to create a default ColorPicker in your ASP.NET Core
Add ColorPicker to the project

To create default ColorPicker add the ejs-colorpicker tag with id attribute as element in your
Index.cshtml page.
view
default.cs
// To render ColorPicker.
<ejs-colorpicker id="element"></ejs-colorpicker>

{
return View();
}
Run the application

The following example shows a default rendering of ColorPicker.
view
default.cs
<div class='wrap'>
<h4>Choose Color</h4>
// To render ColorPicker.
</div>
}
534
<style>
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
</style>

{
return View();
}
Inline Type
By default, the ColorPicker will be rendered using SplitButton and open the pop-up to access the
ColorPicker. To render the ColorPicker container alone and to access it directly, render it as
inline. It can be achieved by setting the inline property to true .
The following sample shows the inline type rendering of ColorPicker.
view
inline.cs
<div class='wrap'>
// To render component as inline.
<ejs-colorpicker id="element" inline="true"></ejs-colorpicker>
</div>
}
<style>
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
</style>
public IActionResult Inline()

{
return View();
}
535
The showButtons property is disabled in this sample because the control buttons are
not needed for inline type. To know about the control buttons functionality, refer to the
showButtons sample.
536
Mode and Value
Rendering Palette at initial load

By default, the Picker area will be rendered at initial load. To render the Palette area while
opening the ColorPicker pop-up, and specify the mode property as Palette .
In the following sample, it will render the Palette at initial load.
view
palette.cs
<div class='wrap'>
<h4>Select Color</h4>
//To render palette at initial load.
<ejs-colorpicker id="element" mode="Palette"></ejs-colorpicker>
</div>
}
<style>
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
</style>
public IActionResult Palette()

{
return View();
}
Color Value
The value property can be used to specify the color value to the ColorPicker. It supports either
three or six digit hex codes. To include opacity , set the color value as four or eight
digit hex code.
In the following sample, the color value sets as four digit hex code, the last digit represents the
opacity value.
view
537
value.cs
<div class='wrap'>
//To set color value.
<ejs-colorpicker id="element" value="035a" modeSwitcher="false"></ejs-colorpick
er>
</div>
}
<style>
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
</style>
public IActionResult Value()

{
return View();
}
The value property supports hex code with or without # prefix.
538
Accessibility
ARIA attributes
interface controls with AJAX, HTML, JavaScript, and related technologies. It helps to provide
information about the widget for assistive technology to the disabled person in screen reader.
ColorPicker provides built-in compliance with the WAI-ARIA specifications. WAI-ARIA supports is
achieved through the attributes like aria-label and aria-selected applied to the color palette
tiles.
To know about the accessibility of SplitButton, refer to the SplitButton Accessibility section.
role Specified as gridcell for the tiles in the color palette.
aria-label Holds the color of the tile.
aria-selected Indicates the current selected state of the tile.
To know about the keyboard interaction of SplitButton, refer to the SplitButton Keyboard
interaction section.
The following list of keys can be used to interact with the ColorPicker after the popup has
opened.
Press To do this
Upper Arrow Moves the handler/tile up from the current position.
Down Arrow Moves the handler/tile down from the current position.
Left Arrow Moves the handler/tile left from the current position.
Right Arrow Moves the handler/tile right from the current position.
Enter Apply the selected color value.

Tab To focus the next focusable element in the ColorPicker popup.
view
accessibility.cs
539
<div class='wrap'>
</div>
}
<style>
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
</style>
public IActionResult Accessibility()

{
return View();
}
540
How To
The following section explains how to customize various aspects of the ColorPicker.
Hide control buttons

ColorPicker can be rendered without control buttons (Apply/Cancel). In this case, while selecting
a color, the ColorPicker pop-up is closed and selected colors can be applied directly. To hide
control buttons, set the showButtons property to false .
view
show-buttons.cs
<div class='wrap'>
//To hide control buttons.
<ejs-colorpicker id="element" showButtons="false"></ejs-colorpicker>
</div>
}
<style>
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
</style>
public IActionResult ShowButtons()

{
return View();
}
Render Palette alone

To render the Palette alone in ColorPicker, specify the mode property as Palette , and set
the modeSwitcher property to false .
In the following sample, the showButtons property is disabled to hide the control buttons and it
renders only the Palette area.
view
541
palette-alone.cs
<div class='wrap'>
//To render Palette alone.
<ejs-colorpicker id="element" mode="Palette" modeSwitcher="false" showButtons="
false"></ejs-colorpicker>
</div>
}
<style>
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
</style>
public IActionResult PaletteAlone()

{
return View();
}
To render Picker alone specify the mode property as 'Picker'.
Custom Palette
By default, the Palette will be rendered with default colors. To load custom colors in the palette,
specify the colors in the presetColors property. To customize the color palette, add a custom
class to palette tiles using BeforeTileRender event.
The following sample demonstrates the above functionalities.
view
custom-palette.cs
<div class='wrap'>
<div id="preview"></div>
<h4>Select Color</h4>
//To render custom palette.
<ejs-colorpicker id="element" mode="Palette" modeSwitcher="false" inline="true"
showButtons="false" columns="4" presetColors="@ViewBag.customColors" beforeTileRender="
tileRender" change="onChange"></ejs-colorpicker>
</div>
542
}
<style>
.e-container {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
.e-container .e-palette .e-custom-tile {

border: 0;
color: #fff;
height: 36px;
font-size: 18px;
width: 36px;
line-height: 36px;
border-radius: 50%;
margin: 2px 5px;
}
.e-container .e-custom-palette.e-palette-group {
height: 182px;
}
.e-container .e-palette .e-custom-tile.e-selected::before {

content: '\e933';
}
.e-container .e-palette .e-custom-tile.e-selected {

outline: none;
}
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
#preview {
background-color: #ba68c8;
height: 50px;
width: 100%;
}
</style>
<script>
543
// Triggers while selecting colors from palette.
function onChange(args) {
document.getElementById('preview').style.backgroundColor = args.currentValue.he
x;
}
// Triggers before rendering each palette tile.

function tileRender(args) {
args.element.classList.add("e-icons");
args.element.classList.add("e-custom-tile");
}
</script>
public IActionResult CustomPalette()

{
List<object> custom = new List<object>();
custom.Add(new
{
Custom1 = new string[] {"#ef9a9a", "#e57373", "#ef5350",
"#f44336", "#f48fb1", "#f06292", "#ec407a", "#e91e63", "#ce93d8",
"#ba68c8", "#ab47bc", "#9c27b0", "#b39ddb", "#9575cd", "#7e57c2", "#673
AB7"},
Custom2 = new string[] {"#9FA8DA", "#7986CB", "#5C6BC0", "#3F51B5",
"#90CAF9", "#64B5F6", "#42A5F5", "#2196F3", "#81D4FA", "#4FC3F7", "#29B
6F6", "#03A9F4",
"#80DEEA", "#4DD0E1", "#26C6DA", "#00BCD4"},
Custom3 = new string[] {"#80CBC4", "#4DB6AC", "#26A69A", "#009688",
"#A5D6A7", "#81C784", "#66BB6A", "#4CAF50", "#C5E1A5", "#AED581", "#9CC
C65", "#8BC34A", "#E6EE9C",
"#DCE775", "#D4E157", "#CDDC39"},
Custom4 = new string[] {"#FFF59D", "#FFF176", "#FFEE58", "#FFEB3B",
"#FFE082", "#FFD54F", "#FFCA28", "#FFC107", "#FFCC80", "#FFB74D", "#FFA
726", "#FF9800", "#FFAB91",
"#FF8A65", "#FF7043", "#FF5722"}
});
ViewBag.customColors = custom[0];
return View();
}
Hide Input area from Picker

By default, the input area will be rendered in ColorPicker. To hide the input area from it, add e-
hide-value class to ColorPicker using the cssClass property.
544
In the following sample, the ColorPicker is rendered without input area.
view
hide-input.cs
<div class='wrap'>
// To hide the input area.
<ejs-colorpicker id="element" cssClass="e-hide-value" modeSwitcher="false"></ej
s-colorpicker>
</div>
}
<style>
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
</style>
public IActionResult HideInput()

{
return View();
}
Disabled
To achieve disabled state in ColorPicker, set the disabled property to true . The ColorPicker
pop-up cannot be accessed in disabled state.
The following example shows the disabled state of ColorPicker component.
view
disabled.cs
<div class='wrap'>
<h4>Disabled state</h4>
//To disable the ColorPicker.
<ejs-colorpicker id="element" disabled="true"></ejs-colorpicker>
</div>
}
<style>
545
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
</style>
public IActionResult Disabled()

{
return View();
}
RTL
ColorPicker component has RTL support. It helps to render the ColorPicker from right-to-left
direction. This can be achieved by setting the enableRtl property to true .
The following example illustrates how to enable right-to-left support in ColorPicker component.
view
rtl.cs
<div class='wrap'>
//To render ColorPicker from right to left.
<ejs-colorpicker id="element" enableRtl="true"></ejs-colorpicker>
</div>
}
<style>
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
</style>
public IActionResult Rtl()

{
return View();
}
546
Overview
The ContextMenu is a graphical user interface that appears on the user right click/touch hold
action. It has the support to provide nested level menu items.
Key Features
Separator
Icons and Navigation
Template and Multilevel nesting
Accessibility
547
Getting Started
This section briefly explains about how to create a simple ContextMenu in your ASP.NET Core
Add ContextMenu to the project

Add the HTML ejs-contextmenu tag with id attribute as #contextmenu to your Index.cshtml
file and also add target element on which the ContextMenu has to be opened.
view
<div id="contextmenutarget">Right click/Touch hold to open the ContextMenu </div>

<ejs-contextmenu id="contextmenu" target="#contextmenutarget" items="ViewBag.menuItems">
</ejs-contextmenu>
<style>
#contextmenutarget {
border: 1px dashed;
height: 250px;
padding: 10px;
position: relative;
text-align: center;
color: gray;
line-height: 17;
font-size: 14px;
}
</style>
ViewBag.menuItems variable is used for bounding the items property in view page.
Bind dataSource
Populate the menu items in ContextMenu by using the items property. Here, the JSON values
are passed to the ContextMenu component are generated in default.cs and assigned to
ViewBag variable.

{
548
List<object> menuItems = new List<object>();
menuItems.Add(new
{
text = "Cut"
});
menuItems.Add(new
{
text = "Copy"
});
menuItems.Add(new
{
text = "Paste"
});
ViewBag.menuItems = menuItems;
return View();
}
Run the application

The following example shows a basic ContextMenu.
view
default.cs

<ejs-contextmenu id="contextmenu" target="#contextmenutarget" items="ViewBag.menuItems">
</ejs-contextmenu>
<style>
border: 1px dashed;
height: 250px;
padding: 10px;
position: relative;
text-align: center;
549
color: gray;
line-height: 17;
font-size: 14px;
}
</style>

{
menuItems.Add(new
{
text = "Cut"
});
menuItems.Add(new
{
text = "Copy"
});
menuItems.Add(new
{
text = "Paste"
});
return View();
}
Rendering items with Separator

The Separators are the horizontal lines that are used to separate the menu items. You cannot
select the separators. You can enable separators to group the menu items using the separator
property. Cut, Copy, and Paste menu items are grouped using the separator property in the
following sample.
view
separator.cs
<ejs-contextmenu id="contextmenu" target="#contextmenutarget" items="ViewBag.menuIt
ems"></ejs-contextmenu>
<style>
550
border: 1px dashed;
height: 250px;
padding: 10px;
position: relative;
text-align: center;
color: gray;
line-height: 17;
font-size: 14px;
}
</style>
using System;
using System.Linq;
namespace WebApplication1.Controllers
{
public class ContextMenuController : Controller
{
public IActionResult Separator()
{
menuItems.Add(new
{
text = "Cut"
});
menuItems.Add(new
{
text = "Copy"
});
menuItems.Add(new
{
text = "Paste"
});
menuItems.Add(new
{
separator = true
});
menuItems.Add(new
{
text = "Font"
});
menuItems.Add(new
551
{
text = "Paragraph"
});
return View();
}
}
}
The separator property should not be given along with the other fields in the MenuItem .
552
Icons and Navigation
Icons
The ContextMenu item have an icon/image in it to provide visual representation of the action. To
place the icon on a menu item, set the iconCss property to e-icons with the required icon CSS.
By default, the icon is positioned to the left side of the menu item. In the following sample, the
icons for Cut, Copy and Paste menu items are added using the iconCss property.
view
icons.cs
}
<style>
#target {
border: 1px dashed;
height: 150px;
padding: 10px;
position: relative;
text-align: justify;
color: gray;
user-select: none;
}
.e-cut::before {
content: '\e759';
}
.e-copy::before {
content: '\e70a';
}
.e-paste::before {
content: '\e71f';
}
</style>
553
using System;
using System.Linq;
{
{
public IActionResult Icons()
{
items.Add(new
{
text = "Cut",
iconCss = "e-icons e-cut"
});
items.Add(new
{
text = "Copy",
iconCss = "e-icons e-copy"
});
items.Add(new
{
text = "Paste",
iconCss = "e-icons e-paste"
});
return View();
}
}
}
name to the element. You can also use third party icons on the contextmenu menuItems
using the iconCss property.
Navigation
Navigation in ContextMenu is usage to navigate to the other web page when menu item is
clicked. This can be achieved by providing link to the menu item using the url property. In the
following sample, Navigation URL for Flipkart, Amazon, and Snapdeal menu items are added
using the url property.
view
navigation.cs
554
}
<style>
#target {
border: 1px dashed;
height: 150px;
padding: 10px;
position: relative;
color: gray;
user-select: none;
}
.e-cut::before {
content: '\e759';
}
.e-copy::before {
content: '\e70a';
}
.e-paste::before {
content: '\e71f';
}
</style>
using System;
using System.Linq;
{
{
public IActionResult Navigation()
{
items.Add(new
{
555
text = "Flipkart",
iconCss = "e-icons e-link",
url: 'https://www.google.co.in/search?q=flipkart'
});
items.Add(new
{
text = "Amazon",
url: 'https://www.google.co.in/search?q=amazon'
});
items.Add(new
{
text = "Snapdeal",
url: 'https://www.google.co.in/search?q=snapdeal'
});
return View();
}
}
}
556
Template and Multilevel nesting
Template
The ContextMenu items can be customized by using the Render event. The item render event
triggers while rendering each menu item. The event argument will be used to identify the menu
item and customize it based on the requirement. In the following sample, the menu item is
rendered with keycode for specified action in ContextMenu using the template. Here, the
keycode is specified for Save as, View page source, and Inspect in the right side corner of the
menu items by adding span element in the beforeItemRender event.
view
template.cs
ems" beforeItemRender="beforeItemRender"></ejs-contextmenu>
<script>
function beforeItemRender(args) {
var shortCutSpan = createElement('span');
var text = args.item.text;
var shortCutText = text === 'Save as...' ? 'Ctrl + S' : (text === 'View pag
e source' ?
'Ctrl + U' : 'Ctrl + Shift + I');
shortCutSpan.textContent = shortCutText;
args.element.appendChild(shortCutSpan);
shortCutSpan.setAttribute('class','shortcut');
}
</script>
<style>
border: 1px dashed;
height: 250px;
padding: 10px;
position: relative;
text-align: center;
color: gray;
557
line-height: 17;
font-size: 14px;
}
</style>
using System;
using System.Linq;
{
{
public IActionResult Template()
{
menuItems.Add(new
{
text = "Save as..."
});
menuItems.Add(new
{
text = "View page source"
});
menuItems.Add(new
{
text = "Inspect"
});
return View();
}
}
}
Multilevel nesting
The Multiple level nesting supports in ContextMenu. It can be achieved by mapping the items
property inside the parent menuItems . In the below sample, three level nesting of ContextMenu
is provided.
view
nesting.cs
558
<style>
border: 1px dashed;
height: 250px;
padding: 10px;
position: relative;
text-align: center;
color: gray;
line-height: 17;
font-size: 14px;
}
</style>
using System;
using System.Linq;
{
{
public IActionResult Nesting()
{
menuItems.Add(new
{
text = "Show All Bookmarks"
});
menuItems.Add(new
{
text = "Bookmarks Toolbar",
items = new List<object>()
{
new {
text = "Most Visited",
559
{
new {
text = "Google"
},
new {
text = "Gmail"
}
}
},
new {
text = "Recently Added"
}
}
});
return View();
}
}
}
560
Accessibility
ARIA attributes
interface controls with AJAX, HTML, JavaScript, and related technologies. ContextMenu provides
attributes like aria-expanded and aria-haspopup applied for menu item in ContextMenu. It
helps the people with disabilities by providing information about the widget for assistive
technology in the screen readers. ContextMenu component contains the menu role and
menuItem role.
menu This role will be specified for an item which have sub menu.
menuItem This role will be specified for an item that do not have sub menus.
aria-
Indicates the availability and type of interactive popup element.
haspopup
aria- Indicates whether the subtree can be expanded or collapsed, as well as

expanded indicates whether its current state is expanded or collapsed.

Esc Closes the opened ContextMenu.
Enter Selects the focused item.

Up Navigates up or to the previous menu item.
Down Navigates down or to the next menu item.
Left Close the current sub menu and navigates to the parent menu.
Right Navigates and open the next sub menu.
view
accessibility.cs
<ejs-contextmenu id="contextmenu" items="ViewBag.menuItems"></ejs-contextmenu>
561
}
<script>
window.onload = function () {
document.getElementById("contextmenu").ej2_instances[0].open(40, 20);
}
</script>
<style>
/* csslint ignore:start */
@font-face {
font-family: 'e-context-menu';
src:
url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMjjNRVMAAAEo
AAAAVmNtYXDicOK6AAABjAAAADhnbHlmGcEPFQAAAcwAAAMwaGVhZA69CA8AAADQAAAANmhoZWEH9AQEAAAArAA
AACRobXR4DAAAAAAAAYAAAAAMbG9jYQDYAZgAAAHEAAAACG1heHABEgDAAAABCAAAACBuYW1lxY1d1QAABPwAAA
KFcG9zdPJwcMoAAAeEAAAASAABAAAEAAAAAFwEAAAAAAADlwABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAgmhm8
l8PPPUACwQAAAAAANYD4Y8AAAAA1gPhjwAAAAADlwP0AAAACAACAAAAAAAAAAEAAAADALQABQAAAAAAAgAAAAoA
CgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAUGZFZABA4mDiYQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAAAAAAAgAAAAMAAAAUAAMAAQAAAB
QABAAkAAAABAAEAAEAAOJh//8AAOJg//8AAAABAAQAAAABAAIAAAAAANgBmAAFAAAAAAOXA/QABAAlAC0ATgCzA
AABIScHJzcVHwc/By8HDwYBFSE1MxEhESUHFQ8GLwc/Bx8GJysBDw4RHw4zITM/DhEvDisBLw4rAQ8NAUQBd1xA
fr0BAwQGBwgICgkJCAcGBAMBAQMEBgcICQkKCAgHBgQD/qYB1l79jQFoAQMEBgcHCQkJCQgGBgQDAQEDBAYGCAk
JCQkHBwYEA6y9CgkICQgHBwcGBQQEAwMBAQEBAwMDBQUGBwcHCAkICQoCeAoJCAkIBwcHBgUEBAMDAQEBAQMDAw
UFBgcHBwgJCAkKvQQEBgUHBwcICQkJCgoKCwsLCwoKCgkJCQgHBwcFBgQBBYVRuh0FBQkIBwUFAgEBAgUFBwgJC
gkJCAcGBAMBAQMEBgcICQEifX39LwLRMwQFCAgHBQUCAQECBQUHCAgJCQkIBwUEAwEBAwQFBwgJIgICAwQFBQYG
BwgICAkJCf0pCQkJCAgIBwYGBQUEAwICAgIDBAUFBgYHCAgICQkJAtcJCQkICAgHBgYFBQQDAgIKCQkICAgHBgY
FBAQDAgICAgMEBAUGBgcICAgJCQAFAAAAAAOXA/QABwAPABcAOACdAAABHwIjPwIDMzczFzMDIycVITUzESERJQ
cVDwYvBz8HHwYnKwEPDhEfDjMhMz8OES8OKwEvDisBDw0B/wQKK3MmBQ6dMyeHKDWCO90B1l79jQFoAQMEBgcHC
QkJCQgGBgQDAQEDBAYGCAkJCQkHBwYEA6y9CgkICQgHBwcGBQQEAwMBAQEBAwMDBQUGBwcHCAkICQoCeAoJCAkI
BwcHBgUEBAMDAQEBAQMDAwUFBgcHBwgJCAkKvQQEBgUHBwcICQkJCgoKCwsLCwoKCgkJCQgHBwcFBgQCFREigG4
SM/6wd3cBe/t9ff0vAtEzBAUICAcFBQIBAQIFBQcICAkJCQgHBQQDAQEDBAUHCAkiAgIDBAUFBgYHCAgICQkJ/S
kJCQkICAgHBgYFBQQDAgICAgMEBQUGBgcICAgJCQkC1wkJCQgICAcGBgUFBAMCAgoJCQgICAcGBgUEBAMCAgICA
wQEBQYGBwgICAkJAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAA8AAQABAAAAAAACAAcAEAABAAAAAAADAA8A
FwABAAAAAAAEAA8AJgABAAAAAAAFAAsANQABAAAAAAAGAA8AQAABAAAAAAAKACwATwABAAAAAAALABIAewADAAE
ECQAAAAIAjQADAAEECQABAB4AjwADAAEECQACAA4ArQADAAEECQADAB4AuwADAAEECQAEAB4A2QADAAEECQAFAB
YA9wADAAEECQAGAB4BDQADAAEECQAKAFgBKwADAAEECQALACQBgyBDb250ZXh0TWVudSAoMilSZWd1bGFyQ29ud
GV4dE1lbnUgKDIpQ29udGV4dE1lbnUgKDIpVmVyc2lvbiAxLjBDb250ZXh0TWVudSAoMilGb250IGdlbmVyYXRl
ZCB1c2luZyBTeW5jZnVzaW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgAEMAbwBuAHQAZQB4AHQ
ATQBlAG4AdQAgACgAMgApAFIAZQBnAHUAbABhAHIAQwBvAG4AdABlAHgAdABNAGUAbgB1ACAAKAAyACkAQwBvAG
4AdABlAHgAdABNAGUAbgB1ACAAKAAyACkAVgBlAHIAcwBpAG8AbgAgADEALgAwAEMAbwBuAHQAZQB4AHQATQBlA
G4AdQAgACgAMgApAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1
AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgB
jAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQAD01UX1Bhc3RlU3BlY2lhbA
xNVF9QYXN0ZVRleHQAAA==) format('truetype');
562
font-style: normal;
}
/* csslint ignore:stop */
.e-cm-icons {
font-family: 'e-context-menu';
font-style: normal;
font-variant: normal;
line-height: 1;
text-transform: none;
}
.e-pastespecial::before {
content: '\e260';
}
.e-pastetext::before {
content: '\e261';
}
.e-cut::before {
content: '\e759';
}
.e-copy::before {
content: '\e70a';
}
.e-paste::before {
content: '\e71f';
}
#target {
border: 1px dashed;
height: 150px;
padding: 10px;
position: relative;
color: gray;
user-select: none;
}
</style>
using System;
563
using System.Linq;
{
{
{
menuItems.Add(new
{
text = "Cut",
iconCss = "e-cm-icons e-cut"
});
menuItems.Add(new
{
text = "Copy",
iconCss = "e-cm-icons e-copy"
});
menuItems.Add(new
{
text = "Paste",
iconCss = "e-cm-icons e-paste",
{
new { text = "Paste Text", iconCss = "e-cm-icons e-pastetext" },
new { text = "Paste Special", iconCss = "e-cm-icons e-pastespecial"
}
}
});
}
}
}
564
How To
Data Binding
To bind local data source to the ContextMenu, menu items are populated from data source and
mapped to items property.
The below example demonstrates how to bind local data source to the ContextMenu and
separator is added using insertAfter method.
view
<ejs-contextmenu id="contextmenu" target="#contextmenutarget" items="items" beforeI
temRender="beforeItemRender"></ejs-contextmenu>
}
<script>
function items() {
var data = [
{ id: 1, parentId: null, text: 'View' },
{ id: 2, parentId: null, text: 'Sort by' },
{ id: 3, parentId: null, text: '' },
{ id: 4, parentId: null, text: 'New' },
{ id: 5, parentId: null, text: '' },
{ id: 6, parentId: null, text: 'Display Settings' },
{ id: 7, parentId: null, text: 'Personalize' },
//first level child
{ id: 8, parentId: 1, text: 'Large Icons' },
{ id: 9, parentId: 1, text: 'Medium Icons' },
{ id: 10, parentId: 1, text: 'Small Icons' },
{ id: 11, parentId: 2, text: 'Name' },
{ id: 12, parentId: 2, text: 'Size' },
{ id: 13, parentId: 4, text: 'Folder' },
{ id: 14, parentId: 4, text: 'Shortcut' },
{ id: 15, parentId: 4, text: '' },
{ id: 16, parentId: 4, text: 'Contact' }];
var record;
var menuItems = [];
for (var i = 0; i < data.length; i++) {
record = data[i];
if (record.parentId) {
if (!menuItems[record.parentId - 1].items) {
565
menuItems[record.parentId - 1].items = []
}
menuItems[record.parentId - 1].items.push({ text: record.text });
} else {
menuItems.push({ text: record.text });
}
}
}
if (!args.item.text) {
args.element.classList.add('e-separator');
}
}
</script>
<style>
button {
}
#target {
border: 1px dashed;
height: 150px;
padding: 10px;
position: relative;
color: gray;
user-select: none;
}
</style>
Open and Close Context Menu

Open and close the ContextMenu manually whenever required by using the open and close
methods. In the following sample, to open the ContextMenu at specified position the open
method is used with X and Y coordinates and to close ContextMenu close method can be
used.
view
openclose.cs
<button class='e-btn' id="btnElement">Open ContextMenu</button>
566
<ejs-contextmenu id="contextmenu" items="ViewBag.menuItems"></ejs-contextmenu>
<script>
document.getElementById('btnElement').onclick=function() {
var contextMenuObj = document.getElementById("contextmenu").ej2_instances[0];
contextMenuObj.open(60, 20);
}
</script>
<style>
button {
}
</style>
using System;
using System.Linq;
{
{
public IActionResult OpenClose()
{
menuItems.Add(new
{
text = "Cut"
});
menuItems.Add(new
{
text = "Copy"
});
menuItems.Add(new
{
text = "Paste"
});
567
return View();
}
}
}
Table in Sub ContextMenu

Menu items of the ContextMenu can be customized according to the requirement. The section
explains about how to customize table template in sub menu item.
This can be achieved by appending table layout while li rendering by using

beforeItemRender event.
view
table.cs
<script>
if (args.item.text === 'Insert') {
args.element.innerText = '';
args.element.appendChild(this.createTable());
args.element.style.height = '105px';
args.element.classList.add('e-hover-list');
}
if (args.item.text === 'Insert Table') {
args.element.classList.add('e-hover-list');
}
}
function createTable() {
var table = document.createElement('table');
for (let i: number = 0; i < 5; i++) {
let row: HTMLElement = document.createElement('tr');
table.appendChild(row);
for (let j: number = 0; j < 6; j++) {
let col: HTMLElement = document.createElement('td');
row.appendChild(col);
col.setAttribute('class', 'e-data');
}
568
}
return table;
}
</script>
<style>
border: 1px dashed;
height: 250px;
padding: 10px;
position: relative;
text-align: center;
color: gray;
line-height: 17;
font-size: 14px;
}
</style>
using System;
using System.Linq;
{
{
public IActionResult Table()
{
menuItems.Add(new
{
text = "Cut",
});
menuItems.Add(new
{
text = "Copy",
});
menuItems.Add(new
{
text = "Paste",
569
});
menuItems.Add(new
{
separator = true
});
menuItems.Add(new
{
text = "Link",
iconCss = "e-icons e-link"
});
menuItems.Add(new
{
text = "Table",
{
new {
text = "Insert Table",
},
new {
separator = true
},
new {
text = "Insert"
}
}
});
return View();
}
}
}
UI Components in ContextMenu
UI components can also be placed inside the each li element of ContextMenu.
In the following example, CheckBox component is placed inside each li element and this can
be achieved by creating CheckBox component in beforeItemRender event and appending it into
the li element.
view
uicomponents.cs
570
ems" select="select" beforeClose="beforeClose" beforeItemRender="beforeItemRender"></ej
s-contextmenu>
<ejs-checkbox id="checkbox1" label="Option 1"></ejs-checkbox>
<ejs-checkbox id="checkbox2" label="Option 3" checked="checked"></ejs-checkbox>
<ejs-checkbox id="checkbox3" label="Option 3"></ejs-checkbox>
}
<script>
var target = '#contextmenutarget';
function beforeClose(args) {
if (args.event.target.ej.base.closest('.e-menu-item')) {
args.cancel = true;
var selectedElem = args.element.querySelectorAll('.e-selected');
for(let i:number=0; i < selectedElem.length; i++){
let ele: Element = selectedElem[i];
ele.classList.remove('e-selected');
}
var checkbox = ej.base.closest(args.event.target as Element, '.e-checkbox-w
rapper');
var frame = checkbox.querySelector('.e-frame'));
if (checkbox && frame.classList.contains('e-check')) {
frame.classList.remove('e-check');
} else if (checkbox) {
frame.classList.add('e-check');
}
}
}
var i = 1;
var check = document.getElementById('checkbox' + i).ej2_instances[0].element.pa
rentElement.parentElement;
args.element.innerHTML = '';
args.element.appendChild(check);
i++;
}
function select(args) {
var selectedElem = args.element.parentElement.querySelectorAll('.e-selected');
for(var i=0; i < selectedElem.length; i++){
var ele = selectedElem[i];
ele.classList.remove('e-selected');
}
var checkbox = args.element.childNodes[0] as HTMLElement;
var frame = checkbox.querySelector('.e-frame'));
if (checkbox && frame.classList.contains('e-check')) {
frame.classList.remove('e-check');
571
} else if (checkbox) {
frame.classList.add('e-check');
}
}
</script>
<style>
.list {
display: none;
}
border: 1px dashed;
height: 250px;
padding: 10px;
position: relative;
text-align: center;
color: gray;
line-height: 17;
font-size: 14px;
}
</style>
using System;
using System.Linq;
{
{
public IActionResult UIComponents()
{
menuItems.Add(new
{
text = "Option 1"
});
menuItems.Add(new
{
text = "Option 2"
});
572
menuItems.Add(new
{
text = "Option 3"
});
return View();
}
}
}
Dialog Open On ContextMenu Item Click

This section explains about how to open a dialog on ContextMenu item click. This can be
achieved by handling dialog open in select event of the ContextMenu.
In the following sample, Dialog will open while clicking Save As... item:
view
dialog.cs
ems" select="itemSelect"></ejs-contextmenu>
<ejs-dialog id="dialog" content="This file can be saved as PDF" visible="visible" p
osition="position" target="#contextmenutarget" width="200px" height="110px">
<e-dialog-buttons>
<e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons" click="dlgButto
nClick"></e-dialog-dialogbutton>
</e-dialog-buttons>
</ejs-dialog>
}
<script>
var position = {X: 100, Y: 100};
var visible = false;
function dlgButtonClick() {
var dialogObj = document.getElementById('dialog').ej2_instances[0];
dialogObj.hide();
}
function itemSelect(args) {
var dialog = document.getElementById("dialog").ej2_instances[0]
dialog.show();
573
}
</script>
<style>
border: 1px dashed;
height: 250px;
padding: 10px;
position: relative;
text-align: center;
color: gray;
line-height: 17;
font-size: 14px;
}
</style>
using System;
using System.Linq;
{
{
public IActionResult Dialog()
{
menuItems.Add(new
{
text = "Back"
});
menuItems.Add(new
{
text = "Forward"
});
menuItems.Add(new
{
text = "Reload"
});
menuItems.Add(new
{
separator: true
});
574
menuItems.Add(new
{
text = "Save As..."
});
menuItems.Add(new
{
text = "Print"
});
menuItems.Add(new
{
text = "Cast"
});
return View();
}
}
}
Underline a character in the text

To underline a particular character in a text, it can be handled in beforeItemRender event by
adding <u> tag in between the text and given as innerHTML in li rendering.
view
underline.cs
<script>
if (args.item.text === "Copy") {
args.element.innerHTML = '<u>C</u>opy';
}
}
</script>
<style>
border: 1px dashed;
575
height: 250px;
padding: 10px;
position: relative;
text-align: center;
color: gray;
line-height: 17;
font-size: 14px;
}
</style>
using System;
using System.Linq;
{
{
public IActionResult Underline()
{
menuItems.Add(new
{
text = "Cut"
});
menuItems.Add(new
{
text = "Copy"
});
menuItems.Add(new
{
text = "Paste"
});
return View();
}
}
}
Change animation settings

To change the animation of the ContextMenu, animationSettings property is used. The
supported effects for ContextMenu are,
576
Effect Functionality
None Specifies the sub menu transform with no animation effect.
SlideDown Specifies the sub menu transform with slide down effect.
ZoomIn Specifies the sub menu transform with zoom in effect.
FadeIn Specifies the sub menu transform with fade in effect.
The following sample illustrates how to open ContextMenu with FadeIn effect with the
duration of 800ms .
view
animation.cs
ems" animationSettings="animation"></ejs-contextmenu>
<script>
var animation = {
effect: 'FadeIn',
duration: 800
};
</script>
<style>
border: 1px dashed;
height: 250px;
padding: 10px;
position: relative;
text-align: center;
color: gray;
line-height: 17;
font-size: 14px;
}
</style>
using System;
577
using System.Linq;
{
{
public IActionResult Animation()
{
menuItems.Add(new
{
text = "Show All Bookmarks"
});
menuItems.Add(new
{
text = "Bookmarks Toolbar",
{
new {
text = "Most Visited",
{
new {
text = "Google"
},
new {
text = "Gmail"
}
}
},
new {
text = "Recently Added"
}
}
});
return View();
}
}
}
578
Overview
The DatePicker is a graphical user interface component that allows the user to select or enter a
date value.
Key Features
Date Range
Globalization
Strict Mode
Customization
Start and Depth View
Accessibility
579
Getting Started
This section briefly explains how to include a simple DatePicker component in your ASP.NET
Core application. You can refer to ASP.NET Core Getting Started documentation page for
system requirements, and configure common specifications.
our components.
Initialize DatePicker component to the Application

DatePicker component can be rendered by using the ejs-datepicker tag helper in ASP.NET
Core application. Add the below simple code to your index.cshtml page which is available
within the Views/Home folder, to initialize the DatePicker.
The following example shows a basic DatePicker component.
view
<ejs-datepicker id="datepicker"></ejs-datepicker>
Running the above code will display the basic DatePicker on the browser.
Setting the value, and min and max dates

To restrict the selection of date within a specified range, use the min and max properties.
The below example demonstrates the DatePicker to select a date within a range from 5 to 27 in a
current month.
view
daterange.cs
<ejs-datepicker id="datepicker" value="@ViewBag.value" min="@ViewBag.minDate" max="@Vie

wBag.maxDate" ></ejs-datepicker>
using System;
using System.Linq;
580
{
public partial class HomeController : Controller
{
{
return View();
}
}
}
581
Date Range
DatePicker provides an option to select a date value within a specified range by using the min
and max properties. Always the min value has to be lesser than the max value.
When the min and max properties are configured and the selected date value is out-of-range or
invalid, then the model value will be set to out of range date value or null respectively with
highlighted error class to indicates the date is out of range or invalid.
The value property depends on the min/max with respect to strictMode property.
The below example allows selecting a date within the range from 7th to 27th day in a month.
view
daterange.cs
<ejs-datepicker id="datepicker" value="@ViewBag.value" min="@ViewBag.minDate" max="@Vie

wBag.maxDate" ></ejs-datepicker>
using System;
using System.Linq;
{
{
{
ViewBag.value = new DateTime(DateTime.Now.Year,DateTime.Now.Month,14);
return View();
}
}
}
582
If the value of min or max properties changed through code behind, then you have to
update the value property to set within the range.
583
Date Format
Date format is a way of representing the date value in different string format in textbox.
By default the DatePicker's format is based on the culture. You can also set the own custom
format by using the format property.
Once the date format property has been defined it will be common to all the cultures.
To know more about the date format standards, refer to the Internationalization Date Format
section.
The following example demonstrates the DatePicker with the custom format ( yyyy-MM-dd ).
view
date-format.cs
<ejs-datepicker id="datepicker" value="@ViewBag.value" format="yyyy-MM-dd" placeholder=

"Enter date"></ejs-datepicker>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
584
Globalization
Globalization is the combination of adapting the component to various languages by means of
parsing and formatting the date or number Internationalization , and also by adding cultural
specific customizations and translating the text localization .
By default, DatePicker date format, week and month names are specific to the American
English culture. It utilizes the Essential JavaScript 2 Internationalization package to parse
and format the date object based on the culture by using the official UNICODE CLDR JSON data. It
provides the loadCldr method to load culture specific CLDR JSON data.
var val, ajax;
val = value;
};
ajax.send();
};
585
loadCulture(prop);
}
}
var val, ajax;
val = value;
};
ajax.send();
};
loadCulture(prop);
}
}

L10n.load({
'de': {
'datepicker': { placeholder: 'Wählen Sie ein Datum',
today: 'heute'
}
}
});
The following example demonstrates the DatePicker in German culture.
view
<ejs-datepicker id="datepicker" locale="de"></ejs-datepicker>
<script>
586
datepicker = document.getElementById('datepicker').ej2_instances[0];
L10n.load({
'de': {
'datepicker': { placeholder:'Wählen Sie ein Datum',
today: 'heute' }
}
});
datepicker.locale = 'de';
});
}
var val, ajax;
} else {
}
val = value;
};
ajax.send();
};
loadCulture(prop);
}
}
</script>
Right-To-Left
The DatePicker supports RTL (right-to-left) functionality for languages like Arabic and Hebrew to
displays the text in the right-to-left direction. Use enableRtl property to set the RTL direction.
587
The following code example initialize the DatePicker component in Arabic culture and also
explains how to set the localized text to the placeholder using load method of L10n class.
view
<ejs-datepicker id="datepicker" enableRtl=true></ejs-datepicker>
<script>
datepicker = document.getElementById('datepicker').ej2_instances[0];
L10n.load({
'ar': {
'datepicker': { placeholder: '‫'اﺧﺘﺮ ﺗﺎرﻳﺨﺎ‬,
today: '‫} 'اﻟﯿﻮم‬
}
});
loadCultureFiles("ar");
datepicker.enableRtl = datepicker.locale === 'ar';
});
}
var val, ajax;
} else {
}
val = value;
};
ajax.send();
};
loadCulture(prop);
}
}
</script>
588
Strict Mode
The strictMode is an act,that allows the user to enter only the valid date within the specified
min/max range in textbox. If the date is invalid, then the component will stay with the previous
value. Else, if the date is out of range, then the component will set the date to the min/max date.
The following example demonstrates the DatePicker in strictMode with min/max range of 5th to
25th in a month of May. Here, it allows to enter only the valid date within the specified range. If
you are trying to enter the out-of-range value as like 28th of May, then the value will set to the
max date of 25th May. Since the value 28th is greater than to max value of 25th. Or else if you
are trying to enter the invalid date, then the value will stay with the previous value.
view
strict-true.cs
<ejs-datepicker id="datepicker" strictmode=true format="dd/MM/yyyy" placeholder="Enter

date" value="ViewBag.value" min="ViewBag.minDate" max="ViewBag.maxDate"></ejs-datepicker
>
using System;
using System.Linq;
{
public partial class HomeController: Controller
{
public IActionResult DefaultFunctionalities()
{
ViewBag.minDate= new DateTime(2018, 5, 5);
ViewBag.maxDate = new DateTime(2018, 5, 25);
return View();
}
}
}
589
By default, the DatePicker act in strictMode false state, that allows to enter the invalid or out-
of-range date in textbox.
If the date is out-of-range or invalid, then the model value will be set to out of range date value
or null respectively with highlighted error class to indicates the date is out of range or
invalid.
The following example demonstrates the strictMode as false . Here, it allows to enter the
valid or invalid value in textbox. If you are entering out-of-range or invalid date value, then the
model value will be set to out of range date value or null respectively with highlighted
error class to indicates the date is out of range or invalid.
view
strict-false.cs
<ejs-datepicker id="datepicker" format="dd/MM/yyyy" placeholder="Enter date" value="Vie

wBag.value" min="ViewBag.minDate" max="ViewBag.maxDate"></ejs-datepicker>
using System;
using System.Linq;
{
{
{
ViewBag.minDate= new DateTime(2018, 5, 5);
ViewBag.maxDate = new DateTime(2018, 5, 25);
return View();
}
}
}
If the value of min or max properties changed through code behind, then you have to
update the value property to set within the range.
590
Customization
You can customize the entire appearance of the input element and Calendar by using custom
cssClass property. and also you can use the calendar's renderDayCell event to customize the
appearance of the each day cell.
Below is the list of classes that provides flexible way to customize the DatePicker component.
e-date-wrapper Applied to DatePicker wrapper
e-datepicker Applied to the DatePicker element.
e-float-text Applied to the floating label.
e-date-icon Applied to the DatePicker icon.
e-popup-wrapper Applied to DatePicker popup wrapper.
e-calendar Applied to Calendar element.
e-header Applied to Calendar header.
e-title Applied to Calendar title.
e-icon-container Applied to Calendar previous and next icon container.
e-prev Applied to Calendar previous icon.
e-next Applied to Calendar next icon.
e-weekend Applied to Calendar weekend dates.
e-other-month Applied to Calendar other month dates.
e-day Applied to each day cell of the Calendar.
e-selected Applied to Calendar selected dates.
e-disabled Applied to Calendar disabled dates.
The following example disables the weekends of every month using renderDayCell event. Here
we have used the e-disabled class to highlight the disabled date.
view
<ejs-datepicker id="datepicker" renderdaycell="onRenderCell" cssclass="e-custom-style"

placeholder="Choose a Date"></ejs-datepicker>
<script>
function onRenderCell(args) {
if (args.date.getDay() == 0 || args.date.getDay() == 6) {
//sets isDisabled to true to disable the date.
591
args.isDisabled = true;
//To know about the disabled date customization, you can refer in "styles.css".
}
}
</script>
592
Start and Depth View
The DatePicker has the following predefined views that provides a flexible way to navigate back
and forth to select the date.
View Description
month (default) Displays the days in a month
year Displays the months in a year
decade Displays the years in a decade
Start view
You can use the start property to define the initial rendering view.
The following example demonstrates how to create a DatePicker with decade as initial
rendering view.
view
<ejs-datepicker id="datepicker" start=Decade placeholder="Choose a Date"></ejs-datepick

er>
Depth view
Define the depth property to control the view navigation.
Always the depth view has to be smaller than the start view, otherwise the view restriction
will be not restricted.
The following example demonstrates how to create a DatePicker that allows users to select a
month.
view
<ejs-datepicker id="datepicker" depth=Year start=Decade placeholder="Choose a Date"></e

js-datepicker>
To know more about Calendar views refer the Calendar's Calendar Views section.
593
Accessibility
The Web accessibility defines a way to make web content and web applications more accessible
to disabled people. It especially helps the dynamic content change and advanced user interface
controls developed with Ajax, HTML, JavaScript, and related technologies.
DatePicker provides built-in compliance with the WAI-ARIA specifications. WAI-ARIA supports is
achieved through the attributes like aria-expanded , aria-disabled , aria-activedescendant
applied to the input element.
To know about the accessibility of Calendar refer to the Calendar's Accessibility section.
It helps to provide information about the widget for assistive technology to the disabled person in
screen reader.
Aria-expanded: attributes indicates the state of a collapsible element.
Aria-disabled: attribute indicates the disabled state of this DatePicker component.
Aria-activedescendent: attribute helps in managing the current active child of the

DatePicker component.
Keyboard Interaction
You can use the following keys to interact with the DatePicker. The component implements the
It supports the below list of shortcut keys.
Input Navigation
Before opening the popup, use the below list of keys to control the popup element.
Press To do this
Alt + Down Arrow Opens the popup.
Alt + Up Arrow Closes the popup.
Esc closes the popup.
Calendar Navigation
Use the below list of keys to navigate the Calendar after the popup has opened.
Press To do this
Upper Arrow Focus the previous week date.

Down Arrow Focus the next week date.
594
Left Arrow Focus the previous date.
Right Arrow Focus the next date.
Home Focus the first date in the month.
End Focus the last date in the month.
Page Up Focus the same date in the previous month.

Page Down Focus the same date in the next month.
Enter Select the currently focused date.
Shift + Page Up Focus the same date in the previous year.

Shift + Page Down Focus the same date in the previous year.
Control + Upper Moves into the inner level of view like month-year, year-
Arrow decade
Control + Down Moves out from the depth level view like decade-year, year-
Arrow month
Control +Home Focus the starting date in the current year.
Control +End Focus the ending date in the current year.
To focus the DatePicker component use the alt+t keys.
view
<ejs-datepicker id="datepicker" placeholder="Choose a Date"></ejs-datepicker>
<script>
document.addEventListener('keyup', function (e) {
if (e.altKey && e.keyCode === 84) {
// press alt+t to focus the control.
var datepickerObject = document.getElementById("element").ej2_instances[0];
datepickerObject.element.focus();
}
})
</script>
595
How To
The following section explains how the DatePicker can be easily customizable in various aspects.
Disabled State
To disable the DatePicker, use its enable property.
The following example demonstrates the DatePicker in a disabled state.
view
<ejs-datepicker id="datepicker" enabled="false"></ejs-datepicker>
Set the placeholder

The following example demonstrates how to set placholder in the DatePicker component.
Using placeholder you can display a short hint in the input element.
view
<ejs-datepicker id="datepicker" placeholder="Enter date"></ejs-datepicker>
Set the readonly

The following example demonstrates how to set readonly in DatePicker component. You can
achieve this by using readonly property.
view
read.cs
<ejs-datepicker id="datepicker" readonly="true" value="@ViewBag.value" placeholder="E

nter date"></ejs-datepicker>
using System;
using System.Linq;
596
{
{
{
return View();
}
}
}
Prevent the popup close

To prevent the DatePicker popup from closing, use the preventDefault method from the
PreventableEventArgs .
The following example demonstrates how to prevent the popup from closing.
view
popupclose.cs
<ejs-datepicker id="datepicker" close="onClose" placeholder="Choose a Date"></ejs-datep

icker>
<script>
var datepickerObject = document.getElementById("datepicker").ej2_instances[0];
datepickerObject.show();
});
function onClose (args) {
// prevent the popup close
args.preventDefault();
}
</script>
using System;
using System.Linq;
597
{
{
{
return View();
}
}
}
Focus the DatePicker

You can focus the DatePicker element by using the focusIn method.
The following example demonstrates how to focus the input element.
view
<script>
document.getElementsByTagName('button')[0].onclick = function () {
datepickerObject.focusIn();
}
</script>
Blur the DatePicker

You can blur the DatePicker element by using the focusOut method.
The following example demonstrates how to blur the input element.
view
598
<script>
datepickerObject.element.focus();
document.getElementsByTagName('button')[0].onclick = function () {
datepickerObject.focusOut();
}
}
</script>
Client side validation

To achieve the client side validation in a DatePicker component by using Essential JavaScript 2
FormValidator. It provides an option to customize the feedback error messages to the
corresponding fields to take action to resolve the issue.
In this below example, the required field validation is implemented by mapping the name attribute
value to the rules property. It will validate the DatePicker component and display the validation
message when the textbox value is empty during form post back or focus out.
view
validation.cs
<form id="form-element" class="form-vertical">

<div class="form-group">
<div class="col-sm-3 control-label">Required</div>
<div class="col-sm-6">
<ejs-datepicker id="datevalue" value="@ViewBag.value" ></ejs-datepic
ker>
</div>
</div>
</form>
<script>
var options = {
rules: {
//must specify the name attribute value in rules section
'datevalue': { required: true }
},
customPlacement: (inputElement, errorElement) => {
//to place the error message in custom position
//inputElement - target element where the error text will be ap
pended
//errorElement - error text which will be displayed.
599
inputElement.parentElement.parentElement.appendChild(errorEleme
nt);
}
};
var formObject = new ej.inputs.FormValidator('#form-element', options);
});
</script>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
600
Overview
The DateRangePicker is a graphical user interface control that allows to select a date range.
Key Features
Range Restriction
Globalization
Strict Mode
Customization
Accessibility
601
Getting Started
This section briefly explains how to include simple DateRangePicker control in your ASP.NET
our components.

Add the DateRangePicker component in view page to render our Syncfusion.
view
<ejs-daterangepicker id="daterangepicker"></ejs-daterangepicker>
Run the application

The following example shows a basic DateRangePicker component.
view
getting-started.cs
<ejs-daterangepicker id="daterangepicker"></ejs-daterangepicker>
using System;
using System.Linq;
{
602
public partial class DateRangePickerController: Controller
{
{
return View();
}
}
}
Setting the start and end date

The start and end date in a range can be defined with the help of startDate and endDate
property. The following example demonstrates to set the start and end date on initializing the
DateRangePicker.
view
daterange.cs
<ejs-daterangepicker id="daterange" startdate="ViewBag.startDate" enddate="ViewBag.endD

ate"></ejs-daterangepicker>
using System;
using System.Linq;
{
public partial class DateRangePickerController : Controller
{
{
ViewBag.startDate = new DateTime(2017, 11, 09);
ViewBag.endDate = new DateTime(2017, 11, 21);
return View();
}
}
}
603
604
Range Restriction
Range selection in a DateRangePicker can be made-to-order with desire restrictions based on
the application needs.
Restrict the range within a range

You can restrict the minimum and maximum date that can be allowed as start and end date in a
range selection with the help of min , max properties.
min – sets the minimum date that can be selected as startDate.

max – sets the maximum date that can be selected as endDate.
In the following sample, you can select a range from 15th day of this month to 15th day of next
month.
view
daterange.cs
<ej-daterangepicker id="daterange" placeholder="Choose a Range" min="ViewBag.minDate"

max="ViewBag.maxDate"></ej-daterangepicker>
using System;
using System.Linq;
{
{
{
ViewBag.maxDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month+1, 15)
;
return View();
}
}
605
}
If strictMode is enabled, and both the start, end date is lesser than the min date
then start and end date will be updated with min date. If both the start and end date
is higher than the max date then start and end date will be updated with max date. Or
else, if startDate is less than min date, startDate will be updated with min date or if
endDate is greater than max date, endDate will be updated with the max date.
Range span
Span between ranges can be limited to avoid excess or less days selection towards the required
days in a range. In this, minimum and maximum span allowed within the date range can be
customized by minDays and maxDays properties.
minDays - Sets the minimum number of days between start and end date.
maxDays - Sets the maximum number of days between start and end date.
In the following sample, the range selection should be greater than 3 days and less than 8 days
else it will not set.
view
rangespan.cs
<ej-daterangepicker id="dayspan" minDays="5" maxDays="10" placeholder="Select a Range">

</ej-daterangepicker>
using System;
using System.Linq;
{
{
{
return View();
606
}
}
}
Strict mode
DateRangePicker provides an option to limit the user towards entering the valid date. With strict
mode, you can set only the valid date. If any invalid range is specified, the date range value
resets to previous value. This restriction can be availed by enabling strictMode property as
true.
view
<ejs-daterangepicker id="daterangepicker" strictmode=true placeholder="Enter date"></e

js-daterangepicker>
607
Globalization
Globalization is the combination of adapting the component to various languages by means of
parsing and formatting the date or number (Internationalization) and also by adding cultural
specific customizations and translating the text (Localization).
By default, DateRangePicker date format, week, and month names are specific to the American
English culture. It utilizes the Essential JavaScript 2 Internationalization package to parse
and format the date object based on the culture by using the official UNICODE CLDR JSON data. It
var val, ajax;
val = value;
};
ajax.send();
};
608
loadCulture(prop);
}
}
var val, ajax;
val = value;
};
ajax.send();
};
loadCulture(prop);
}
}

L10n.load({
'de': {
'daterangepicker': { placeholder: 'Wählen Sie einen Bereich aus',
startLabel: 'Wählen Sie Startdatum',
endLabel: 'Wählen Sie Enddatum',
applyText: 'Sich bewerben',
cancelText: 'Stornieren',
selectedDays: 'Ausgewählte Tage',
days: 'Tage',
stomRange: 'benutzerdefinierten Bereich',
startDate: 'Anfangsdatum',
endDate: 'Enddatum'
}
}
});
609
The following example demonstrates the DateRangePicker in German culture.
view
globalization.cs
<ejs-daterangepicker id="daterangepicker" locale="de"></ejs-daterangepicker>
<script>
daterangepicker = document.getElementById('daterangepicker').ej2_instances[0];
L10n.load({
'de': {
'daterangepicker': { placeholder:'Einen Bereich auswählen',
today: 'heute' }
}
});
daterangepicker.locale = 'de';
});
}
var val, ajax;
} else {
}
val = value;
};
ajax.send();
};
loadCulture(prop);
}
}
610
</script>
using System;
using System.Linq;
{
public partial class DatePickerController: Controller
{

{
return View();
}
}
}
Right-To-Left
The DateRangePicker supports RTL (right-to-left) functionality for languages like Arabic and
Hebrew. To display the text in the right-to-left direction, use enableRtl property.
The code example demonstrates the DateRangePicker component in Arabic culture. It also
explains how to set localized text to the placeholder using L10n.load method.
The following example demonstrates DateRangePicker in Arabic culture with right-to-left

direction.
view
rtl.cs
<ejs-daterangepicker id="daterangepicker" enableRtl=true></ejs-daterangepicker>
<script>
daterangepicker = document.getElementById('daterangepicker').ej2_instances[0];
L10n.load({
'ar': {
'daterangepicker': { placeholder: '‫'ﺣﺪد ﻧﻄﺎﻗﺎ‬,
611
today: '‫} 'اﻟﯿﻮم‬
}
});
daterangepicker.enableRtl = daterangepicker.locale === 'ar';
});
}
var val, ajax;
} else {
}
val = value;
};
ajax.send();
};
loadCulture(prop);
}
}
</script>
using System;
using System.Linq;
{
public partial class DatePickerController: Controller
{
612
{
return View();
}
}
}
613
Customization
The DateRangePicker is available for UI customization that can be achieved by using available
properties and events in the component.
Day cell format

The DateRangePicker is available for UI customization based on your application requirements.
It can be achieved by using renderDayCell event that provides an option to customize each day
cell on rendering.
The following example disables the weekends of every month by using renderDayCell event.
First day of week

Start day in a week will differ based on the culture, but you can also customize this based on the
application needs. For this, you have to make use of firstDayOfWeek property. By default, first
day of a week in en-US is Sunday. In the following example it is customized to Monday with the
help of this property.
614
Accessibility
interface controls with AJAX, HTML, JavaScript, and related technologies. DateRangePicker
provides built-in compliance with WAI-ARIA specifications. WAI-ARIA support is achieved
through the attributes like aria-expanded , aria-disabled , and aria-activedescendant
applied as an input element.
To know about the accessibility of Calendar, refer to the Calendar's Accessibility section.
It helps people with disabilities by providing information about the widget for assistive technology
in the screen readers. DateRangePicker component contains grid role and grid cell for each day
cell.
Aria-expanded: Indicates the currently selected date of the DateRangePicker component.
Aria-disabled: Indicates the disabled state of the DateRangePicker component.
Use the below keys to interact with the DateRangePicker. This component implements the
It supports the following list of shortcut keys:
Input Navigation
Before opening the popup, use the following list of keys to control the popup element.
Press To do this
Alt + Down Arrow Opens the popup.

Alt + Up Arrow Closes the popup.
Esc Closes the popup.
Calendar Navigation
Use the following list of keys to navigate the currently focused Calendar after the popup has
opened.
Press To do this
Upper Arrow Focuses the same day of the previous week.
Down Arrow Focuses the same day of the next week.
615
Left Arrow Focuses the day before.
Right Arrow Focuses the next day.
Home Focuses the first day of the month.
End Focuses the last day of the month.
Page Up Focuses the same date of the previous month.
Page Down Focuses the same date of the next month.
Enter Selects the currently focused date.
Shift + Page Up Focuses the same date for the previous year.
Shift + Page Down Focuses the same date for the next year.
Control +Home Focuses the first date of the current year.
Control +End Focuses the last date of the current year.
To focus the DateRangePicker component use the alt+t keys.
616
How To
The following section explains how to customize various aspects of DateRangePicker.
Disable the component

DateRangePicker can be inactivated on a page, by setting enabled value as false that will
disable the component completely from all the user interactions including in the form post. The
following example demonstrates the disabled component.
view
<ejs-daterangepicker id="daterangepicker" enabled="false"></ejs-daterangepicker>
Set the placeholder

The following example demonstrates how to set placeholder in the DateRangePicker control.
Using placeholder you can display a short hint in the input element.
view
<ejs-daterangepicker id="daterangepicker" placeholder="Choose a range"></ejs-daterangep

icker>
Customization using cssClass

To customize UI, you can make use of cssClass that will be added to the DateRangePicker
component as the root CSS class. With this CSS class, you can override existing styles of
DateRangePicker.
Following is the list of classes that provides flexible way to customize the DateRangePicker
component.
e-date-range-wrapper Applied to DateRangePicker wrapper.
e-range-icon Applied to DateRangePicker icon.
e-popup Applied to DateRangePicker popup wrapper.
e-calendar Applied to both Calendar element.
617
e-right-calendar Applied to right Calendar element.
e-left-calendar Applied to left Calendar element.
e-start-label Applied to start label in a popup.
e-end-calendar Applied to end label in a popup.
e-day-span Applied to day span details label in a popup.
e-footer Applied to footer elements in a popup.
e-apply Applied to apply button in footer in a popup.
e-cancel Applied to cancel button in footer in a popup.
e-header Applied to Calendar header.
e-title Applied to Calendar title.
e-icon-container Applied to Calendar previous and next icon container.
e-prev Applied to Calendar previous icon.
e-next Applied to Calendar next icon.
e-weekend Applied to Calendar weekend dates.
e-other-month Applied to Calendar other month dates.
e-day Applied to each day cell of the Calendar.
e-selected Applied to Calendar selected dates.
e-disabled Applied to Calendar disabled dates.
view
<ejs-daterangepicker id="daterangepicker" cssClass:"customCSS" placeholder="Select Rang

e"></ejs-daterangepicker>
618
Overview
The Dialog is a window that displays information to the user, and used to get the user input.
There are two types of Dialog:
Modal - The user should be working with Dialog before interacting with the parent
application.
Modeless - It allows to interact with parent application even the Dialog opened on the page.
Key Features
Modal: - Prevents the interaction to the parent application.
Buttons: - Provided the built-in support to render the buttons at Dialog footer.
Templates: - Customizable Dialog header and footer through the template.
Draggable: - Supports to drag the Dialog within the page or container.
Positioning: - Provided support to position on built-in 9 places or any custom location.
Animation: - Provided built-in animation support on open & close the Dialog with
customization.
Localization: - Supports to localize the default close icon title text to different cultures.
Accessibility: - Built-in compliance with the WAI-ARIA specifications.
Keyboard Interaction: - The Dialog can be intractable through keyboard.
619
Getting Started
This section briefly explains about how to include a simple Dialog in your ASP.NET Core
part part of the system requirements and configure the common specifications.
NuGet feed, you also have to include the license key in your projects. Please refer to this
link to know about registering Syncfusion license key in your ASP.NET Core application to
use our components.

Now open your view page to render Toolbar component.
view
data.cs
<ejs-button id="normalbtn" content="Open"></ejs-button>

<ejs-dialog id="default_dialog" width="500px" target="#target" open="dialogOpen" Co
ntent="<p>In the Succinctly series, Syncfusion created a robust, free library of more t
han 130 technical e - books formatted for PDF, Kindle, and EPUB.The Succinctly series w
as born in 2012 out of a desire to provide concise technical e-books for software devel
opers.Each title in the Succinctly series is written by a carefully chosen expert and p
rovides essential content in about 100 pages.</p>"
close="dialogClose" showCloseIcon="true" header="About SYNCFUSION succin
tly series">
<e-dialog-buttons>
<e-dialog-dialogbutton buttonModel="ViewBag.button" click="dlgButtonClick">
</e-dialog-dialogbutton>
</e-dialog-buttons>
</ejs-dialog>
using System;
using System.Linq;
{
public partial class DialogController : Controller
{
620
{
return View();
}
{
ViewBag.button = new
{
content = "LEARN ABOUT SYNCFUSION, INC."
};
return View();
}
}
}
System Requirements
Visual Studio 2017
DotNetCore 2.0

Application
components.
will open.
input box.
621
Adding TagHelpers
Adding themes
Refer the required theme file in your layout.cshtml page from wwwroot/styles folder.
<link href="~/styles/material.css" rel="stylesheet"/>
Above referred CSS is material theme. Likewise you can refer the theme specific CSS
which is present inside the styles folder in order to render Slider component with required
themes.
Initialize the Dialog

Dialog component can be rendered with the help of ejs-dialog tag helper. Add the below
code to your index.cshtml page which is present under Views/Home folder, where the
Dialog is initialized.
Run the application

622
The below example shows the Dialog.
Modal Dialog
A modal shows an overlay behind the Dialog. So, the user should interact the Dialog compulsory
before interacting with the remaining content in an application.
While the user clicks the overlay, the action can be handled through the overlayClick event. In
the below sample, the Dialog close action is performed while clicking on the overlay.
When the modal dialog is opened, the Dialog's target scrolling will be disabled. The
scrolling will be enabled again once close the Dialog.
view
Modal.cs
<div id='container'>
<ejs-button id="targetButton" content="Open Modal Dialog"></ejs-button>
<ejs-dialog id='dialog' isModal="true" overlayClick="onOverlayClick" content="This
is a modal dialog" target="#container"></ejs-dialog>
</div>
<script>
document.getElementById('targetButton').onclick = function () {
var dialog = document.getElementById("dialog").ej2_instances[0];
dialog.show();
}
}
function onOverlayClick() {
dialog.hide();
}
</script>
public ActionResult Modal()

{
return View();
}
623
Enable header
The Dialog header can be enabled by adding the header content as text or HTML content
through the header property.
view
EnableHeader.cs
<ejs-button id="targetButton" content="Open Dialog"></ejs-button>
<ejs-dialog id='dialog' header="Dialog" showCloseIcon="true" content="This is a dia
log with header" target="#container" width="250px"></ejs-dialog>
</div>
}
<script>
dialog.show();
}
}
</script>
public ActionResult EnableHeader()

{
return View();
}
Enable footer
The Dialog provides built-in support to render the buttons on the footer (for ex: ‘OK’ or ‘Cancel’
buttons). Each Dialog button allows the user to perform any action while clicking on it.
The primary button will be focused automatically on open the Dialog, and add the click event
to handle the actions
When the Dialog initialize with more than one primary buttons, the first primary button gets
focus on open the Dialog.
The below sample render with button and its click event.
624
view
EnableFooter.cs
<ejs-dialog id="dialog" header="Dialog" content="This is a Dialog with button and prima
ry button" target="#container" width="250px">
<e-dialog-buttons>
<e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons" click="dlgButtonCli
ck"></e-dialog-dialogbutton>
<e-dialog-dialogbutton buttonModel="@ViewBag.DialogButton1" click="dlgButtonCli
</e-dialog-buttons>
</ejs-dialog>
</div>
}
<script>
dialog.show();
}
}
dialogObj.hide();
}
</script>
public ActionResult EnableFooter()

{
ViewBag.DialogButtons = new
{
isPrimary = true,
cssClass = "e-flat",
content = "OK"
};
ViewBag.DialogButton1 = new
{
content = "Cancel",
cssClass = "e-flat"
};
return View();
625
}
Draggable
The Dialog supports to drag within its target container by grabbing the Dialog header, which
allows the user to reposition the Dialog dynamically.
The Dialog can be draggable only when the Dialog header is enabled and working only for
non-modal dialog. (isModal:false)
view
Draggable.cs
<ejs-dialog id='dialog' header='Dialog' allowDragging="true" content='This is a Dia
log with drag enable' width="250px">
<e-dialog-buttons>
<e-dialog-dialogbutton buttonModel="@ViewBag.DialogButton1" click="dlgButto
</e-dialog-buttons>
</ejs-dialog>
</div>
<script>
dialog.show();
}
}
dialogObj.hide();
}
</script>
public ActionResult Draggable()

{
626
{
isPrimary = true,
content = "OK"
};
{
content = "Cancel",
cssClass = "e-flat"
};
return View();
}
Positioning
The Dialog position can be set through the position property by providing X and Y coordinates.
The Dialog can be positioned inside the target container based on the given X and Y values.
For example position:{ X:'center', Y:'center' } the possible values
for X is: left, center, right (or) any offset value

for Y is: top, center, bottom (or) any offset value
The below sample demonstrates the different Dialog positions.
view
Positioning.cs
<ejs-dialog id='dialog' header='Dialog Positions' content='@ViewBag.content'
target='#container' width='350px' footerTemplate="<span id='posvalue' style='float:lef
t; padding-left:10px;font-weight: bold;'>Position: {X: 'left', Y: 'top'}</span>">
</ejs-dialog>
</div>
}
<script>
function changePosition(event) {
dialog.position = { X: event.currentTarget.value.split(" ")[0], Y: event.curren
tTarget.value.split(" ")[1] };
document.getElementById("posvalue").innerHTML = 'Position: {X: "' + event.curre
ntTarget.value.split(" ")[0] + '", Y: "' + event.currentTarget.value.split(" ")[1] + '"
}';
627
};
</script>
public ActionResult Positioning()

{
ViewBag.content = "<table style='width: 320px;'> <tr> <td><input type='radio' name
='xy' onclick='changePosition(event)' value='left top' checked='true'>left top</td> <td
><input type='radio' name='xy' onclick='changePosition(event)' value='center top'>cente
r top</td> <td><input type='radio' name='xy' onclick='changePosition(event)' value='rig
ht top'>right top</td> </tr> <tr> <td><input type='radio' name='xy' onclick='changePosi
tion(event)' value='left center'>left center</td> <td><input type='radio' name='xy' onc
lick='changePosition(event)' value='center center'>center center</td> <td><input type='
radio' name='xy' onclick='changePosition(event)' value='right center'>right center</td>
</tr> <tr> <td><input type='radio' name='xy' onclick='changePosition(event)' value='le
ft bottom'>left bottom</td> <td><input type='radio' name='xy' onclick='changePosition(e
vent)' value='center bottom'>center bottom</td> <td><input type='radio' name='xy' oncli
ck='changePosition(event)' value='right bottom'>right bottom</td> </tr> </table>";
return View();
}
628
Template
In Dialog the template support is provided to the header and footer sections. So any text or
HTML content can be appending in these sections.
Header
The Dialog header content can be provided through the header property, and it will allow both
text and any HTML content as a string. Also in header, close button is provided as built-in
support, and this can be enabled through the showCloseIcon property.
Footer
The Dialog footer can be enabled by adding built-in buttons or providing any HTML string
through the footerTemplate .
The buttons and footerTemplate properties can't be used at the same time.
The below example demonstrates the usage of header and footer template in the Dialog
view
Footer.cs
<div id="target" class="col-lg-12 control-section" style="height:100%">

<ejs-button id="targetButton" e-ripple="true" content="OPEN DIALOG"></ejs-button
>
<ejs-dialog id="dialog" open="dialogOpen" height="85%" width="45%" target="#tar
get" close="dialogClose" header="<img class='img2' src='./../css/Dialog/images/1.png'><
div title='Nancy' class='e-icon-settings e-icons'' style='padding: 3px;'>Nancy</div>"
showCloseIcon="true" content="<div class='dialogContent'><span clas
s='dialogText'>Greetings Nancy! When will you share me the source files of the project?
</span></div>" created="onLoad" footerTemplate="<input id='inVal' class='e-input' type=
'ext' placeholder='Enter your message here!'/><button id='sendButton' class='e-control
e-btn e-primary' data-ripple='true'>Send</button>">
</ejs-dialog>
</div>
}
<script>
var validText;
dialogObj.show();
629
};
function onLoad() {
(document.getElementById('inVal')).onkeydown = function (e) {
if (e.keyCode === 13 && validText != "") {
updateTextValue();
}
};
(document.getElementById('sendButton')).onkeydown = function (e) {
if (e.keyCode === 13 && validText != "") {
updateTextValue();
}
};
document.getElementById('sendButton').onclick = function (e) {
updateTextValue();
}
}
function updateTextValue() {
var enteredVal = document.getElementById('inVal');
var dialogTextElement = document.getElementsByClassName('dialogText')[0];
var dialogTextWrap = document.getElementsByClassName('dialogContent')[0];
if (enteredVal.value !== '') {
dialogTextElement.innerHTML = enteredVal.value; enteredVal.value = '';
}
}
</script>
public ActionResult Footer()

{
return View();
}
630
Animation
The Dialog can be animated during the open and close actions. Also, user can customize
animation's delay , duration and effect .
delay The Dialog animation will start with the mentioned delay
duration Specifies the animation duration to complete with one animation cycle
Specifies the animation effects of Dialog open and close actions effect.
List of supported animation effects:

'Fade' | 'FadeZoom' | 'FlipLeftDown' | 'FlipLeftUp' | 'FlipRightDown' |
effect 'FlipRightUp' | 'FlipXDown' | 'FlipXUp' | 'FlipYLeft' | 'FlipYRight' | 'SlideBottom' |
'SlideLeft' | 'SlideRight' | 'SlideTop' | 'Zoom'| 'None'
If the user sets ‘Fade’ effect, then the Dialog will open with ‘FadeIn’ effect and
close with ‘FadeOut’ effect
In the below sample, Zoom effect is enabled. So, The Dialog will open with ZoomIn and close
with ZoomOut effects.
view
Animation.cs
<ejs-dialog id='dialog' header='Dialog' content='Dialog enabled with Zoom effect' t
arget='#container' width='350px' animationSettings="new DialogAnimationSettings {Effect
=DialogEffect.Zoom,Duration=400, Delay= 0 }">
<e-dialog-buttons>
</e-dialog-buttons>
</ejs-dialog>
</div>
<script>
dialog.show();
631
}
}
dialogObj.hide();
}
</script>
public ActionResult Animation()

{
{
isPrimary = true,
content = "OK"
};
{
content = "Cancel",
cssClass = "e-flat"
};
return View();
}
632
Localization
Localization library allows to localize the default text content of Dialog. In Dialog, The close
button's tooltip text alone will be localize based on culture.
Locale key en-US (default)
close close
To load translation object in an application use load function of L10n class.
In the below sample, French culture is set to Dialog and change the close button's tooltip text.
view
Localization.cs
<ejs-dialog id="dialog" locale="fr-BE" showCloseIcon="true" header="Dialogue" conte
nt="Dialogue avec la culture française" target="#container" width="250px"></ejs-dialog>
</div>
<script>
dialog.show();
}
ej.base.L10n.load({
'fr-BE': {
'dialog': { 'close': "Fermer" }
}
});
}
</script>
public ActionResult Localization()

{
633
return View();
}
634
Accessibility
The Dialog characterized with complete ARIA Accessibility support which helps to accessible by
on-screen readers and other assistive technology devices. This component designed with the
reference of the guidelines document given in WAI ARAI Accessibility Practices.
The Dialog component uses the Dialog role and following ARIA properties to its element based
on its state.
Property Functionalities
aria- It indicates the Dialog content description is notified to the user through
describedby assistive technologies.
aria-
The Dialog title is notified to the user through assistive technologies.
labelledby
aria-modal For modal dialog it's value is true and non-modal dialog its value is false
aria- Enable the draggable Dialog and starts dragging it is value is true and
grabbed stopping the drag its value is false
Keyboard interaction of Dialog component has designed based on WAI-ARIA Practices
described for Dialog. User can use the following shortcut keys to interact with the Dialog.
Keyboard
Actions
shortcuts
Esc Closes the Dialog. This functionality can be controlled by using

`closeOnEscape`
When the Dialog button or any input (except text area) is in focus state, when
Enter pressing the Enter key, the click event associated with the primary button or
button will trigger. Enter key is not working when the Dialog content contains
any text area with initial focus
Ctrl + When the Dialog content contains text area and it is in focus state, and press
Enter the Ctrl + Enter key to call the click event function associated with primary
button
Tab Focus will be changed within the Dialog elements
Shift + The Focus will be changed previous focusable element within the Dialog
Tab elements. When focusing a first focusable element in the Dialog, then press
the shift + tab key, it will change the focus to last focusable element
view
Accessibility.cs
635
<ejs-dialog id="dialog" header="feedback" content="@ViewBag.content" showCloseIcon=
"true" target="#container" width="400px" height="300px">
<e-dialog-buttons>
</e-dialog-buttons>
</ejs-dialog>
</div>
<script>
dialog.show();
}
}
dialogObj.hide();
}
</script>
public ActionResult Accessibility()

{
{
isPrimary = true,
content = "Submit"
};
return View();
}
636
How to
Create Nested Dialog

A Dialog can be nested within another Dialog. The below sample contains parent and child
Dialog (inner Dialog).
Step 1:
Create two div elements with id #dialog and #innerDialog .
Step 2:
Initialize the Dialog as mentioned in the below sample.
Step 3:
Set the inner Dialog target as #dialog .
view
NestedDialog.cs
<ejs-dialog id="dialog" header="Outer Dialog" showCloseIcon="true" target="#contain
er" height="300px" closeOnEscape="false" width="400px">
<e-dialog-animationsettings effect="None"></e-dialog-animationsettings>
</ejs-dialog>
<ejs-dialog id='innerDialog' showCloseIcon="true" header="Inner Dialog" closeOnEscape=
"false" content="This is a Nested Dialog" target="#dialog" height="150px" width="250px">
<e-dialog-animationsettings effect="None"></e-dialog-animationsettings>
</ejs-dialog>
</div>
}
<script>
var innerDialog = document.getElementById("innerDialog").ej2_instances[0];
dialog.show();
innerDialog.show();
}
}
</script>
637
public ActionResult NestedDialog()
{
return View();
}
Position the Dialog on center of the page on scrolling

By default, when scroll the page/container Dialog also scrolled along with the page/container.
When a user expects to display the Dialog in the same position without scrolling achieving this in
sample level as like below. Here added 'e-fixed' class to Dialog element and prevent the
scrolling.
view
Scrolling.cs
<div>
<b>JavaScript:</b><br />
JavaScript is a high-level, dynamic, untyped, and interpreted programming l
anguage. It has been standardized in the ECMAScript
language specification. Alongside HTML and CSS, it is one of the three esse
ntial technologies of World Wide Web
content production; the majority of websites employ it and it is supported
by all modern Web browsers without
plug-ins. JavaScript is prototype-based with first-class functions, making
it a multi-paradigm language, supporting
object - oriented , imperative, and functional programming styles.
<br /><br /><br />
<b>MVC:</b><br />
Model–view–controller (MVC) is a software architecture pattern which separa
tes the representation of information from the user's interaction with it. The model co
nsists of application data, business rules, logic, and functions. A view can be any out
put representation of data, such as a chart or a diagram. Multiple views of the same da
ta are possible, such as a bar chart for management and a tabular view for accountants.
The controller mediates input, converting it to commands for the model or view.The cen
tral ideas behind MVC are code reusability and in addition to dividing the application
into three kinds of components, the MVC design defines the interactions between them.
A controller can send commands to its associated view to change the view's
presentation of the model (e.g., by scrolling through a document). It can also send com
mands to the model to update the model's state (e.g., editing a document).
638
A model notifies its associated views and controllers when there has been a
change in its state. This notification allows the views to produce updated output, and
the controllers to change the available set of commands. A passive implementation of M
VC omits these notifications, because the application does not require them or the soft
ware platform does not support them.
A view requests from the model the information that it needs to generate an
output representation to the user.
</div>
<ejs-dialog id='dialog' content="@ViewBag.content" header="Dialog" closeOnEscape
="false" target="#container" width="250px"></ejs-dialog>
</div>
<script>
dialog.cssClass = 'e-fixed';
}
}
</script>
public ActionResult Scrolling()

{
ViewBag.content = "<button class='e-control e-btn' id='targetButton' role='button'
>Prevent Dialog Scroll</button>";
return View();
}
Load dialog content using AJAX

You can load dialog's content dynamically from external source like external file using AJAX
library. The AJAX library can make the request and load dialog's content using its success
event. Refer the following link to learn about how to load dialog content using AJAX.
AJAX Content
Render a dialog without header

The dialog can be rendered without header by setting the header property value as empty string
or null. By default, dialog is rendered without header.
639
view
header.cs
<ejs-dialog id="dialog" content="This is a dialog without header." target="#container"
width="250px">
<e-dialog-buttons>
</e-dialog-buttons>
</ejs-dialog>
</div>
}
<script>
dialog.show();
}
dialogObj.hide();
}
</script>
using System;
using System.Linq;
{
{
public class ButtonModel
{
public string content { get; set; }
public bool isPrimary { get; set; }
public string cssClass { get; set; }
public string Click { get; set; }
640
}
// GET: RTL
{
List<DialogDialogButton> button = new List<DialogDialogButton>();
button.Add(new DialogDialogButton() { ButtonModel = new ButtonModel() { Cli
ck = "dlgButtonClick", isPrimary = true, cssClass = "e-flat", content = "OK" } });
ck = "dlgButtonClick", content = "Cancel", cssClass = "e-flat" } });
ViewBag.DialogButtons = button;
return View();
}
return View();
}
}
Show dialog with full screen

You can show the dialog in full screen by passing true as argument to the dialog show method.
view
fullscreen.cs
<ejs-dialog id="dialog" header="Dialog" content="This is a Dialog with full screen disp
lay." target="#container" width="250px">
<e-dialog-buttons>
</e-dialog-buttons>
</ejs-dialog>
</div>
}
<script>
dialog.show();
}
641
dialogObj.hide();
}
</script>
using System;
using System.Linq;
{
{
{
public string cssClass { get; set; }
// GET: RTL
{
ck = "dlgButtonClick", isPrimary = true, cssClass = "e-flat", content = "OK" } });
ck = "dlgButtonClick", content = "Cancel", cssClass = "e-flat" } });
return View();
}
return View();
}
}
Display a dialog with custom position

By default, the dialog is displayed in the center of the target container. The dialog position can be
set using the position property by providing custom X and Y coordinates. The dialog can be
positioned inside the target based on the given X and Y values.
642
view
position.cs
@using Syncfusion.EJ2
@{
var dlgposition1 = new Syncfusion.EJ2.Popups.DialogPositionData { X="160", Y ="14"
};
var dlgposition2 = new Syncfusion.EJ2.Popups.DialogPositionData { X="160", Y ="240"
};
}
<ejs-dialog id="dialog" header="Position-01" content="The dialog is positioned at {X: 1
60, Y: 14} co-ordinates." target="#container" position="dlgposition1" height="120px" wi
dth="360px">
</ejs-dialog>
<ejs-dialog id="dialog" header="Position-02" content="The dialog is positioned at {X: 1
60, Y: 240} co-ordinates." target="#container" position="dlgposition2" height="120px" w
idth="260px">
</ejs-dialog>
</div>
}
using System;
using System.Linq;
{
{
return View();
}
}
Prevent closing of modal dialog

You can prevent closing of modal dialog by setting the beforeClose event argument cancel value
to true. In the following sample, the dialog is closed when you enter the user name value with
minimum 4 characters. Otherwise, it will not be closed.
643
view
<ejs-dialog id="dialog" header="Sign In" beforeClose="validation" target="#container" w
idth="300px">
<e-content-template>
<div class='wrap'>
<div id='input-container'>
<div class='e-float-input'><input id='textvalue' type='text' required/><span
class='e-float-line'></span>
<label class='e-float-text'>Username </label>
</div>
</div><div class='form-group'>
<div class='e-float-input'>
<input id='textvalue2' type='Password' required/>
<span class='e-float-line'></span>
<label class='e-float-text'>Password</label>
</div>
</div>
</e-content-template>
<e-dialog-buttons>
</e-dialog-buttons>
</ejs-dialog>
</div>
}
<script>
// To get the all input fields and its container.
let inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-inpu

t.e-input-group input');
// Add 'e-input-focus' class to the input for achive ripple effect when focus on th
e input field.
for (let i = 0; i < inputElement.length; i++) {

inputElement[i].addEventListener("focus", function () {
let parentElement = this.parentNode;
if (parentElement.classList.contains('e-input-in-wrap')) {
parentElement.parentNode.classList.add('e-input-focus');
} else {
this.parentNode.classList.add('e-input-focus');
}
644
});
inputElement[i].addEventListener("blur", function () {
parentElement.parentNode.classList.remove('e-input-focus');
} else {
this.parentNode.classList.remove('e-input-focus');
}
});
}
// Add 'e-input-btn-ripple' class to the icon element for achive ripple effect when
click on the icon.
var inputIcon = document.querySelectorAll('.e-input-group-icon');

for (let i = 0; i < inputIcon.length; i++) {
inputIcon[i].addEventListener('mousedown', function () {
this.classList.add('e-input-btn-ripple');
});
inputIcon[i].addEventListener('mouseup', function () {
let element = this;
setTimeout(function () {
element.classList.remove('e-input-btn-ripple');
}, 500);
});
}
dialog.show();
document.getElementById("textvalue").value = "";
document.getElementById("textvalue2").value = "";
};
dialogObj.hide();
}
function validation(args) {
let text = document.getElementById('textvalue');
if (text.value ==="") {
args.cancel= true;
alert("Enter the username and password")
} else if (text.value.length < 4) {
args.cancel= true;
alert("Username must be minimum 4 characters");
} else {
args.cancel= false;
}
645
}
</script>
Prevent opening of the dialog

You can prevent opening of the dialog by setting the beforeOpen event argument cancel value to
true. In the following sample, the success dialog is opened when you enter the user name value
with minimum 4 characters. Otherwise, it will not be opened.
view
check.cs
<div class="login-form">
<div class='wrap'>
<div id="heading">Sign in</div>
<div id="input-container">
<div class="e-float-input e-input-group">
<input id="textvalue" type="text" required/>
<span class="e-float-line"></span>
<label class="e-float-text">Username</label>
</div>
<input id="textvalue2" type="password" required/>
<label class="e-float-text">Password</label>
</div>
</div>
<div class="button-contain">
<button class="e-control e-btn e-info" id="targetButton" role="button" e-ri
pple="true" >Log in</button>
</div>
</div>
</div>
<e-dialog-buttons>
</e-dialog-buttons>
</ejs-dialog>
646
</div>
}
<script>

e input field.

} else {
}
});
} else {
}
});
}
click on the icon.

});
let element = this;
}, 500);
});
}
647
dialogObj.hide();
}
args.cancel= true;
args.cancel= true;
} else {
args.cancel= false;
}
}
</script>
<style>
html,
body,
#container {
height: 100%;
overflow: hidden;
width: 100%;
}
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
box-sizing: border-box;
margin: 0 auto;
padding: 20px 30px;
width: 340px;
background: #f7f7f7;
}
#input-container .e-float-input { /* csslint allow: adjoining-classes */
648
margin: 17px 0;
}
.wrap #input-container .e-control e-btn { /* csslint allow: adjoining-classes */
margin: 3% 26%;
}
.text-center {
text-align: center;
}
#content {
margin-top: 12px;
}
.button-contain {
padding: 20px 0 0;
width: 100%;
}
.button-contain .e-btn { /* csslint allow: adjoining-classes */

width: 100%;
height: 36px;
}
#heading {
color: #333;
font-weight: bold;
margin: 0 0 15px;
text-align: center;
font-size: 20px;
}
.login-form {
width: 340px;
margin: 50px auto;
}
#dialog.e-dialog .e-footer-content {
text-align: center;
}
</style>
using System;
using System.Linq;
649
{
{
{
// GET: RTL
{
ck = "dlgButtonClick", isPrimary = true, content = "Dismiss" } });
return View();
}
return View();
}
}
Read all the values from dialog on button click

You can read the dialog element values by binding the action handler to the footer buttons. The
buttons property provides the options to bind events to the action buttons. For detailed
information about buttons , refer to the Footer section. In the below sample, value of input
elements within the dialog has been checked in the footer button click event and send the values
as the content of confirmation dialog.
view
check.cs
<div class='wrap'>
650
</div>
</div>
</div>
</div>
</div>
</div>
<e-dialog-buttons>
</e-dialog-buttons>
</ejs-dialog>
</div>
}
<script>

e input field.

} else {
}
});
} else {
651
}
});
}
click on the icon.

});
let element = this;
}, 500);
});
}
dialogObj.hide();
}
args.cancel= true;
args.cancel= true;
} else {
args.cancel= false;
}
}
</script>
<style>
html,
body,
#container {
height: 100%;
overflow: hidden;
width: 100%;
652
}
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 0 auto;
padding: 20px 30px;
width: 340px;
}
margin: 17px 0;
}
margin: 3% 26%;
}
.text-center {
text-align: center;
}
#content {
margin-top: 12px;
}
.button-contain {
padding: 20px 0 0;
width: 100%;
}

width: 100%;
height: 36px;
}
#heading {
color: #333;
653
font-weight: bold;
margin: 0 0 15px;
text-align: center;
font-size: 20px;
}
.login-form {
width: 340px;
margin: 50px auto;
}
text-align: center;
}
</style>
using System;
using System.Linq;
{
{
{
// GET: RTL
public ActionResult DefaultDialog()
{
List<DialogDialogButton> buttons = new List<DialogDialogButton>();
ck = "submitButtonClick", isPrimary = true, content = "Submit" } });
buttons.Add(new DialogDialogButton() { Click = "dlgButtonClick", ButtonMode
l = new DefaultButtonModel() { content = "YES", isPrimary = true, iconCss = "e-icons e-
ok-icon" } });
buttons.Add(new DialogDialogButton() { Click = "returnClick", ButtonModel =
654
new DefaultButtonModel() { content = "NO", iconCss = "e-icons e-close-icon" } });
ViewBag.SubmitButtons = buttons;
return View();
}
return View();
}
}
Customize the dialog appearance

You can customize the dialog appearance by providing dialog template as string or HTML
element to the content property. In the following sample, dialog is customized as error window
appearance.
view
check.cs
<div class='wrap'>
</div>
</div>
</div>
</div>
</div>
</div>
<e-dialog-buttons>
655
</e-dialog-buttons>
</ejs-dialog>
</div>
}
<script>

e input field.

} else {
}
});
} else {
}
});
}
click on the icon.

});
let element = this;
}, 500);
});
}
656
dialogObj.hide();
}
args.cancel= true;
args.cancel= true;
} else {
args.cancel= false;
}
}
</script>
<style>
html,
body,
#container {
height: 100%;
overflow: hidden;
width: 100%;
}
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 0 auto;
padding: 20px 30px;
width: 340px;
657
}
margin: 17px 0;
}
margin: 3% 26%;
}
.text-center {
text-align: center;
}
#content {
margin-top: 12px;
}
.button-contain {
padding: 20px 0 0;
width: 100%;
}

width: 100%;
height: 36px;
}
#heading {
color: #333;
font-weight: bold;
margin: 0 0 15px;
text-align: center;
font-size: 20px;
}
.login-form {
width: 340px;
margin: 50px auto;
}
text-align: center;
}
</style>
using System;
658
using System.Linq;
{
{
{
// GET: RTL
{
ck = "dlgButtonClick", isPrimary = true, content = "Close" } });
return View();
}
return View();
}
}
Close dialog by clicking Esc key and close icon

By default, dialog can be closed by pressing Esc key and clicking the close icon on the right of
dialog header. It can also be closed by clicking outside of the dialog using hide method. Set the
CloseOnEscape property value to false to prevent closing of the dialog when pressing Esc key.
In the following sample, dialog is closed when clicking outside the dialog area using hide method.
view
check.cs
<div class='wrap'>
659
</div>
</div>
</div>
</div>
</div>
</div>
<e-dialog-buttons>
</e-dialog-buttons>
</ejs-dialog>
</div>
}
<script>

e input field.

} else {
}
});
660
} else {
}
});
}
click on the icon.

});
let element = this;
}, 500);
});
}
dialogObj.hide();
}
args.cancel= true;
args.cancel= true;
} else {
args.cancel= false;
}
}
</script>
<style>
html,
body,
#container {
height: 100%;
overflow: hidden;
661
width: 100%;
}
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 0 auto;
padding: 20px 30px;
width: 340px;
}
margin: 17px 0;
}
margin: 3% 26%;
}
.text-center {
text-align: center;
}
#content {
margin-top: 12px;
}
.button-contain {
padding: 20px 0 0;
width: 100%;
}

width: 100%;
height: 36px;
}
#heading {
662
color: #333;
font-weight: bold;
margin: 0 0 15px;
text-align: center;
font-size: 20px;
}
.login-form {
width: 340px;
margin: 50px auto;
}
text-align: center;
}
</style>
using System;
using System.Linq;
{
{
{
// GET: RTL
{
buttons.Add(new DialogDialogButton() { Click = "dlgButtonClick", ButtonMod
el = new DefaultButtonModel() { content = "YES", isPrimary = true } });
l = new DefaultButtonModel() { content = "NO" } });
ViewBag.DialogButtons = buttons;
return View();
}
663
return View();
}
}
Render the template to dialog buttons

You can provide the template to the dialog buttons using the buttons property. For detailed
information about dialog buttons, refer to the documentation section.
In the following sample, dialog footer buttons are customized with icons.
view
check.cs
<div class='wrap'>
</div>
</div>
</div>
</div>
</div>
</div>
<e-dialog-buttons>
</e-dialog-buttons>
</ejs-dialog>
</div>
}
664
<script>

e input field.

} else {
}
});
} else {
}
});
}
click on the icon.

});
let element = this;
}, 500);
});
}
dialogObj.hide();
}
665
args.cancel= true;
args.cancel= true;
} else {
args.cancel= false;
}
}
</script>
<style>
html,
body,
#container {
height: 100%;
overflow: hidden;
width: 100%;
}
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 0 auto;
padding: 20px 30px;
width: 340px;
}
margin: 17px 0;
}
666
margin: 3% 26%;
}
.text-center {
text-align: center;
}
#content {
margin-top: 12px;
}
.button-contain {
padding: 20px 0 0;
width: 100%;
}

width: 100%;
height: 36px;
}
#heading {
color: #333;
font-weight: bold;
margin: 0 0 15px;
text-align: center;
font-size: 20px;
}
.login-form {
width: 340px;
margin: 50px auto;
}
text-align: center;
}
</style>
using System;
using System.Linq;
667
{
{
{
public string iconCss { get; set; }
// GET: RTL
{
List<DialogDialogButton> buttons = new List<DialogDialogButton>() { };
l = new DefaultButtonModel() { content = "YES", isPrimary = true, iconCss = "e-icons e-
ok-icon" } });
l = new DefaultButtonModel() { content = "NO", iconCss = "e-icons e-close-icon" } });
ViewBag.DefaultButtons = buttons;
return View();
}
return View();
}
}
668
Overview
The Document Editor component is used to create, edit, view, and print Word documents in web
applications. All the user interactions and editing operations that run purely in the client-side
provides much faster editing experience to the users.
Key Features
Opens the native Syncfusion Document Text (*.sfdt) format documents in the client-side.
Saves the documents in the client-side as Syncfusion Document Text (*.sfdt) and Word
document (*.docx) .
Supports document elements like text, inline image, table, fields, bookmark, section, header,
and footer.
Supports the commonly used fields like hyperlink, page number, page count, and table of
contents.
Supports formats like text, paragraph, bullets and numbering, table, page settings, etc.
Provides support to create, edit, and apply paragraph and character styles.
Provides support to find and replace text within the document.
Supports all the common editing and formatting operations along with undo and redo.
Provides support to cut, copy, and paste rich text contents within the component. Also allows
pasting simple text to and from other applications.
Allows user interactions like zoom, scroll, select contents through touch, mouse, and
keyboard.
Provides intuitive UI options like context menu, dialogs, and navigation pane.
Localizes all the static text to any desired language.
Allows to create a lightweight Word viewer using module injection to view and prints Word
documents.
Provides a server-side helper assembly to open the Word documents like DOCX, DOC,
WordML, RTF, and Text, by converting it to SFDT file format.
669
Getting Started with ASP.NET Core
Starting with v16.2.0.41, if you reference Syncfusion assemblies from trial setup or from the
our components.
Prerequisites
on the machine.
Visual Studio 2017

DotNet Core 2.0

ASP.NET Core
2017.
670
application by using Nugget Package Manager.
Open the nuGet package manager.
Assembly Reference.
671
We need to install NewtonSoft.JSON as dependency since it Syncfusion.EJ2 dependent
to NewtonSoft.JSON package.
<head>

</head>
Step 5: Adding Script Manager in layout page Views/Shared/_Layout.cshtml.
<body>
@RenderBody()
</body>
Step 6: Add the below code to your Index.cshtml view page which is present under Views/Home
folder, to initialize the document editor.
Module injection
To create DocumentEditor with additional features, inject the required modules. The following
modules are used to extend DocumentEditor�s basic functionality.
Print - Inject this module to use documenteditor print feature.

Selection - Inject this module to use document selection feature.
Editor - Inject this module to enable document editing feature.
EditorHistory - Inject this module to use document editing with undo and redo feature.
Search - Inject this module to use search content within document feature.
OptionsPane - Inject this module to use find and replace content within document feature.
WordExport - Inject this module to export document in client side as Word document
(*.docx) format.
TextExport - Inject this module to use export document in client side as Text document
(.txt) format.
672
SfdtExport - Inject this module to export document in client side as Syncfusion Document
Text (*.sfdt) format.
ImageResizer - Inject this module to use image resizer feature.
ContextMenu - Inject this module to use context menu when right clicked on document.
ParagraphDialog - Inject this module to modify paragraph format options via paragraph
dialog.
FontDialog - Inject this module to modify character format options via font dialog.
HyperlinkDialog - Inject this module to insert or edit hyperlink via hyperlink dialog.
TableDialog - Inject this module to use insert table via insert table dialog.
TableOfContentsDialog - Inject this module to insert table of contents via TOC dialog.
PageSetupDialog - Inject this module to modify page set up via page set up dialog.
ListDialog - Inject this module to modify list format option via list dialog feature.
StyleDialog - Inject this module to create or modify style via style dialog feature.
StylesDialog - Inject this module to create or modify styles via style dialog feature.
BulletsAndNumberingDialog - Inject this module to apply or modify list paragraph style via
bullet and numbering dialog feature.
TablePropertiesDialog - Inject this module to modify table, row and cell properties via
Table Properties dialog feature.
BordersAndShadingDialog - Inject this module to modify borders and shading of table or cell
via Borders And Shading Dialog.
TableOptionsDialog - Inject this module to modify table margin and spacing value via Table
Options dialog
CellOptionsDialog - Inject this module to modify cell margin values via Cell Options dialog .
BookmarkDialog - Inject this module to add, navigate or delete bookmarks via Bookmark
dialog .
These modules should be injected into the DocumentEditor using the DocumentEditor.Inject
method.
Enable Print
The print feature enables users to print the document. It can be enabled by setting the
enablePrint property to true. Inject the Print module as follows. If the Print module is not injected,
the Print will not be enabled in the documenteditor.
Enable Selection
The Selection feature enables users to select the content in document. It can be enabled by
setting the enableSelection property to true. Inject the Selection module as follows. If the
Selection module is not injected, the Selection will not be enabled in the documenteditor.
Enable Search
673
The search feature enables users to search the content in document. It can be enabled by setting
the enableSearch property to true and also enableOptionsPane property to true. Inject the
Search module as follows. If the Search module is not injected, the search functionality will not
be enabled in the documenteditor.
Enable Editor
The Editing feature enables users to edit the content in document. It can be enabled by setting
the isReadOnly property to true and also enableEditor property to true. Inject the Editor module
as follows. If the Editor module is not injected, the editing feature will not be enabled in the
documenteditor.
Enable Editor History

The Editor History feature enables users to edit the content in document with history preservation
(undo and redo functionality). It can be enabled by setting the enableEditorHistory property to
true. Inject the EditorHistory module as follows. If the EditorHistory module is not injected, the
undo and redo functionality will not be enabled in the documenteditor.
674
Overview
DropDownButton component is used to toggle contextual overlays for displaying list of action
items. It can contain both text and images.
Key Features
Icons
Popup Items
Accessibility
How To
675
Getting Started
This section briefly explains about how to create a simple DropDownButton 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 DropDownButton to the project

To create DropDownButton add the ejs-dropdownbutton tag with id attribute as element in
your Index.cshtml page.
view
<ejs-dropdownbutton id="element" content="Edit" items="ViewBag.items"></ejs-dropdownbut

ton>
ViewBag.items variable is used for bounding the items property in view page.
Bind dataSource
Populate the action items in SplitButton by using the items property. Here, the JSON values
are passed to the DropDownButton component are generated in default.cs and assigned to
ViewBag variable.

{
items.Add(new
{
text = "Cut"
});
items.Add(new
{
text = "Copy"
});
items.Add(new
{
text = "Paste"
});
return View();
}
676
Run the application

The following example shows a basic DropDownButton.
view
default.cs
<ejs-dropdownbutton id="element" content="Edit" items="ViewBag.items"></ejs-dropdownbut

ton>

{
items.Add(new
{
text = "Cut"
});
items.Add(new
{
text = "Copy"
});
items.Add(new
{
text = "Paste"
});
return View();
}
677
Icons and Styles
DropDownButton icons
DropDownButton can have an icon to provide the visual representation of the action. To place
the icon on a DropDownButton, set the iconCss property to e-icons with the required icon
CSS. By default, the icon is positioned to the left side of the DropDownButton. You can
customize the icon's position using the iconPosition property.
In the following example, the DropDownButton with default iconPosition and iconPosition as
Top is showcased:
view
iconbutton.cs
<ejs-dropdownbutton id="left-icon" content="Message" items="ViewBag.items" iconCss=
"e-icons e-message"></ejs-dropdownbutton>
<ejs-dropdownbutton id="top-icon" content="Message" items="ViewBag.items" iconCss="

e-icons e-message" iconPosition="Top"></ejs-dropdownbutton>
}
<style>
.e-message::before {
content: '\e80f';
}
button {
}
</style>
using System;
using System.Linq;
{
public class DropDownButtonController : Controller
{
public IActionResult IconButton()
678
{
items.Add(new
{
text = "Edit"
});
items.Add(new
{
text = "Delete"
});
items.Add(new
{
text = "Mark as Read"
});
items.Add(new
{
text = "Like Message"
});
return View();
}
}
}
name to the element. You can also use third party icons on the DropDownButton using the
iconCss property.
Vertical button
Vertical button in DropDownButton can be achieved by adding e-vertical class using
cssClass property.
view
verticalbutton.cs
<ejs-dropdownbutton id="vertical-btn" content="Message" items="ViewBag.items" iconCss
="e-icons e-message"></ejs-dropdownbutton>
}
<style>
content: '\e80f';
}
button {
679
}
</style>
using System;
using System.Linq;
{
{
public IActionResult VerticalButton()
{
items.Add(new
{
text = "Edit"
});
items.Add(new
{
text = "Delete"
});
items.Add(new
{
});
items.Add(new
{
});
return View();
}
}
}
680
Popup items
Icons
The popup action item have an icon or image to provide visual representation of the action. To
place the icon on a popup item, set the iconCss property to e-icons with the required icon
CSS. By default, the icon is positioned to the left side of the popup action item.
In the following sample, the icons for edit, delete, mark as read and like message menu items are
added using the iconCss property.
view
popupicons.cs
<ejs-dropdownbutton id="left-icon" content="Message" items="ViewBag.items" iconCss="
e-icons e-message"></ejs-dropdownbutton>
}
<style>
content: '\e80f';
}
.e-edit::before {
content: '\e7ae';
}
.e-delete::before {
content: '\e835';
}
.e-read::before {
content: '\e7e0';
}
.e-like::before {
content: '\e81a';
}
button {
}
</style>
681
using System;
using System.Linq;
{
{
public IActionResult PopupIcons()
{
items.Add(new
{
text = "Edit",
iconCss = 'e-icons e-edit'
});
items.Add(new
{
text = "Delete",
iconCss = 'e-icons e-delete'
});
items.Add(new
{
text = "Mark as Read",
iconCss = 'e-icons e-read'
});
items.Add(new
{
text = "Like Message",
iconCss = 'e-icons e-like'
});
return View();
}
}
}
Navigations
Actions in DropDownButton can be used to navigate to the other web page when action item is
clicked. This can be achieved by Popup items can be customized using the beforeItemRender
event. The item render event providing link to the action item using url property.
In the following sample, navigation URL for Flipkart, Amazon, and Snapdeal action items are
added using the url property:
682
view
navigation.cs
<ejs-dropdownbutton id="navigation" content="Shop By" items="ViewBag.items" iconCss="
e-icons e-link" beforeItemRender="beforeItemRender"></ejs-dropdownbutton>
}
<script>
args.element.getElementsByTagName('a')[0].setAttribute('target', '_blank');
}
</script>
<style>
.e-link::before {
content: '\e7e8';
}
button {
}
</style>
using System;
using System.Linq;
{
{
public IActionResult Navigation()
{
items.Add(new
{
text = 'Flipkart',
iconCss = 'e-icons e-link',
url = 'https://www.google.co.in/search?q=flipkart'
});
683
items.Add(new
{
text = 'Amazon',
url = 'https://www.google.co.in/search?q=amazon'
});
items.Add(new
{
text = 'Snapdeal',
url = 'https://www.google.co.in/search?q=snapdeal'
});
return View();
}
}
}
Template
Item templating
Popup items can be customized using the beforeItemRender event. The item render event
triggers while rendering each popup action item. The event argument will be used to identify the
action item and customize based on the requirement.
In the following example, the icons in each li items is right aligned by appending span element in
li rendering:
view
itemtemplate.cs
<ejs-dropdownbutton id="item-template" items="ViewBag.items" iconCss="e-icons e-ali

gn" beforeItemRender="beforeItemRender"></ejs-dropdownbutton>
<script>
var alignSpan = createElement('span');
args.element.appendChild(alignSpan);
alignSpan.setAttribute('class','alignSpan');
684
alignSpan.classList.add('e-icons');
(text === 'Align Left') ? alignSpan.classList.add('e-left') : (text === 'Align
Center') ? alignSpan.classList.add('e-center') :
alignSpan.classList.add('e-right');
}
</script>
<style>
.e-align::before {
content: '\e756';
}
.e-left::before {
content: '\e75e';
}
.e-center::before {
content: "\e749";
}
.e-right::before {
content: '\e713';
}
button {
}
</style>
using System;
using System.Linq;
{
{
public IActionResult ItemTemplate()
{
items.Add(new
{
685
text = "Align Left"
});
items.Add(new
{
text = "Align Center"
});
items.Add(new
{
text = "Align Right"
});
}
}
}
Popup Templating
The whole popup can be customized as per the requirement. In the following example, the popup
can be customized by handling it in target property.
view
popuptemplate.cs
<div id="target" style='border: 1px solid black;'>

<table>
<caption style='height: 18px; background-color: #e0e0e0;'><b>Insert Table</b
></caption>
<tr class='e-row'>
<td class='e-data'></td>
</tr>
<tr class='e-row'>
</tr>
<tr class='e-row'>
686
</tr>
<tr class='e-row'>
</tr>
<tr class='e-row'>
</tr>
<tr class='e-row'>
</tr>
</table>
</div>
<ejs-dropdownbutton id="element" content="Table" target="#target" iconCss="e-icons

e-table"></ejs-dropdownbutton>
<style>
.shortcut {
float: right;
margin-top: 9px;
padding-left: 30px;
height: 100px;
}
.e-data {
border: 1px solid rgba(0, 0, 0, 0.87);
687
padding: 8px;
}
.e-border {
border: black;
border-radius: 2px;
background-color: #fafafa;
}
.e-table::before {
content: '\e705';
}
.e-row {
padding-left: 3px;
padding-right: 3px;
}
button {
}
</style>
using System;
using System.Linq;
{
{
public IActionResult PopupTemplate()
{
return View();
}
}
}
688
Accessibility
ARIA attributes
disabilities. Mostly it helps in dynamic content change and development of advanced user
interface controls with AJAX, HTML, JavaScript, and related technologies. DropDownButton
provides built-in compliance with WAI-ARIA specifications. WAI-ARIA support is achieved
through the attributes like aria-expanded , aria-owns and aria-haspopup applied for action
item in DropDownButton. It helps by providing information about the widget for assistive
technology in the screen readers. DropDownButton component contains the menu role and
menuItem role.
menu Specified for an DropDownButton element.
menuItem Specified for an action items.
aria-
Indicates the availability and type of interactive dropdown popup element.
haspopup
aria- Indicates whether the current state of the dropdown popup can be expanded
expanded or collapsed.
Identifies elements to define a visual, functional, or contextual parent or child

aria-owns relationship between DOM(Document Object Model) elements where the
hierarchy cannot be used to represent the relationship.
Keyboard
Actions
shortcuts
Esc Closes the popup.
Enter Opens the popup, or activates the highlighted item and closes the
popup.
Space Opens the popup.
Up Navigates up or to the previous action item.
Down Navigates down or to the next action item.

Alt + Up Arrow Opens the popup.
Alt + Down
Arrow Closes the popup
689
view
accessibility.cs
<ejs-dropdownbutton id="element" content="Edit" items="ViewBag.items" iconCss="e-ico
ns e-edit"></ejs-dropdownbutton>
}
<style>
@font-face {
font-family: 'e-dropdown-btn';
src:
url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMjjNRVMAAAEo
AAAAVmNtYXDicOK6AAABjAAAADhnbHlmGcEPFQAAAcwAAAMwaGVhZA69CA8AAADQAAAANmhoZWEH9AQEAAAArAA
AACRobXR4DAAAAAAAAYAAAAAMbG9jYQDYAZgAAAHEAAAACG1heHABEgDAAAABCAAAACBuYW1lxY1d1QAABPwAAA
KFcG9zdPJwcMoAAAeEAAAASAABAAAEAAAAAFwEAAAAAAADlwABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAgmhm8
l8PPPUACwQAAAAAANYD4Y8AAAAA1gPhjwAAAAADlwP0AAAACAACAAAAAAAAAAEAAAADALQABQAAAAAAAgAAAAoA
CgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAUGZFZABA4mDiYQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAAAAAAAgAAAAMAAAAUAAMAAQAAAB
QABAAkAAAABAAEAAEAAOJh//8AAOJg//8AAAABAAQAAAABAAIAAAAAANgBmAAFAAAAAAOXA/QABAAlAC0ATgCzA
AABIScHJzcVHwc/By8HDwYBFSE1MxEhESUHFQ8GLwc/Bx8GJysBDw4RHw4zITM/DhEvDisBLw4rAQ8NAUQBd1xA
fr0BAwQGBwgICgkJCAcGBAMBAQMEBgcICQkKCAgHBgQD/qYB1l79jQFoAQMEBgcHCQkJCQgGBgQDAQEDBAYGCAk
JCQkHBwYEA6y9CgkICQgHBwcGBQQEAwMBAQEBAwMDBQUGBwcHCAkICQoCeAoJCAkIBwcHBgUEBAMDAQEBAQMDAw
UFBgcHBwgJCAkKvQQEBgUHBwcICQkJCgoKCwsLCwoKCgkJCQgHBwcFBgQBBYVRuh0FBQkIBwUFAgEBAgUFBwgJC
gkJCAcGBAMBAQMEBgcICQEifX39LwLRMwQFCAgHBQUCAQECBQUHCAgJCQkIBwUEAwEBAwQFBwgJIgICAwQFBQYG
BwgICAkJCf0pCQkJCAgIBwYGBQUEAwICAgIDBAUFBgYHCAgICQkJAtcJCQkICAgHBgYFBQQDAgIKCQkICAgHBgY
FBAQDAgICAgMEBAUGBgcICAgJCQAFAAAAAAOXA/QABwAPABcAOACdAAABHwIjPwIDMzczFzMDIycVITUzESERJQ
cVDwYvBz8HHwYnKwEPDhEfDjMhMz8OES8OKwEvDisBDw0B/wQKK3MmBQ6dMyeHKDWCO90B1l79jQFoAQMEBgcHC
QkJCQgGBgQDAQEDBAYGCAkJCQkHBwYEA6y9CgkICQgHBwcGBQQEAwMBAQEBAwMDBQUGBwcHCAkICQoCeAoJCAkI
BwcHBgUEBAMDAQEBAQMDAwUFBgcHBwgJCAkKvQQEBgUHBwcICQkJCgoKCwsLCwoKCgkJCQgHBwcFBgQCFREigG4
SM/6wd3cBe/t9ff0vAtEzBAUICAcFBQIBAQIFBQcICAkJCQgHBQQDAQEDBAUHCAkiAgIDBAUFBgYHCAgICQkJ/S
kJCQkICAgHBgYFBQQDAgICAgMEBQUGBgcICAgJCQkC1wkJCQgICAcGBgUFBAMCAgoJCQgICAcGBgUEBAMCAgICA
wQEBQYGBwgICAkJAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAA8AAQABAAAAAAACAAcAEAABAAAAAAADAA8A
FwABAAAAAAAEAA8AJgABAAAAAAAFAAsANQABAAAAAAAGAA8AQAABAAAAAAAKACwATwABAAAAAAALABIAewADAAE
ECQAAAAIAjQADAAEECQABAB4AjwADAAEECQACAA4ArQADAAEECQADAB4AuwADAAEECQAEAB4A2QADAAEECQAFAB
YA9wADAAEECQAGAB4BDQADAAEECQAKAFgBKwADAAEECQALACQBgyBDb250ZXh0TWVudSAoMilSZWd1bGFyQ29ud
GV4dE1lbnUgKDIpQ29udGV4dE1lbnUgKDIpVmVyc2lvbiAxLjBDb250ZXh0TWVudSAoMilGb250IGdlbmVyYXRl
ZCB1c2luZyBTeW5jZnVzaW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgAEMAbwBuAHQAZQB4AHQ
ATQBlAG4AdQAgACgAMgApAFIAZQBnAHUAbABhAHIAQwBvAG4AdABlAHgAdABNAGUAbgB1ACAAKAAyACkAQwBvAG
4AdABlAHgAdABNAGUAbgB1ACAAKAAyACkAVgBlAHIAcwBpAG8AbgAgADEALgAwAEMAbwBuAHQAZQB4AHQATQBlA
G4AdQAgACgAMgApAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1
AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgB
jAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQAD01UX1Bhc3RlU3BlY2lhbA
xNVF9QYXN0ZVRleHQAAA==) format('truetype');
font-style: normal;
690
}
/* csslint ignore:stop */
.e-ddb-icons {
font-family: 'e-dropdown-btn';
font-style: normal;
line-height: 1;
}
.e-edit::before {
content: '\e80a';
}
.e-cut::before {
content: '\e759';
}
.e-copy::before {
content: '\e70a';
}
.e-paste::before {
content: '\e71f';
}
.e-text::before {
content: '\e261';
}
.e-special::before {
content: '\e260';
}
button {
}
</style>
using System;
using System.Linq;
691
{
{
{
items.Add(new
{
text = "Cut",
});
items.Add(new
{
text = "Copy",
});
items.Add(new
{
text = "Paste",
});
items.Add(new
{
separator = "True"
});
items.Add(new
{
text = "Paste Text",
iconCss = "e-ddb-icons e-text"
});
items.Add(new
{
text = "Paste Special",
iconCss = "e-ddb-icons e-special"
});
return View();
}
}
}
692
How To
The following section explains how to customize various aspects of the DropDownButton.
Hide dropdown arrow

You can hide the dropdown arrow from the DropDownButton by adding class e-caret-hide to
DropDownButton element using cssClass property.
view
hidearrow.cs
<ejs-dropdownbutton id="hide-arrow" content="Edit" items="ViewBag.items" cssClass="e
-caret-hide"></ejs-dropdownbutton>
using System;
using System.Linq;
{
{
public IActionResult HideArrow()
{
items.Add(new
{
text = "Cut"
});
items.Add(new
{
text = "Copy"
});
items.Add(new
{
text = "Paste"
});
693
return View();
}
}
}
Change caret icon

Dropdown arrow can be customized on popup open and close. It can be handled in beforeOpen
and beforeClose event.
In the following example, the up arrow is updated on popup close and down arrow is updated on
popup open using beforeOpen and beforeClose event by adding and removing e-caret-up
class.
view
updown.cs
<ejs-dropdownbutton id="ddbtn" items="ViewBag.items" content="Clipboard" beforeOpen=
"beforeOpen" beforeClose="beforeClose"></ejs-dropdownbutton>
}
<style>
.e-caret-up .e-caret {
transform: rotate(180deg);
}
button {
}
</style>
<script>
// Removing 'e-caret-up' class.
function beforeClose (args) {
this.cssClass = '';
}
// Adding 'e-caret-up' class.
function beforeOpen (args) {
this.cssClass = 'e-caret-up';
}
</script>
using System;
using System.Linq;
694
{
{
public IActionResult HideArrow()
{
items.Add(new
{
text = "Cut"
});
items.Add(new
{
text = "Copy"
});
items.Add(new
{
text = "Paste"
});
return View();
}
}
}
Group popup items with ListView component

Header in popup items is possible in DropdownButton by templating entire popup with ListView.
Create ListView with id #listview and provide it as a target for DropDownButton.
In the following example, ListView element is given as target to DropDownButton and header
can be achieved by groupBy property.
view
listview.cs
<div>
<ejs-listview enable="true" id="listview" dataSource="ViewBag.listdata" showCheckBox=
"true">
<e-listview-fieldsettings text="text" groupBy="category"></e-listview-fieldsettin
gs>
</ejs-listview>
<ejs-dropdownbutton id="ddbtn" target='#listview' iconCss="e-icons e-down" cssClass="
695
e-caret-hide"></ejs-dropdownbutton>
</div>
}
<style>
.e-down::before {
content: '\e7d6';
}
#listview {
display: block;
max-width: 600px;
margin: auto;
border-radius: 3px;
}
button {
margin: 30% 5px 20px 30%;
}
</style>
using System;
using System.Linq;
namespace EJ2CoreSampleBrowser.Controllers.Button
{
public partial class ButtonController : Controller
{
public IActionResult DropDownButton()
{
listdata.Add(new
{
text = "Print",
id = "data1",
category = "Customize Quick Access Toolbar"
});
listdata.Add(new
{
text = "Save As",
id = "data2",
696
});
listdata.Add(new
{
text = "Update Folder",
id = "data3",
});
listdata.Add(new
{
text = "Reply",
id = "data4",
});
ViewBag.listdata = listdata;
return View();
}
}
}
Position popup open

Popup open position can be changed according to the requirement. Popup open position can be
changed in open event by setting top and left for the popup element.
In the following example, the top position of the popup element is changed in open event.
view
position.cs
<ejs-dropdownbutton id="ddbtn" items="ViewBag.items" cssClass="e-caret-up" content="C
lipboard" open="onOpen"></ejs-dropdownbutton>
}
<style>
.e-caret-up .e-caret::before {
content: '\e918';
}
button {
margin: 30% 5px 20px 30%;
}
</style>
<script>
function onOpen(args){
args.element.parentElement.style.top = document.getElementById('ddbtn').ej2_ins
tances[0].element.getBoundingClientRect().top - args.element.parentElement.offsetHeight
+'px';
697
}
</script>
using System;
using System.Linq;
using Syncfusion.EJ2.Buttons;
{
{
{
items.Add(new
{
text = "Cut"
});
items.Add(new
{
text = "Copy"
});
items.Add(new
{
text = "Paste"
});
return View();
}
}
}
Open a dialog on popup item click

This section explains about how to open a dialog on DropdownButton popup item click. This can
be achieved by handling dialog open in select event of the DropdownButton.
In the following example, Dialog will open while selecting Other Folder... item.
view
dialog.cs
698
<div>
<ejs-dialog id="dialog" header="Move Items" content="Move Items To 'Web Team'" visi
ble="false" width="250px">
<e-dialog-buttons>
<e-dialog-dialogbutton buttonModel="ViewBag.button" click="btnClick"></e-di
alog-dialogbutton>
</e-dialog-buttons>
<e-dialog-position X="100" Y="100"></e-dialog-position>
</ejs-dialog>
<ejs-dropdownbutton id="ddbtn" items="ViewBag.items" cssClass="e-vertical" iconCss=
"e-icons e-folder" content="Move" iconPosition="Top" select="onSelect"></ejs-dropdownbu
tton>
</div>
}
<style>
.e-folder::before {
content: '\e883';
}
button {
}
</style>
<script>
function onSelect(args){
if (args.item.text === 'Other Folder...') {
document.getElementById('dialog').ej2_instances[0].show();
}
}
function btnClick () {
document.getElementById('dialog').ej2_instances[0].hide();
}
</script>
using System;
using System.Linq;
{
{
699
{
items.Add(new
{
text = "Archive"
});
items.Add(new
{
text = "Inbox"
});
items.Add(new
{
text = "HR Portal"
});
items.Add(new
{
separator = true
});
items.Add(new
{
text = "Other Folder..."
});
items.Add(new
{
text = "Copy to Folder"
});
{
content="OK", cssClass="e-flat", isPrimary = true
};
return View();
}
}
}
Underline a character in the item text

Underline a particular character in a text can be handled in beforeItemRender event by adding
<u> tag in between the text and given as innerHTML in li rendering.
In the following example, C is underlined in the text Copy .
view
underline.cs
700
<ejs-dropdownbutton id="ddbtn" items="ViewBag.items" content="Clipboard" beforeItem
Render="itemRender"></ejs-dropdownbutton>
}
<style>
button {
}
</style>
<script>
function itemRender(args){
if (args.item.text === 'Copy') {
//To underline a particular text.
}
}
</script>
using System;
using System.Linq;
{
{
{
items.Add(new
{
text = "Cut"
});
items.Add(new
{
text = "Copy"
});
items.Add(new
{
text = "Paste"
});
701
return View();
}
}
}
Customize icon and width

Width of the DropDownButton can be customized by setting required width to the dropdown
element.
The following UI can be achieved by setting iconPosition as Top , width as 85px and size of
the font icon as 40px by adding e-custom class.
view
underline.cs
<ejs-dropdownbutton id="ddbtn" items="ViewBag.items" content="Clipboard" beforeItem
Render="itemRender"></ejs-dropdownbutton>
}
<style>
button {
}
</style>
<script>
function itemRender(args){
if (args.item.text === 'Copy') {
//To underline a particular text.
}
}
</script>
using System;
using System.Linq;
{
702
{
{
items.Add(new
{
text = "Cut"
});
items.Add(new
{
text = "Copy"
});
items.Add(new
{
text = "Paste"
});
return View();
}
}
}
Create DropDownButton with rounded corner

DropDownButton with rounded corner can be achieved by adding border-radius CSS property
to button element.
In the following example, e-round-corner class is defined with 5px border-radius property
and added that class to button element using cssClass property.
view
round.cs
<ejs-dropdownbutton id="ddbtn" items="ViewBag.items" cssClass="e-round-corner" cont
ent="Clipboard"></ejs-dropdownbutton>
}
<style>
.e-round-corner {
border-radius: 5px;
}
button {
}
</style>
703
using System;
using System.Linq;
{
{
{
items.Add(new
{
text = "Cut"
});
items.Add(new
{
text = "Copy"
});
items.Add(new
{
text = "Paste"
});
return View();
}
}
}
Disable a DropDownButton
DropdownButton component can be enabled/disabled by giving disabled property. To disable
DropdownButton component, the disabled property can be set as true .
view
disabled.cs
<ejs-dropdownbutton id="disabled" content="Message" items="ViewBag.items" iconCss="

e-icons e-message" disabled=true></ejs-dropdownbutton>
704
}
<styles>
content: '\e80f';
}
button {
}
</styles>
using System;
using System.Linq;
{
{
public IActionResult DEisabled()
{
items.Add(new
{
text = "Edit"
});
items.Add(new
{
text = "Delete"
});
items.Add(new
{
});
items.Add(new
{
});
return View();
}
}
705
}
Create right-to-left DropDownButton

DropDownButton component has RTL support. This can be achieved by setting enableRtl as
true.
The following example illustrates how to enable right-to-left support in DropDownButton

component.
view
rtl.cs
<ejs-dropdownbutton id="rtl" content="Message" items="ViewBag.items" iconCss="e-ico

ns e-message" enableRtl=true></ejs-dropdownbutton>
<styles>
content: '\e80f';
}
button {
}
</styles>
using System;
using System.Linq;
{
{
{
items.Add(new
706
{
text = "Edit"
});
items.Add(new
{
text = "Delete"
});
items.Add(new
{
});
items.Add(new
{
});
return View();
}
}
}
707
Overview
The Grid component is used to display and manipulate tabular data with configuration options to
control the way the data is presented. It can pull data from data sources such as array of
JavaScript objects, OData web services , or DataManager and binding data fields to columns. It
also displays the column header to identify the field with support for grouped records.
The most important features available in the grid component are paging, sorting, filtering,
searching, and grouping.
Key Features
Data sources: Binds the grid component with an array of JavaScript objects or
DataManager.
Sorting and grouping: Supports n level of sorting and grouping.
Filtering: Offers filter bar in each column to filter data.
Paging: Allows easy switching between pages using the pager bar.
Editing:provides the options for create, read, update, and delete operations.
Columns:The column definitions are used as the dataSource schema in the Grid. This plays
a vital role in rendering column values in the required format.
Reordering: Allows drag and drop of any column anywhere in the grid’s column header
row, thus allowing repositioning of columns.
Column Chooser:The column chooser provides a list of column names paired with
check boxes that allow the visibility to be toggled on the fly.
Resizing:Resizing allows changing column width on the fly by simply dragging the right
corner of the column header.
Freeze:Columns and rows can be frozen to allow scrolling and comparing cell values.
Cell Spanning:Grid cells can be spanned based on the preferred criteria.
Foreign data source:This provides the option to show values from external or lookup
data sources in a column based on foreign key/value mapping.
Cell Styling:Grid cell styles can be customized either by using CSS or
programmatically.
Selection:Rows or cells can be selected in the grid. One or more rows or cells can also be
selected by holding Ctrl or Command, or programmatically.
Templates - Templates can be used to create custom user experiences in the grid.
Aggregation - Provides the option to easily visualized the Aggregates for column values.
Context menu -The context menu provides a list of actions to be performed in the grid. It
appears when a cell, header, or the pager is right-clicked.
Clipboard - Selected rows and cells can be copied from the grid
Export - Provides the options to Export the grid data to Excel, PDF, and CSV formats.
RTL support: Provides right-to-left mode that aligns the grid content from right to left.
708
Localization: Provides an inherent support to localize the UI.
709
our components.
Prerequisites
on the machine.
Visual Studio 2017

DotNet Core 2.0

ASP.NET Core
2017.
710
Assembly Reference.
711
<head>

</head>
Step 5: Adding Script Manager in layout page Views/Shared/_Layout.cshtml.
<body>
@RenderBody()
</body>
folder, to initialize the grid.
view
grid.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource>

<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="1
20"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-gri
d-column>
<e-grid-column field="OrderDate" headerText="Order Date" width="130" textAlign=
"Right" format="yMd"></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-gr
id-column>
</e-grid-columns>
</ejs-grid>
712
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
Enable paging
The paging feature enables users to view the grid record in a paged view. It can be enabled by
setting the AllowPaging property to true. Pager can be customized using the PageSettings
property.
view
page.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowPaging="true">

<e-grid-columns>
d-column>
id-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Enable sorting
The sorting feature enables you to order the records. It can be enabled by setting the
AllowSorting property as true. Sorting feature can be customized using the SortSettings
property.
view
713
sorting.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowPaging="true" allowSorting="tru

e">
<e-grid-columns>
d-column>
id-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Enable filtering
The filtering feature enables you to view reduced amount of records based on filter criteria. It can
be enabled by setting the AllowFiltering property as true. Filtering feature can be customized
using the FilterSettings property.
view
filtering.cs

e" allowFiltering="true" >
<e-grid-columns>
d-column>
id-column>
</e-grid-columns>
</ejs-grid>
714
{
return View();
}
Enable grouping
The grouping feature enables users to view the grid record in a grouped view. It can be enabled
by setting the AllowGrouping property to true. Grouping feature can be customized using the
GroupSettings property.
view
grouping.cs

e" allowFiltering="true" allowGrouping="true" >
<e-grid-columns>
0"></e-grid-column>
d-column>
id-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
715
716
Data Binding
The Grid uses DataManager , which supports both RESTful JSON data services binding and local
JavaScript object array binding. The DataSource property can be assigned either with the
instance of DataManager or JavaScript object array collection. It supports two kinds of data
binding method:
List binding
Remote data
List binding
To bind list binding to the grid, you can assign a JavaScript object array to the DataSource
property. The list data source can also be provided as an instance of the DataManager .
view
local.cs
<e-grid-columns>
<e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-gr
id-column>
<e-grid-column field="OrderDate" headerText=" Order Date" textAlign="Right" for
mat="yMd" width="130"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C
2" width="120"></e-grid-column>
<e-grid-column field="ShippedDate" headerText="Shipped Date" textAlign="Right"
format="yMd" width="140"></e-grid-column>
id-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
717
By default, DataManager uses JsonAdaptor for list data-binding.
Remote data
To bind remote data to grid component, assign service data as an instance of DataManager to
the DataSource property. To interact with remote data source, provide the endpoint url .
view
remotedata.cs
<ejs-grid id="Grid">
<e-datamanager url="http://services.odata.org/V4/Northwind/Northwind.svc/Orders/?$t
op=7" adaptor="ODataV4Adaptor" crossdomain="true"></e-datamanager>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="R
ight" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width=
<e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign=
</e-grid-columns>
</ejs-grid>

{
return view();
}
By default, DataManager uses ODataAdaptor for remote data-binding.
Binding with OData services

OData is a standardized protocol for creating and consuming data. You can retrieve data from
OData service using the DataManager. Refer to the following code example for remote Data
binding using OData service.
view
odata.cs
<e-datamanager url="http://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Orders/?$
top=7" adaptor="ODataAdaptor" crossdomain="true"></e-datamanager>
718
<e-grid-columns>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Binding with OData v4 services

The ODataV4 is an improved version of OData protocols, and the DataManager can also retrieve
and consume OData v4 services. For more details on OData v4 services, refer to the odata
documentation. To bind OData v4 service, use the ODataV4Adaptor .
view
odataV4.cs
<e-datamanager url="http://services.odata.org/V4/Northwind/Northwind.svc/Orders/?$t
op=7" adaptor="ODataV4Adaptor" crossdomain="true"></e-datamanager>
<e-grid-columns>
</e-grid-columns>
</ejs-grid>
719
{
return View();
}
Web API
You can use WebApiAdaptor to bind grid with Web API created using OData endpoint.
view
webapi.cs
<e-datamanager url="/api/Orders" adaptor="WebApiAdaptor" crossdomain="true"></e-dat
amanager>
<e-grid-columns>
</e-grid-columns>
</ejs-grid>

{
return View();
}
The response object should contain properties, Items and Count , whose values are a
collection of entities and total count of the entities, respectively.
The sample response object should look like this:
{
Items: [{..}, {..}, {..}, ...],
Count: 830
720
}
WebMethod Adaptor
The WebMethodAdaptor is used to bind data source from remote services and code behind
methods. It can be enabled in Grid using Adaptor property of DataManager as
WebMethodAdaptor .
For every operations, an AJAX post will be send to the specified data service.
view
webapi.cs
<e-datamanager url="Default.aspx/DataSource" adaptor="WebMethodAdaptor" crossdomain=
"true"></e-datamanager>
<e-grid-columns>
</e-grid-columns>
</ejs-grid>

{
return View();
}
WebMethodAdaptor expects JSON response from the server and the response object should
contain properties result and count whose values are collection of entities and total count of
the entities respectively.
The sample response object should look like below.
{
result: [{..}, {..}, {..}, ...],
count: 830
}
721
The controller method's data parameter name must be value .
Offline mode
On remote data binding, all grid actions such as paging, sorting, editing, grouping, filtering, etc,
will be processed on server-side. To avoid post back for every action, set the grid to load all data
on initialization and make the actions process in client-side. To enable this behavior, use the
Offline property of DataManager .
view
offline.cs
<ejs-grid id="Grid" allowPaging="true" allowSorting="true" allowGrouping="true">

<e-datamanager url="http://services.odata.org/V4/Northwind/Northwind.svc/Orders" ad
aptor="ODataV4Adaptor" offline="true" crossdomain="true"></e-datamanager>
<e-grid-pagesettings pageSize="7"></e-grid-pagesettings>
<e-grid-columns>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Sending additional parameters to the server

To add a custom parameter to the data request, use the addParams method of Query class.
Assign the Query object with additional parameters to the grid Query property.
view
params.cs
<ejs-grid id="Grid" query="new ej.data.Query().addParams('ej2grid', 'true')" >
722
<e-datamanager url="http://services.odata.org/V4/Northwind/Northwind.svc/Orders" ad
aptor="ODataV4Adaptor" crossdomain="true"></e-datamanager>
<e-grid-columns>
</e-grid-columns>
</ejs-grid>

{
return View();
}
The parameters added using the Query property will be sent along with the data request
for every grid action.
Handling HTTP error

During server interaction from the grid, some server-side exceptions may occur, and you can
acquire those error messages or exception details in client-side using the ActionFailure event.
The argument passed to the ActionFailure event contains the error details returned from the
server.
view
httperror.cs
<ejs-grid id="Grid" actionFailure="actionFailure" >

<e-datamanager url="http://some.com/invalidUrl"></e-datamanager>
<e-grid-columns>
723
</e-grid-columns>
</ejs-grid>
<script>
function actionFailure(args) {
this.element.parentNode.insertBefore(span, this.element);
span.style.color = '#FF0000'
span.innerHTML = 'Server exception: 404 Not found';
}
</script>

{
return View();
}
The ActionFailure event will be triggered not only for the server errors, but also when
there is an exception while processing the grid actions.
Handling On-Demand Grid actions

On-Demand grid actions helps you to improve performance for large data application. To achieve
On-Demand in grid, you would have to use UrlAdaptor . To define UrlAdaptor in grid, you have
to specify data service in url and the AdaptorType as UrlAdaptor like below.
view
<ejs-grid id="Grid" allowPaging="true" allowSorting="true" allowFiltering="true" toolbar

="@(new List<string>() {"Search" })">
<e-datamanager url="/Home/UrlDataSource" adaptor="UrlAdaptor"></e-datamanager>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textA
lign="Right" width="100"></e-grid-column>
2" editType="numericedit" width="120"></e-grid-column>
724
id-column>
</e-grid-columns>
</ejs-grid>
Once you have defined DataManager , grid will request an AJAX POST for data. It will be send to
the specified data service for every grid actions with the needed parameters. This query
parameters will help you to perform server-side operations for grid. These are available
parameters and its uses.
Parameters Description
RequiresCounts If it is true then the total count of records will included in response.
Skip It holds the number of records to skip.
Take It holds the number of records to take.
Sorted It contains details of current sorted column and its direction.
Table It defines data source table name.
Where It contains details of current filter column name and its constraints.
These parameters of DataManager will bound to DataManagerRequest in server. You can use
Dataoperations and DataManagerRequest to process grid actions such as Paging , Sorting ,
Searching and Filtering using following methods.
Method Names Actions
Bypasses a specified Skip value and returns the remaining

PerformSkip
collections of records.
PerformTake
Bypasses a specified Take value and returns the remaining
collections of records.
PerformFiltering Filters a sequence of records based on a predicate.
PerformSorting Sorts the collections of records based on its direction.
PerformSearching Search the records based on a predicate.
dataoperation.cs
public IActionResult UrlDatasource([FromBody]DataManagerRequest dm)

{
IEnumerable DataSource = OrdersDetails.GetAllRecords();
DataOperations operation = new DataOperations();
if (dm.Search != null && dm.Search.Count > 0)
{
DataSource = operation.PerformSearching(DataSource, dm.Search); //Sear
ch
725
}
if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting
{
DataSource = operation.PerformSorting(DataSource, dm.Sorted);
}
if (dm.Where != null && dm.Where.Count > 0) //Filtering
{
DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0
].Operator);
}
int count = DataSource.Cast<OrdersDetails>().Count();
if (dm.Skip != 0)
{
DataSource = operation.PerformSkip(DataSource, dm.Skip); //Paging
}
if (dm.Take != 0)
{
DataSource = operation.PerformTake(DataSource, dm.Take);
}
return dm.RequiresCounts ? Json(new { result = DataSource, count = count })
: Json(DataSource);
}
726
Columns
The column definitions are used as the DataSource schema in the Grid. This plays a vital role in
rendering column values in the required format. The grid operations such as sorting, filtering and
grouping etc. are performed based on column definitions. The Field property of the Columns
is necessary to map the data source values in Grid columns.
1. If the column Field is not specified in the dataSource, the column values will be
empty.
2. If the Field name contains “dot” operator, it is considered as complex binding.
Auto generation
The Columns are automatically generated when Columns declaration is empty or undefined
while initializing the grid. All the columns in the DataSource are bound as grid columns.
view
auto.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource >
</ejs-grid>

{
return View();
}
When columns are auto-generated, the column Type will be determined from the first
record of the DataSource .
Header Template
You can customize the header element by using the HeaderTemplate property. In this demo, the
custom element is rendered for both EmployeeID and BirthDate column headers.
view
headertemplate.cs
727
<e-grid-columns>
<e-grid-column field="EmployeeID" headerTemplate="#employeetemplate" textAlign=
<e-grid-column field="FirstName" width="140"></e-grid-column>
<e-grid-column field="BirthDate" headerTemplate="#datetemplate" textAlign="Righ
<e-grid-column field="City" width="120"></e-grid-column>
<e-grid-column field="Country" width="140"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<style>
.e-grid .e-icon-userlogin::before {
width: 15px !important;
content: '\e7d4';
}
.e-grid .e-icon-calender::before {
content: '\e7b5';
}
</style>
<script id="datetemplate" type="text/x-template">

<span class="e-icon-calender e-icons headericon"> Order Date
</script>
<script id="employeetemplate" type="text/x-template">

<span class="e-icon-userlogin e-icons employee"> Emp ID
</script>

{
var Emp = EmployeeDetails.GetAllRecords();
ViewBag.DataSource = Emp;
return View();
}
Header text
By default, column header title is displayed from column Field value. To override the default
header title, you have to define the HeaderText value.
view
728
headertext.cs

<e-grid-columns>
<e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" w
idth="120"></e-grid-column>
<e-grid-column field="FirstName" headerText="First Name" width="140"></e-grid-c
olumn>
<e-grid-column field="BirthDate" headerText="Birth Date" textAlign="Right" wid
th="130"></e-grid-column>
<e-grid-column field="City" headerText="City" width="120"></e-grid-column>
<e-grid-column field="Country" width="140"></e-grid-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
If both the Field and HeaderText are not defined in the column, the column renders
with “empty” header text.
Format
To format cell values based on specific culture, use the Columns.Format property. The grid uses
Internalization library to format number and date values.
view
format.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource height="315">

<e-grid-columns>
</e-grid-columns>
</ejs-grid>
729
{
return View();
}
By default, the number and date values are formatted in en-US locale.
AutoFit specific columns

The AutoFitColumns method resizes the column to fit the widest cell's content without wrapping.
You can autofit a specific column at initial rendering by invoking the AutoFitColumns method in
DataBound event.
view
autofit.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource dataBound="dataBound" height="315">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" width="140"></e-grid-colu
mn>
<e-grid-column field="ShipName" headerText="Ship Name" width="120"></e-grid-col
umn>
<e-grid-column field="ShipCity" headerText="Ship City" width="120"></e-grid-col
umn>
<e-grid-column field="ShipAddress" headerText="Ship Address" width="150"></e-gr
id-column>
</e-grid-columns>
</ejs-grid>
<script>
function dataBound(args) {
this.autoFitColumns(['ShipName', 'ShipAddress']);
}
</script>

{
730
return View();
}
You can autofit all the columns by invoking the AutoFitColumns method without column
names.
Reorder
Reordering can be done by drag and drop of a particular column header from one index to
another index within the grid. To enable reordering, set the AllowReordering to true.
view
reorder.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowReordering="true" height="315">
<e-grid-columns>
<e-grid-column field="EmployeeID" headerText="Employee ID" width="100"></e-gri
d-column>
<e-grid-column field="FirstName" headerText="First Name" width="120"></e-grid-
column>
<e-grid-column field="Title" headerText="Title" width="100"></e-grid-column>
<e-grid-column field="BirthDate" headerText="Birth Date" width="100" format="yM
d"></e-grid-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
You can disable reordering a particular column by setting the Columns.AllowReordering to

false.
Column resizing
Column width can be resized by clicking and dragging the right edge of the column header. While
dragging, the width of the respective column will be resized immediately. Each column can be
auto resized by double-clicking the right edge of the column header to fit the width of that column
731
based on the widest cell content. To enable column resize, set the AllowResizing property to
true.
view
resize.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowResizing="true" height="315">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" width="150" ></e-grid-colu
mn>
<e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid
-column>
<e-grid-column field="Freight" headerText="Freight" width="150"></e-grid-column>

umn>
umn>
id-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-g
rid-column>
<e-grid-column field="ShipPostalCode" headerText="Ship Postal Code width="150">
</e-grid-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
You can disable resizing for a particular column by setting the Columns.AllowResizing
to false.
In RTL mode, you can click and drag the left edge of the header cell to resize the
column.
Min and max width

Column resize can be restricted between minimum and maximum width by defining the Columns-
>MinWidth and Columns->MaxWidth .
732
In the following sample, minimum and maximum width are defined for OrderID , Ship Name ,
and Ship Country columns.
view
min.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowResizing="true" height="315">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" minWidth="100" width="150"
maxWidth="300"></e-grid-column>
-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-co

lumn>
<e-grid-column field="ShipName" headerText="Ship Name" minWidth="120" width="15
0" maxWidth="250"></e-grid-column>
id-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" minWidth="150" wi
dth="150" maxWidth="350"></e-grid-column>
<e-grid-column field="ShipPostalCode" headerText="Ship Postal Code" width="150">
</e-grid-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Touch interaction
When the right edge of the header cell is tapped, a floating handler will be visible over the right
border of the column. To resize the column, tap and drag the floating handler as needed.
The following screenshot represents the column resizing in touch device.
733
Column template
The column Template has options to display custom element instead of a field value in the
column.
view
template.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource width="auto" >

<e-grid-columns>
<e-grid-column headerText="EmployeeImage" template="#template" width="150" ></e
-grid-column>
<e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" wi
dth="125"></e-grid-column>
olumn>
</e-grid-columns>
</ejs-grid>
<style>
.image img {
height: 55px;
width: 55px;
734
border-radius: 50px;
box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);
}
</style>
<script id="template" type="text/x-template">

<div class="image">
</script>

{
return View();
}
Grid actions such as editing, grouping, filtering and sorting etc. will depend upon the column
Field . If the Field is not specified in the template column, the grid actions cannot be
performed.
Column type
Column type can be specified using the Columns.Type property. It specifies the type of data the
column binds.
If the Format is defined for a column, the column uses Type to select the appropriate format
option ( number or date )).
Grid column supports the following types:
string
number
boolean
date
datetime
If the Type is not defined, it will be determined from the first record of the DataSource .
Column chooser
The column chooser has options to show or hide columns dynamically. It can be enabled by
defining the ShowColumnChooser as true.
735
view
columnchooser.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource showColumnChooser="true" toolbar="@

(new List<string>() { "ColumnChooser"})">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" width="150" ></e-grid-colu
mn>
<e-grid-column field="CustomerID" headerText="Customer ID" showInColumnChooser=
"true" width="150"></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" format="yMd" textAlign=
<e-grid-column field="ShipppedDate" headerText="Shipped Date" format="yMd" text

Align="Right" width="130"></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="150" ></e-
grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" visible="false" width="1
</e-grid-columns>
</ejs-grid>

{
return View();
}
You can hide the column names in column chooser by defining the
Columns.ShowInColumnChooser as false.
Open column chooser by external button

The Column chooser can be displayed on a page through external button by invoking the
[ openColumnChooser method with X and Y axis positions.
view
externalbutton.cs
<ejs-button id="show" content="OPEN COLUMN CHOOSER"></ejs-button>

<ejs-grid id="Grid" dataSource=@ViewBag.DataSource showColumnChooser="true" al
736
lowPaging="true">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right"
width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer Name" width="150"
></e-grid-column>
<e-grid-column field="OrderDate" headerText=" Order Date" textAlign="Ri
ght" format="yMd" width="130"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" f
ormat="C2" width="120"></e-grid-column>
<e-grid-column field="ShippedDate" headerText="Shipped Date" textAlign=
"Right" format="yMd" width="140"></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="15
0"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="150"></
e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
<script>
document.getElementById('show').addEventListener("click", function(){
var grid = document.getElementById('Grid').ej2_instances[0];
grid.columnChooserModule.openColumnChooser(200, 50); // give X and Y axis
});
</script>

{
return View();
}
Column menu
The column menu has options to integrate features like sorting, grouping, filtering, column
chooser, and autofit. It will show a menu with the integrated feature when users click on multiple
icon of the column. To enable column menu, you need to define the ShowColumnMenu property as
true.
The default items are displayed in following table.
Item Description
SortAscending Sort the current column in ascending order.
737
SortDescending Sort the current column in descending order.
Group Group the current column.

Ungroup Ungroup the current column.
AutoFit Auto fit the current column.
AutoFitAll Auto fit all columns.
ColumnChooser Choose the column visibility.
Filter Show the filter option as given in FilterSettings.Type
You can disable column menu for a particular column by defining the
Columns.ShowColumnMenu as false.
You can customize the default items by defining the ColumnMenuItems with required
items.
Custom Column Menu Item

Custom column menu items can be added by defining the ColumnMenuItems as collection of the
ColumnMenuItemModel . Actions for this customized items can be defined in the ColumnMenuClick
event.
view
customcolumnmenu.cs
@{
List<object> columnMenuitems = new List<object>();

columnMenuitems.Add(new { text = "Clear Sorting", id = "gridclearsorting" });
}
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource columnMenuItems="columnMenuitems"
columnMenuClick="columnMenuClick" showColumnMenu="true" allowSorting="true" allowPaging
="true" >
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" width="200" textAlign="R
ight" showInColumnChooser="false" ></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="
C2" editType="numericedit" width="150"></e-grid-column>
<e-grid-column field="ShipName" headerText="Ship Name" width="300"></e-grid-co
lumn>
<e-grid-column field="ShipCountry" headerText="Ship Country" visible="false"
width="200" ></e-grid-column>
lumn>
</e-grid-columns>
</ejs-grid>
<script>
738
function columnMenuClick() {
if (args.item.id === 'gridclearsorting') {
this.clearSorting();
}
}
</script>

{
return View();
}
Customize menu items for particular columns

Sometimes, you have a scenario that to hide an item from column menu for particular columns.
In that case, you need to define the ColumnMenuOpenEventArgs.Hide as true in the
ColumnMenuOpen event.
The following sample, Filter item was hidden in column menu when opens for the OrderID
column.
view
customizecolumnmenu.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource columnMenuOpen="columnMenuOpen" al

lowFiltering="true" allowGrouping="true" showColumnMenu="true" allowSorting="true" all
owPaging="true" >
<e-grid-filtersettings type="Menu"></e-grid-filtersettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" width="200" textAlign="R
ight" ></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="
C2" editType="numericedit" width="150"></e-grid-column>
lumn>
<e-grid-column field="ShipCountry" headerText="Ship Country" visible="false"
width="200" ></e-grid-column>
lumn>
</e-grid-columns>
</ejs-grid>
<script>
function columnMenuOpen(args) {
739
for (let item of args.items) {
if (item.text === 'Filter' && args.column.field === 'OrderID') {
item.hide = true;
} else {
item.hide = false;
}
}
}
</script>

{
return View();
}
Column spanning
The grid has option to span the adjacent cells. You need to define the colSpan attribute to span
cells in the QueryCellInfo event.
In the following demo, employee Davolio is doing testing from 9.00 A.M. to 10.00 A.M. so that
the cells have been spanned.
view
columnspanning.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource queryCellInfo="QueryCellEvent" grid

Lines="Both" allowPaging="true">
<e-grid-columns>
<e-grid-column field="EmployeeID" headerText="Employee ID" isPrimaryKey="true"
textAlign="Right" width="150"></e-grid-column>
<e-grid-column field="EmployeeName" headerText="Employee Name" width="200"></e-
grid-column>
<e-grid-column field="Time900" headerText="9.00 AM" width="120"></e-grid-column>
<e-grid-column field="Time930" headerText="9.30 AM" width="120"></e-grid-column>
<e-grid-column field="Time1000" headerText="10.00 AM" width="120"></e-grid-colu

mn>
mn>
mn>
740
mn>
mn>
mn>
<e-grid-column field="Time100" headerText="1.00 PM" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function QueryCellEvent(args)
{
var data = args.data;
switch (data.EmployeeID) {
case 10001:
if (args.column.field === 'Time900' || args.column.field === 'Time2
30' || args.column.field === 'Time430') {
args.colSpan = 2;
} else if (args.column.field === 'Time1100') {
args.colSpan = 3;
}
break;
case 10002:
30' ||
args.column.field === 'Time430') {
args.colSpan = 3;
args.colSpan = 4;
}
break;
case 10003:
741
130') {
args.colSpan = 3;
} else if (args.column.field === 'Time1030' || args.column.field ==
= 'Time330' ||
args.column.field === 'Time430' || args.column.field === 'Time2
30') {
args.colSpan = 2;
}
break;
case 10004:
if (args.column.field === 'Time900') {
args.colSpan = 3;
args.colSpan = 4;
} else if (args.column.field === 'Time400' || args.column.field ===
'Time230') {
args.colSpan = 2;
}
break;
case 10005:
if (args.column.field === 'Time900') {
args.colSpan = 4;
args.colSpan = 3;
'Time430' || args.column.field === 'Time230') {
args.colSpan = 2;
}
break;
case 10006:
30' ||
30') {
args.colSpan = 2;
= 'Time1130') {
args.colSpan = 3;
}
break;
case 10007:
args.colSpan = 2;
= 'Time400') {
args.colSpan = 3;
}
742
break;
case 10008:
args.colSpan = 3;
args.colSpan = 2;
}
break;
case 10009:
130') {
args.colSpan = 3;
'Time230') {
args.colSpan = 2;
}
break;
case 100010:
30' ||
130') {
args.colSpan = 3;
args.colSpan = 2;
}
break;
}
}
</script>

{
ViewBag.DataSource = Merge.GetAllRecords()
return View();
}
Responsive columns
You can toggle column visibility based on media queries which are defined at the HideAtMedia .
The HideAtMedia accepts valid Media Queries.
view
743
responsivecolumns.cs

<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" hideAtMedia='(min-width: 7
00px)' width="120" textAlign="Right" ></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" hideAtMedia='(max-wi
dth: 500px)' width="150"></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" hideAtMedia= '(min-wid
th: 500px)' textAlign="Right" format="yMd" width="130"></e-grid-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Controlling Grid actions

You can enable or disable grid action for a particular column by setting the AllowFiltering ,
AllowGrouping , and AllowSorting properties.
view
controllingactions.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowGrouping="true" allowSorting="t

rue" allowFiltering="true" >
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" allowGrouping="false" wid
th="100" textAlign="Right"></e-grid-column>
d-column>
<e-grid-column field="ShipCity" headerText="Ship City" allowFiltering="false"
<e-grid-column field="ShipName" headerText="Ship Name" allowSorting="false" wi
</e-grid-columns>
</ejs-grid>
744
{
return View();
}
Show/hide columns by external button

You can show or hide grid columns dynamically using external buttons by invoking the
showColumns or hideColumns method.
view
showhide.cs
<ejs-button id="show" cssClass="e-flat" content="Show Columns"></ejs-button>

<ejs-button id="hide" cssClass="e-flat" content="Hide Columns"></ejs-button>
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource height="280">

<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" width="100" textAlign=
"Right"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer Name" width="120"></
e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid
-column>
<e-grid-column field="ShipName" headerText="Ship Name" width="100"></e-grid
-column>
<e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width=
</e-grid-columns>
</ejs-grid>
<script>
document.getElementById("show").addEventListener("click", function(){
var grid = document.getElementById("Grid").ej2_instances[0];
grid.showColumns(['Customer Name', 'Order Date']); //show by HeaderText
});
document.getElementById("hide").addEventListener("click", function() {
grid.hideColumns(['Customer Name', 'Order Date']); //hide by HeaderText
})
</script>
745
{
return View();
}
Complex data binding

You can achieve complex data binding in the grid by using the dot(.) operator in the
Column.Field .
view
complexbinding.cs
<ejs-grid id="Grid" dataSource="ViewBag.data" height="315" >

<e-grid-columns>
<e-grid-column field="EmployeeID" headerText="Employee ID" width="100" textA
lign="Right"></e-grid-column>
<e-grid-column field="Name.FirstName" headerText="Last Name" width="120"></e-g
rid-column>
<e-grid-column field="Name.LastName" headerText="Last Name" width="100"></e-g
rid-column>
</e-grid-columns>
</ejs-grid>

{
var ComplexData = ComplexData.GetAllRecords();
ViewBag.DataSource = ComplexData;
return View();
}
Foreign Key Column

Foreign key column can be enabled by using Column.DataSource , Column.ForeignKeyField and
Column.ForeignKeyValue properties.
Column.DataSource - Defines the foreign data.

Column.ForeignKeyField - Defines the mapping column name to the foreign data.
Column.ForeignKeyValue - Defines the display field from the foreign data.
746
In the following example, Employee Name is a foreign column which shows FirstName column
from foreign data.
view
foreign.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" >

<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true"
<e-grid-column field="EmployeeID" headerText="Empolyee Name" foreignKey
Value="FirstName" dataSource="ViewBag.foreign" width="150"></e-grid-column>

<e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-
grid-column>
</e-grid-columns>
</ejs-grid>
public IActionResult DefaultExporting()

{
var order = OrdersDetails.GetAllRecords();
ViewBag.datasource = order;
var emp = EmployeeView.GetAllRecords();
ViewBag.foreign = emp;
return View();
}
For remote data, the sorting and grouping is done based on Column.ForeignKeyField
instead of Column.ForeignKeyValue .
If Column.ForeignKeyField is not defined, then the column uses Column.Field .
See Also
How to Change Column Header Text Dynamically
Customize Column Styles
Custom Tooltip for Columns
How to Render Other Component in a Column
How to change the Orientation of Header Text
Group Column by Format
747
How to Use Edit Template in Foreign Key Column
How to Create and use custom Filter UI in Foreign Key Column
How to Use Filter Bar Template in Foreign Key Column
How to Perform aggregation in Foreign Key Column
748
Row
The row represents record details fetched from data source.
Row template
The RowTemplate has an option to customise the look and behavior of the grid rows. The
RowTemplate property accepts either the template string or HTML element ID.
view
row-template.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource height="335" width="auto" rowTemplate

="#rowtemplate">
<e-grid-columns>
<e-grid-column headerText="Employee Image" width="150" textAlign="Center"> </e-
grid-column>
<e-grid-column headerText="Employee Details" width="300" field="EmployeeID" tex
tAlign="Left"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<style type="text/css" class="cssStyles">
.photo img {
width: 100px;
height: 100px;
}
.photo,
.details {
border-color: #e0e0e0;
border-style: solid;
}
.photo {
border-width: 1px 0px 0px 0px;
text-align: center;
}
.details {
border-width: 1px 0px 0px 0px;
padding-left: 18px;
}
749
.e-bigger .details {
padding-left: 25px;
}
.e-device .details {
padding-left: 8px;
}
.details > table {

width: 100%;
}
.CardHeader {
font-weight: 600;
}
td {
padding: 2px 2px 3px 4px;
}
</style>
<script id="rowtemplate" type="text/x-template">
<tr>
<td class="photo">
<img src="/Content/images/Employees/${EmployeeID}.png" alt="${EmployeeID}"
/>
</td>
<td class="details">
<table class="CardTable" cellpadding="3" cellspacing="2">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">First Name </td>
<td>${FirstName} </td>
</tr>
<tr>
<td class="CardHeader">Last Name</td>
<td>${LastName} </td>
</tr>
<tr>
<td class="CardHeader">
Title
</td>
<td>
${Title}
</td>
750
</tr>
<tr>
Birth Date
</td>
<td>
${BirthDate.toLocaleDateString()}
</td>
</tr>
<tr>
Hire Date
</td>
<td>
${HireDate.toLocaleDateString()}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</script>

{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}
The RowTemplate property accepts only the TR element.
Detail template
The detail template provides additional information about a particular row by expanding or
collapsing detail content. The DetailTemplate property accepts either the template string or
HTML element ID.
view
detail-temp.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource detailTemplate="#detailtemplate">

<e-grid-columns>
olumn>
751
<e-grid-column field="LastName" headerText="Last Name" width="110"></e-grid-col
umn>
<e-grid-column field="Country" headerText="Country" width="110"></e-grid-column>
</e-grid-columns>
</ejs-grid>

.detailtable td {
font-size: 13px;
padding: 4px;
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.photo {
width: 100px;
height: 100px;
}
</style> <script type="text/x-template" id="detailtemplate">
<table class="detailtable" width="100%">
<colgroup>
<col width="35%" />
<col width="35%" />
<col width="30%" />
</colgroup>
<tbody>
<tr>
<td rowspan="4" style="text-align: center;">
<img class="photo" src="/scripts/Images/Employees/${EmployeeID}.png"
alt="${EmployeeID}" />
</td>
<td>
<span style="font-weight: 500;">First Name: </span> ${FirstName}
</td>
<td>
<span style="font-weight: 500;">Postal Code: </span> ${PostalCode}
</td>
</tr>
<tr>
<td>
<span style="font-weight: 500;">Last Name: </span> ${LastName}
</td>
<td>
752
<span style="font-weight: 500;">City: </span> ${City}
</td>
</tr>
<tr>
<td>
<span style="font-weight: 500;">Title: </span> ${Title}
</td>
<td>
<span style="font-weight: 500;">Phone: </span> ${HomePhone}
</td>
</tr>
<tr>
<td>
<span style="font-weight: 500;">Address: </span> ${Address}
</td>
<td>
<span style="font-weight: 500;">HireDate: </span> ${HireDate.toLoca
leDateString()}
</td>
</tr>
</tbody>
</table>
</script>

{
return View();
}
Rendering custom component

To render the custom component inside the detail row, define the template in the
DetailTemplate and render the component in the DetailDataBound event.
For example, to render grid inside the detail row, place an HTML div element as the
DetailTemplate and render the DIV element as grid component in the DetailDataBound event.
view
custom-component.cs
<ejs-grid id="Grid" dataSource=@ViewBag.foreign detailTemplate="#detailtemplate" detail

DataBound="detailDataBound">
<e-grid-columns>
<e-grid-column field="FirstName" headerText="First Name" width="110"></e-gr
753
id-column>
<e-grid-column field="LastName" headerText="Last Name" width="110"></e-grid
-column>
<e-grid-column field="Country" headerText="Country" width="110"></e-grid-co

lumn>
</e-grid-columns>
</ejs-grid>
<script id='detailtemplate' type="text/x-template">
<div class='custom-grid'>
</script>
<script>
function detailDataBound(e) {
var data = @Json.Serialize(ViewBag.datasource)
var detail = new ej.grids.Grid({
dataSource: data.filter((item) => item['EmployeeID'] === e.data['Employ
eeID']).slice(0, 3),
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 110 },
{ field: 'CustomerID', headerText: 'Customer Name', width: 140 },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
]
});
detail.appendTo(e.detailElement.querySelector('.custom-grid'));
}
</script>

{
return View();
}
Expand by external button

By default, detail rows render in collapsed state. You can expand a detail row by invoking the
expand method using the external button.
view
expand-external.cs
<input type="text" value="1" class="rowindex" />

<ejs-button id="expand" content="Expand"></ejs-button>
<ejs-grid id="Grid" dataSource=@ViewBag.foreign detailTemplate="#detailtemplate">
754
<e-grid-columns>
<e-grid-column field="FirstName" headerText="First Name" width="110"></e-gr
id-column>
<e-grid-column field="LastName" headerText="Last Name" width="110"></e-grid
-column>

lumn>
</e-grid-columns>
</ejs-grid>
<script>
document.getElementById('expand').addEventListener('click', () => {
var inputElem = (document.getElementsByClassName('rowindex')[0]);
var rowIndex= parseInt(inputElem.value, 10);
grid.detailRowModule.expand(rowIndex);
});
</script>

.detailtable td {
font-size: 13px;
padding: 4px;
max-width: 0;
overflow: hidden;
}
.photo {
width: 100px;
height: 100px;
}
</style> <script type="text/x-template" id="detailtemplate">
<table class="detailtable" width="100%">
<colgroup>
<col width="35%" />
<col width="35%" />
<col width="30%" />
</colgroup>
<tbody>
<tr>
<td rowspan="4" style="text-align: center;">
<img class="photo" src="/scripts/Images/Employees/${EmployeeID}.png"
alt="${EmployeeID}" />
755
</td>
<td>
<span style="font-weight: 500;">First Name: </span> ${FirstName}
</td>
<td>
<span style="font-weight: 500;">Postal Code: </span> ${PostalCode}
</td>
</tr>
<tr>
<td>
<span style="font-weight: 500;">Last Name: </span> ${LastName}
</td>
<td>
<span style="font-weight: 500;">City: </span> ${City}
</td>
</tr>
<tr>
<td>
<span style="font-weight: 500;">Title: </span> ${Title}
</td>
<td>
<span style="font-weight: 500;">Phone: </span> ${HomePhone}
</td>
</tr>
<tr>
<td>
<span style="font-weight: 500;">Address: </span> ${Address}
</td>
<td>
<span style="font-weight: 500;">HireDate: </span> ${HireDate.toLoca
leDateString()}
</td>
</tr>
</tbody>
</table>
</script>

{
return View();
}
Drag and drop
756
The grid row drag and drop allows you to drag and drop grid rows to another grid or custom
component. To enable row drag and drop, set the AllowRowDragAndDrop to true. The target
component where the grid rows are to be dropped can be set by using the TargetID .
view
drag-drop.cs
<div class="col-lg-6">
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowRowDragAndDrop="true"
allowSelection="true" allowPaging="true">
<e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
<e-grid-pagesettings pageCount="1" pageSize="12"></e-grid-pagesettings>
<e-grid-rowdropsettings targetID="DestGrid"></e-grid-rowdropsettings>
<e-grid-columns>
<e-grid-column field="CustomerID" headerText="Customer ID" width="135">
</e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" format="yMd" w
</e-grid-columns>
</ejs-grid>
</div>
<div class="col-lg-6">
<ejs-grid id="DestGrid" allowRowDragAndDrop="true" allowSelection="true" allow
Paging="true">
<e-grid-pagesettings pageCount="1" ></e-grid-pagesettings>
<e-grid-rowdropsettings targetID="Grid"></e-grid-rowdropsettings>
<e-grid-columns>
<e-grid-column field="CustomerID" headerText="Customer ID" width="135">
</e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" format="yMd" w
</e-grid-columns>
</ejs-grid>
</div>

{
return View();
}
757
Selection feature must be enabled for row drag and drop.
Multiple rows can be selected by clicking and dragging inside the grid. For multiple row
selection, the Type property must be set to Multiple .
Customize rows
You can customize the appearance of a row by using the RowDataBound event. The
RowDataBound event triggers for every row. In the event handler, you can get the
RowDataBoundEventArgs that contains details of the row.
view
custom-rows.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource enableHover="false" allowSelection="

false" rowDataBound="rowBound">
<e-grid-columns>
-column>
umn>
<e-grid-column field="Freight" headerText="Freight" width="100" format='C2'></
e-grid-column>
umn>
</e-grid-columns>
</ejs-grid>
<script>
function rowBound(args) {
if (args.data['Freight'] < 30) {
args.row.classList.add('below-30');
} else if (args.data['Freight'] < 80) {
args.row.classList.add('below-80');
} else {
args.row.classList.add('above-80');
}
}
<script>

{
758
return View();
}
Styling alternate rows

You can change the grid's alternative rows' background color by overriding the .e-altrow class.
.e-grid .e-altrow {
}
Please refer to the following example.
view
style-alt-row.cs

<e-grid-columns>
-column>
e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="14
0"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<style>
.e-grid .e-altrow {
}
</style>

{
return View();
}
Row height
759
You can customize the row height of grid rows through the RowHeight property. The RowHeight
property is used to change the row height of entire grid rows.
In the below example, the RowHeight is set as '60px'.
view
row-height.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource rowHeight="60" >

<e-grid-columns>
-column>
e-grid-column>
0"></e-grid-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Customize row height for particular row

Grid row height for particular row can be customized using the RowDataBound event by setting
the RowHeight in arguments for each row based on the requirement.
In the below example, the row height for the row with OrderID as '10249' is set as '90px' using
the RowDataBound event.
view
rowheight-particular.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource rowDataBound="rowDataBound" >

<e-grid-columns>
-column>
e-grid-column>
760
0"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function rowDataBound(args) {
if (args.data.OrderID === 10249) {
args.rowHeight = 90;
}
}
</script>

{
return View();
}
In virtual scrolling mode, it is not applicable to set the RowHeight using the
RowDataBound event.
761
Cell
Displaying the HTML content

The HTML tags can be displayed in the Grid header and content by enabling the
DisableHtmlEncode property.
view
html.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource height="135" allowPaging="true">

<e-grid-columns>
<e-grid-column field="OrderID" headerText="<span> Order ID </span>" disableHtm
lEncode="true" textAlign="Right" width="140"></e-grid-column>
<e-grid-column field="CustomerID" headerText="<span> Customer ID </span>" disab
leHtmlEncode="false" width="120"></e-grid-column>
umn>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Customize cell styles

The appearance of cells can be customized by using the QueryCellInfo event. The
QueryCellInfo event triggers for every cell. In that event handler, you can get
QueryCellInfoEventArgs that contains the details of the cell.
view
customize.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource queryCellInfo="customiseCell">

<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="
762
d-column>
<e-grid-column field="OrderDate" headerText="Order Date" format='yMd' width="1
umn>
</e-grid-columns>
</ejs-grid>
<script>
function customiseCell(args) {
if(args.column.field === 'Freight') {
if (args.data['Freight'] < 30){
args.cell.classList.add('below-30');
} else if(args.data['Freight'] < 80 ) {
args.cell.classList.add('below-80');
} else {
args.cell.classList.add('above-80');
}
}
}
</script>

{
return View();
}
Auto wrap
The auto wrap allows the cell content of the grid to wrap to the next line when it exceeds the
boundary of the cell width. To enable auto wrap, set the AllowTextWrap property to true . You
can configure the auto wrap mode by setting the TextWrapSettings.WrapMode property.
There are three types of WrapMode . They are:
Both : Both value is set by default. Auto wrap will be enabled for both the content and the
header.
Header : Auto wrap will be enabled only for the header.
Content : Auto wrap will be enabled only for the content.
763
In the following example, the TextWrapSettings.WrapMode is set to Content .
view
autowrap.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource gridLines="Default" height="315" all

owTextWrap="true">
<e-grid-textwrapsettings wrapMode="Content"></e-grid-textwrapsettings>
<e-grid-columns>
<e-grid-column field="RoolNo" headerText="Rool No" textAlign="Right" width="12
0"></e-grid-column>
<e-grid-column field="Name" headerText="Name of the inventor" width="100"></e-
grid-column>
<e-grid-column field="patentfamilies" headerText="No of patentfamilies" width=
<e-grid-column field="mainfields" headerText="Main fields of Invention" width="

</e-grid-columns>
</ejs-grid>

{
var Records = InventorDetails.GetAllRecords();
ViewBag.DataSource = Records;
return View();
}
Grid Lines
The GridLines have option to display cell border and it can be defined by the GridLines
property.
The available modes of grid lines are:
Modes Actions
Both Displays both the horizontal and vertical grid lines.
None No grid lines are displayed.
Horizontal Displays the horizontal grid lines only.
Vertical Displays the vertical grid lines only.
Default Displays grid lines based on the theme.
764
view
gridlines.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource height="315" gridLines="Both" >
<e-grid-columns>
-column>
umn>
umn>
</e-grid-columns>
</ejs-grid>

{
return View();
}
By default, the grid renders with Default mode.
Clip Mode
The clip mode provides options to display its overflow cell content and it can be defined by the
Columns.ClipMode property.
There are three types of ClipMode . They are:
Clip : Truncates the cell content when it overflows its area.

Ellipsis : Displays ellipsis when the cell content overflows its area.
EllipsisWithTooltip : Displays ellipsis when the cell content overflows its area, also it will
display the tooltip while hover on ellipsis is applied.
view
clipmode.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource height="315" allowPaging="true">
765
<e-grid-columns>
<e-grid-column field="RoolNo" headerText="Rool No" textAlign="Right" wi
<e-grid-column field="Name" headerText="Name of the inventor" clipMode=
"Clip" width="80"></e-grid-column>
<e-grid-column field="patentfamilies" headerText="No of patentfamilies"
clipMode="Ellipsis" width="100"></e-grid-column>
<e-grid-column field="Country" headerText="Country" width="100"></e-gri
d-column>
<e-grid-column field="mainfields" headerText="Main fields of Invention"
clipMode="EllipsisWithTooltip" width="100"></e-grid-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
By default, Columns.ClipMode value is Ellipsis .
766
Editing
The Grid component has options to dynamically insert, delete and update records. Editing feature
requires a primary key column for CRUD operations. To define the primary key, set
Columns.IsPrimaryKey to true in particular column.
You can start the edit action either by double clicking the particular row or by selecting the
required row and click on Edit button in the toolbar. Similarly, you can add a new record to grid
either by clicking on Add button in the toolbar or on an external button which is bound to invoke
the addRecord method of the grid, Save and Cancel while in edit mode is possible using
respective toolbar icon in grid.
Deletion of the record is possible by selecting the required row and click on Delete button in the
toolbar.
view
edit.cs
<ejs-grid id="Grid" dataSource="ViewBag.DataSource" height="315" allowPaging="true">

<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></
e-grid-editSettings>
<e-grid-columns>
id-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
If Columns.IsIdentity is enabled, then it will be considered as a read-only column

when editing and adding a record.
You can disable editing for a particular column, by specifying Columns.AllowEditing to
767
false .
Toolbar with edit option

The grid toolbar has the built-in items to execute Editing actions. You can define this by using the
Toolbar property.
view
edittoolbar.cs
<ejs-grid id="Grid" dataSource="ViewBag.DataSource" height="273" toolbar="@(new List<st

ring>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="
true"></e-grid-editSettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="tru
e" textAlign="Right" width="100"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" type="string"
ormat="C2" editType="numericedit" width="120"></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="150"

></e-grid-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Cell edit type and its params

The Columns.EditType is used to customize the edit type of the particular column. You can set
the Columns.EditType based on data type of the column.
NumericTextBox component for integers, double, and decimal data types.
TextBox component for string data type.
DropDownList component for list data type.
768
Also, you can customize model of the Columns.EditType through the Columns.Edit.Params .
The following table describes cell edit type and their corresponding edit params of the column.
Component Example
NumericTextBox params: { decimals: 2, value: 5 }
TextBox -
DropDownList params: { value: 'Germany' }
view
celleditparams.cs
@{
var editParams = new { params = new {value ="Germany"};};

}
<ejs-grid id="Grid" dataSource="ViewBag.DataSource" toolbar="@(new List<string>() { "Ad

d", "Edit", "Delete", "Cancel", "Update" })">
<e-grid-columns>
2" editType="numericedit" width="120" ></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" width="150" edit=editP
arams >
</e-grid-column>
</e-grid-columns>
</ejs-grid>

{
var orders = OrdersDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}
769
If edit type is not defined in the column, then it will be considered as the stringedit type
(Textbox component) .
Edit Modes
Grid supports the following types of edit modes, they are:
Normal
Dialog
Batch
Normal
In Normal edit mode, when you start editing the currently selected record is changed to edit state.
You can change the cell values and save edited data to the data source. To enable Normal edit,
set the EditSettings.Mode as Normal .
view
inline.cs
<ejs-grid id="Grid" dataSource="ViewBag.dataSource" height="273" toolbar="@(new List<st

ring>() { "Add", "Edit", "Delete","Update","Cancel" })">
true" mode="Normal"></e-grid-editSettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" validationRules="@
(new { required=true})" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-colu
mn>
<e-grid-column field="CustomerID" headerText="Customer ID" validationRu
les="@(new { required=true, minLength=3})" type="string" width="120"></e-grid-column>
></e-grid-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
770
Normal edit mode is default mode of editing.
Dialog
In dialog edit mode, when you start editing the currently selected row data will be shown on a
dialog. You can change the cell values and save edited data to the data source. To enable Dialog
edit, set the EditSettings.Mode as Dialog .
view
dialog.cs
<ejs-grid id="Grid" dataSource="ViewBag.dataSource" height="273" toolbar="@(new List<st

ring>() { "Add", "Edit", "Delete","Update","Cancel" })">
true" mode="Dialog"></e-grid-editSettings>
<e-grid-columns>
mn>
></e-grid-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Batch
In batch edit mode, when you double-click on the grid cell, then the target cell changed to edit
state. You can bulk save (added, changed and deleted data in the single request) to data source
by click on the toolbar's Update button or by externally calling the batchSave method. To
enable Batch edit, set the EditSettings.Mode as Batch .
view
batch.cs
771
<ejs-grid id="Grid" dataSource="ViewBag.dataSource" height="273" toolbar="@(new List<
string>() { "Add", "Edit", "Delete","Update","Cancel" })">
true" mode="Batch"></e-grid-editSettings>
<e-grid-columns>
mn>
></e-grid-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Command column
The command column provides an option to add CRUD action buttons in a column. This can be
defined by the Column.Commands property.
The available built-in command buttons are:
Command Button Actions
Edit Edit the current row.
Delete Delete the current row.
Save Update the edited row.
Cancel Cancel the edited state.
view
commandcolumn.cs
@{
772
List<object> commands = new List<object>();
commands.Add(new { type = "Edit", buttonOption = new { iconCss = "e-icons e-edi
t", cssClass = "e-flat" } });
commands.Add(new { type = "Delete", buttonOption = new { iconCss = "e-icons e-d
elete", cssClass = "e-flat" } });
commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-upd
ate", cssClass = "e-flat" } });
commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-c
ancel-icon", cssClass = "e-flat" } });
}
<ejs-grid id="Grid" dataSource="ViewBag.DataSource" height="310">
<e-grid-editSettings allowDeleting="true" allowEditing="true" mode="Normal">
</e-grid-editSettings>
<e-grid-columns>
e" textAlign="Right" width="100"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" type="string"
></e-grid-column>
<e-grid-column headerText="Manage Records" width="120" command=commands>
</e-grid-column>
</e-grid-columns>
</ejs-grid>

{
var orders= OrderDetails.GetAllRecords();
return View();
}
Confirmation messages
Delete confirmation
773
The delete confirm dialog can be shown when deleting a record by defining the
ShowDeleteConfirmDialog as true
view
deleteconfirm.cs

ring>() { "Add", "Edit", "Delete", "Update","Cancel" })">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mo
de="Normal" showDeleteConfirmDialog="true"></e-grid-editSettings>
<e-grid-columns>
id-column>
</e-grid-columns>
</ejs-grid>

{
var orders =OrderDetails.GetAllRecords();
return View();
}
The ShowDeleteConfirmDialog supports all type of edit modes.
Batch confirmation
By default, grid will show the confirm dialog when saving or cancelling or performing any actions
like filtering, sorting, etc.
view
batchconfirm.cs

ring>() { "Add", "Edit", "Delete","Update", "Cancel" })">
de="Batch" showConfirmDialog="true" showDeleteConfirmDialog="true"></e-grid-editSettings
774
>
<e-grid-columns>
id-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
EditSettings.ShowConfirmDialog requires the EditSettings.Mode to be Batch

If EditSettings.ShowConfirmDialog set to false , then confirmation dialog does not
display in batch editing.
Column validation
Column validation allows you to validate the edited or added row data and it display errors for
invalid fields before saving data. Grid uses Form Validator component for column validation.
You can set validation rules by defining the Columns.ValidationRules .
view
columnvalid.cs

de="Normal" showConfirmDialog="true" showDeleteConfirmDialog="true"></e-grid-editSettin
gs>
<e-grid-columns>
lign="Right" width="100" validationRules="@(new { required= true })"></e-grid-column>

"120" validationRules="@(new { required= true, minLength= 3 })"></e-grid-column>
775
id-column>
</e-grid-columns>
</ejs-grid>

{
var orders = OrderDetails.GetAllRecords();
return View();
}
Persisting data in server

Edited data can be persisted in the database using the RESTful web services.
All the CRUD operations in the grid are done through DataManager . The DataManager has an
option to bind all the CRUD related data in server-side.
For your information, the ODataAdaptor persists data in the server as per OData protocol.
In the below section, we have explained how to get the edited data details on the server-side
using the UrlAdaptor .
URL adaptor
You can use the UrlAdaptor of DataManager when binding data source from remote data. In
the initial load of grid, data are fetched from remote data and bound to the grid using url
property of DataManager . You can map The CRUD operation in grid can be mapped to server-
side Controller actions using the properties InsertUrl , RemoveUrl , UpdateUrl , CrudUrl and
BatchUrl .
The following code example describes the above behavior.
view
urladaptor.cs
<ejs-grid id="Grid" height="273" toolbar="@(new List<string>() { "Add", "Edit", "Delete

", "Cancel", "Update" })">
<e-datamanager url="/Home/UrlDataSource" insertUrl="/Home/Insert" updateUrl="/Home/
Update" removeUrl="/Home/Delete" adaptor="UrlAdaptor"></e-datamanager>
776
gs>
<e-grid-columns>
id-column>
</e-grid-columns>
</ejs-grid>
public IActionResult UrlDatasource([FromBody]Data dm)

{
var Data = order.ToList();
int count = order.Count();
return dm.requiresCounts ? Json(new { result = Data.Skip(dm.skip).Take(dm.t
ake), count = count }) : Json(Data);
}
Also, when using the UrlAdaptor , you need to return the data as JSON from the controller
action and the JSON object must contain a property as result with dataSource as its value and
one more property count with the dataSource total records count as its value.
view
data.cs

gs>
<e-grid-columns>
777
id-column>
</e-grid-columns>
</ejs-grid>

{
if (order.Count() == 0)
BindDataSource();
var DataSource = order.ToList();
DataResult result = new DataResult();
result.result = DataSource.Skip(dm.skip).Take(dm.take).ToList();
result.count = count;
return dm.requiresCounts ? Json(new { result = Data.Skip(dm.skip).Take(dm.take), co
unt = count }) : Json(Data);
}
public class DataResult

{
public List<EditableOrder> result { get; set; }
public int count { get; set; }
}
Insert record
Using the InsertUrl property, you can specify the controller action mapping URL to perform
insert operation on the server-side.
view
insert.cs

gs>
<e-grid-columns>
778
id-column>
</e-grid-columns>
</ejs-grid>
public ActionResult Insert([FromBody]EditableOrder value)

{
//Insert record in database
}
The newly added record details are bound to the value parameter. Please refer to the following
screenshot.
Update record
Using the UpdateUrl property, the controller action mapping URL can be specified to perform
save/update operation on the server-side.
The following code example describes the previous behavior.
view
update.cs

779
gs>
<e-grid-columns>
id-column>
</e-grid-columns>
</ejs-grid>
public ActionResult Update([FromBody]EditableOrder value)

{
//Update record in database
}
The updated record details are bound to the value parameter. Please refer to the following
screenshot.
Delete record
Using the RemoveUrl property, the controller action mapping URL can be specified to perform
delete operation on the server-side.
The following code example describes the previous behavior.
view
delete.cs
780
gs>
<e-grid-columns>
id-column>
</e-grid-columns>
</ejs-grid>
public ActionResult Delete([FromBody]int key)

{
//Delete record in database
}
The deleted record primary key value is bound to the key parameter. Please refer to the
following screenshot.
CRUD URL
Using the CrudUrl property, the controller action mapping URL can be specified to perform all
the CRUD operation at server-side using a single method instead of specifying separate
controller action method for CRUD (insert, update and delete) operations.
The action parameter of CrudUrl is used to get the corresponding CRUD action.
781
view
crudurl.cs

ring>() { "Add", "Edit", "Delete","Update", "Cancel"})">
<e-datamanager url="/Home/DataSource" crudUrl="/Home/CrudUpdate" adaptor="UrlAdapt
or"></e-datamanager>
gs>
<e-grid-columns>
id-column>
</e-grid-columns>
</ejs-grid>

{
if (order.Count() == 0)
BindDataSource();
var DataSource = order.ToList();
DataResult result = new DataResult();
result.result = DataSource.Skip(dm.skip).Take(dm.take).ToList();
result.count = count;
return dm.requiresCounts ? Json(new { result = Data.Skip(dm.skip).Take(dm.take), co
unt = count }) : Json(Data);
}
public class DataResult

{
public List<EditableOrder> result { get; set; }
public int count { get; set; }
}
public ActionResult CrudUpdate([FromBody]EditableOrder value, string action)

{
if(action == "update"){
//Update record in database
}
782
else if (action == "insert")
{
//Insert record in database
}
else
{
//Delete record in database
}
}
Please refer to the following screenshot to know about the action parameter.
If you specify InsertUrl along with CrudUrl , then while adding InsertUrl only will be
invoked.
Batch URL
The BatchUrl property supports only for batch editing mode. You can specify the controller
action mapping URL to perform batch operation on the server-side.
view
batchurl.cs

<e-datamanager url="/Home/UrlDataSource" batchUrl="/Home/BatchUpdate" adaptor="Url
Adaptor"></e-datamanager>
gs>
<e-grid-columns>
783
id-column>
</e-grid-columns>
</ejs-grid>

{
var Data = order.ToList();
return dm.requiresCounts ? Json(new { result = Data.Skip(dm.skip).Take(dm.t
ake), count = count }) : Json(Data);
}
public ActionResult BatchUpdate([FromBody]string action, List<EditableOrder> added, Lis

t<EditableOrder> changed, List<EditableOrder> deleted, int? key)
{
//Save the batch changes in database
}
Default column values on add new

The grid provides an option to set the default value for the columns when adding a new record in
it. To set a default value for the particular column by defining the Columns.DefaultValue .
view
defaultcolumnvalue.cs
784
de="Normal"></e-grid-editSettings>
<e-grid-columns>
<e-grid-column field="CustomerID" headerText="Customer ID" defaultValue="HANAR"
type="string" width="120"></e-grid-column>
id-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Custom validation
You can define your own custom validation rules for the specific columns by using Form
Validator custom rules .
In the below demo, custom validation applied for CustomerID column.
view
customvalidation.cs

true" mode="Normal"></e-grid-editSettings>
<e-grid-columns>
e" textAlign="Right" width="100" validationRules="@(new{ required: true })"></e-grid-co
lumn>
<e-grid-column field="CustomerID" headerText="Customer ID" type="stri
ng" width="120" validationRules="@(new { required: true, minLength: [customFn, 'Need at
785
least 5 letters'] })></e-grid-column>
></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function customFn (args) {

return args['value'].length >= 5;
};
</script>

{
if (orders.Count() == 0)
DataSource();
return View();
}
public void DataSource()

{
int code = 10000;
for (int i = 1; i < 10; i++)
{
orders.Add(new OrderDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, n
ew DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7,
16), "Kirchgasse 6"));
orders.Add(new OrderDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new
DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11)
, "Avda. Azteca 123"));
orders.Add(new OrderDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new
DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996,
10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
orders.Add(new OrderDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, n
ew DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12
, 30), "Magazinweg 7"));
orders.Add(new OrderDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new
DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997
, 12, 3), "1029 - 12th Ave. S."));
code += 5;
}
}
786
Disable editing for particular column
You can disable editing for particular columns by using the Columns.AllowEditing .
In the following demo, editing is disabled for the CustomerID column.
view
disableeditforcolumn.cs

ring>() { "Add", "Edit", "Delete","Update", "Cancel" })">
<e-grid-columns>
<e-grid-column field="CustomerID" headerText="Customer ID" allowEditing="fals
e" type="string" width="120"></e-grid-column>
id-column>
</e-grid-columns>
</ejs-grid>

{
var orders = OrderDetails.GetAllRecords();
return View();
}
Troubleshoot: Editing works only for first row

The Editing functionalities can be performed based upon the primary key value of the selected
row. If primaryKey is not defined in the grid, then edit or delete action take places the first row.
See also
Editing with template column
787
Customize dialog when editing
Cascading DropDownList with Grid Editing
Access Editor components
788
Sorting
Sorting enables you to sort data in the Ascending or Descending order. To sort a column, click
the column header.
To sort multiple columns, press and hold the CTRL key and click the column header. You can
clear sorting of any one of the multi-sorted columns by pressing and holding the SHIFT key and
clicking the specific column header.
To enable sorting in the Grid, set the AllowSorting to true. Sorting options can be configured
through the SortSettings .
view
sorting.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowSorting="true" height="270">
<e-grid-columns>
<e-grid-column field="EmployeeID" headerText="Customer ID" width="150"></e-gri
d-column>
lumn>
lumn>
</e-grid-columns>
</ejs-grid>

{
var orders=OrderDetails.GetAllRecords();
return View();
}
Grid columns are sorted in the Ascending order. If you click the already sorted
column, the sort direction toggles.
You can apply and clear sorting by invoking sortColumn and clearSorting methods.
To disable sorting for a particular column, set the Columns.AllowSorting to false.
789
Initial sort
To sort at initial rendering, set the Field and Direction in the SortSettings.Columns .
view
initial-sort.cs
@{
List<object> cols = new List<object>();
cols.Add(new { field = "OrderDate", direction = "Ascending" });
cols.Add(new { field = "Freight", direction = "Descending" });
}
<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowSorting="true" allowPaging=
"true">
<e-grid-pagesettings pageCount="2"></e-grid-pagesettings>
<e-grid-sortsettings columns="cols"></e-grid-sortsettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right"
></e-grid-column>
<e-grid-column field="OrderDate" headerText=" Order Date" textAlign="Ri
ght" format="yMd" width="130"></e-grid-column>
></e-grid-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Sorting events
During the sort action, the grid component triggers two events. The ActionBegin event triggers
before the sort action starts, and the ActionComplete event triggers after the sort action is
completed. Using these events you can perform the needed actions.
790
view
sort-event.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" actionComplete="sortEvent" actionBe

gin="sortEvent" allowSorting="true" height="270">
<e-grid-columns>
d-column>
lumn>
lumn>
</e-grid-columns>
</ejs-grid>
<script>
function sortEvent(args){
alert(args.requestType + ' ' + args.type); //custom Action

}
</script>

{
DataSource();
return View();
}

{
int code = 10000;
for (int i = 1; i < 10; i++)
{
791
, 12, 3), "1029 - 12th Ave. S."));
code += 5;
}
}
The args.requestType is the current action name. For example, in sorting the
args.requestType is 'sorting'.
Touch interaction
When you tap the grid header on touchscreen devices, the selected column header is sorted. A
popup is displayed for multi-column sorting. To sort multiple columns, tap the popup
, and then tap the desired grid headers.
The following screenshot shows grid touch sorting.
792
Grouping
The Grid has options to group records by dragging and dropping the column header to the group
drop area. When grouping is applied, grid records are organized into a hierarchical structure to
facilitate easier expansion and collapse of records.
To enable grouping in the grid, set the AllowGrouping as true. Grouping options can be
configured through the GroupSettings .
view
group.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowGrouping="true" >

<e-grid-columns>
d-column>
umn>
umn>
</e-grid-columns>
</ejs-grid>

{
return View();
}
You can group and ungroup columns by using the groupColumn and ungroupColumn
methods.
To disable grouping for a particular column, set the Columns.AllowGrouping to false.
Initial group
To apply group at initial rendering, set the column field name in the GroupSettings.Columns .
view
initial-group.cs
793
<e-grid-groupsettings columns="@(new string[] {"OrderDate"})"></e-grid-groupsettings
>
<e-grid-columns>
d-column>
0"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" format="C2" width="150"></e
-grid-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Caption template
You can customize the group caption by using the GroupSettings.CaptionTemplate property.
view
caption-temp.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowGrouping="true" height="315">

<e-grid-groupsettings captionTemplate="#captiontemplate" columns="@(new string[] {"
EmployeeID"})"></e-grid-groupsettings>
<e-grid-columns>
<e-grid-column field="EmployeeID" headerText="Employee ID" ></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID"></e-grid-column>

olumn>
</e-grid-columns>
</ejs-grid>
<script id="captiontemplate" type="text/x-template">

${field} - ${key}
</script>
794
{
return View();
}
Hide drop area

To avoid ungrouping or further grouping of a column after initial column grouping, define the
GroupSettings.ShowDropArea as false.
view
hide-drop-area.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowGrouping="true">

<e-grid-groupsettings showDropArea="false" columns="@(new string[] {"Freight"})"></
e-grid-groupsettings>
<e-grid-columns>
d-column>
0"></e-grid-column>
-grid-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Group with paging
795
On grouping columns with paging feature, the aggregated information and total items are
displayed based on the current page. The grid does not consider aggregated information and
total items from other pages. To get additional details (aggregated information and total items)
from other pages, set the GroupSettings.DisablePageWiseAggregates to false.
If remote data is bound to grid dataSource, two requests will be sent when performing
grouping action; one for getting the grouped data and another for getting aggregate details
and total items count.
Group by format
By default, a column will be grouped by the data or value present for the particular row. To group
the numeric or datetime column based on the mentioned format, you have to enable the
EnableGroupByFormat property of the corresponding grid columns.
view
group-format.cs

<e-grid-groupsettings showDropArea="false" columns="@(new string[] { "OrderDate","F
reight"})"></e-grid-groupsettings>
<e-grid-columns>
d-column>
<e-grid-column field="OrderDate" headerText="Order Date" format="yMd" enableGro
upByFormat="true" width="150"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" format="C2" enableGroupByFo
rmat="true" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Grouping events
796
During the group action, the grid component triggers two events. The ActionBegin event
triggers before the group action starts and the ActionComplete event triggers after the group
action is completed. Using these events you can perform any action.
view
grouping-events.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowGrouping="true" actionBegin="ac

tionHandler" actionComplete="actionHandler">
<e-grid-columns>
d-column>
0"></e-grid-column>
-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function actionHandler(args) {
alert(args.requestType + ' ' + args.type); //Custom Action
}
</script>

{
return View();
}
The args.requestType is based on the current action name. For example, when grouping,
the args.requestType value will be 'grouping'.
Collapse by external button

You can collapse the selected group from an external button by invoking the
expandCollapseRows method.
view
collapse.cs
797
<ejs-button id="collapse" content="Collapse" isPrimary="true"></ejs-button>
<e-grid-groupsettings columns="@(new string[] {"Freight"})"></e-grid-groupsettings>
<e-grid-columns>
d-column>
0"></e-grid-column>
-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
document.getElementById('collapse').addEventListener('click', () => {
var grid = document.getElementById('Grid').ej2_instances[0];
if (grid.getSelectedRowIndexes().length) {
var currentTr = grid.getRows()[grid.getSelectedRowIndexes()[0]];
while (currentTr.classList && currentTr.classList.length) {
currentTr = currentTr.previousSibling;
}
let collapseElement = currentTr.querySelector('.e-recordplusexpand');
grid.groupModule.expandCollapseRows(collapseElement); //Pass the collapse row e
lement.
}
});
</script>

{
return View();
}
798
Filtering
Filtering allows you to view particular records based on filter criteria. To enable filtering in the
Grid, set the AllowFiltering to true. Filtering options can be configured through
FilterSettings .
view
filter.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowFiltering="true" >

<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="
-column>
<e-grid-column field="ShipCity" headerText="Shio City" width="100"></e-grid-c
olumn>
umn>
</e-grid-columns>
</ejs-grid>

{
return View();
}
You can apply and clear filtering by using filterByColumn and clearFiltering
methods.
To disable filtering for a particular column, set Columns.AllowFiltering to false.
Initial filter
To apply the filter at initial rendering, set the filter Predicate object in FilterSettings.Columns .
view
initialfilter.cs
@{
List<object> filterColumns = new List<object>();
799
filterColumns.Add(new { field = "ShipCity", matchCase = false, @operator = "sta
rtswith", predicate = "and", value = "Berlin" });
filterColumns.Add(new { field = "ShipName", matchCase = false, @operator = "sta
rtswith", predicate = "and", value = "Simons bistro" });
}
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowFiltering="true" height="27
3">
<e-grid-filterSettings columns="filterColumns"></e-grid-filterSettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width
="100"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-
grid-column>
-column>
-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Filter operators
The filter operator for a column can be defined in the FilterSettings.Columns.Operator
property.
The available operators and its supported data types are:
Operator Description Supported Types
Checks whether the value begins with the

startswith String
specified value.
Checks whether the value ends with the

endswith String
specified value.
Checks whether the value contains the

contains String
specified value.
Checks whether the value is equal to the String | Number |

equal
specified value. Boolean | Date
800
notequal Checks for values not equal to the specified String | Number |
value. Boolean | Date
Checks whether the value is greater than

greaterthan Number | Date
the specified value.
Checks whether a value is greater than or

greaterthanorequal Number | Date
equal to the specified value.
Checks whether the value is less than the

lessthan Number | Date
specified value.
Checks whether the value is less than or

lessthanorequal Number | Date
equal to the specified value.
By default, the FilterSettings.Columns.Operator value is equal .
Filter bar
By setting the AllowFiltering to true, the filter bar row will render next to the header, which
allows you to filter data. You can filter the records with different expressions depending upon the
column type.
Filter bar expressions:
You can enter the following filter expressions (operators) manually in the filter bar.
Column
Expression Example Description
Type
= =value equal Number
!= !=value notequal Number
> >value greaterthan Number
< <value lessthan Number
>= >=value greaterthanorequal Number
<= <=value lessthanorequal Number
* *value startswith String
% %value endswith String
equal operator will always be used for date

N/A N/A Date
filter.
equal operator will always be used for

N/A N/A Boolean
Boolean filter.
view
filter-bar.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowFiltering="true">
801
<e-grid-columns>
-column>
umn>
umn>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Filter bar template with custom component

The [ filterBarTemplate ] is used to add a custom component for a particular column and this
contains the following functions.
create – It is used for creating custom components.

read – It is used to read the Filter value selected.
write - It is used to wire events for custom components.
In the following sample dropdown is used as custom component in EmployeeID column.
view
filterbartemplate.cs
@{
Object filterTemplate = new Object();
filterTemplate = (new { read = "read", write = "write" });
}
<ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowPaging="true" allowFilteri

ng="true">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" te
xtAlign="Right" width="120"></e-grid-column>
<e-grid-column field="EmployeeID" headerText="Employee ID" filterBarTemplate
="filterTemplate" width="150"></e-grid-column>
802
<e-grid-column field="Freight" headerText="Freight" format="C2" width="120">
</e-grid-column>
-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></
e-grid-column>
</e-grid-columns>
</ejs-grid>
function write(args) {
var data = [{ text: "clear", value: "clear" }, { text: "1", value: 1 }, { t
ext: "2", value: 2 }, { text: "3", value: 3 }, { text: "4", value: 4 },
{ text: "5", value: 5 }, { text: "6", value: 6 }, { text: "7", value: 7 },
{ text: "8", value: 8 }, { text: "9", value: 9 }
]
var listObj = new ej.dropdowns.DropDownList({
dataSource: data,
placeholder: 'Select EmployeeID',
change: function () { read(args) }
});
listObj.appendTo(args.element);
}
function read(args) {
var grid = document.getElementById("Grid").ej2_instances[0]
if (args.element.value == "clear") {
grid.clearFiltering(args.column.field);
args.element.value = ""
} else {
grid.filterByColumn(args.column.field, "equal", parseInt(args.element.v
alue))
}
}
</script>

{
return View();
}
Filter menu
803
You can enable filter menu by setting the FilterSettings.Type as Menu . The filter menu UI will
be rendered based on its column type, which allows you to filter data. You can filter the records
with different operators.
view
filtermenu.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowFiltering="true">

<e-grid-filterSettings type="Menu"></e-grid-filterSettings>
<e-grid-columns>
-column>
umn>
umn>
</e-grid-columns>
</ejs-grid>

{
return View();
}
AllowFiltering must be set as true to enable filter menu.

Setting Columns.AllowFiltering as false will prevent filter menu rendering for a
particular column.
Enable different filter for a column

You can use both Menu and CheckBox filter in a same Grid. To do so, set the
Column.Filter.Type as Menu or CheckBox .
In the following sample menu filter is enabled by default and checkbox filter is enabled for the
CustomerID column using the Column.Filter.Type .
view
diffcolumnfilter.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowFiltering="true" height="273">

<e-grid-filterSettings type="Menu"></e-grid-filterSettings>
804
<e-grid-columns>
00">
</e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" filter="@(new { typ
e="CheckBox"})" width="120">
</e-grid-column>
umn>
umn>
</e-grid-columns>
</ejs-grid>

{
DataSource();
ViewBag.Datasource = orders;
return View();
}

{
int code = 10000;
for (int i = 1; i < 10; i++)
{
, 12, 3), "1029 - 12th Ave. S."));
code += 5;
}
}
805
Excel like filter
You can enable Excel like filter by defining. FilterSettings.Type as Excel .The excel menu
contains an option such as Sorting, Clear filter, Sub menu for advanced filtering.
See also
Customizing filter menu operators list
806
Search
You can search records in a Grid, by using the Search method with search key as a parameter.
This also provides an option to integrate search text box in grid's toolbar by adding Search item
to the Toolbar .
view
search.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" height="272" toolbar="@(new List<st

ring>() { "Search"})">
<e-grid-columns>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Initial search
To apply search at initial rendering, set the fields, operator, key, and ignoreCase in the
SearchSettings .
view
initial-search.cs
807
ring>() { "search"})">
<e-grid-searchSettings fields="@(new string[] { "CustomerID"})" operator="contains"
key="Ha" ignoreCase="true"></e-grid-searchSettings>
<e-grid-columns>
</e-grid-columns>
</ejs-grid>

{
return View();
}
By default, grid searches all the bound column values. To customize this behavior define
the SearchSettings.Fields property.
Search operators
The search operator can be defined in the SearchSettings.Operator property to configure
specific searching.
The following operators are supported in searching:
Operator Description
startswith Checks whether a value begins with the specified value.
endswith Checks whether a value ends with the specified value.
contains Checks whether a value contains the specified value.
equal Checks whether a value is equal to the specified value.
notequal Checks for values not equal to the specified value.
By default, the SearchSettings.Operator value is contains .
808
Search by external button
To search grid records from an external button, invoke the search method.
view
<ejs-button id="search" content="Search" ></ejs-button>

<ejs-grid id="Grid" dataSource="ViewBag.datasource" height="272">
<e-grid-columns>
lumn>
lumn>
</e-grid-columns>
</ejs-grid>
<script>
document.getElementById('search').addEventListener('click', () => {
var gridObj = document.getElementById("Grid").ej2_instances[0];
var searchString = "Ha";
gridObj.search(searchString);
});
</script>
Search specific columns

By default, grid searches all visible columns. You can search specific columns by defining the
specific column's field names in the SearchSettings.Fields property.
view
search-a-column.cs

ring>() { "search"})">
<e-grid-searchsettings fields="@(new string[] { "CustomerID","ShipCity","ShipName"}
)" ></e-grid-searchsettings>
<e-grid-columns>
809
lumn>
lumn>
</e-grid-columns>
</ejs-grid>

{
return View();
}
810
Paging
Paging provides an option to display Grid data in page segments. To enable paging, set the
AllowPaging to true. When paging is enabled, pager component renders at the bottom of the
grid. Paging options can be configured through the PageSettings .
view
page.cs

<e-grid-columns>
-column>
umn>
umn>
</e-grid-columns>
</ejs-grid>

{
return View();
}
You can achieve better performance by using grid paging to fetch only a pre-defined
number of records from the data source.
Template
You can use custom elements inside the pager instead of default elements. The custom
elements can be defined by using the Template property. Inside this template, you can access
the CurrentPage , PageSize , TotalPage and TotalRecordCount values.
view
page-temp.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource dataBound="data" actionComplete="ac

tionComplete" allowPaging="true">
<e-grid-pagesettings template="#template" pageSize="7">
811
</e-grid-pagesettings>
<e-grid-columns>
grid-column>
-column>
-column>
</e-grid-columns>
</ejs-grid>
<script>
function updateTemplate() {
var numeric;
var grid = document.getElementByID("Grid").ej2_instances[0];
numeric = new ej.inputs.NumericTextBox({
min: 1,
max: 3,
step: 1,
format: '###.##',
change: function(args) {
let value = args.value;
grid.goToPage(value);
}
});
numeric.appendTo('#currentPage');
};
var flag = true;
function dataBound() {
if (flag) {
flag = false;
updateTemplate();
}
},
function actionComplete (args) {
if (args.requestType === 'paging') {
updateTemplate();
}
}
</script>

<div class="e-pagertemplate">
812
</script>

{
return View();
}
See Also
Group with Paging
813
Scrolling
The scrollbar will be displayed in the grid when content exceeds the element Width or Height .
The vertical and horizontal scrollbars will be displayed based on the following criteria:
The vertical scrollbar appears when the total height of rows present in the grid exceeds its
element height.
The horizontal scrollbar appears when the sum of columns width exceeds the grid element
width.
The Height and Width are used to set the grid height and width, respectively.
The default value for Height and Width is auto .
Set width and height

To specify the Width and Height of the scroller in the pixel, set the pixel value to a number.
view
width-height.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" height="315" width="400" >

<e-grid-columns>
-column>
umn>
id-column>
umn>
</e-grid-columns>
</ejs-grid>

{
return View();
}
814
Responsive with parent container
Specify the Width and Height as 100% to make the grid element fill its parent container.
Setting the Height to 100% requires the grid parent element to have explicit height.
view
responsive-parent.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" height="100%" >

<e-grid-columns>
-column>
umn>
id-column>
umn>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Scroll to selected row

You can scroll the grid content to the selected row position by using the RowSelected event.
view
scroll-selected-row.cs
<ej-numerictextbox id="numeric" width="200" min="0" showSpinButton="false" placeholder=

"Enter index to select a row" change="onChange" ></ej-numerictextbox>
<ejs-grid id="Grid" dataSource="ViewBag.datasource" rowSelected="rowSelected" height="2
70" width="100%" >
<e-grid-columns>
815
-column>
<e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" form
at="yMd" width="140"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
gridObj.selectRow(parseInt(this.getText(), 10));
}
function rowSelected(args) {
var rowHeight = this.getRows()[this.getSelectedRowIndexes()[0]].scrollHeigh
t;
this.getContent().children[0].scrollTop = rowHeight * this.getSelectedRowIn
dexes()[0];
}
</script>

{
return View();
}
Frozen rows and columns

Frozen rows and columns provides an option to make rows and columns always visible in the top
and left side of the grid while scrolling.
In this demo, the FrozenColumns is set as '2' and the FrozenRows is set as '3'. Hence, the left
two columns and top three rows are frozen.
view
816
freeze-row-column.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" height="315" allowSelection="false"

enableHover="false" frozenColumns="2" frozenRows="3" width="100%" >
<e-grid-columns>
20" ></e-grid-column>
id-column>
<e-grid-column field="EmployeeID" headerText=" Employee ID" textAlign="Right"
umn>
umn>
<e-grid-column field="ShipAddress" headerText="Ship Name" width="150"></e-grid-
column>
umn>
id-column>
<e-grid-column field="ShipRegion" headerText="Ship Region" width="150"></e-grid
-column>
</e-grid-column>
</e-grid-columns>
</ejs-grid>

{
DataSource();
return View();
}

{
int code = 10000;
for (int i = 1; i < 10; i++)
{
817
, 12, 3), "1029 - 12th Ave. S."));
code += 5;
}
}
Freeze particular columns

To freeze particular column in the grid, the IsFrozen property can be used.
In this demo, the columns with field name OrderID and EmployeeID is frozen using the
IsFrozen property.
view
freeze-column.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" height="315" allowSelection="false"

enableHover="false" frozenColumns="2" frozenRows="3" width="100%" >
<e-grid-columns>
20" isFrozen="true"></e-grid-column>
id-column>
<e-grid-column field="EmployeeID" headerText=" Employee ID" textAlign="Right" i
sFrozen="true" width="120"></e-grid-column>
umn>
umn>
<e-grid-column field="ShipAddress" headerText="Ship Name" width="150"></e-grid-
column>
umn>
id-column>
818
<e-grid-column field="ShipRegion" headerText="Ship Region" width="150"></e-grid
-column>
</e-grid-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
The AllowScrolling must be true while giving frozen rows and columns.
Frozen rows and columns should not be set outside the grid view port.
Limitations
The following features are not supported in frozen rows and columns:
Grouping
Row Template
Detail Template
Hierarchy Grid
819
Virtualization
Grid allows you to load large amount of data without performance degradation.
Row Virtualization
Row virtualization allows you to load and render rows only in the content viewport. It is an
alternative way of paging in which the data will be loaded while scrolling vertically. To setup the
row virtualization, you need to define EnableVirtualization as true and content height by
Height property.
The number of records displayed in the Grid is determined implicitly by height of the content
area. Also, you have an option to define a visible number of records by the
PageSettings.PageSize property. The loaded data will be cached and reused when it is needed
for next time.
view
row-virtualization.cs
<ejs-grid id="VirtualGrid" height="600" dataBound="hide" enableVirtualization="true" >

<e-grid-columns>
<e-grid-column field="Field1" headerText="PlayerName" width="140"></
e-grid-column>
<e-grid-column field="Field2" headerText="Year" textAlign="Right" w
<e-grid-column field="Field3" headerText="Stint" textAlign="Right"
<e-grid-column field="Field4" headerText="TMID" textAlign="Right" w
<e-grid-column field="Field5" headerText="LGID" textAlign="Right" w
<e-grid-column field="Field6" headerText="GP" textAlign="Right" wid
<e-grid-column field="Field7" headerText="GS" textAlign="Right" wid
<e-grid-column field="Field8" headerText="Minutes" textAlign="Right"
<e-grid-column field="Field9" headerText="Points" textAlign="Right"
<e-grid-column field="Field10" headerText="oRebounds" textAlign="Ri
ght" width="130"></e-grid-column>
<e-grid-column field="Field11" headerText="dRebounds" textAlign="Ri
<e-grid-column field="Field12" headerText="Rebounds" textAlign="Rig
ht" width="120"></e-grid-column>
820
<e-grid-column field="Field13" headerText="Assists" textAlign="Righ
<e-grid-column field="Field14" headerText="Steals" textAlign="Right"
<e-grid-column field="Field15" headerText="Blocks" textAlign="Right"
<e-grid-column field="Field16" headerText="Turnovers" textAlign="Ri
<e-grid-column field="Field17" headerText="PF" textAlign="Right" wi
<e-grid-column field="Field18" headerText="fgAttempted" textAlign="
Right" width="150"></e-grid-column>
<e-grid-column field="Field19" headerText="fgMade" textAlign="Right"
<e-grid-column field="Field20" headerText="ftAttempted" textAlign="
<e-grid-column field="Field21" headerText="ftMade" textAlign="Right"
<e-grid-column field="Field22" headerText="ThreeAttempted" textAlign
="Right" width="150"></e-grid-column>
<e-grid-column field="Field23" headerText="ThreeMade" textAlign="Ri
<e-grid-column field="Field24" headerText="PostGP" textAlign="Right"
<e-grid-column field="Field25" headerText="PostGS" textAlign="Right"
<e-grid-column field="Field26" headerText="PostMinutes" textAlign="
<e-grid-column field="Field27" headerText="PostPoints" textAlign="R
<e-grid-column field="Field28" headerText="PostoRebounds" textAlign=
<e-grid-column field="Field29" headerText="PostdRebounds" textAlign=
<e-grid-column field="Field30" headerText="PostRebounds" textAlign=
</e-grid-columns>
</ejs-grid>
<script>
var virtualData = [], date1=null, date2=null, flag= true;
var names = ['hardire', 'abramjo01', 'aubucch01', 'Hook', 'Rumpelstiltskin', 'B
elle', 'Emma', 'Regina', 'Aurora', 'Elsa',
'Anna', 'Snow White', 'Prince Charming', 'Cora', 'Zelena', 'August', 'Mulan'
, 'Graham', 'Discord', 'Will', 'Robin Hood',
'Jiminy Cricket', 'Henry', 'Neal', 'Red', 'Aaran', 'Aaren', 'Aarez', 'Aarma
n', 'Aaron', 'Aaron-James', 'Aarron', 'Aaryan', 'Aaryn',
'Aayan', 'Aazaan', 'Abaan', 'Abbas', 'Abdallah', 'Abdalroof', 'Abdihakim',
'Abdirahman', 'Abdisalam', 'Abdul', 'Abdul-Aziz',
821
'Abdulbasir', 'Abdulkadir', 'Abdulkarem', 'Abdulkhader', 'Abdullah', 'Abdul
-Majeed', 'Abdulmalik', 'Abdul-Rehman', 'Abdur',
'Abdurraheem', 'Abdur-Rahman', 'Abdur-Rehmaan', 'Abel', 'Abhinav', 'Abhisum
ant', 'Abid', 'Abir', 'Abraham', 'Abu', 'Abubakar',
'Ace', 'Adain', 'Adam', 'Adam-James', 'Addison', 'Addisson', 'Adegbola', 'A
degbolahan', 'Aden', 'Adenn', 'Adie', 'Adil', 'Aditya',
'Adnan', 'Adrian', 'Adrien', 'Aedan', 'Aedin', 'Aedyn', 'Aeron', 'Afonso',
'Ahmad', 'Ahmed', 'Ahmed-Aziz', 'Ahoua', 'Ahtasham',
'Aiadan', 'Aidan', 'Aiden', 'Aiden-Jack', 'Aiden-Vee'];
document.getElementById("generate").addEventListener('click', () => {
var grid = document.getElementById("VirtualGrid").ej2_instances[0]

if (!virtualData.length) {
show();
dataSource();
date1 = new Date().getTime();
grid.dataSource = virtualData;
} else {
flag = true;
show();
grid.refresh();
}
})
function show() {
document.getElementById('popup').style.display = 'inline-block';
}
function hide(args) {
if (flag && date1) {

var date2 = new Date().getTime();
document.getElementById('performanceTime').innerHTML = 'Time Taken: ' +
(date2 - date1) + 'ms';
flag = false;
}
document.getElementById('popup').style.display = 'none';
}
function dataSource() {
for (var i= 0; i < 100000; i++) {
virtualData.push({
'Field1': names[Math.floor(Math.random() * names.length)],
'Field2': 1967 + (i % 10),
'Field3': Math.floor(Math.random() * 200),
822
});
}
}
</script>

{
return View();
}
Column Virtualization
Column virtualization allows you to virtualize columns. It will render columns which are in the
viewport. You can scroll horizontally to view more columns.
823
To setup the column virtualization, set the EnableVirtualization and
EnableColumnVirtualization properties as true .
view
Column-virtualization.cs
<ejs-grid id="VirtualGrid" height="600" dataBound="hide" enableColumnVirtualization="t

rue" enableVirtualization="true" >
<e-grid-columns>
<e-grid-column field="Field1" headerText="PlayerName" width="140"></
e-grid-column>
<e-grid-column field="Field2" headerText="Year" textAlign="Right" w
<e-grid-column field="Field3" headerText="Stint" textAlign="Right"
<e-grid-column field="Field4" headerText="TMID" textAlign="Right" w
<e-grid-column field="Field5" headerText="LGID" textAlign="Right" w
<e-grid-column field="Field6" headerText="GP" textAlign="Right" wid
<e-grid-column field="Field7" headerText="GS" textAlign="Right" wid
<e-grid-column field="Field8" headerText="Minutes" textAlign="Right"
<e-grid-column field="Field9" headerText="Points" textAlign="Right"
<e-grid-column field="Field10" headerText="oRebounds" textAlign="Ri
<e-grid-column field="Field11" headerText="dRebounds" textAlign="Ri
<e-grid-column field="Field12" headerText="Rebounds" textAlign="Rig
ht" width="120"></e-grid-column>
<e-grid-column field="Field13" headerText="Assists" textAlign="Righ
<e-grid-column field="Field14" headerText="Steals" textAlign="Right"
<e-grid-column field="Field15" headerText="Blocks" textAlign="Right"
<e-grid-column field="Field16" headerText="Turnovers" textAlign="Ri
<e-grid-column field="Field17" headerText="PF" textAlign="Right" wi
<e-grid-column field="Field18" headerText="fgAttempted" textAlign="
<e-grid-column field="Field19" headerText="fgMade" textAlign="Right"
<e-grid-column field="Field20" headerText="ftAttempted" textAlign="
824
<e-grid-column field="Field21" headerText="ftMade" textAlign="Right"
<e-grid-column field="Field22" headerText="ThreeAttempted" textAlign
="Right" width="150"></e-grid-column>
<e-grid-column field="Field23" headerText="ThreeMade" textAlign="Ri
<e-grid-column field="Field24" headerText="PostGP" textAlign="Right"
<e-grid-column field="Field25" headerText="PostGS" textAlign="Right"
<e-grid-column field="Field26" headerText="PostMinutes" textAlign="
<e-grid-column field="Field27" headerText="PostPoints" textAlign="R
<e-grid-column field="Field28" headerText="PostoRebounds" textAlign=
<e-grid-column field="Field29" headerText="PostdRebounds" textAlign=
<e-grid-column field="Field30" headerText="PostRebounds" textAlign=
</e-grid-columns>
</ejs-grid>
<script>
var virtualData = [], date1=null, date2=null, flag= true;
var names = ['hardire', 'abramjo01', 'aubucch01', 'Hook', 'Rumpelstiltskin', 'B
elle', 'Emma', 'Regina', 'Aurora', 'Elsa',
'Anna', 'Snow White', 'Prince Charming', 'Cora', 'Zelena', 'August', 'Mulan'
, 'Graham', 'Discord', 'Will', 'Robin Hood',
'Jiminy Cricket', 'Henry', 'Neal', 'Red', 'Aaran', 'Aaren', 'Aarez', 'Aarma
n', 'Aaron', 'Aaron-James', 'Aarron', 'Aaryan', 'Aaryn',
'Aayan', 'Aazaan', 'Abaan', 'Abbas', 'Abdallah', 'Abdalroof', 'Abdihakim',
'Abdirahman', 'Abdisalam', 'Abdul', 'Abdul-Aziz',
'Abdulbasir', 'Abdulkadir', 'Abdulkarem', 'Abdulkhader', 'Abdullah', 'Abdul
-Majeed', 'Abdulmalik', 'Abdul-Rehman', 'Abdur',
'Abdurraheem', 'Abdur-Rahman', 'Abdur-Rehmaan', 'Abel', 'Abhinav', 'Abhisum
ant', 'Abid', 'Abir', 'Abraham', 'Abu', 'Abubakar',
'Ace', 'Adain', 'Adam', 'Adam-James', 'Addison', 'Addisson', 'Adegbola', 'A
degbolahan', 'Aden', 'Adenn', 'Adie', 'Adil', 'Aditya',
'Adnan', 'Adrian', 'Adrien', 'Aedan', 'Aedin', 'Aedyn', 'Aeron', 'Afonso',
'Ahmad', 'Ahmed', 'Ahmed-Aziz', 'Ahoua', 'Ahtasham',
'Aiadan', 'Aidan', 'Aiden', 'Aiden-Jack', 'Aiden-Vee'];
document.getElementById("generate").addEventListener('click', () => {
var grid = document.getElementById("VirtualGrid").ej2_instances[0]

if (!virtualData.length) {
825
show();
dataSource();
grid.dataSource = virtualData;
} else {
flag = true;
show();
grid.refresh();
}
})
function show() {
document.getElementById('popup').style.display = 'inline-block';
}
function hide(args) {
if (flag && date1) {

var date2 = new Date().getTime();
document.getElementById('performanceTime').innerHTML = 'Time Taken: ' +
(date2 - date1) + 'ms';
flag = false;
}
document.getElementById('popup').style.display = 'none';
}
function dataSource() {
for (var i= 0; i < 100000; i++) {
virtualData.push({
'Field1': names[Math.floor(Math.random() * names.length)],
'Field2': 1967 + (i % 10),
826
});
}
}
</script>

{
DataSource();
return View();
}

{
int code = 10000;
for (int i = 1; i < 10; i++)
{
, 12, 3), "1029 - 12th Ave. S."));
code += 5;
}
}
827
Column's Width is required for column virtualization. If column's width is not defined then
Grid will consider its value as 200px .
Virtualization with Grouping

Both the row and column virtualization can be used along with grouping. At initial rendering, the
virtual height of scrollbar will be set based on the total number of records. After grouping, it will
be refreshed based on the number of Group caption rows at every vertical scrolling.
Limitations for Virtualization

While using column virtualization, column width should be in the pixel. Percentage values
are not accepted.
Due to the element height limitation in browsers, the maximum number of records loaded by
the grid is limited by the browser capability.
Cell selection will not be persisted in both row and column virtualization.
Virtual scrolling is not compatible with detail template and hierarchy features.
Group expand and collapse state will not be persisted.
Since data is virtualized in grid, the aggregated information and total group items are
displayed based on the current view items. To get these information regardless of the view
items, refer to the Group with Page topic.
The page size provided must be two times larger than the number of visible rows in the grid.
If the page size is failed to meet this condition then the size will be determined by grid.
The height of the grid content is calculated using the row height and total number of records
in the data source and hence features which changes row height such as text wrapping are
not supported. If you want to increase the row height to accommodate the content then you
can specify the row height as below to ensure all the table rows are in same height.
.e-grid .e-row {
height: 2em;
}
Programmatic selection using the selectRows method is not supported in virtual scrolling.
828
Selection
Selection provides an option to highlight a row or a cell. It can be done through simple mouse
down or arrow keys. To disable selection in the Grid, set the AllowSelection to false.
The grid supports two types of selection that can be set by using the SelectionSettings.Type .
They are:
Single : The Single value is set by default, and it only allows selection of a single row or a
cell.
Multiple : Allows you to select multiple rows or cells. To perform the multi-selection, press
and hold CTRL key and click the desired rows or cells. To select range of rows or cells,
press and hold the SHIFT key and click the rows or cells.
view
selection.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowSelection="true" allowPaging=

"true">
<e-grid-columns>
<e-grid-column field="Inventor" headerText="Inventor Name" width="140"></e-grid
-column>
<e-grid-column field="NumberofPatentFamilies" headerText="No of Patent Families"
width="185" textAlign="Right"></e-grid-column>
<e-grid-column field="Active" headerText="Active" width="130"></e-grid-column>

</e-grid-columns>
</ejs-grid>

{
return View();
}
Selection mode
829
The grid supports three types of selection mode that can be set by using the
SelectionSettings.Mode . They are:
Row : The Row value is set by default, and allows you to select only rows.
Cell : Allows you to select only cells.
Both : Allows you to select rows and cells at the same time.
view
selection-mode.cs

"true">
<e-grid-selectionsettings mode="Both"></e-grid-selectionsettings>
<e-grid-columns>
<e-grid-column field="Inventor" headerText="Inventor Name" width="140"></e-
grid-column>
<e-grid-column field="NumberofPatentFamilies" headerText="No of Patent Fami
lies" width="185" textAlign="Right"></e-grid-column>
lumn>
<e-grid-column field="Active" headerText="Active" width="130"></e-grid-colu
mn>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Cell selection
Cell selection can be done through simple mouse down or arrow keys (up, down, left, and right).
The grid supports two types of cell selection mode that can be set by using the
SelectionSettings.CellSelectionMode . They are:
Flow : The Flow value is set by default. The range of cells are selected between the start
index and end index that includes in between cells of rows.
Box : Range of cells are selected from the start and end column indexes that includes in
830
between cells of rows within the range.
view
cell-selection.cs

"true">
<e-grid-selectionsettings cellSelectionMode="Box" mode="Cell" type="Multiple"></
e-grid-selectionsettings>
<e-grid-columns>
<e-grid-column field="Inventor" headerText="Inventor Name" width="140"></e-
grid-column>
<e-grid-column field="NumberofPatentFamilies" headerText="No of Patent Fami
lies" width="185" textAlign="Right"></e-grid-column>
lumn>
<e-grid-column field="Active" headerText="Active" width="130"></e-grid-colu
mn>
</e-grid-columns>
</ejs-grid>

{
var orders = InventorDetails.GetAllRecords();
return View();
}
Cell selection requires the SelectionSettings.Mode to be Cell or Both , and Type

should be Multiple .
Checkbox selection
Checkbox selection provides an option to select multiple grid records with help of checkbox in
each row.
To render the checkbox in each grid row, you need to use checkbox column with type as
checkbox using the column Type property.
view
checkbox.cs
831
"true">
<e-grid-columns>
<e-grid-column type="checkbox" width="50"></e-grid-column>
-column>

</e-grid-columns>
</ejs-grid>

{
return View();
}
By default, selection is allowed by clicking a grid row or checkbox in that row. To allow
selection only through checkbox, you can set the SelectionSettings.CheckboxOnly
property to true.
Selection can be persisted in all the operations using the
SelectionSettings.PersistSelection property. For persisting selection on the grid,
any one of the columns should be defined as a primary key using the
Columns.IsPrimaryKey property.
Select row at Initial rendering

To select a row at initial rendering, set the SelectedRowIndex value.
view
select-row.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowSelection="true" selectedRowI

ndex="1" allowPaging="true">
<e-grid-selectionsettings type="Multiple" mode="Both"></e-grid-selectionsettings>
832
<e-grid-columns>
-column>

</e-grid-columns>
</ejs-grid>

{
return View();
}
Get selected row indexes

You can get the selected row indexes by using the getSelectedRowIndexes method.
view
selected-row-index.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" rowSelected="rowSelected" allowSel

ection="true" allowPaging="true">
<e-grid-columns>
-column>

</e-grid-columns>
</ejs-grid>
<script>
function rowSelected(args){
833
var selectedrowindex= grid.getSelectedRowIndexes(); // get the selected row indexes.
alert(selectedrowindex); // to alert the selected row indexes.
var selectedrecords = grid.getSelectedRecords(); // get the selected records.
}
</script>

{
return View();
}
Touch interaction
When you tap a grid row on touchscreen device, the tapped row is selected. It also shows a
popup for multi-row selection. To select multiple rows or cells, tap the popup and
then tap the desired rows or cells.
Multi-selection requires the selection Type to be Multiple .
The following screenshot represents a grid touch selection in the device.
834
835
Aggregates
Aggregate values are displayed in the footer, group footer, or group caption of the Grid. It can be
configured through Aggregates property. Field and Type are the minimum properties
required to represent an aggregate column.
By default, the aggregate value can be displayed in the footer, group, and caption cells. To show
the aggregate value in one of the cells, use the FooterTemplate , GroupFooterTemplate , or
GroupCaptionTemplate property.
Built-in aggregate types

The aggregate type should be specified in the Type property to configure an aggregate column.
The built-in aggregates are,
Sum
Average
Min
Max
Count
TrueCount
FalseCount
Multiple aggregates can be used for an aggregate column by setting the Type
property with an array of aggregate types.
Multiple types for a column is supported only when one of the aggregate templates is
used.
Footer aggregate
Footer aggregate value is calculated for all the rows, and it is displayed in the footer cells. Use
the FooterTemplate property to render the aggregate value in footer cells.
view
footer-agg.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowPaging="true">

<e-grid-aggregates>
<e-grid-aggregate>
<e-aggregate-columns>
<e-aggregate-column field="Freight" type="Sum" footerTemplate=
"Sum:${Sum}"></e-aggregate-column>
836
</e-aggregate-columns>
</e-grid-aggregate>
<e-grid-aggregate>
<e-aggregate-column field="Freight" type="Average" footerTempl
ate="Average:${Average}"></e-aggregate-column>
</e-grid-aggregate>
</e-grid-aggregates>
<e-grid-groupsettings></e-grid-groupsettings>
<e-grid-columns>
></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" TextAlign="Right" f
<e-grid-column field="OrderDate" headerText="Order Date" format="yMd"
0"></e-grid-column>
</e-grid-columns>
</ejs-grid>

{
return View();
}
The aggregate values must be accessed inside the template using their corresponding
Type name.
How to format aggregate value

You can format the aggregate value result by using the Format property.
view
format-agg.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowPaging="true">

<e-grid-aggregates>
<e-grid-aggregate>
<e-aggregate-column field="Freight" type="Sum" format="C2" foo
837
terTemplate="Sum:${Sum}"></e-aggregate-column>
</e-grid-aggregate>
<e-grid-aggregate>
<e-aggregate-column field="Freight" type="Average" format="C2"
footerTemplate="Average:${Average}"></e-aggregate-column>
</e-grid-aggregate>
<e-grid-groupsettings></e-grid-groupsettings>
<e-grid-columns>
></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" TextAlign="Right" f
<e-grid-column field="OrderDate" headerText="Order Date" format="yMd"
0"></e-grid-column>
</e-grid-columns>
</ejs-grid>

{
var Order = Product.GetAllRecords();
return View();
}
Group and caption aggregate

Group and caption aggregate values are calculated from the current group items. If
GroupFooterTemplate is provided, the aggregate values are displayed in the group footer cells;
and if GroupCaptionTemplate is provided, aggregate values are displayed in the group caption
cells.
view
group-caption.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowGrouping="true" allowPaging="t

rue">
838
<e-grid-aggregates>
<e-grid-aggregate>
<e-aggregate-column field="UnitsInStock" type="Sum" groupFooterTem
plate="Total units: ${Sum}"></e-aggregate-column>
<e-aggregate-column field="Discontinued" type="Truecount" groupFoot
erTemplate="Discontinued: ${Truecount}"></e-aggregate-column>
<e-aggregate-column field="UnitsInStock" type="Max" groupCaptionTem
plate="'Maximum: ${Max}"></e-aggregate-column>
</e-grid-aggregate>
<e-grid-groupsettings columns="@(new string[] { "CategoryName"})"></e-grid-grou
psettings>
<e-grid-columns>
<e-grid-column field="CategoryName" headerText="Category Name" width="160">
</e-grid-column>
<e-grid-column field="ProductName" headerText="Product Name" width="170"></
e-grid-column>
<e-grid-column field="QuantityPerUnit" headerText="Quantity Per Unit" text
Align="Right" width="170"></e-grid-column>
<e-grid-column field="UnitsInStock" headerText="Units In Stock" width="170">
</e-grid-column>
<e-grid-column field="Discontinued" headerText="Discontinued" displayAsChec
kBox="true" type="boolean" textAlign="Center" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>

{
var Order = Product.GetAllRecords();
return View();
}
The aggregate values must be accessed inside the template using their corresponding
Type name.
Custom aggregate
839
To calculate the aggregate value with your own aggregate functions, use the custom aggregate
option. To use custom aggregation, specify the Type as Custom , and provide the custom
aggregate function in the CustomAggregate property.
The custom aggregate function will be invoked with different arguments for total and group
aggregations.
Total aggregation: The custom aggregate function will be called with the whole data and
current AggregateColumn object.
Group aggregation: This will be called with the current group details and AggregateColumn
object.
view

<e-grid-aggregates>
<e-grid-aggregate>
<e-aggregate-column field="ShipCountry" type="Custom" footerTemplate="
Brazil Count:${Custom}" customAggregate="customAggregateFn"></e-aggregate-column>
</e-grid-aggregate>
<e-grid-columns>
id-column>
<e-grid-column field="OrderDate" headerText="Order Date" format="yMd" textAlign=
<e-grid-column field="ShipCountry" headerText="Ship Country" width="140"></e-g
rid-column>
</e-grid-columns>
</ejs-grid>
<script>
function customAggregateFn (data) {
return data.result.filter(function (item) {
return item['ShipCountry'] === 'Brazil';
}).length;
}
</script>
To access the custom aggregate value inside the template, use the key as Custom .
840
Print
To print the Grid, use the print method from grid instance. The print option can be displayed
on the Toolbar by adding the Print toolbar item.
view
print.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource toolbar="@(new List<string>() { "Pri

nt"})" >
<e-grid-columns>
-column>
umn>
umn>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Page setup
Some of the print options cannot be configured through JavaScript code. So, you have to
customize the layout, paper size, and margin options using the browser page setup dialog.
Please refer to the following links to know more about the browser page setup:
Chrome
Firefox
Safari
IE
Print using an external button

To print the grid from an external button, invoke the print method.
841
view
external-btn.cs
<ejs-button id="printbtn" content="Print" isPrimary="true"></ejs-button>

<e-grid-columns>
-column>
umn>
umn>
</e-grid-columns>
</ejs-grid>
<script>
document.getElementById('printbtn').onclick = function () {
document.getElementById('Grid').ej2_instances[0].print();
}
</script>

{
return View();
}
Print the visible page

By default, the grid prints all the pages. To print the current page alone, set the PrintMode to
CurrentPage .
view
current-page.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource toolbar="@(new List<string>() { "Pri

nt"})" printMode="CurrentPage" >
<e-grid-columns>
842
-column>
umn>
umn>
</e-grid-columns>
</ejs-grid>

{
return View();
}
843
State Persistence
State persistence refers to the Grid's state maintained in the browser's localStorage even if the
browser is refreshed or if you move to the next page within the browser. State persistence stores
grid’s model object in the local storage when the EnablePersistence is defined as true.
Maintaining custom query in a persistent state

The grid does not maintain the query params after page load event when the
EnablePersistence is set to true. This is because the grid refreshes its query params for every
page load. You can maintain the custom query params by resetting the addParams method in
the ActionBegin event.
view
state-persist.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" enablePersistence="true" actionBeg

in="actionBegin" allowFiltering="true" height="270">
<e-grid-columns>
d-column>
lumn>
lumn>
</e-grid-columns>
</ejs-grid>
<script>
function actionBegin(args) {
this.query.addParams('$filter', 'EmployeeID eq 1');

}
</script>

{
return View();
844
}
Get or set localStorage value

If the EnablePersistance property is set to true, the grid property value is saved in the
window.localStorage for reference. You can get/set the localStorage value by using the
getItem / setItem method in the window.localStorage .
//get the Grid model.

var value = window.localStorage.getItem('gridGrid'); //"gridGrid" is component name + c
omponent id.
var model= JSON.parse(model);
//set the Grid model.

window.localStorage.setItem('gridGrid', JSON.stringify(model)); //"gridGrid" is compone
nt name + component id.
845
ToolBar
The Grid provides ToolBar support to handle grid actions. The Toolbar property accepts either
the collection of built-in toolbar items and ItemModel objects for custom toolbar items or HTML
element ID for toolbar template.
Built-in toolbar items

Built-in toolbar items execute standard actions of the grid, and it can be added by defining the
Toolbar as a collection of built-in items. It renders the button with icon and text.
The following table shows built-in toolbar items and its actions.
Built-in Toolbar Items Actions
Add Adds a new record.
Edit Edits the selected record.
Update Updates the edited record.
Delete Deletes the selected record.
Cancel Cancels the edit state.
Search Searches the records by the given key.
Print Prints the grid.
ExcelExport Exports the grid to Excel.
PdfExport Exports the grid to PDF.
WordExport Exports the grid to Word.
view
toolbar.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" toolbar="@(new List<string>() {"Pri

nt","Search"})" height="270">
<e-grid-columns>
846
</e-grid-columns>
</ejs-grid>

{
return View();
}
The Toolbar has options to define both built-in and custom toolbar items.
Custom toolbar items

Custom toolbar items can be added by defining the Toolbar as a collection of ItemModels .
Actions for this customized toolbar items are defined in the ToolbarClick event.
view
custom-toolbar-item.cs
@{
List<object> toolbarItems = new List<object>();

toolbarItems.Add( new{ text= "Expand All", tooltipText= "Expand All", prefixIcon= "
e-expand", id= "expandall"});
toolbarItems.Add( new{ text= "Collapse All", tooltipText= "Collapse All", prefixIco
n= "e-collapse", id= "collapseall"});
}
<ejs-grid id="Grid" dataSource="ViewBag.datasource" toolbarClick="toolbarClick" toolbar=
toolbarItems height="270">
<e-grid-columns>
</e-grid-columns>
</ejs-grid>
847
<script>
function toolbarClick(args){
if (args.item.id === 'expandall') {

this.groupModule.expandAll();
}
if (args.item.id === "collapseall") {
this.groupModule.collapseAll();
}
}
</script>

{
var orders = orderDetails.GetAllRecords();
return View();
}
The Toolbar has options to define both built-in and custom toolbar items.
If a toolbar item does not match the built-in items, it will be treated as a custom toolbar
item.
Enable/disable toolbar items

You can enable/disable toolbar items by using the enableItems method.
view
enable-disable.cs
<ejs-button id="disable" content="Disable" ></ejs-button>

<ejs-button id="enable" content="Enable"></ejs-button>
<ejs-grid id="Grid" dataSource="ViewBag.datasource" toolbarClick="toolbarClick" toolbar=
"@( new List<string>(){"Expand","Collapse"})" height="270">
<e-grid-columns>
848
</e-grid-columns>
<e-grid-groupSettings columns= "@(new string[] { "CustomerID"})"></e-grid-groupSe
ttings>
</ejs-grid>
<script>
document.getElementById("enable").addEventListener('click', () => {
var grid= document.getElementById("Grid").ej2_instances[0];

grid.toolbarModule.enableItems(['Grid_Collapse', 'Grid_Expand'], true);// e
nable toolbar items.
});
document.getElementById("disable").addEventListener('click', () => {

grid.toolbarModule.enableItems(['Grid_Collapse', 'Grid_Expand'], false);//
disable toolbar items.
});
function toolbarClick(args){
if (args.item.id === 'Grid_Collapse') { // grid_Collapse is component id + '_' + to

olbar item name.
this.groupModule.collapseAll();
}
if (args.item.id === 'Grid_Expand') {
this.groupModule.expandAll();
}
}
</script>

{
var orders = orderDetails.GetAllRecords();
return View();
}
849
PDF Export
PDF export allows exporting Grid data to PDF document. You need to use the PdfExport
method for exporting. To enable PDF export in the grid, set the AllowPdfExport as true.
view
pdf-export.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowPdfExport="true" toolbarClick="

toolbarClick" toolbar="@(new List<string>() {"PdfExport"})" allowPaging="true">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAl
ign="Right" width="120"></e-grid-column>
-column>
<e-grid-column field="OrderDate" headerText="Order Date" width="140" ></e-grid-
column>
</e-grid-columns>
</ejs-grid>
<script>
function toolbarClick(args) {
if (args.item.id === 'Grid_pdfexport') {
gridObj.pdfExport();
}
}
</script>

{
return View();
}
Multiple exporting
PDF export provides an option for exporting multiple grids to same file. In this exported
document, each grid will be exported to new page of document in same file.
view
850
multiple.cs
<ejs-grid id="FirstGrid" dataSource="ViewBag.datasource" allowPdfExport="true" toolba

rClick="toolbarClick" toolbar="@(new List<string>() {"PdfExport"})" allowPaging="true">
<e-grid-columns>
grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format
="C2" width="120"></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" width="140"></e-gr
id-column>
</e-grid-columns>
</ejs-grid>
<ejs-grid id="SecondGrid" dataSource="ViewBag.foreign" allowPdfExport="true" allowP

aging="true">
<e-grid-columns>
<e-grid-column field="EmployeeID" headerText="Employee ID" isPrimaryKey="tr
ue" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="FirstName" headerText="Name" width="140"></e-grid-col
umn>
<e-grid-column field="Title" headerText="Title" textAlign="Right" format="C
<e-grid-column field="BirthDate" headerText="Birth Date" width="140"></e-gr
id-column>
</e-grid-columns>
</ejs-grid>
<script>
var firstGrid = document.getElementById("FirstGrid").ej2_instances[0];
var secondGrid = document.getElementById("SecondGrid").ej2_instances[0];
if (args.item.id === 'FirstGrid_pdfexport') {
var firstGridPdfExport = firstGrid.pdfExport({}, true);
firstGridPdfExport.then((pdfData) => {
secondGrid.pdfExport({}, false, pdfData);
});
}
}
</script>

{
ViewBag.FirstGridData = OrderDetails.GetAllRecords();
851
ViewBag.SecondGridData = EmployeeDetails.GetAllRecords();
return View();
}
To customize PDF export

PDF export provides an option to customize mapping of grid to exported PDF document.
To add header and footer

You can customize text, page number, line, page size and changing orientation in header and
footer.
How to write a text in header/footer
You can add text either in Header or Footer of exported PDF document.
var exportProperties = {
header: {
fromTop: 0,
height: 130,
contents: [
{
type: 'Text',
value: "Northwind Traders",
position: { x: 0, y: 50 },
style: { textBrushColor: '#000000', fontSize: 13 }
},
]
}
How to draw a line in header/footer
you can add line either in Header or Footer of the exported PDF document.
Supported line styles:
dash
dot
dashdot
dashdotdot
solid
852
header: {
fromTop: 0,
height: 130,
contents: [
{
type: 'Line',
style: { penColor: '#000080', penSize: 2, dashStyle: 'Solid' },
points: { x1: 0, y1: 4, x2: 685, y2: 4 }
}
]
}
}
Add page number in header/footer
you can add page number either in Header or Footer of exported PDF document.
Supported page number types:
LowerLatin - a, b, c,
UpperLatin - A, B, C,
LowerRoman - i, ii, iii,
UpperRoman - I, II, III,
Number - 1,2,3.
header: {
fromTop: 0,
height: 130,
contents: [
{
type: 'PageNumber',
pageNumberType: 'Arabic',
format: 'Page {$current} of {$total}', //optional
position: { x: 0, y: 25 },
style: { textBrushColor: '#ffff80', fontSize: 15, hAlign: 'Center' }
}
]
}
}
Insert an image in header/footer
853
Image (Base64 string) can be added in the exported document in header/footer using the
exportProperties .
header: {
fromTop: 0,
height: 130,
contents: [
{
type: 'Image',
src: image,
position: { x: 435, y: 10 },
size: { height: 100, width: 250 },
}
]
}
}
The below code illustrates the pdf export customization.
view
header-footer.cs

<e-grid-columns>
-column>
column>
</e-grid-columns>
</ejs-grid>
<script>
if (args['item'].id === 'Grid_pdfexport') {
var pdfExportProperties = {
header: {
fromTop: 0,
height: 130,
contents: [
854
{
type: 'Text',
value: "Northwind Traders",
position: { x: 0, y: 50 },
style: { textBrushColor: '#000000', fontSize: 13 }
}
]
},
footer: {
fromBottom: 160,
height: 150,
contents: [
{
type: 'PageNumber',
pageNumberType: 'arabic',
format: 'Page {$current} of {$total}',
position: { x: 0, y: 25 },
style: { textBrushColor: '#ffff80', fontSize: 15 }
}
]
}
};
grid.pdfExport(pdfExportProperties);
}
}
</script>

{
return View();
}
How to change page orientation

Page orientation can be changed Landscape(Default Portrait) for the exported document using
the exportProperties .
view
orientation.cs

<e-grid-columns>
855
-column>
column>
</e-grid-columns>
</ejs-grid>
<script>
pageOrientation: 'Landscape',
};
grid.pdfExport(exportProperties);
}
}
</script>

{
return View();
}
How to change page size

Page size can be customized for the exported document using the exportProperties .
Supported page sizes are:
Letter
Note
Legal
A0
A1
A2
A3
A5
A6
A7
A8
856
A9
B0
B1
B2
B3
B4
B5
Archa
Archb
Archc
Archd
Arche
Flsa
HalfLetter
Letter11x17
Ledger
view
page-size.cs

<e-grid-columns>
-column>
column>
</e-grid-columns>
</ejs-grid>
<script>
pageSize: 'Letter'
};
grid.pdfExport(exportProperties);
}
}
</script>
857
{
return View();
}
Export current page

PDF export provides an option to export the current page into PDF. To export current page,
define the exportType to currentpage .
view
export-current.cs

<e-grid-columns>
-column>
column>
</e-grid-columns>
</ejs-grid>
<script>
exportType: 'CurrentPage'
};
gridObj.pdfExport(exportProperties);
}
}
</script>

{
858
return View();
}
Export hidden columns

PDF export provides an option to export hidden columns of Grid by defining the
includeHiddenColumn as true .
view
export-hidden.cs

<e-grid-columns>
-column>
<e-grid-column field="OrderDate" visible="false" headerText="Order Date" width=
"140" ></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
includeHiddenColumn: true
};
}
}
</script>

{
return View();
}
Theme
859
PDF export provides an option to include theme for exported PDF document.
To apply theme in exported PDF, define the theme in exportProperties .
view
theme.cs

<e-grid-columns>
-column>
<e-grid-column field="Freight" headerText="Freight" format="C2" textAlign="Righ
t" format="C2" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
theme: {
header: {
fontColor: '#64FA50', fontName: 'Calibri', fontSize: 17, bold:
true, borders: { color: '#64FA50', lineStyle: 'Thin' }
},
record: {
true
},
caption: {
true
}
}
};
}
}
</script>

{
860
return View();
}
By default, material theme is applied to exported PDF document.
Custom data source

PDF export provides an option to define datasource dynamically before exporting. To export data
dynamically, define the dataSource in exportProperties
view
custom-data.cs

<e-grid-columns>
-column>
</e-grid-columns>
</ejs-grid>
<script>
var data = [
{ OrderID: "100", CustomerID: "Vinet", Freight: "2.00", OrderDate: new
Date() },
{ OrderID: "101", CustomerID: "Hanar", Freight: "2.01", OrderDate: new
Date() },
{ OrderID: "102", CustomerID: "Mega", Freight: "4.48", OrderDate: new D
ate() },
{ OrderID: "103", CustomerID: "Sam", Freight: "19.23", OrderDate: new D
ate() }
];
var pdfExportProperties = {
dataSource: data
};
gridObj.pdfExport(pdfExportProperties);
861
}
}
</script>

{
return View();
}
862
Excel Export
The excel export allows exporting Grid data to Excel document. You need to use the
ExcelExport method for exporting. To enable Excel export in the grid, set the
AllowExcelExport as true.
To use excel export, You need to define the ExcelExport in inbuild toolbar and define the
toolbarClick event for exporting the Grid.
view
excel-export.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowExcelExport="true" toolbarClick

="toolbarClick" toolbar="@(new List<string>() {"ExcelExport" })" allowPaging="true">
<e-grid-columns>
grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" format="yMd" textA
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format
="C2" width="120"></e-grid-column>
<e-grid-column field="ShipCountry" visible="false" headerText="Ship Country"
<e-grid-column field="ShipCity" visible="false" headerText="Ship City" width
</e-grid-columns>
</ejs-grid>
</div>
<script>
if (args.item.id === 'Grid_excelexport') {
gridObj.excelExport();
}
}
</script>
863
{
return View();
}
Multiple Grid exporting

The excel export provides an option to export multiple grid data in the same excel file.
Same sheet
The excel export provides support to export multiple grids in same sheet. To export in same
sheet, define multipleExport.type as AppendToSheet in exportProperties . It have an option
to provide blank rows between grids. These blank rows count can be defined by using
the multipleExport.blankRows .
view
same-sheet.cs
<ejs-grid id="FirstGrid" dataSource="ViewBag.FirstGridData" allowExcelExport="true" too

lbarClick="toolbarClick" toolbar="@(new List<string>() {"ExcelExport"})" allowPaging="t
rue">
<e-grid-columns>
-column>
</e-grid-columns>
</ejs-grid>
<ejs-grid id="SecondGrid" dataSource="ViewBag.SecondGridData" allowExcelExport="true" a

llowPaging="true">
<e-grid-columns>
<e-grid-column field="FirstName" headerText="Name" width="140"></e-grid-column>
<e-grid-column field="Title" headerText="Title" textAlign="Right" format="C2" w

<e-grid-column field="BirthDate" headerText="Birth Date" format="yMd" width="14
864
</e-grid-columns>
</ejs-grid>
<script>
if(args.item.id === 'FirstGrid_excelexport'){
var appendExcelExportProperties = {
multipleExport: { type: 'AppendToSheet', blankRows: 2 }
};
var firstGridExport = firstGrid.excelExport(appendExcelExportProperties, tr

ue);
firstGridExport.then((fData) => {
secondGrid.excelExport(appendExcelExportProperties, false, fData);
});
}
}
</script>

{
return View();
}
By default, multipleExport.blankRows value is 5.
New Sheet
Excel exporting provides support to export multiple grids in new sheet. To export in new sheet,
define multipleExport.type as NewSheet in exportProperties .
view
new-sheet.cs
<ejs-grid id="FirstGrid" dataSource="ViewBag.FirstGridData" allowExcelExport="true" too

lbarClick="toolbarClick" toolbar="@(new List<string>() {"ExcelExport"})" allowPaging="t
rue">
<e-grid-columns>
865
-column>
</e-grid-columns>
</ejs-grid>
<ejs-grid id="SecondGrid" dataSource="ViewBag.SecondGridData" allowExcelExport="true" a

llowPaging="true">
<e-grid-columns>
<e-grid-column field="FirstName" headerText="Name" width="140"></e-grid-column>
<e-grid-column field="Title" headerText="Title" textAlign="Right" format="C2" w

<e-grid-column field="BirthDate" format="yMd" headerText="Birth Date" width="14
</e-grid-columns>
</ejs-grid>
<script>
if(args.item.id === 'FirstGrid_excelexport'){
var appendExcelExportProperties = {
multipleExport: { type: 'NewSheet' }
};
var firstGridExport = firstGrid.excelExport(appendExcelExportProperties, tr

ue);
firstGridExport.then((fData) => {
secondGrid.excelExport(appendExcelExportProperties, false, fData);
});
}
}
</script>

{
return View();
}
866
To customize excel export
The excel export provides an option to customize mapping of the grid to excel document.
Export current page

The excel export provides an option to export the current page into excel. To export current page,
define exportType to currentpage .
view
export-current.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowExcelExport="true" toolbarClick=

"toolbarClick" toolbar="@(new List<string>() {"ExcelExport"})" allowPaging="true">
<e-grid-columns>
-column>
</e-grid-columns>
</ejs-grid>
<script>
var excelExportProperties = {
exportType: 'CurrentPage'
};
gridObj.excelExport(excelExportProperties);
}
}
</script>

{
return View();
}
867
Export hidden columns
The excel export provides an option to export hidden columns of grid by defining
includeHiddenColumn as true .
view
export-hidden.cs

<e-grid-columns>
-column>
t" visible="false" format="C2" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
includeHiddenColumn: true
};
}
}
</script>

{
return View();
}
Theme
The excel export provides an option to include theme for exported excel document.
868
To apply theme in exported Excel, define the theme in exportProperties .
view
theme.cs

<e-grid-columns>
-column>
column>
</e-grid-columns>
</ejs-grid>
<script>
theme:{
header: { fontName: 'Segoe UI', fontColor: '#666666' },
record: { fontName: 'Segoe UI', fontColor: '#666666' },
caption: { fontName: 'Segoe UI', fontColor: '#666666' }
}
};
}
}
</script>

{
return View();
}
By default, material theme is applied to exported excel document.
To add header and footer
869
The excel export provides an option to include header and footer content for exported excel
document.
view
header-footer.cs

<e-grid-columns>
-column>
</e-grid-columns>
</ejs-grid>
<script>
header: {
headerRows: 7,
rows: [
{ cells: [{ colSpan: 4, value: "Northwind Traders", style: { fo
ntColor: '#C67878', fontSize: 20, hAlign: 'Center', bold: true, } }] },
{ cells: [{ colSpan: 4, value: "2501 Aerial Center Parkway", st
yle: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, } }] },
{ cells: [{ colSpan: 4, value: "Suite 200 Morrisville, NC 27560
USA", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, } }]
},
{ cells: [{ colSpan: 4, value: "Tel +1 888.936.8638 Fax +1 919.
573.0306", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, }
}] },
{ cells: [{ colSpan: 4, hyperlink: { target: 'https://www.north
wind.com/', displayText: 'www.northwind.com' }, style: { hAlign: 'Center' } }] },
{ cells: [{ colSpan: 4, hyperlink: { target: 'mailto:support@no
rthwind.com' }, style: { hAlign: 'Center' } }] },
]
},
footer: {
footerRows: 4,
rows: [
{ cells: [{ colSpan: 4, value: "Thank you for your business!",
870
style: { hAlign: 'Center', bold: true } }] },
{ cells: [{ colSpan: 4, value: "!Visit Again!", style: { hAlign
: 'Center', bold: true } }] }
]
},
};
}
}
</script>

{
return View();
}
Custom data source

The excel export provides an option to define datasource dynamically before exporting. To export
data dynamically, define the dataSource in exportProperties .
view
custom-data.cs

<e-grid-columns>
-column>
</e-grid-columns>
</ejs-grid>
<script>
var data = [
871
{ OrderID: "100", CustomerID: "Vinet", Freight: "2.00", OrderDate: new
Date() },
{ OrderID: "101", CustomerID: "Hanar", Freight: "2.01", OrderDate: new
Date() },
{ OrderID: "102", CustomerID: "Mega", Freight: "4.48", OrderDate: new D
ate() },
{ OrderID: "103", CustomerID: "Sam", Freight: "19.23", OrderDate: new D
ate() }
];
dataSource: data
};
}
}
</script>

{
return View();
}
872
Globalization
Localization
The Localization library allows you to localize default text content of the Grid. The grid
component has static text on some features (like group drop area text, pager information text,
etc.) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the
[ Locale ] value and translation object.
The following list of properties and its values are used in the grid.
Locale keywords Text
EmptyRecord No records to display.
True true
False false
InvalidFilterMessage Invalid filter data.
GroupDropArea Drag a column header here to group its column.
UnGroup Click here to ungroup.
GroupDisable Grouping is disabled for this column.
FilterbarTitle \s filter bar cell.
DataSource must not be empty at initial load as columns are

EmptyDataSourceError
generated from the dataSource in AutoGenerate Column Grid.
To load translation object in an application, use load function of the L10n class.
The following example demonstrates the Grid in Deutsch culture.
view
localization.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowPaging="true" locale="de-D

E" allowGrouping="true">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" wi
e-grid-column>
873
-column>
e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
ej.base.L10n.load({
'de-DE': {
'grid': {
'EmptyRecord': 'Keine Aufzeichnungen angezeigt',
'GroupDropArea': 'Ziehen Sie einen Spaltenkopf hier, um die Gruppe
ihre Spalte',
'UnGroup': 'Klicken Sie hier, um die Gruppierung aufheben',
'EmptyDataSourceError': 'DataSource darf bei der Erstauslastung nic
ht leer sein, da Spalten aus der dataSource im AutoGenerate Spaltenraster',
'Item': 'Artikel',
'Items': 'Artikel'
},
'pager': {
'currentPageInfo': '{0} von {1} Seiten',
'totalItemsInfo': '({0} Beiträge)',
'firstPageTooltip': 'Zur ersten Seite',
'lastPageTooltip': 'Zur letzten Seite',
'nextPageTooltip': 'Zur nächsten Seite',
'previousPageTooltip': 'Zurück zur letzten Seit',
'nextPagerTooltip': 'Zum nächsten Pager',
'previousPagerTooltip': 'Zum vorherigen Pager'
}
}
});
</script>

{
return View();
}
The Internationalization library is used to globalize number, date, and time values in grid
component using format strings in the Format .
874
view
internationalization.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowPaging="true" locale="de-D

E" allowGrouping="true">
<e-grid-columns>
e-grid-column>
<e-grid-column field="Freight" headerText="Freight" format="C2" width="120">
</e-grid-column>
-column>
e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
ej.base.L10n.load({
'de-DE': {
'grid': {
ihre Spalte',
'Item': 'Artikel',
'Items': 'Artikel'
},
'pager': {
}
}
});
</script>
875
{
return View();
}
In the above sample, Freight column is formatted by NumberFormatOptions .

By default, [ locale ] value is en-US . If you want to change the en-US culture to a
different culture, you have to change the [ locale ] accordingly.
Right to left (RTL)

RTL provides an option to switch the text direction and layout of the Grid component from right to
left. It improves the user experiences and accessibility for users who use right-to-left languages
(Arabic, Farsi, Urdu, etc.). To enable RTL Grid, set the [ EnableRtl ] to true.
view
righttoleft.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowPaging="true" enableRtl="t

rue" locale="de-DE" allowGrouping="true">
<e-grid-columns>
e-grid-column>
-column>
e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
ej.base.L10n.load({
'de-DE': {
'grid': {
ihre Spalte',
'Item': 'Artikel',
876
'Items': 'Artikel'
},
'pager': {
}
}
});
</script>

{
return View();
}
See Also
Localization
877
Accessibility
Accessibility is achieved in the Grid component through WAI-ARIA standard and keyboard
navigations. The Grid features can be effectively accessed through assistive technologies such
as screen readers.
WAI-ARIA
WAI-ARIA (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to
increase the accessibility of web pages, dynamic content, and user interface components
developed with Ajax, HTML, JavaScript, and related technologies. ARIA provides additional
semantics to describe the role, state, and functionality of web components.
The following ARIA attributes are used in the Grid:
grid (role)
row (role)
gridcell (role)
aria-selected (attribute)
aria-expanded (attribute)
aria-sort (attribute)
aria-busy (attribute)
aria-invalid (attribute)
aria-grabbed (attribute)
aria-owns (attribute)
aria-label (attribute)
Keyboard navigation
Grid functionalities can be interactive with keyboard shortcuts.
The following keyboard shortcuts are supported by Grid.
Interaction
Description
Keys
PageDown Goes to the next page.
PageUp Goes to the previous page.
Ctrl + Alt
+PageDown Goes to the last page.
Ctrl + Alt
+ PageUp Goes to the first page.
878
Alt + Goes to the next page.
PageDown
Alt +
Goes to the previous page.
PageUp
Home Goes to the first cell.
End Goes to the last cell.
Ctrl +
Goes to the first row.
Home
Ctrl + End Goes to the last row.

DownArrow Moves the cell focus downward.
UpArrow Moves the cell focus upward.

LeftArrow Moves the cell focus left side.
RightArrow Moves the cell focus right side.
Shift +
Extends the row/cell selection downwards.
DownArrow
Shift +
UpArrow Extends the row/cell selection upwards.
Shift +
LeftArrow Extends the cell selection to the left side.
Shift +
RightArrow Extends the cell selection to the right side.
Moves the row/cell selection downward. If current cell is in edit state, then
completes the editing. If the current cell is a header then performs sorting.
Enter If the current cell is an expand/collapse cell then expands/collapses the
current group/detailrow/childgrid. If the current cell is a detailrow, child grid
or command column then the focus will be moved to the focusable
element inside the cell.
Shift + Moves the row/cell selection upward. If the current cell is a header then
Enter clears sorting for the selected column.
Ctrl +
Enter If the current cell is a header then performs multi-sorting.
Tab Moves the cell selection right side.
Shift +
Moves the cell selection left side.
Tab
Esc Deselects all the rows/cells.

Ctrl + A Selects all the rows/cells.
UpArrow Moves up a row/cell selection.
DownArrow Moves down a row/cell selection.

RightArrow Moves to the right cell selection.
879
LeftArrow Moves to the left cell selection.
Alt +
Expands the selected group.
DownArrow
Ctrl +
Expands all the visible groups.
DownArrow
Alt +
UpArrow Collapses the selected group.
Ctrl +
UpArrow Collapses all the visible groups.
Ctrl + P Prints the Grid.
Ctrl + C Copy selected rows or cells data into clipboard
Ctrl +
Shift + H Copy selected rows or cells data with header into clipboard
880
Clipboard
The clipboard provides an option to copy selected rows or cells data into the clipboard.
The following list of keyboard shortcuts is supported in the Grid to copy selected rows or cells
data into the clipboard.
Interaction keys Description
Ctrl + C Copy selected rows or cells data into clipboard.
Ctrl + Shift + H Copy selected rows or cells data with header into clipboard.
view
local.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowSelection="true" >

<e-grid-columns>
-column>
umn>
umn>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Copy to clipboard by external buttons

To copy selected rows or cells data into the clipboard with help of toolbar buttons, you need to
define the toolbarClick event and invoke the copy method.
view
local.cs
881
<ejs-button id="copy" content="Copy"></ejs-button>
<ejs-button id="copyHeader" content="Copy Header"></ejs-button>
<e-grid-selectionsettings type="Multiple" ></e-grid-selectionsettings>
<e-grid-columns>
grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" format='yMd' width=
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" width=
-column>
</e-grid-columns>
</ejs-grid>
<script>
document.getElementById("copy").addEventListener("click", function () {
grid.copy();
})
document.getElementById("copyHeader").addEventListener("click", function () {
grid.copy(true);
})
</script>

{
return View();
}
882
Context menu
The Grid has options to show the context menu when right clicked on it. To enable this feature,
you need to define either default or custom item in the ContextMenuItems .
The default items are in the following table.
Items Description
AutoFit Auto fit the current column.
AutoFitAll Auto fit all columns.
Edit Edit the current record.
Delete Delete the current record.
Save Save the edited record.
Cancel Cancel the edited state.
Copy Copy the selected records.
PdfExport Export the grid data as Pdf document.
ExcelExport Export the grid data as Excel document.
CsvExport Export the grid data as CSV document.
Group Group the current column.
Ungroup Ungroup the current column.

SortAscending Sort the current column in ascending order.
SortDescending Sort the current column in descending order.

FirstPage Go to the first page.
PrevPage Go to the previous page.

LastPage Go to the last page.
NextPage Go to the next page.
view
contextmenu.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowSorting="true" allowExcelExpo

rt="true" allowPdfExport="true" contextMenuItems="@(new List<object>() { "AutoFit", "A
utoFitAll", "SortAscending", "SortDescending","Copy", "Edit", "Delete", "Save", "Cancel
","PdfExport", "ExcelExport", "CsvExport", "FirstPage", "PrevPage","LastPage", "NextPage
"})" allowPaging="true">
883
<e-grid-columns>
<e-grid-column field="CustomerID" headerText="Customer Name" width="150" ></e-
grid-column>
<e-grid-column field="Freight" headerText="Freight" editType="numericedit" text
Align="Right" format="C2" width="120"></e-grid-column>
umn>
<e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdown
edit" width="150"></e-grid-column>
umn>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Custom context menu items

The custom context menu items can be added by defining the ContextMenuItems as a collection
of ContextMenuItemModel . Actions for this customized items can be defined in the
ContextMenuClick event.
view
customcontextmenu.cs
@{
List<object> ContextMenuitems = new List<object>();

ContextMenuitems.Add(new { text = "Copy with headers", target= ".e-content", id
= "copywithheader" });
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource contextMenuItems="contextMenuitems"

contextMenuClick="contextMenuClick" >
<e-grid-columns>
884
lign="Left" width="125"></e-grid-column>
<e-grid-column field="EmployeeID" headerText="Employee ID" width="125" textAl
ign="Right" ></e-grid-column>
lumn>
<e-grid-column field="ShipCity" headerText="Ship City" width="170"></e-grid-
column>
<e-grid-column field="CustomerID" headerText="Customer ID" textAlign="Right"
</e-grid-columns>
</ejs-grid>
<script>
function contextMenuClick(args) {
if (args.item.id === 'copywithheader') {
this.copy(true);
}
}
</script>

{
return View();
}
You can hide or show an item in context menu for specific area inside of grid by defining the
Target property.
885
How To
Perform CRUD operation using anti-forgery token

Anti-forgery token is used between the client and server to prevent cross-site request forgery
(CSRF) attack. For more information on preventing CSRF attack, please refer to the link.
While performing grid save operation, you can send anti-forgery token along with the save
request using the below custom adaptor.
This custom adaptor will read the anti-forgery token from the hidden element and send it along
with the request. Also content type is set to application/x-www-form-urlencoded; charset=UTF-8
since the ValidateAntiForgeryToken will look for the token in the form encoded data.
<script>
window.customAdaptor = new ej.data.UrlAdaptor();
customAdaptor = ej.base.extend(customAdaptor, {
processResponse: function (data, ds, query, xhr, request, changes) {

request.data = JSON.stringify(data);
return ej.data.UrlAdaptor.prototype.processResponse.call(this,data, ds, que
ry, xhr, request, changes);
},
insert: function (dm, data, tableName) {
return {
url: dm.dataSource.insertUrl || dm.dataSource.crudUrl || dm.dataSource.
url,
data: $.param({
//Added the anti-forgery token.
__RequestVerificationToken: document.getElementsByName("__RequestVe
rificationToken")[0].value,
value: data,
table: tableName,
action: 'insert'
}),
contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
}
},
update: function (dm, keyField, value, tableName) {
return {
url: dm.dataSource.updateUrl || dm.dataSource.crudUrl || dm.dataSource.
url,
data: $.param({
886
//Added the anti-forgery token.
__RequestVerificationToken: document.getElementsByName("__RequestVe
rificationToken")[0].value,
value: value,
table: tableName,
action: 'insert'
}),
contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
};
},
});
</script>
Now assign the custom adaptor to the grid as follows.
<script>
function load(args) {
this.dataSource.adaptor = customAdaptor;
}
</script>
view
anti-forgery-token.cs
<ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "

Update" })" load="load">
<e-grid-columns>
<e-grid-column field="EmployeeID" headerText="EmployeeID ID" type="number" width
</e-grid-columns>
</ejs-grid>
public class HomeController : Controller

{
static List<OrderData> vData = new List<OrderData>();
public ActionResult Index()
887
{
return View();
}
public ActionResult DataSource(Data Dm)

{
var DataSource = getData().ToList();
int count = DataSource.Count();
return Json(new { result = DataSource.Skip(Dm.skip).Take(Dm.take), count = coun
t });
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Insert(OrderData value,string token)
{
getData().Insert(0, value);
return Json(getData());
}
[HttpPost]
public ActionResult Update(OrderData value)
{
OrderData ord = getData().Where(r => r.OrderID == value.OrderID).FirstOrDefault

();
{
ord.OrderID = value.OrderID;
ord.CustomerID = value.CustomerID;
ord.Freight = value.Freight;
ord.EmployeeID = value.EmployeeID;
ord.ShipCity = value.ShipCity;
}
return Json(ord);
}
[HttpPost]
public ActionResult Delete(int key)
{
var itemToRemove = getData().Where(ord => ord.OrderID == key).SingleOrDefault()

;
if (itemToRemove != null)
getData().Remove(itemToRemove);
888
return Json(getData());
}
}
You can find the full sample at our GitHub repository.
Change column header text dynamically

You can change the column HeaderText dynamically through an external button.
Follow the given steps to change the header text dynamically:
Step 1:
Get the column object corresponding to the field name by using the getColumnByField method.
Then, change the header text value.
var column = grid.getColumnByField("ShipCity"); // Get column object.

column.headerText = 'Changed Text';
Step 2:
To reflect the changes in the grid header, invoke the refreshHeader method.
grid.refreshHeader();
view
column-header-text.cs
<ejs-button id="change-text" content="Change Header Text" isPrimary="true"></ejs-button>

<e-grid-columns>
d-column>
umn>
umn>
</e-grid-columns>
</ejs-grid>
<script>
889
document.getElementById('change-text').addEventListener('click', () => { // changin
g the header text for ShipCity column.
var column = grid.getColumnByField("ShipCity"); // get the JSON object of the c
olumn corresponding to the field name.
column.headerText = "Changed Text"; // assign a new header text to the column.
grid.refreshHeader();
});
</script>

{
return View();
}
Customize column styles

You can customise the appearance of the header and content of a particular column using the
customAttributes property.
To customize the grid column, follow the given steps:
Step 1:
Create a CSS class with custom style to override the default style for rowcell and headercell.
.e-grid .e-rowcell.customcss{
background-color: #ecedee;
color: 'red';
font-family: 'Bell MT';
font-size: 20px;
}
.e-grid .e-headercell.customcss{
background-color: #2382c3;
color: white;
font-size: 20px;
}
Step 2:
Add the custom CSS class to the specified column by using the customAttributes property.
890
<e-grid-column field="Freight" headerText="Freight" width="150" customAttributes=new {
class='customcss' }></e-grid-column>
view
custom-column-style.cs
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(co
l =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.G
rids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.E
J2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Sync
fusion.EJ2.Grids.TextAlign.Right).CustomAttributes(new { @class="customcss" }).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).Render()
<style>
.e-grid .e-rowcell.customcss{
background-color: #ecedee;
color: 'red';
font-size: 20px;
}
.e-grid .e-headercell.customcss{
background-color: #2382c3;
color: white;
font-size: 20px;
}
</style>

{
return View();
}
Display custom ToolTip for columns in Grid
891
To display custom ToolTip ( EJ2 Tooltip ), use the QueryCellInfo event.
Render the ToolTip component for the grid cells by using the following code in the
QueryCellInfo event.
function tooltip (args) {

var tooltip = new ej.popups.Tooltip({
content: args.data[args.column.field].toString();
}, args.cell);
}
view
custom-tooltip.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource queryCellInfo="tooltip">

<e-grid-columns>
d-column>
umn>
umn>
</e-grid-columns>
</ejs-grid>
<script>
function tooltip(args) { // event triggers on every cell render.
let tooltip = new ej.popups.Tooltip({
content: args.data[args.column.field].toString() // add Essential JS2 tooltip f
or every cell.
}, args.cell);
}
</script>

{
return View();
}
Render other components in a column
892
You can render any component in a grid column using the Template property.
To render other components in the grid, ensure the following steps:
Step 1:
Initialize the column template for your custom component.
template:`<div>
<select class="e-control e-dropdownlist">
<option value="1" selected="selected">Order Placed</option>
<option value="2">Processing</option>
<option value="3">Delivered</option>
</select>
</div>`
Step 2:
Using the QueryCellInfo event, you can render the DropDown component with the following
code.
function dropdown(args) {
let ele=args.cell.querySelector('select');
let drop = new ej.dropdowns.DropDownList({popupHeight: 150, popupWidth: 150});
drop.appendTo(ele);
}
view
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource queryCellInfo="dropdown">

<e-grid-columns>
<e-grid-column headerText="Order Status" width="200" template="#dropdown"></e-g
rid-column>
d-column>
umn>
umn>
</e-grid-columns>
</ejs-grid>
<div id='dropdown'>
<select class="e-control e-dropdownlist">
<option value="1" selected="selected">Order Placed</option>
893
<option value="2">Processing</option>
<option value="3">Delivered</option>
</select>
</div>
<script>
function dropdown(args) {
var ele = args.cell.querySelector('select');
var drop = new ej.dropdowns.DropDownList({ popupHeight: 150, popupWidth: 150 })
;
drop.appendTo(ele);
}
</script>
Change the orientation of the header text

You can change the orientation of the header text by using the CustomAttributes property.
Ensure the following steps:
Step 1:
Create a CSS class with orientation style for the grid header cell.
.orientationcss .e-headercelldiv {
}
Step 2:
Add the custom CSS class to a particular column by using the CustomAttributes property.
<e-grid-column field="ShipCity" headerText="Ship City" width="150" customAttributes

=new { class='orientationcss' }"></e-grid-column>
Step 3:
Resize the header cell height by using the following code.
function setHeaderHeight(args) {
var textWidth = document.querySelector(".orientationcss > div").scrollWidth;//Obtai
n the width of the headerText content.
var headerCell = document.querySelectorAll(".e-headercell");
for(var i = 0; i < headerCell.length; i++) {
headerCell.item(i).style.height = textWidth + 'px'; //Assign the obtained textW
idth as the height of the headerCell.
}
894
}
view
orientation.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource created="setHeaderHeight">

<e-grid-columns>
d-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="150" customAttrib
utes="@(new { class='orientationcss' })"></e-grid-column>
umn>
</e-grid-columns>
</ejs-grid>
<style>
.orientationcss .e-headercelldiv {
}
</style>
<script>
function setHeaderHeight(args) {
var textWidth = document.querySelector(".orientationcss > div").scrollWidth; // obt
ain the width of the headerText content.
var headerCell = document.querySelectorAll(".e-headercell");
for (let i: number = 0; i < headerCell.length; i++) {
headerCell.item(i).style.height = textWidth + 'px'; // assign the obtained text
Width as the height of the headerCell.
}
}
</script>

{
return View();
}
Refresh the data source
895
You can add/delete the data source records through an external button. To reflect the data
source changes in the grid, invoke the refresh method.
To refresh the data source:
Step 1:
Add/delete the data source record by using the following code.
grid.dataSource.unshift(data); // add a new record.
grid.dataSource.splice(selectedRow, 1); // delete a record.
Step 2:
Refresh the grid after the data source change by using the refresh method.
grid.refresh(); // refresh the Grid.
view
refresh-datasource.cs
<ejs-button id="add" content="Add" isPrimary="true"></ejs-button>

<ejs-button id="delete" content="Delete" isPrimary="true"></ejs-button>
<e-grid-columns>
d-column>
umn>
umn>
</e-grid-columns>
</ejs-grid>
<script>
document.getElementById('add').onclick = function() {
var data = { OrderID: 10247, CustomerID: "ASDFG", Freight: 40.4, OrderDate: new Date
(8367642e5) };
grid.dataSource.unshift(data); // add new record.
};
document.getElementById('delete').onclick = function() {
896
if (grid.getSelectedRowIndexes().length) {
let selectedRow: number = grid.getSelectedRowIndexes()[0];
grid.dataSource.splice(selectedRow, 1); // delete the selected record.
} else {
alert("No records selected for delete operation");
}
};
</script>

{
return View();
}
Editing with template column

You can edit the template column value by defining the Field for that particular column.
In the below demo, the ShipCountry column is rendered with the template.
view
edit-temp.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource toolbar="@(new List<string>() { "Add

", "Edit", "Delete", "Cancel", "Update" })">
<e-grid-columns>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="150" templa
te='#template' editType='dropdownedit'></e-grid-column>
</e-grid-columns>
</ejs-grid>
897
<a href="#">${ShipCountry}</a>
</script>

{
return View();
}
Customize dialog when editing

In the ActionComplete event, you can customize the dialog component for editing.
In the below demo, dialog header content is customized using the ActionComplete event.
view
customize-filter-menu.cs

<e-grid-columns>
d-column>
umn>
umn>
</e-grid-columns>
</ejs-grid>

{
return View();
}
Access Editor components

You can access the component instance from the component element using the ej2_instances
property.
898
In the below demo, you can access the Editor component instance while adding or editing
actions on the ActionComplete event.
view
access-editor.cs
<ejs-grid id="Grid" dataSource=@ViewBag.DataSource toolbar="@(new List<string>() { "Add

", "Edit", "Delete", "Cancel", "Update" })" actionComplate="access">
<e-grid-columns>
2" editType='numericedit' width="120" ></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="150" editTy
pe='dropdownedit'></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function access(args){
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
var tr = args.row;
var numericTextBox = tr.querySelector('.e-numerictextbox'); // numeric TextBox
component element
if (numericTextBox) {
console.log('NumericTextBox instance: ', numericTextBox.ej2_instances[0]);
// numeric TextBox instance
}
var dropDownList = tr.querySelector('.e-dropdownlist'); // dropDownList compone
nt element
if (dropDownList) {
console.log('DropDownList instance: ', dropDownList.ej2_instances[0]); // d
ropDownList instance
}
}
</script>

{
899
return View();
}
Customizing filter menu operators list

You can customize the default filter operator list by defining the FilterSettings.Operators
property. The available options are:
stringOperator - defines customized string operator list.

numberOperator - defines customized number operator list.
dateOperator - defines customized date operator list.
booleanOperator - defines customized boolean operator list.
In the following sample, we have customized string filter operators.
view
customize-filter-menu.cs

<e-grid-columns>
d-column>
umn>
umn>
</e-grid-columns>
</ejs-grid>

{
return View();
}
900
Overview
Key Features
901
Prerequisites
on the machine.
Visual Studio 2017

DotNet Core 2.0

ASP.NET Core
2017.
902
Assembly Reference.

Step 3: Open the _ViewImports.cshtml to import Syncfusion.EJ2 package.
903
_Layout.cshtml.


Step 5: Adding Script Manager in layout page _Layout.cshtml.
folder, to initialize the heatmap.
@using Syncfusion.EJ2.HeatMap;
<ejs-heatmap id="heatmap">
</ejs-heatmap>
Populate Heatmap with data

This section explains how to populate the below two-dimensional array data to the heatmap.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];
904
}
<ejs-heatmap id='container' dataSource="window.heatmapData">

</ejs-heatmap>
Enable Axis Labels

You can add axis labels to the Heatmap and can format those labels using the xAxis and
yAxis properties. Axis labels provides additional information about the data points populated in
the Heatmap.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];
var xAxisLabel = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "M
ichael", "Robert",
"Laura", "Anne", "Paul", "Karin", "Mario" };
var yAxisLabel = new string[] { "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat" };
}

<e-heatmap-xaxis labels="xAxisLabel">
</e-heatmap-xaxis>
<e-heatmap-yaxis labels="yAxisLabel">
</e-heatmap-yaxis>
</ejs-heatmap>
Add Title
905
You can add a title using titleSettings property to the heatmap to provide quick information to
the user about the data populated in the heatmap.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];
ichael", "Robert",
var textStyle = new { size = "15px", fontWeight = "500", fontStyle = "Normal" };

}

<e-heatmap-titlesettings text="Sales Revenue per Employee (in 1000 US$)" textStyle="t
extStyle">
</e-heatmap-titlesettings>
</e-heatmap-xaxis>
</e-heatmap-yaxis>
</ejs-heatmap>
Enable Legend
You can use legend for the heatmap by setting the visible property to true in
legendSettings object and by injecting the Legend module using HeatMap.Inject(Legend)
method.
906
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];
ichael", "Robert",

}

extStyle">
</e-heatmap-xaxis>
</e-heatmap-yaxis>
<e-heatmap-legendsettings visible="true" position="Right" showLabel="true" height="1
50">
</e-heatmap-legendsettings>
</ejs-heatmap>
Add Data Label

You can add data labels to improve the readability of the heatmap. This can be achieved by
setting the showLabel property to true in the cellSettings object.
907
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];
ichael", "Robert",

}

extStyle">
</e-heatmap-xaxis>
</e-heatmap-yaxis>
<e-heatmap-cellsettings showLabel="true"></e-heatmap-cellsettings>
50">
</ejs-heatmap>
Add Custom Cell Palette

The default palette settings of the Heatmap cells can be customized by using the
paletteSettings property. Using the palette property in paletteSettings object, you can
change the color set for the cells and with type property you can change the color mode of the
cells either to fixed or to gradient mode.
908
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];
ichael", "Robert",

}

extStyle">
</e-heatmap-xaxis>
</e-heatmap-yaxis>
<e-heatmap-palettesettings type="Gradient">
<e-palettes>
<e-palette value="0" color="#C06C84"></e-palette>
<e-palette value="50" color="#6C5B7B"></e-palette>
<e-palette value="100" color="#355C7D"></e-palette>
</e-palettes>
</e-heatmap-palettesettings>
50">
</ejs-heatmap>
909
Enable Tooltip
The tooltip is useful when you cannot display information by using the data labels due to space
constraints. You can enable tooltip by setting the showTooltip property as true and by injecting
Tooltip module using HeatMap.Inject(Tooltip) method.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];
ichael", "Robert",

}
<ejs-heatmap id='container' dataSource="window.heatmapData" showTooltip="true">

extStyle">
</e-heatmap-xaxis>
</e-heatmap-yaxis>
<e-palettes>
<e-palette value="0" color="#C06C84"></e-palette>
<e-palette value="50" color="#6C5B7B"></e-palette>
<e-palette value="100" color="#355C7D"></e-palette>
</e-palettes>
910
50">
</ejs-heatmap>
911
Working with data
Heatmap can visualize JSON data and two-dimensional array data. Using the data adaptor
support, data can be bound to the Heatmap.
Data Adaptor
Heat map supports the following types of data binding with the adaptor support.
Array
Table Binding
Cell Binding
JSON data
Table Binding
Cell Binding
Array - table binding

This data type is a collection of one dimensional array objects, where the each inner array
contains data points for a x-axis data label. This is the default data binding type for Heatmap and
you can also directly bind the array object to dataSource property.
@{
var heatmapData = [
{9.5, 2.2, 4.2, 8.2, -0.5, 3.2, 5.4, 7.4, 6.2, 1.4 },
{4.3, 8.9, 10.8, 6.5, 5.1, 6.2, 7.6, 7.5, 6.1, 7.6},
{3.9, 2.7, 2.5, 3.7, 2.6, 5.1, 5.8, 2.9, 4.5, 5.1},
{2.4, -3.7, 4.1, 6.0, 5.0, 2.4, 3.3, 4.6, 4.3, 2.7},
{2.0, 7.0, -4.1, 8.9, 2.7, 5.9, 5.6, 1.9, -1.7, 2.9},
{5.4, 1.1, 6.9, 4.5, 2.9, 3.4, 1.5, -2.8, -4.6, 1.2},
{-1.3, 3.9, 3.5, 6.6, 5.2, 7.7, 1.4, -3.6, 6.6, 4.3},
{-1.6, 2.3, 2.9, -2.5, 1.3, 4.9, 10.1, 3.2, 4.8, 2.0},
{10.8, -1.6, 4.0, 6.0, 7.7, 2.6, 5.6, -2.5, 3.8, -1.9},
{6.2, 9.8, -1.5, 2.0, -1.5, 4.3, 6.7, 3.8, -1.2, 2.4},
{1.2, 10.9, 4.0, -1.4, 2.2, 1.6, -2.6, 2.3, 1.7, 2.4},
{5.1, -2.4, 8.2, -1.1, 3.5, 6.0, -1.3, 7.2, 9.0, 4.2}];
var textStyle = new { size = "15px", fontWeight = "500", fontStyle = "Normal" }

;
var xAxisLabel = new string[] { "China", "India", "Australia", "Mexico", "Canad
a", "Brazil",
912
"USA", "UK", "Germany", "Russia", "France", "Japan" };
var yAxisLabel = new string[] { "2008", "2009", "2010", "2011", "2012", "2013",
"2014", "2015", "2016", "2017" };
}
<ejs-heatmap id='container' dataSource="window.heatmapData" tooltipRender="window.ontoo

ltipRender">
<e-heatmap-titlesettings text="GDP Growth Rate for Major Economies (in Percentage)"
textStyle="textStyle">
<e-heatmap-xaxis labels="xAxisLabel" labelRotation="45" labelIntersectAction="None">
</e-heatmap-xaxis>
<e-heatmap-yaxis labels="yAxisLabel"></e-heatmap-yaxis>
<e-heatmap-palettesettings>
<e-palettes>
<e-palette value=-1 color="#F0D6AD"></e-palette>
<e-palette value=0 color="#9da49a"></e-palette>
<e-palette value=3.5 color="#d7c7a7"></e-palette>
<e-palette value=6.0 color="#6e888f"></e-palette>
<e-palette value=7.5 color="#466f86"></e-palette>
<e-palette value=10 color="#19547B"></e-palette>
</e-palettes>
<e-heatmap-legendsettings visible="false"></e-heatmap-legendsettings>
</ejs-heatmap>
<script>
window.ontooltipRender = function (args) {
args.content = [args.yLabel + ' | ' + args.xLabel + ' : ' + args.value + '
%'];
}
</script>
Array - cell binding

This data type is a collection of array objects which contains information of the row index, column
index and the data value for each cell. You can bind this data to Heatmap by using data
property in dataSource and also by setting adaptorType property as Cell .
@{
var heatmapData = {
data:[
[0, 0, 10.75], [0, 1, 14.5], [0, 2, 25.5], [0, 3, 39.5], [0, 4, 59.75], [0, 5,
913
35.50],
[0, 6, 75.5],
[1, 0, 20.75], [1, 1, 35.5], [1, 2, 29.5], [1, 3, 75.5], [1, 4, 80], [1, 5, 65]
, [1, 6, 85],
[2, 0, 6], [2, 1, 18.5], [2, 2, 30.05], [2, 3, 35.5], [2, 4, 40.75], [2, 5, 50.
75], [2, 6, 65],
[3, 0, 30.5], [3, 1, 20.5], [3, 2, 45.30], [3, 3, 50], [3, 4, 55], [3, 5, 85.80
], [3, 6, 87.5],
[4, 0, 10.5], [4, 1, 20.75], [4, 2, 35.5], [4, 3, 35.5], [4, 4, 45.5], [4, 5, 6
5.], [4, 6, 75.5],
[5, 0, 45.5], [5, 1, 20.75], [5, 2, 45.5], [5, 3, 50.75], [5, 4, 79.30], [5, 5,
84.20], [5, 6, 87.36],
[6, 0, 26.82], [6, 1, 70], [6, 2, 75], [6, 3, 79.5], [6, 4, 88.5], [6, 5, 89.5]
, [6, 6, 91.75],
[7, 0, 15.75], [7, 1, 20.75], [7, 2, 25.5], [7, 3, 42.35], [7, 4, 45.15], [7, 5
, 76.5], [7, 6, 80.5],
[8, 0, 1.98], [8, 1, 15.23], [8, 2, 43], [8, 3, 49], [8, 4, 63.80], [8, 5, 67.9
7], [8, 6, 70.52],
[9, 0, 14.31], [9, 1, 42.87], [9, 2, 77.28], [9, 3, 77.82], [9, 4, 81.44], [9,
5, 81.92], [9, 6, 83.75],
[10, 0, 25.5], [10, 1, 35.5], [10, 2, 40.5], [10, 3, 45.05], [10, 4, 50.5], [10
, 5, 75.5], [10, 6, 90.58]],
isJsonData: false,
adaptorType: 'Cell'
};

;
var xAxisLabel = new string[] { "China", "Australia", "Mexico", "Canada", "Braz
il", "USA",
"UK", "Germany", "Russia", "France", "Japan" };
"2014" };
var cellBorder = new
{
width = '0',
};
var celltextStyle = new
{
color= "white"
};
}

ltipRender">
<e-heatmap-titlesettings text="Percentage of Individuals Using Internet by Country"
textStyle="textStyle">
<e-heatmap-xaxis labels="xAxisLabel"></e-heatmap-xaxis>
914
<e-palettes>
<e-palette color="#3498DB"></e-palette>
<e-palette color="#2C3E50"></e-palette>
</e-palettes>
<e-heatmap-cellsettings border="cellBorder" textStyle="celltextStyle" format="{valu
e} %">
</e-heatmap-cellsettings>
</ejs-heatmap>
<script>
args.content = [args.yLabel + " | " + args.xLabel + " : " + args.value + "
%"];
}
</script>
JSON data - table binding

In JSON table data binding, each JSON object contains a x-axis data point as row header and all
the corresponding Y-axis data values. You can bind the JSON table data to the heat map using
the data property in dataSource , along with the isJsonData property enabled and also by
defining adaptorType property as Table . The xDataMapping property is used to map the row
header in JSON data.
@{
var heatmapData = {
data:[
{ 'Region': 'USA', '2000': 93, '2004': 101, '2008': 112, '2012': 103, '2016': 1
21 },
{ 'Region': 'GBR', '2000': 28, '2004': 30, '2008': 49, '2012': 65, '2016': 67 }
,
{ 'Region': 'China', '2000': 58, '2004': 63, '2008': 100, '2012': 91, '2016': 7
0 },
{ 'Region': 'Russia', '2000': 89, '2004': 90, '2008': 60, '2012': 69, '2016': 5
5 },
{ 'Region': 'Germany', '2000': 56, '2004': 49, '2008': 41, '2012': 44, '2016':
42 },
{ 'Region': 'Japan', '2000': 18, '2004': 37, '2008': 25, '2012': 38, '2016': 41
},
915
{ 'Region': 'France', '2000': 38, '2004': 33, '2008': 43, '2012': 35, '2016': 4
2 },
{ 'Region': 'KOR', '2000': 28, '2004': 30, '2008': 32, '2012': 30, '2016': 21 }
,
{ 'Region': 'Italy', '2000': 34, '2004': 32, '2008': 27, '2012': 28, '2016': 28
}
],
isJsonData: true,
adaptorType: 'Table',
xDataMapping: 'Region',
};

;
var yAxistextStyle = new { text = "Olympic Year" };
var xAxisLabel = new string[] { "China", "France", "GBR", "Germany", "Italy", "
Japan", "KOR", "Russia", "USA" };
var yAxisLabel = new string[] { "2000", "2004", "2008", "2012", "2016" };
{
width = 1,
radius = 4,
color = "white"
};
}

ltipRender">
<e-heatmap-titlesettings text="Olympic Medal Achievements of most Successful Countr
ies" textStyle="textStyle">
<e-heatmap-xaxis labels="xAxisLabel" labelRotation="45" labelIntersectAction="None">
</e-heatmap-xaxis>
<e-heatmap-yaxis labels="yAxisLabel" title="yAxistextStyle"></e-heatmap-yaxis>
<e-palettes>
<e-palette color="#F0C27B"></e-palette>
<e-palette color="#4B1248"></e-palette>
</e-palettes>
<e-heatmap-cellsettings border="cellBorder"></e-heatmap-cellsettings>
</ejs-heatmap>
<script>
args.content = [args.yLabel + " | " + args.xLabel + " : " + args.value + "
medals"];
}
916
</script>
JSON data - Cell binding

In JSON cell data binding, each JSON object consists value for each cell along with a mapping
value for row and column. You can bind the JSON cell data which has information for each cell to
the heatmap using the data property in dataSource . Define the adaptorType property as
Cell , and enable the isJsonData property. Now map the fields of the data by using the
valueMapping , xDataMapping and yDataMapping properties.
@{
var heatmapData = {
data:[
{ 'rowid': 'France', 'columnid': '2010', 'value': '77.6' },
{ 'rowid': 'USA', 'columnid': '2010', 'value': '60.6' },
{ 'rowid': 'Spain', 'columnid': '2010', 'value': '64.9' },
{ 'rowid': 'China', 'columnid': '2010', 'value': '55.6' },
{ 'rowid': 'Italy', 'columnid': '2010', 'value': '43.6' },
917
{ 'rowid': 'UK', 'columnid': '2010', 'value': '28.2' },
{ 'rowid': 'Germany', 'columnid': '2010', 'value': '26.8' },
{ 'rowid': 'Germany', 'columnid': '2011', 'value': '29' },
{ 'rowid': 'Mexico', 'columnid': '2010', 'value': '23.2' },
{ 'rowid': 'Mexico', 'columnid': '2016', 'value': '35' },
{ 'rowid': 'Thailand', 'columnid': '2010', 'value': '15.9' },
{ 'rowid': 'Austria', 'columnid': '2010', 'value': '22' },
{ 'rowid': 'Austria', 'columnid': '2011', 'value': '21.3' },
{ 'rowid': 'Austria', 'columnid': '2014', 'value': '25' },
],
isJsonData: true,
adaptorType: 'Cell',
xDataMapping: 'rowid',
yDataMapping: 'columnid',
valueMapping: 'value'
};
918
;
var xAxisLabel = new string[] { "Austria", "China", "France", "Germany", "Italy
", "Mexico", "Spain", "Thailand", "UK", "USA" };
"2016" };
{
width = 1,
radius = 4,
color = "white"
};
}

<e-heatmap-titlesettings text="Most Visited Destinations by International Tourist A
rrivals" textStyle="textStyle">
<e-heatmap-xaxis labels="xAxisLabel"></e-heatmap-xaxis>
<e-palettes>
<e-palette color="#DCD57E"></e-palette>
<e-palette color="#A6DC7E"></e-palette>
<e-palette color="#7EDCA2"></e-palette>
<e-palette color="#6EB5D0"></e-palette>
</e-palettes>
<e-heatmap-cellsettings border="cellBorder" showLabel="true" format="{value} M">
</ejs-heatmap>
Empty Points
The Data points that uses the null or "" or undefined as value are considered as empty
points. Empty data points are ignored and not displayed in the heatmap. Empty data points are
rendered with default palette. You can customize the empty data point color value using
emptyPointColor property.
@{
var heatmapData = [
73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, null, 4, 66, 90],
919
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, "", 79],
[56, 69, 21, 86, 3, 33],
[45, 7, undefined, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];
var Xminimum = new DateTime(2007, 1, 1);

}

<e-heatmap-xaxis minimum="Xminimum" intervalType="Years" valueType="DateTime" labelF
ormat="YYYY">
</e-heatmap-xaxis>
<e-heatmap-yaxis valueType="Numeric">
</e-heatmap-yaxis>
</ejs-heatmap>
920
Rendering Mode
Heat map can be displayed using Canvas or Scalable Vector Graphics (SVG) rendering logic
to improve the initial load performance and scalability. Heatmap can also automatically switch
between Canvas and SVG modes based on dataset size and you can enable this mode by
setting renderingMode property as Auto .
If the Auto mode is enabled in the heatmap and if there are more than 10,000 data points,
then the heatmap will be rendered in Canvas mode else the heatmap will be rendered in
SVG mode.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];
var xAxisLabel = new string[] {'Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',

'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'};
var yAxisLabel = new string[] { 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat' };
var textStyle = new { size = "15px", fontWeight = "500", fontStyle = "Normal", font
Family: "Segoe UI"};
}
<ejs-heatmap id='container' dataSource="window.heatmapData" showTooltip="true" renderin

gMode="SVG">
extStyle">
</e-heatmap-xaxis>
921
</e-heatmap-yaxis>
</ejs-heatmap>
922
Axis
Heatmap consists two axes, x-axis and y-axis which displays the row headers and column
headers for plotting the data points. You can define the type, format and other customizing
options for both the axes in heatmap.
Types
There are three different axis types available in heatmap, which defines the data type of the axis
labels. You can define the axis type using valueType property in heatmap.
Category Axis
Category axis type is used to represent the string values in axis labels.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];

}

923
extStyle">
<e-heatmap-xaxis vaueType="Category" labels="xAxisLabel">
</e-heatmap-xaxis>
<e-heatmap-yaxis vaueType="Category" labels="yAxisLabel">
</e-heatmap-yaxis>
</ejs-heatmap>
Numeric Axis
Numeric axis type is used to represent the numeric values in axis labels
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];
}

extStyle">
<e-heatmap-xaxis vaueType="Numeric" minimum="1" maximum="11">
</e-heatmap-xaxis>
<e-heatmap-yaxis vaueType="Numeric" minimum="1" maximum="5">
</e-heatmap-yaxis>
</ejs-heatmap>
DateTime Axis
924
DateTime axis type is used to represent the date time values in axis labels with specific format. In
DateTime axis, you can define the start and end date/time using the minimum and maximum
properties.
@{
var heatmapData = [
[36371, 25675, 28292, 33399, 35980, 38585, 39351, 39964, 36543, 30529, 3329
8, 36985],
[34702, 27618, 31063, 34525, 36772, 35410, 38750, 39467, 35390, 34196, 3530
2, 35703],
[34522, 31324, 32128, 34231, 36817, 34381, 37180, 38255, 32776, 32645, 3153
9, 32981],
[32213, 28755, 29517, 31214, 33747, 33507, 35763, 36837, 32910, 33437, 3065
9, 31965],
[31282, 28663, 32952, 33941, 34506, 36875, 38836, 35497, 34285, 34094, 3225
6, 33699],
[31714, 29405, 33745, 32838, 33461, 35034, 36122, 37943, 34128, 30624, 3239
8, 33522],
[32064, 28387, 33751, 32537, 34034, 35977, 37196, 38301, 33627, 34115, 3107
2, 33939],
[32417, 27868, 30807, 33386, 35284, 36126, 39753, 40978, 35777, 35277, 3128
1, 35411],
[32494, 29848, 34385, 35804, 37943, 38722, 41315, 41335, 37177, 37443, 3245
7, 37304],
[34378, 29576, 30547, 35664, 36622, 38145, 40347, 41868, 38252, 36505, 2957
6, 36450],
[35219, 31670, 32589, 34927, 36998, 39825, 41126, 42002, 37021, 36583, 3240
8, 37108]];
var yAxisLabel = new string[] {'Jan', 'Feb', 'Mar', 'Apr', 'May',

'Jun', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec' };
var Xmaximum = new DateTime(2017, 12, 31);
{
width = '0',
};
}

<e-heatmap-titlesettings text="Monthly Flight Traffic at JFK Airport" textStyle="text
Style">
925
<e-heatmap-xaxis minimum="Xminimum" maximum="Xmaximum" intervalType="Years" valueType=
"DateTime" labelFormat="YYYY" labelRotation="45" labelIntersectAction="None"></e-heatma
p-xaxis>
</e-heatmap-yaxis>
<e-heatmap-cellsettings border="cellBorder" showLabel="false" format="{value} flights"
>
</ejs-heatmap>
Inversed Axis
Heatmap supports inversing the axis origin for both the axes, where the axis labels are placed in
an inversed manner. You can enable axis inversing by enabling the isInversed property.
@{
var heatmapData = [
[36371, 25675, 28292, 33399, 35980, 38585, 39351, 39964, 36543, 30529, 3329
8, 36985],
[34702, 27618, 31063, 34525, 36772, 35410, 38750, 39467, 35390, 34196, 3530
2, 35703],
[34522, 31324, 32128, 34231, 36817, 34381, 37180, 38255, 32776, 32645, 3153
9, 32981],
[32213, 28755, 29517, 31214, 33747, 33507, 35763, 36837, 32910, 33437, 3065
9, 31965],
[31282, 28663, 32952, 33941, 34506, 36875, 38836, 35497, 34285, 34094, 3225
6, 33699],
[31714, 29405, 33745, 32838, 33461, 35034, 36122, 37943, 34128, 30624, 3239
8, 33522],
[32064, 28387, 33751, 32537, 34034, 35977, 37196, 38301, 33627, 34115, 3107
2, 33939],
[32417, 27868, 30807, 33386, 35284, 36126, 39753, 40978, 35777, 35277, 3128
1, 35411],
[32494, 29848, 34385, 35804, 37943, 38722, 41315, 41335, 37177, 37443, 3245
7, 37304],
[34378, 29576, 30547, 35664, 36622, 38145, 40347, 41868, 38252, 36505, 2957
6, 36450],
[35219, 31670, 32589, 34927, 36998, 39825, 41126, 42002, 37021, 36583, 3240
8, 37108]];

926
{
width = '0',
};
}

Style">
"DateTime" labelFormat="YYYY" labelRotation="45" labelIntersectAction="None" isInversed=
"true"></e-heatmap-xaxis>
</e-heatmap-yaxis>
>
</ejs-heatmap>
Opposed Axis
In heatmap, it is possible to place the axis label in opposite position of its default axis label
position using opposedPosition property.
@{
var heatmapData = [
[36371, 25675, 28292, 33399, 35980, 38585, 39351, 39964, 36543, 30529, 3329
8, 36985],
[34702, 27618, 31063, 34525, 36772, 35410, 38750, 39467, 35390, 34196, 3530
2, 35703],
[34522, 31324, 32128, 34231, 36817, 34381, 37180, 38255, 32776, 32645, 3153
9, 32981],
[32213, 28755, 29517, 31214, 33747, 33507, 35763, 36837, 32910, 33437, 3065
9, 31965],
[31282, 28663, 32952, 33941, 34506, 36875, 38836, 35497, 34285, 34094, 3225
6, 33699],
[31714, 29405, 33745, 32838, 33461, 35034, 36122, 37943, 34128, 30624, 3239
927
8, 33522],
[32064, 28387, 33751, 32537, 34034, 35977, 37196, 38301, 33627, 34115, 3107
2, 33939],
[32417, 27868, 30807, 33386, 35284, 36126, 39753, 40978, 35777, 35277, 3128
1, 35411],
[32494, 29848, 34385, 35804, 37943, 38722, 41315, 41335, 37177, 37443, 3245
7, 37304],
[34378, 29576, 30547, 35664, 36622, 38145, 40347, 41868, 38252, 36505, 2957
6, 36450],
[35219, 31670, 32589, 34927, 36998, 39825, 41126, 42002, 37021, 36583, 3240
8, 37108]];

{
width = '0',
};
}

Style">
"DateTime" labelFormat="YYYY" labelRotation="45" labelIntersectAction="None" opposedPos
ition="true">
</e-heatmap-xaxis>
</e-heatmap-yaxis>
>
</ejs-heatmap>
Label Formatting
Heatmap supports formatting the axis labels by using labelFormat property. Using this property
you can customize the axis label by global string format ('P', 'C', etc) or customized format like
'{value}°C'.
928
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];

}

<e-heatmap-titlesettings text="Monthly Flight Traffic at JFK Airport" textStyle="textS
tyle">
<e-heatmap-xaxis minimum="Xminimum" intervalType="Years" valueType="DateTime" labelFor
mat="YYYY">
</e-heatmap-xaxis>
<e-heatmap-yaxis valueType="DateTime" labelFormat="${value}">
</e-heatmap-yaxis>
</ejs-heatmap>
Axis Intervals
In heatmap, it is possible to define an interval between the axis labels using interval property.
In DateTime axis, you can change the interval mode by using intervalType property. DateTime
axis supports following interval types
Years
Months
Days
Hours
Minutes
929
@{
var heatmapData = [
[36371, 25675, 28292, 33399, 35980, 38585, 39351, 39964, 36543, 30529, 3329
8, 36985],
[34702, 27618, 31063, 34525, 36772, 35410, 38750, 39467, 35390, 34196, 3530
2, 35703],
[34522, 31324, 32128, 34231, 36817, 34381, 37180, 38255, 32776, 32645, 3153
9, 32981],
[32213, 28755, 29517, 31214, 33747, 33507, 35763, 36837, 32910, 33437, 3065
9, 31965],
[31282, 28663, 32952, 33941, 34506, 36875, 38836, 35497, 34285, 34094, 3225
6, 33699],
[31714, 29405, 33745, 32838, 33461, 35034, 36122, 37943, 34128, 30624, 3239
8, 33522],
[32064, 28387, 33751, 32537, 34034, 35977, 37196, 38301, 33627, 34115, 3107
2, 33939],
[32417, 27868, 30807, 33386, 35284, 36126, 39753, 40978, 35777, 35277, 3128
1, 35411],
[32494, 29848, 34385, 35804, 37943, 38722, 41315, 41335, 37177, 37443, 3245
7, 37304],
[34378, 29576, 30547, 35664, 36622, 38145, 40347, 41868, 38252, 36505, 2957
6, 36450],
[35219, 31670, 32589, 34927, 36998, 39825, 41126, 42002, 37021, 36583, 3240
8, 37108]];
{
width = '0',
};
}

<e-heatmap-titlesettings text="Monthly Flight Traffic at JFK Airport" textStyle="textS
tyle">
<e-heatmap-xaxis minimum="Xminimum" minimum="Xmaximum" intervalType="Years" valueType=
"DateTime" labelFormat="YYYY" interval="2">
</e-heatmap-xaxis>
<e-heatmap-yaxis label="yAxisLabel">
</e-heatmap-yaxis>
930
<e-heatmap-cellsettings border="cellBorder" showLabel="false" format="{value} flights">
</ejs-heatmap>
931
Palette
In Heatmap, each data point is displayed as a cell with color applied based on the data value.
Palette in heatmap is used to define the color range for the cells and the gradient type for the
colors. You can define the colors either in RGB or hex codes using the color property in
palette . The defined colors are applied to the cell background based on palette type and cell
value.
Palette Types
You can display the heatmap cells either in gradient colors or in fixed colors.
Gradient
The smooth transition between the given palette colors will be applied for the heatmap cells
based on value. Heatmap will calculate all the gradient colors between the start and end color for
all the distinct data values. Default start color and end color will be considered for gradient
calculation, if the colors are not defined. The palette type must be defined as Gradient for the
type property in paletteSettings property.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];

932
}

extStyle">
</e-heatmap-xaxis>
</e-heatmap-yaxis>
<e-heatmap-palettesettings type="Fixed">
<e-palettes>
<e-palette color="#C06C84"></e-palette>
<e-palette color="#6C5B7B"></e-palette>
<e-palette color="#355C7D"></e-palette>
</e-palettes>
<e-heatmap-legendsettings visible="true"></e-heatmap-legendsettings>
</ejs-heatmap>
Fixed
In Fixed palette type, solid colors are applied to the heatmap cells. The data values will be
grouped based on the number of colors defined for the heatmap. The palette type must be
defined as Fixed for the type property in paletteSettings property.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];

933
}

extStyle">
</e-heatmap-xaxis>
</e-heatmap-yaxis>
<e-palettes>
</e-palettes>
</ejs-heatmap>
Defining Color Stops

You can define the colors ranges or color stops for the data values in both gradient and fixed
palette types. You need to define the data value in value property of palette property for
calculating the color stops. The heatmap will automatically calculates the color stops if the
value property is not defined. The labels property is used to provide the additional
information about the color which will be displayed in the legend. If the label is not provided, the
value will displayed in legend. And in the case of both the values and labels are not defined,
the labels will be automatically calculated based on data values.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
934
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];

}

extStyle">
</e-heatmap-xaxis>
</e-heatmap-yaxis>
<e-palettes>
</e-palettes>
</ejs-heatmap>
935
Legend
The legend is used to provide the information about the heatmap cell. You can enable the legend
by setting visible property to true and by injecting Legend module using
HeatMap.Inject(Legend) .
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];

}

extStyle">
</e-heatmap-xaxis>
</e-heatmap-yaxis>
<e-palettes>
<e-palette value="0" color="#C2E7EC"></e-palette>
<e-palette value="10" color="#AEDFE6"></e-palette>
<e-palette value="20" color="#9AD7E0"></e-palette>
936
<e-palette value="30" color="#72C7D4"></e-palette>
<e-palette value="40" color="#5EBFCE"></e-palette>
<e-palette value="50" color="#4AB7C8"></e-palette>
<e-palette value="60" color="#309DAE"></e-palette>
<e-palette value="70" color="#2B8C9B"></e-palette>
<e-palette value="80" color="#206974"></e-palette>
<e-palette value="90" color="#15464D"></e-palette>
</e-palettes>
<e-heatmap-legendsettings position="Right"></e-heatmap-legendsettings>
</ejs-heatmap>
Legend Types
Heatmap supports two legend types Gradient and List type.
Gradient - This is a continuous color legend with smooth color transition between palette
color values.
List - List is fixed color legend. Each and every palette color informations are shown
separately as list item.
You can change the legend type by using type property in paletteSettings property.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];

937
}

extStyle">
</e-heatmap-xaxis>
</e-heatmap-yaxis>
<e-heatmap-palettesettings type="Fixed"></e-heatmap-palettesettings>
<e-heatmap-cellsettings showlabel="false"></e-heatmap-cellsettings>
<e-heatmap-legendsettings position="Right"></e-heatmap-legendsettings>
</ejs-heatmap>
Placement
You can place the legend at left, right, top or bottom to the heatmap layout by using the
position property. The legend is positioned at the right to the heatmap by default.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];

938
}

extStyle">
</e-heatmap-xaxis>
</e-heatmap-yaxis>
<e-heatmap-legendsettings position="Top"></e-heatmap-legendsettings>
</ejs-heatmap>
Alignment
You can align the legend as center, far or near to the heatmap using alignment property.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];

}

extStyle">
939
</e-heatmap-xaxis>
</e-heatmap-yaxis>
<e-heatmap-legendsettings position="Right" alignment="Near" height="150px"></e-heatma
p-legendsettings>
</ejs-heatmap>
Legend Dimensions
You can change the legend dimensions with values in pixels or percentage by using the width
and height properties.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];

}

extStyle">
</e-heatmap-xaxis>
940
</e-heatmap-yaxis>
<e-heatmap-legendsettings position="Right" height="150px"></e-heatmap-legendsettings>
</ejs-heatmap>
Paging for Legend

Paging is available only for List type legend in heatmap. Paging will be enabled by default, when
the legend items exceeds the legend bounds. You can view each legend items by navigating
between the pages using navigation buttons.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];

}

extStyle">
</e-heatmap-xaxis>
</e-heatmap-yaxis>
941
<e-palettes>
<e-palette value="0" color="#C2E7EC"></e-palette>
<e-palette value="10" color="#AEDFE6"></e-palette>
<e-palette value="20" color="#9AD7E0"></e-palette>
<e-palette value="25" color="#86CFDA"></e-palette>
<e-palette value="30" color="#72C7D4"></e-palette>
<e-palette value="40" color="#5EBFCE"></e-palette>
<e-palette value="50" color="#4AB7C8"></e-palette>
<e-palette value="55" color="#36AFC2"></e-palette>
<e-palette value="60" color="#309DAE"></e-palette>
<e-palette value="70" color="#2B8C9B"></e-palette>
<e-palette value="75" color="#257A87"></e-palette>
<e-palette value="85" color="#1B5761"></e-palette>
<e-palette value="90" color="#15464D"></e-palette>
</e-palettes>
<e-heatmap-legendsettings position="Right" height="150px"></e-heatmap-legendsettings>
</ejs-heatmap>
942
Appearance
Cell/Customizations
You can customize the cell by using cellSettings property.
Border
You can change the width, color and radius of the heatmap cells, by using border property.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];


{
width = 1,
radius = 4,
color = "white"
};
}

943
extStyle">
</e-heatmap-xaxis>
</e-heatmap-yaxis>
<e-heatmap-cellsettings border="cellBorder"></e-heatmap-cellsettings>
</ejs-heatmap>
Cell Highlighting
You can enable or disable the cell highlighting while hovering on the heatmap cells, by using
enableCellHighlighting property.
Note: The cell highlighting only works in SVG rendering mode.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];


{
width = 1,
radius = 4,
color = "white"
};
944
}

extStyle">
</e-heatmap-xaxis>
</e-heatmap-yaxis>
<e-heatmap-cellsettings enableCellHighlighting="true"></e-heatmap-cellsettings>
</ejs-heatmap>
Margin
You can set margin for heatmap from its container through margin property.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];

}

<e-heatmap-margin left="15" right="15" top="15" bottom="15"></e-heatmap-margin>
945
extStyle">
</e-heatmap-xaxis>
</e-heatmap-yaxis>
</ejs-heatmap>
Title
The title is used to provide a quick information about the data plotted in heat map. The text
property is used to set the title for heatmap. You can also customize text style of the title by using
the textStyle property.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];


{
width = 1,
radius = 4,
color = "white"
};
var textStyle = new { size = "15px", fontWeight = "500", fontStyle = "Italic", font
}
946
extStyle">
</e-heatmap-xaxis>
</e-heatmap-yaxis>
</ejs-heatmap>
Data label
You can toggle the visibility of data labels by using the property showLabel . By Default, the data
label will be visible.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];

}

extStyle">
947
</e-heatmap-xaxis>
</e-heatmap-yaxis>
<e-heatmap-cellsettings showLabel="false"></e-heatmap-cellsettings>
</ejs-heatmap>
Text Style
You can customize the font family, font size, color of the data label, by using the textStyle in
cellSettings property.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];

var cellTextStyle = new { fontStyle = "Italic", fontFamily: "Segoe UI"};

}

extStyle">
</e-heatmap-xaxis>
948
</e-heatmap-yaxis>
<e-heatmap-cellsettings textStyle="cellTextStyle"></e-heatmap-cellsettings>
</ejs-heatmap>
Format
You can change the format of the data label, such as currency, decimal, percent etc. by using
format property.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];

}

extStyle">
</e-heatmap-xaxis>
</e-heatmap-yaxis>
<e-heatmap-cellsettings format="{value} $"></e-heatmap-cellsettings>
</ejs-heatmap>
949
Dimensions
Size for Container
Heatmap can render to its container size. You can set the size via inline or CSS as demonstrated
below.
<div id='element' style="width:650px; height:350px;"></div>
</div>
Size for Heatmap
You can also set size for heatmap directly through width and height properties.
In Pixel
You can set the size of heatmap in pixel as demonstrated below.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];

}
950
<ejs-heatmap id='container' dataSource="window.heatmapData" showTooltip="true" width="6
50px" height="350px">
extStyle">
</e-heatmap-xaxis>
</e-heatmap-yaxis>
</ejs-heatmap>
In Percentage
By setting value in percentage, heatmap gets its dimension with respect to its container. For
example, when the height is ‘50%’, heatmap renders to half of the container height.
@{
var heatmapData = [
[73, 39, 26, 39, 94, 0],
[93, 58, 53, 38, 26, 68],
[99, 28, 22, 4, 66, 90],
[14, 26, 97, 69, 69, 3],
[7, 46, 47, 47, 88, 6],
[41, 55, 73, 23, 3, 79],
[56, 69, 21, 86, 3, 33],
[45, 7, 53, 81, 95, 79],
[60, 77, 74, 68, 88, 51],
[25, 25, 10, 12, 78, 14],
[25, 56, 55, 58, 12, 82],
[74, 33, 88, 23, 86, 59]];

}
<ejs-heatmap id='container' dataSource="window.heatmapData" showTooltip="true" width="8

0%" height="90%">
extStyle">
951
</e-heatmap-xaxis>
</e-heatmap-yaxis>
</ejs-heatmap>
952
Tooltip
Tooltip is used to provide the details of the heatmap cell and this will be displayed with mouse
hovering on the cell and on tap action in touch devices.
Default Tooltip
You can enable the tooltip by setting showTooltip property to true and by injecting Tooltip
module using HeatMap.Inject(Tooltip) .
@{
var heatmapData = [
[0.72, 0.71, 0.71, 0.67, 0.72, 0.53, 0.53, 0.56, 0.58, 0.56],
[2.28, 2.29, 2.09, 1.84, 1.64, 1.49, 1.49, 1.39, 1.32, 1.23],
[2.02, 2.17, 2.30, 2.39, 2.36, 2.52, 2.62, 2.57, 2.57, 2.74],
[3.21, 3.26, 3.45, 3.47, 3.42, 3.34, 3.14, 2.83, 2.64, 2.61],
[3.22, 3.13, 3.04, 2.95, 2.69, 2.49, 2.27, 2.18, 2.06, 1.87],
[3.30, 3.39, 3.40, 3.48, 3.60, 3.67, 3.73, 3.79, 3.79, 4.07],
[5.80, 5.74, 5.64, 5.44, 5.18, 5.08, 5.07, 5.00, 5.35, 5.47],
[6.91, 7.40, 8.13, 8.80, 9.04, 9.24, 9.43, 9.35, 9.49, 9.69]];
var xAxisLabel = new string[] {'Canada', 'China', 'Egypt', 'Mexico', 'Norway', 'Rus
sia', 'UK', 'USA'};
var yAxisLabel = new string[] { '2000', '2001', '2002', '2003', '2004', '2005', '20
06', '2007', '2008', '2009', '2010' };
}
<ejs-heatmap id='container' dataSource="window.heatmapData" showTooltip="true">

extStyle">
</e-heatmap-xaxis>
</e-heatmap-yaxis>
</ejs-heatmap>
953
Tooltip Template
In heatmap, you can customize the tooltip by using tooltipRender client side event.
@{
var heatmapData = [
[0.72, 0.71, 0.71, 0.67, 0.72, 0.53, 0.53, 0.56, 0.58, 0.56],
[2.28, 2.29, 2.09, 1.84, 1.64, 1.49, 1.49, 1.39, 1.32, 1.23],
[2.02, 2.17, 2.30, 2.39, 2.36, 2.52, 2.62, 2.57, 2.57, 2.74],
[3.21, 3.26, 3.45, 3.47, 3.42, 3.34, 3.14, 2.83, 2.64, 2.61],
[3.22, 3.13, 3.04, 2.95, 2.69, 2.49, 2.27, 2.18, 2.06, 1.87],
[3.30, 3.39, 3.40, 3.48, 3.60, 3.67, 3.73, 3.79, 3.79, 4.07],
[5.80, 5.74, 5.64, 5.44, 5.18, 5.08, 5.07, 5.00, 5.35, 5.47],
[6.91, 7.40, 8.13, 8.80, 9.04, 9.24, 9.43, 9.35, 9.49, 9.69]];
var xAxisLabel = new string[] {'Canada', 'China', 'Egypt', 'Mexico', 'Norway', 'Rus
sia', 'UK', 'USA'};
var yAxisLabel = new string[] { '2000', '2001', '2002', '2003', '2004', '2005', '20
06', '2007', '2008', '2009', '2010' };

args.content = ["In " + args.yLabel + ", the " + args.xLabel + " produced "
+ args.value + " million barrels per day"];
}
}
<ejs-heatmap id='container' dataSource="window.heatmapData" tooltipRender="window.onto

oltipRender" showTooltip="true">
extStyle">
</e-heatmap-xaxis>
</e-heatmap-yaxis>
</ejs-heatmap>
Note: To use tooltip feature, we need to inject Tooltip using HeatMap.Inject(Tooltip) .
954
Overview
The ListView component represents the data in interactive hierarchical structure interface across
different layouts or views, that also has features such as data-binding, template, grouping and
Virtualization.
Key Features
Data binding: Supports data binding to display the list of items from the local or server-side
data source.
Grouping: Provides support to group the logically related items under a category.
Nested list: Displays a set of nested list items in different layout.
Customizing templates: Allows you to customize the list item, header, and category group
header.
Virtualization: Allows you to load only viewable list items in a view port which will increase
ListView performance on loading large number of data.
Accessibility: Provides built-in accessibility support that helps to access all the ListView
component features through the keyboard, on-screen readers, or other assistive technology
devices.
955
Getting Started
This section briefly explains about how to render ListView component in your ASP.NET Core
use our components.
Adding ListView component to the Application

ListView component can be rendered with the help of ejs-listview tag helper. Add the below
code to your index.cshtml page which is present under Views/Home folder, where the ListView
is initialized.
<ejs-listview id="list"></ejs-listview>
Bind dataSource
Populate the data in ListView by using the dataSource property. Here, the JSON values are
passed to the ListView component are generated in HomeController.cs and assigned to
ViewBag variable.

{
data.Add(new { text: "Artwork", id: "01" });
data.Add(new { text: "Abstract", id: "02" });
data.Add(new { text: "Modern Painting", id: "03" });
data.Add(new { text: "Ceramics", id: "04" });
data.Add(new { text: "Animation Art", id: "05" });
data.Add(new { text: "Oil Painting", id: "06" });
return View();
}
ViewBag.dataSource variable is used for bounding the dataSource property in view page.
956
<ejs-listview id="list" dataSource="@ViewBag.dataSource"></ejs-listview>
Run the application

The following example shows a basic ListView.
view
HomeController.cs
<ejs-listview id="list" dataSource="@ViewBag.dataSource"></ejs-listview>

{
data.Add(new { text= "Artwork", id= "01" });
data.Add(new { text= "Abstract", id= "02" });
data.Add(new { text= "Modern Painting", id= "03" });
data.Add(new { text= "Ceramics", id= "04" });
data.Add(new { text= "Animation Art", id= "05" });
data.Add(new { text= "Oil Painting", id= "06" });
return View();
}
957
958
Data binding
ListView provides an option to load the data either from local dataSource or remote data
services. This can be done through the dataSource property that supports the data type of array
or DataManager .
ListView supports different kind of data services such as OData, OData V4, and Web API, and
data formats like XML, JSON, and, JSONP with the help of DataManager Adaptors.
Fields Type Description
id string Specifies ID attribute of list item, mapped in dataSource.
text string Specifies list item display text field.
isChecked string Specifies checked status of list item.
isVisible string Specifies visibility state of list item.
enabled string Specifies enabled state of list item.
Specifies the icon class of each list item that will be added
iconCss string
before to the list item text.
child string Specifies child dataSource fields.
tooltip string Specifies tooltip title text field.
groupBy string Specifies category of each list item.
sortBy string Specifies sorting field, that is used to sort the listview data.
htmlAttributes string Specifies list item html attributes field.
When complex data bind to ListView, you should map the fields properly. Otherwise, the
ListView properties remain as undefined or null.
Bind to local data

Local data can be represented in two ways, they are as follows:
Array of simple data.

Array of JSON data.
Array of simple data

ListView supports to load the array of primitive data like string and numbers. Here, both value
and text field act as same.
view
959
simpledata.cs
<ejs-listview id="listview" dataSource="ViewBag.dataSource">
</ejs-listview>
}
<style>
#listview {
display: block;
max-width: 400px;
margin: auto;
border-radius: 3px;
}
</style>
using System;
using System.Linq;
{
{
public IActionResult simpledata()
{
ViewBag.dataSource = new string[] { "Artwork", "Abstract", "Modern Painting"
, "Ceramics", "Animation Art", "Oil Painting" };
return View();
}
}
}
Array of JSON data

ListView can generate its list items through an array of complex data. To get it work properly, you
should map the appropriate columns to the field property.
In the following example, role column is mapped with the text field.
view
arraydata.cs
960
<ejs-listview id="listview" dataSource="ViewBag.dataSource" showHeader="true" heade
rTitle="Device settings">
<e-listview-fieldsettings id="id" text="Name">
</ejs-listview>
}
<style>
#listview {
display: block;
max-width: 400px;
margin: auto;
border-radius: 3px;
}
</style>
using System;
using System.Linq;
{
{
public IActionResult arraydata()
{
listdata.Add(new
{
Name = "Display",
id = "list-01"
}); listdata.Add(new
{
Name = "Notification",
id = "list-02"
{
Name = "Sound",
id = "list-03"
961
{
Name = "Apps",
id = "list-04"
{
Name = "Storage",
id = "list-05"
{
Name = "Battery",
id = "list-06"
});
return View();
}
}
}
Bind to remote data

The ListView supports to retrieve the data from remote data services with the help of
DataManager component. The Query property allows to fetch data and return it to the ListView
from the database.
In the following sample, first 6 products from the Product table of NorthWind data service are
displayed.
view
remotedata.cs
<ejs-listview id="remotelist" headerTitle="Products" showHeader="true" query="new
ej.data.Query().from('Products').select('ProductID,ProductName').take(10)">
<e-listview-fieldsettings id="ProductID" text="ProductName">
<e-data-manager url="http://services.odata.org/V4/Northwind/Northwind.s
vc" crossDomain="true" adaptor="ODataV4Adaptor">
</e-data-manager>
</ejs-listview>
}
<style>
#remotelist {
display: block;
962
max-width: 400px;
margin: auto;
border-radius: 3px;
}
</style>
using System;
using System.Linq;
{
{
public IActionResult remotedata()
{
return View();
}
}
}
963
Grouping
The ListView supports to wrap the nested element into a group based on the category. The
category of each list item can be mapped with groupBy field in the data table, that also support
single-level navigation.
In the following sample, The cars are grouped based on its category by using the groupBy field.
view
grouping.cs
<ejs-listview id="element" dataSource="ViewBag.dataSource">
<e-listview-fieldsettings groupBy="category" tooltip="text">
</ejs-listview>
}
<style>
#element {
display: block;
max-width: 400px;
margin: auto;
border-radius: 3px;
}
</style>
using System;
using System.Linq;
{
{
public IActionResult grouping()
{ List<object> listdata = new List<object>();
listdata.Add(new
{
text = "Audi A4",
id = "9bdb",
category = "Audi"
964
{
text = "Audi A5",
id = "4589",
category = "Audi"
{
text = "BMW 501",
id = "f849",
category = "BMW"
{
text = "BMW 502",
id = "7aff",
category = "BMW"
});
return View();
}
}
}
Customization
The grouping header can be customized by using the groupTemplate property for both inline and
fixed group header. The complete customization description and explanation with an example is
given in the following link.
Group Template.
965
Checklist
The ListView supports checkbox in default and group-lists which is used to select multiple items.
The checkbox can be enabled by the showCheckBox property.
The Checkbox will be useful in the scenario where we need to select multiple options. For
Example, In Shipping cart we can be able to select or unselect the desired items before checkout
and also it will be useful in selecting multiple items that belongs to same category using the
group list.
view
default.cs
<ejs-listview id="listview" dataSource="ViewBag.dataSource" showCheckBox="true">
<e-listview-fieldsettings text="text" id="id">
</ejs-listview>
}
<style>
#listview {
display: block;
max-width: 400px;
margin: auto;
border-radius: 3px;
}
</style>
using System;
using System.Linq;
{
{
public IActionResult default()
{
listdata.Add(new
{
966
text = "Hennessey Venom",
id = "list-01"
{
text = "Bugatti Chiron",
id = "list-02"
{
text = "Bugatti Veyron Super Sport",
id = "list-03"
{
text = "SSC Ultimate Aero",
id = "list-04"
{
text = "Koenigsegg CCR",
id = "list-05"
{
text = "McLaren F1",
id = "list-06"
{
text = "Aston Martin One- 77",
id = "list-07"
{
text = "Jaguar XJ220",
id = "list-08"
{
text = "McLaren P1",
id = "list-09"
{
text = "Ferrari LaFerrari",
id = "list-10"
});
return View();
}
}
967
}
Checkbox Position
In ListView the checkbox can be positioned into either Left or Right side of the list-item text.
This can be achieved by checkBoxPositon property. By default, checkbox will be positioned to
Left of list-item text.
view
position.cs
<ejs-listview id="listview" dataSource="ViewBag.dataSource" showCheckBox="true" chec
kBoxPosition="Right">
<e-listview-fieldsettings text="text" id="id">
</ejs-listview>
}
<style>
#listview {
display: block;
max-width: 400px;
margin: auto;
border-radius: 3px;
}
</style>
using System;
using System.Linq;
{
{
public IActionResult position()
{
listdata.Add(new
{
text = "Hennessey Venom",
id = "list-01"
968
{
text = "Bugatti Chiron",
id = "list-02"
{
text = "Bugatti Veyron Super Sport",
id = "list-03"
{
text = "SSC Ultimate Aero",
id = "list-04"
{
text = "Koenigsegg CCR",
id = "list-05"
{
text = "McLaren F1",
id = "list-06"
{
text = "Aston Martin One- 77",
id = "list-07"
{
text = "Jaguar XJ220",
id = "list-08"
{
text = "McLaren P1",
id = "list-09"
{
text = "Ferrari LaFerrari",
id = "list-10"
});
return View();
}
}
}
969
Nested List
The ListView component supports Nested list. For that, the child property should be defined for
the nested list in the array of JSON.
view
nestedlist.cs
<ejs-listview id="listview" dataSource="ViewBag.dataSource" showHeader="true" heade
rTitle="Continent">
<e-listview-fieldsettings tooltip="text">
</ejs-listview>
}
<style>
#listview {
display: block;
max-width: 400px;
margin: auto;
border-radius: 3px;
}
</style>
using System;
using System.Linq;
{
{
public IActionResult nestedlist()
{
listdata.Add(new
{
text = "Asia",
id = "01",
category = "Continent",
child = new List<object>() { new { text = "India", id = "1", category =
"Asia",
970
child= new List<object>() {
new { id= "1001", text= "Delhi", category= "India" },
new {text= "Kashmir", id= "1002", category= "India"},
new { text= "Goa",id= "1003", category= "India" }
}
},
new { text = "China",id = "2",category = "Asia",
child = new List<object>() {
new { text = "Zhejiang", id = "2001", category = "China" },
new {text= "Hunan",id= "2002", category= "China"},
new { text= "Shandong", id= "2003",category= "China"}
}
}
}
});
listdata.Add(new
{
text = "North America",
id = "02",
child = new List<object>() { new { text = "USA", id = "3", category = "
North America",
new {text= "California", id= "3001", category= "USA"},
new { text= "New York",id= "3002", category= "USA" },
new { text= "Florida",id= "3003", category= "USA" }
}
},
new { text = "Canada",id = "4",category = "North America",
new { text = "Ontario", id = "4001", category = "Canada" },
new {text= "Alberta",id= "4002", category= "Canada"},
new { text= "Manitoba", id= "4003",category= "Canada"}
}
}
}
});
listdata.Add(new
{
text = "Europe",
id = "03",
child = new List<object>() { new { text = "Germany", id = "5", category
= "Europe",
new {text= "Berlin", id= "5001", category= "Germany"},
new { text= "Bavaria",id= "5002", category= "Germany" },
new { text= "Hesse",id= "5003", category= "Germany" }
}
971
},
new { text = "France",id = "6",category = "Europe",
new { text = "Paris", id = "6001", category = "France" },
new {text= "Lyon",id= "6002", category= "France"},
new { text= "Marseille", id= "6003",category= "France"}
}
}
}
});
listdata.Add(new
{
text = "Australia",
id = "04",
child = new List<object>() { new { text = "Australia", id = "7", catego
ry = "Australia",
new {text= "Sydney", id= "7001", category= "Australia"},
new { text= "Melbourne",id= "7002", category= "Australia" },
new { text= "Brisbane",id= "7003", category= "Australia" }
}
},
new { text = "New Zealand",id = "8",category = "Australia",
new { text = "Milford Sound", id = "8001", category = "New Ze
aland" },
new {text= "Tongariro National Park",id= "8002", category=
"New Zealand"},
new { text= "Fiordland National Park", id= "8003",category=
"New Zealand"}
}
},
}
});
listdata.Add(new
{
text = "Africa",
id = "05",
child = new List<object>() { new { text = "Morocco", id = "9", category
= "Africa",
new {text= "Rabat", id= "9001", category= "Morocco"},
new { text= "Toubkal",id= "9002", category= "Morocco" },
new { text= "Todgha Gorge",id= "9003", category= "Morocco" }
}
},
972
new { text = "South Africa",id = "10",category = "Africa",
new { text = "Cape Town", id = "10001", category = "South Afr
ica" },
new {text= "Pretoria",id= "10002", category= "South Africa"
},
new { text= "Bloemfontein", id= "10003",category= "South Afr
ica"}
}
},
}
});
return View();
}
}
}
973
Customizing templates
The ListView component is designed to customize each list items and group title. It uses
Essential JS2 Template engine to render the elements.
Template
The ListView supports to customize the content of each list items with the help of template
property.
The template concepts are illustrated in the following example.
view
customizetemplate.cs
<ejs-listview id="element" dataSource="ViewBag.dataSource" showHeader="true" headerT

itle="Social Media"
template="<span class='${css} icon'><span class='media'>${socialMedia}
</span></span>">
<e-listview-fieldsettings text="socialMedia">
</ejs-listview>
}
<style>
@font-face {
font-family: 'e-icons';
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvM
j0gSR4AAAEoAAAAVmNtYXDOVM6ZAAABsAAAAFJnbHlm7gIZ8wAAAiAAAA1YaGVhZA0acjMAAADQAAAANmhoZWEH
mQN1AAAArAAAACRobXR4LvgAAAAAAYAAAAAwbG9jYRUsEYgAAAIEAAAAGm1heHABIQEoAAABCAAAACBuYW1lc0c
OBgAAD3gAAAIlcG9zdEs6jNMAABGgAAAAoAABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAADAABAA
AAAQAAgbXF1F8PPPUACwPoAAAAANUJFrEAAAAA1QkWsQAAAAAD6gPsAAAACAACAAAAAAAAAAEAAAAMARwACwAAA
AAAAgAAAAoACgAAAP8AAAAAAAAAAQPqAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAUGZFZABA5wDnCwNS/2oAWgPsAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAPoAAAD6AA
AA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA+AAAABgAEAAEAAucE5wv//w
AA5wDnBv//AAAAAAABAAYADgAAAAEAAgADAAQABQAGAAcACAAJAAoACwAAAAAAAAAsAH4AvgHgAqYDJgS2BZIGO
gZyBqwAAAABAAAAAAMwA+oAHAAAEwYVERQWOwE+ATQmKwEiJj0BITI2NCYjITU0JgbbH7mC0Cw+PizQLDwBKSg5
OSn+2D5XA8YkNf4LmtwBSWdKSDNYRV9EtjNKAQAAAQAAAAAD6gNGADIAAAEUFy4BJwYHHgEXJicVHgEXBiMiJx4
BFw4BIyInHgEzJAA3NCc2NwYHPgE3BgcuASMOAQHqBYHZTRsBATEqMyoBW0gaHBQSFGdENYFIGRhEn1cBHAErAQ
E9KTc+IC4MPEYdTSxXdAKdFBMGXU4mLy1JFwITAj9aDQYDM0ECIiYCJCgJASixCwskNBUGEDAeHgwZHQJfAAABA
AAAAAPqA9MAJwAAATYzMhUUBwYHBiMmJyYvASYjIgcGDwEXNjMyFxMWNzITEj8BJicjBgI/JyJEAQQ/Px8oIgcJ
974
GBlpBwYzYZMwQwszLVI7WI7LxgYBAZELyQLSEUkKCzZxbQGoGT+ksgEHXZBCM7H+ubMBASQBF6IavgUBAAsAAAA
AA+oDjwAKABcAMgBaAGsAcwCMAJkAsgDLANQAAAEGFQczNzQmKwEiJwYdARQWMjY9ATQmIicXFAYXFjY3NiY9AT
MVJzcOAiImLwEmNjUnJRYXHgEXHgEdASMVFBY7ATI2PQEzFhcUBwYHIyYnJj0BNDY3NjcyNycVNjMyFxYdARQOA
SYnDwERIxUjFSMRIzU3DgIdARQeAjMhMj4CPQE0LgIjISIlFh0BFAYiJj0BNDYyFxUUHgEXHgEzMjc2NwczNSMV
FAYiJj0BIwcOAQcVFBYXHgEyNz4BNzY9ATQmJy4BIyIHFTM1NyMHJyMDGAkBQgETDQMN3gkTGBITF/ABAQEIHQM
EAkU5AgYaHyAZAQMCAgICHQsKFR4DAwJ3EAwKDBE0AgEUGyMHHxwfEhQQFQgI9CAYDgogEh4sHAU50FNFRyAeLB
sbLDwhAqAiPCwaGi07Iv1gIQF7CRMYEhIYewMCAwcVEQ8MCQsBTDwPFg1BvhQQAQsJCScxEhAbAgQJCQwlHB/TS
VZQLS5QAWIGCBsbCQsEBQd/BwoKB38HChSJDREDEAkIAhAPiNkBGwcOCAwKEwUWD4cNAQEEEg8IIBEeNAkKCgkY
CQgYDxQCARESKkQeIgoIAwE/VREEDiBxFB8OCBESAgEjJ/4BACVICBwnFvEWJh0QEB0mFvEWJxwR8QYKdwoNDgl
3Cg17GAkKCgQKCgUGCxLgrgcKCgeuAgkoHjseHwkLCgYFHQwOHzoXGgoODEOsrJNubgAAAAAEAAAAAAPnA+wANA
BLAGIAfAAAATIWFxYXFgcOAQcGFxYXFhcWNzY3NhcWFxYXFhcUBw4BIyYnLgEnLgEnJicmNjc2Nz4BMzI3DgEHB
hcWDwE3Njc2FxY3PgEnLgEnIgUWAgcGJyYnJg8BNzYnJjc+ATc2Mx4BJQQDBhYXFgcGDwE3NhcWNzY3NicuAScm
IyYBfxYMBQ8QCQ8HDAYNCh8sHB0LCQ8RCg00NAQBAgEBCTQYHx8uTyMnOw8KAwIMDAUFCRIKBTWFqwcGYAYDJQh
BQQgHpaZ7eBkf0YsiAcwwXoCMpjc0Dg7XNQMHYAgKooZIR47k/cv++w0DLS0EARISGfkKCnh/q26JJh7hnBcXZQ
LlCBInJhQPBg8GCgwxJhcWCAoQDgoFExUCBRQVAgMWJAEHDTEgIlIxJSYSHg0GBQgNpxvEh5ZzCAmEAxkaAgJQS
TnphY2nAeyV/uhYXRUHFQYGVNYKCIKhjdUuFwKgjX/+3k6NPwcHSkpiYgQELxYdhqnXmdARAgIAAAACAAAAAAPj
A+oAPABYAAABHgIUBiMiJicuASMiBhUUHgIXHgMVFA4BIyInLgE1NDYzMhYXHgIzMjY1NC4BJy4CNTQ+ATMyBRQ
XBhUWABcyNxYXPgE3NCc2NSYAJwYHJicOAQJmLz4dJh0aHA8RMTYzPBMlJy06XUQmQn1VZUMwPCceGCILDRwzKz
pHJT82SmQ9QHZPQP3SJQkFAQnILCo6R3SZAxwLBf72xyonQFF0mgMuDzA3NCgYGiIkJxoQGBILCgweLEQxOl00I
xpWKholHRodJRkxIxsjFAsQK0w4NVMsYk09LjHI/vcFCCABA5p0QjcxNMgBCQYBBigBApoACAAAAAAD6gPTACUA
PwBTAGEAcgCfALIBGwAAASMGBwYVFBYXFjsBMjY/AT4BNzY3NjQnJicmIgcGByInJi8BJiIlBgcGFRQXFRYXFjM
yNzM2NzY1NCcmJyYjIgUOAQcGHQEUFhcWMzI2PQE0JiMiJRYXFhUUBwYHLgEnNjIhMzIfAQ4BByYnJj0BNjc2Ny
UWHwEeARceAR0BFAcGBwYHDgEHBisBIiYvAiYvATUjJyYnJjU0PgE3NjMyATIXFh0BDgErASImPQE0Njc2MycjB
gcmIyIHIw4BBw4BFQ4BDwEuASsBIg4CFRYXFhcGDwEUFhceARceATMyNjc+ATc2NTQvAT4BPQEuAScjJiMmBwYH
JiMnLgEnNDY3NjczHgEXFQYWFxYXMxY3PgE3NjU0JicjJiMmAU4BCAcDBwhHVgkpTiQLBQ0EBgIBAwQICg4IRFA
8NAcLDAcIASYSCwwBBBISGAcKAhAQCwQFEhEUCv7IERkFAxgTCQsYKCgYCAI1EgkGBwcJDikZDyX9DgUJCBEaKQ
4IBgkCEhUXAbAfHSc0XCAPEgIJGRYiNHc/CgsVP3o1CQkmHgMEBxMIBUJbM01VHQEkFQ4SAiAVAxUhGBIFCSoCJ
RQzMhMTAhkoDQ8KPXs2DRIsGgwZKyMVAhURHwEBARIRH2E1NGw4JUklRH0sMgECHSgDOSYBEg8qIAYKAwICNXY+
BwwOIwwWKRUBEg4eLA4sIhAUAwEpHgITGhQBFwMLBwwJEgQ4FBQGAwgGCAgDCgkLBQYELwEcAwwGA94HExEYCQQ
CGw0RBAQVExgLDBYPDAEEGhQEBgoZJgYFKR4FHCldDBQQDhMPDQkkOhoJAwYaOiMHDgwTBRwUFAMmBAcNEUIzGj
sfEwgILCgkHiotBgEfIwYFHiQFBgsgJBMZQWZEERwBARISGwMZIyIaAxghBAI8EiUZBQcmGyBGIwUhJAcQExcqM
x0nJB4VCAgRJEggPFAZGBgMCRRRQkpbCQkREUQqCDBIDAUBGgQJAwIjIwQcOBcjBQEOCQUbLBEmBAEjECsaBQko
RA4KAQAFAAAAAAPpA+oAEAAsADgATQCTAAABDgEHJi8BLgE1PgE3NjMeASUUFR4BFyE+ATcRNCYjIRYOAiYnJjc
nBiciBgUeARc+ATcuAScOAQEyFhUWBxQHBgcGJyImJzU2NzY3MyUWFRQGIyImNTc0Jg4BFRYVBhcWJwYmNzU3NC
cmBgcVFgYjIiY1NDUjBgcGFhUUFjchFjc+ARcWNyEyNjU0NicuASchJgYChwJTPDIlAxkdAkU1Cgs/UP1/A25SA
l5RbgMFBv7oOhuBp5YeLEoFiYkHAwEsA25TVW8BAm5TVHACOw4RAQEBBxc1NA4RAQEKCA01/c8BCBUHBQEICwoB
AQEBDBUKAQEDBhQBAQkTBwUERQkDAQcEASgIB0zCTgkMAScEBQECCGxK/ewHBQHuO1EBAR0CFD0kNU0JAQJSTNv
bUW4DA25QAbcHBVy1dxFbUX1vAQEBB45TbgICb1NUbgICbwFSEQ42NgUFFAEBAREOaxEIBwFGZ2gUCQYH4QgDAQ
EJOzs2NwwBAQoWyQUDAgINB8QUCAUHY2MzVSRIJAcCAQEGRgJFCQECBiNIJElkAgEGAAAAAAYAAAAAA+oD6gAPA
BsALQBcAGYAbgAAAQ4BBx4BFz4BNTQmLwEiBiUVMxUjFSM1IzUzNSUOARUUFhcyNjc+ATU0JiciBjcHIx4BFw4B
Bw4BFBYfAR4BFxQGBy4BNSY2Nz4BNy4BNTQ2NwYjLgE1NDY3PgEXAR4BFyE+ATcRITchLgEnIQ4BAQEPMAMBSD4
3OSgrEgYxAepzc05zc/5ACQgvMQ8bCg0GMS8QHPkxLw8lAgEmGQgNDQcbGiUBZmNTUQEbISVRHAkOBAQNDD1CGB
khSCD+pgNvUgJgU28C/BgBA+cGbVH9oFBtAUEEIigpMgEBLSQbKx0BBNRzTnNzTnNnDB0PKVkEDAkOHgssWwQOJ
xkMMSopMRIHEhgPBRUUMCY3VQIBPywVMhUUDQEKGBEKDQcCAkcuGjUVGhEB/hBTbgMDblMCPitQagEBagAAAAEA
AAAAA+UD6gAjAAATER4BFyERIzUzNT4BNzMVIyIGHQEzFSMRIT4BNxEuASchDgEIAR0VAcpvbwJXQo1BGSF7ewE
AFR0BAR0V/IkVHQOx/IsZIAEBm4ZQQlkChiEZLYb+ZQEgGQN1GSABASAAAAACAAAAAAPlA+oAEgAiAAABFTMVIx
EGFjcVBgQnESM1FjY3JREeARchPgE3ES4BIyEiBgIRy8sGQ5oW/sQjbgmIEv5gATAkAzMkMAEBMCT8zSQwA4TRf
v70ClIzeQsYfAFUawJjhBH8wyUwAQEwJQM9JTAwAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEABwABAAEAAAAA
AAIABwAIAAEAAAAAAAMABwAPAAEAAAAAAAQABwAWAAEAAAAAAAUACwAdAAEAAAAAAAYABwAoAAEAAAAAAAoALAA
975
vAAEAAAAAAAsAEgBbAAMAAQQJAAAAAgBtAAMAAQQJAAEADgBvAAMAAQQJAAIADgB9AAMAAQQJAAMADgCLAAMAAQ
QJAAQADgCZAAMAAQQJAAUAFgCnAAMAAQQJAAYADgC9AAMAAQQJAAoAWADLAAMAAQQJAAsAJAEjIGUtaWNvbnNSZ
Wd1bGFyZS1pY29uc2UtaWNvbnNWZXJzaW9uIDEuMGUtaWNvbnNGb250IGdlbmVyYXRlZCB1c2luZyBTeW5jZnVz
aW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgAGUALQBpAGMAbwBuAHMAUgBlAGcAdQBsAGEAcgB
lAC0AaQBjAG8AbgBzAGUALQBpAGMAbwBuAHMAVgBlAHIAcwBpAG8AbgAgADEALgAwAGUALQBpAGMAbwBuAHMARg
BvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZ
QB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAA
AAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQAHdHdpdHRlcgx0d2l
0dGVyLWJpcmQFdmltZW8IeW91dHViZTEId2hhdHNhcHAIc2t5cGUtMDEGcmVkZGl0CWluc3RhZ3JhbQtnb29nbG
UtcGx1cwhmYWNlYm9vawZ0dW1ibHIAAA==) format('truetype');
font-style: normal;
}
/* csslint ignore:end */
#element {
display: block;
max-width: 400px;
margin: auto;
border-radius: 3px;
cursor: pointer;
}
.media {
font-size: 17px;
}
.icon {
margin: 4px 28px 0 -12px;
color: black;
color: rgba(0, 0, 0, .57);
line-height: 1.9;
font-size: 12px;
height: 20px;
width: 20px;
}
.twitter:before {
content: "\e700";
margin: 8px
}
.vimeo:before {
content: "\e702";
margin: 8px
}
.youtube:before {
976
content: "\e703";
margin: 8px
}
.skype:before {
content: "\e706";
margin: 8px
}
.instagram:before {
content: "\e708";
margin: 8px
}
.google-plus:before {
content: "\e709";
margin: 8px
}
.facebook:before {
content: "\e70a";
margin: 8px
}
.tumblr:before {
content: "\e70b";
margin: 8px
}
</style>
using System;
using System.Linq;
{
{
public IActionResult customizetemplate()
{
listdata.Add(new {css= "facebook", socialMedia= "Facebook", id= "media1" })
;
listdata.Add(new { css= "twitter", socialMedia= "Twitter", id= "media2" });
977
listdata.Add(new { css= "tumblr", socialMedia= "Tumblr", id= "media4" });
listdata.Add(new { css= "google-plus", socialMedia= "Google Plus", id= "med
ia5" });
listdata.Add(new { css= "skype", socialMedia= "Skype", id= "media6" });
listdata.Add(new { css= "vimeo", socialMedia= "Vimeo", id= "media7" });
listdata.Add(new { css= "instagram", socialMedia= "Instagram", id= "media8"
});
listdata.Add(new { css= "youtube", socialMedia= "YouTube", id= "media9" });
return View();
}
}
}
Group template
The ListView has an option to custom design the group header title with the help of
groupTemplate property.
This template is common for both the inline and floating group header template.
The group template concepts are illustrated in the following example.
view
grouptemplate.cs
<ejs-listview id="element" dataSource="ViewBag.dataSource" showHeader="true" headerT

itle="Social Media"
groupTemplate="<span class='group icon'><span>${socialMedia}</span></sp
an>"
template="<span class='${css} icon'><span class='media'>${socialMedia}<
/span></span>">
<e-listview-fieldsettings groupBy="category" text="socialMedia">
</ejs-listview>
}
<style>
@font-face {
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT
1MvMj0gSR4AAAEoAAAAVmNtYXDOVM6ZAAABsAAAAFJnbHlm7gIZ8wAAAiAAAA1YaGVhZA0acjMAAADQAAAANmho
978
ZWEHmQN1AAAArAAAACRobXR4LvgAAAAAAYAAAAAwbG9jYRUsEYgAAAIEAAAAGm1heHABIQEoAAABCAAAACBuYW1
lc0cOBgAAD3gAAAIlcG9zdEs6jNMAABGgAAAAoAABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAADA
ABAAAAAQAAgbXF1F8PPPUACwPoAAAAANUJFrEAAAAA1QkWsQAAAAAD6gPsAAAACAACAAAAAAAAAAEAAAAMARwAC
wAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPqAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnCwNS/2oAWgPsAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAPoAAA
D6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA+AAAABgAEAAEAAucE5w
v//wAA5wDnBv//AAAAAAABAAYADgAAAAEAAgADAAQABQAGAAcACAAJAAoACwAAAAAAAAAsAH4AvgHgAqYDJgS2B
ZIGOgZyBqwAAAABAAAAAAMwA+oAHAAAEwYVERQWOwE+ATQmKwEiJj0BITI2NCYjITU0JgbbH7mC0Cw+PizQLDwB
KSg5OSn+2D5XA8YkNf4LmtwBSWdKSDNYRV9EtjNKAQAAAQAAAAAD6gNGADIAAAEUFy4BJwYHHgEXJicVHgEXBiM
iJx4BFw4BIyInHgEzJAA3NCc2NwYHPgE3BgcuASMOAQHqBYHZTRsBATEqMyoBW0gaHBQSFGdENYFIGRhEn1cBHA
ErAQE9KTc+IC4MPEYdTSxXdAKdFBMGXU4mLy1JFwITAj9aDQYDM0ECIiYCJCgJASixCwskNBUGEDAeHgwZHQJfA
AABAAAAAAPqA9MAJwAAATYzMhUUBwYHBiMmJyYvASYjIgcGDwEXNjMyFxMWNzITEj8BJicjBgI/JyJEAQQ/Px8o
IgcJGBlpBwYzYZMwQwszLVI7WI7LxgYBAZELyQLSEUkKCzZxbQGoGT+ksgEHXZBCM7H+ubMBASQBF6IavgUBAAs
AAAAAA+oDjwAKABcAMgBaAGsAcwCMAJkAsgDLANQAAAEGFQczNzQmKwEiJwYdARQWMjY9ATQmIicXFAYXFjY3Ni
Y9ATMVJzcOAiImLwEmNjUnJRYXHgEXHgEdASMVFBY7ATI2PQEzFhcUBwYHIyYnJj0BNDY3NjcyNycVNjMyFxYdA
RQOASYnDwERIxUjFSMRIzU3DgIdARQeAjMhMj4CPQE0LgIjISIlFh0BFAYiJj0BNDYyFxUUHgEXHgEzMjc2Nwcz
NSMVFAYiJj0BIwcOAQcVFBYXHgEyNz4BNzY9ATQmJy4BIyIHFTM1NyMHJyMDGAkBQgETDQMN3gkTGBITF/ABAQE
IHQMEAkU5AgYaHyAZAQMCAgICHQsKFR4DAwJ3EAwKDBE0AgEUGyMHHxwfEhQQFQgI9CAYDgogEh4sHAU50FNFRy
AeLBsbLDwhAqAiPCwaGi07Iv1gIQF7CRMYEhIYewMCAwcVEQ8MCQsBTDwPFg1BvhQQAQsJCScxEhAbAgQJCQwlH
B/TSVZQLS5QAWIGCBsbCQsEBQd/BwoKB38HChSJDREDEAkIAhAPiNkBGwcOCAwKEwUWD4cNAQEEEg8IIBEeNAkK
CgkYCQgYDxQCARESKkQeIgoIAwE/VREEDiBxFB8OCBESAgEjJ/4BACVICBwnFvEWJh0QEB0mFvEWJxwR8QYKdwo
NDgl3Cg17GAkKCgQKCgUGCxLgrgcKCgeuAgkoHjseHwkLCgYFHQwOHzoXGgoODEOsrJNubgAAAAAEAAAAAAPnA+
wANABLAGIAfAAAATIWFxYXFgcOAQcGFxYXFhcWNzY3NhcWFxYXFhcUBw4BIyYnLgEnLgEnJicmNjc2Nz4BMzI3D
gEHBhcWDwE3Njc2FxY3PgEnLgEnIgUWAgcGJyYnJg8BNzYnJjc+ATc2Mx4BJQQDBhYXFgcGDwE3NhcWNzY3Nicu
AScmIyYBfxYMBQ8QCQ8HDAYNCh8sHB0LCQ8RCg00NAQBAgEBCTQYHx8uTyMnOw8KAwIMDAUFCRIKBTWFqwcGYAY
DJQhBQQgHpaZ7eBkf0YsiAcwwXoCMpjc0Dg7XNQMHYAgKooZIR47k/cv++w0DLS0EARISGfkKCnh/q26JJh7hnB
cXZQLlCBInJhQPBg8GCgwxJhcWCAoQDgoFExUCBRQVAgMWJAEHDTEgIlIxJSYSHg0GBQgNpxvEh5ZzCAmEAxkaA
gJQSTnphY2nAeyV/uhYXRUHFQYGVNYKCIKhjdUuFwKgjX/+3k6NPwcHSkpiYgQELxYdhqnXmdARAgIAAAACAAAA
AAPjA+oAPABYAAABHgIUBiMiJicuASMiBhUUHgIXHgMVFA4BIyInLgE1NDYzMhYXHgIzMjY1NC4BJy4CNTQ+ATM
yBRQXBhUWABcyNxYXPgE3NCc2NSYAJwYHJicOAQJmLz4dJh0aHA8RMTYzPBMlJy06XUQmQn1VZUMwPCceGCILDR
wzKzpHJT82SmQ9QHZPQP3SJQkFAQnILCo6R3SZAxwLBf72xyonQFF0mgMuDzA3NCgYGiIkJxoQGBILCgweLEQxO
l00IxpWKholHRodJRkxIxsjFAsQK0w4NVMsYk09LjHI/vcFCCABA5p0QjcxNMgBCQYBBigBApoACAAAAAAD6gPT
ACUAPwBTAGEAcgCfALIBGwAAASMGBwYVFBYXFjsBMjY/AT4BNzY3NjQnJicmIgcGByInJi8BJiIlBgcGFRQXFRY
XFjMyNzM2NzY1NCcmJyYjIgUOAQcGHQEUFhcWMzI2PQE0JiMiJRYXFhUUBwYHLgEnNjIhMzIfAQ4BByYnJj0BNj
c2NyUWHwEeARceAR0BFAcGBwYHDgEHBisBIiYvAiYvATUjJyYnJjU0PgE3NjMyATIXFh0BDgErASImPQE0Njc2M
ycjBgcmIyIHIw4BBw4BFQ4BDwEuASsBIg4CFRYXFhcGDwEUFhceARceATMyNjc+ATc2NTQvAT4BPQEuAScjJiMm
BwYHJiMnLgEnNDY3NjczHgEXFQYWFxYXMxY3PgE3NjU0JicjJiMmAU4BCAcDBwhHVgkpTiQLBQ0EBgIBAwQICg4
IRFA8NAcLDAcIASYSCwwBBBISGAcKAhAQCwQFEhEUCv7IERkFAxgTCQsYKCgYCAI1EgkGBwcJDikZDyX9DgUJCB
EaKQ4IBgkCEhUXAbAfHSc0XCAPEgIJGRYiNHc/CgsVP3o1CQkmHgMEBxMIBUJbM01VHQEkFQ4SAiAVAxUhGBIFC
SoCJRQzMhMTAhkoDQ8KPXs2DRIsGgwZKyMVAhURHwEBARIRH2E1NGw4JUklRH0sMgECHSgDOSYBEg8qIAYKAwIC
NXY+BwwOIwwWKRUBEg4eLA4sIhAUAwEpHgITGhQBFwMLBwwJEgQ4FBQGAwgGCAgDCgkLBQYELwEcAwwGA94HExE
YCQQCGw0RBAQVExgLDBYPDAEEGhQEBgoZJgYFKR4FHCldDBQQDhMPDQkkOhoJAwYaOiMHDgwTBRwUFAMmBAcNEU
IzGjsfEwgILCgkHiotBgEfIwYFHiQFBgsgJBMZQWZEERwBARISGwMZIyIaAxghBAI8EiUZBQcmGyBGIwUhJAcQE
xcqMx0nJB4VCAgRJEggPFAZGBgMCRRRQkpbCQkREUQqCDBIDAUBGgQJAwIjIwQcOBcjBQEOCQUbLBEmBAEjECsa
BQkoRA4KAQAFAAAAAAPpA+oAEAAsADgATQCTAAABDgEHJi8BLgE1PgE3NjMeASUUFR4BFyE+ATcRNCYjIRYOAiY
nJjcnBiciBgUeARc+ATcuAScOAQEyFhUWBxQHBgcGJyImJzU2NzY3MyUWFRQGIyImNTc0Jg4BFRYVBhcWJwYmNz
U3NCcmBgcVFgYjIiY1NDUjBgcGFhUUFjchFjc+ARcWNyEyNjU0NicuASchJgYChwJTPDIlAxkdAkU1Cgs/UP1/A
25SAl5RbgMFBv7oOhuBp5YeLEoFiYkHAwEsA25TVW8BAm5TVHACOw4RAQEBBxc1NA4RAQEKCA01/c8BCBUHBQEI
CwoBAQEBDBUKAQEDBhQBAQkTBwUERQkDAQcEASgIB0zCTgkMAScEBQECCGxK/ewHBQHuO1EBAR0CFD0kNU0JAQJ
979
STNvbUW4DA25QAbcHBVy1dxFbUX1vAQEBB45TbgICb1NUbgICbwFSEQ42NgUFFAEBAREOaxEIBwFGZ2gUCQYH4Q
gDAQEJOzs2NwwBAQoWyQUDAgINB8QUCAUHY2MzVSRIJAcCAQEGRgJFCQECBiNIJElkAgEGAAAAAAYAAAAAA+oD6
gAPABsALQBcAGYAbgAAAQ4BBx4BFz4BNTQmLwEiBiUVMxUjFSM1IzUzNSUOARUUFhcyNjc+ATU0JiciBjcHIx4B
Fw4BBw4BFBYfAR4BFxQGBy4BNSY2Nz4BNy4BNTQ2NwYjLgE1NDY3PgEXAR4BFyE+ATcRITchLgEnIQ4BAQEPMAM
BSD43OSgrEgYxAepzc05zc/5ACQgvMQ8bCg0GMS8QHPkxLw8lAgEmGQgNDQcbGiUBZmNTUQEbISVRHAkOBAQNDD
1CGBkhSCD+pgNvUgJgU28C/BgBA+cGbVH9oFBtAUEEIigpMgEBLSQbKx0BBNRzTnNzTnNnDB0PKVkEDAkOHgssW
wQOJxkMMSopMRIHEhgPBRUUMCY3VQIBPywVMhUUDQEKGBEKDQcCAkcuGjUVGhEB/hBTbgMDblMCPitQagEBagAA
AAEAAAAAA+UD6gAjAAATER4BFyERIzUzNT4BNzMVIyIGHQEzFSMRIT4BNxEuASchDgEIAR0VAcpvbwJXQo1BGSF
7ewEAFR0BAR0V/IkVHQOx/IsZIAEBm4ZQQlkChiEZLYb+ZQEgGQN1GSABASAAAAACAAAAAAPlA+oAEgAiAAABFT
MVIxEGFjcVBgQnESM1FjY3JREeARchPgE3ES4BIyEiBgIRy8sGQ5oW/sQjbgmIEv5gATAkAzMkMAEBMCT8zSQwA
4TRfv70ClIzeQsYfAFUawJjhBH8wyUwAQEwJQM9JTAwAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEABwABAAEA
AAAAAAIABwAIAAEAAAAAAAMABwAPAAEAAAAAAAQABwAWAAEAAAAAAAUACwAdAAEAAAAAAAYABwAoAAEAAAAAAAo
ALAAvAAEAAAAAAAsAEgBbAAMAAQQJAAAAAgBtAAMAAQQJAAEADgBvAAMAAQQJAAIADgB9AAMAAQQJAAMADgCLAA
MAAQQJAAQADgCZAAMAAQQJAAUAFgCnAAMAAQQJAAYADgC9AAMAAQQJAAoAWADLAAMAAQQJAAsAJAEjIGUtaWNvb
nNSZWd1bGFyZS1pY29uc2UtaWNvbnNWZXJzaW9uIDEuMGUtaWNvbnNGb250IGdlbmVyYXRlZCB1c2luZyBTeW5j
ZnVzaW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgAGUALQBpAGMAbwBuAHMAUgBlAGcAdQBsAGE
AcgBlAC0AaQBjAG8AbgBzAGUALQBpAGMAbwBuAHMAVgBlAHIAcwBpAG8AbgAgADEALgAwAGUALQBpAGMAbwBuAH
MARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgA
E0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIA
AAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQAHdHdpdHRlcgx
0d2l0dGVyLWJpcmQFdmltZW8IeW91dHViZTEId2hhdHNhcHAIc2t5cGUtMDEGcmVkZGl0CWluc3RhZ3JhbQtnb2
9nbGUtcGx1cwhmYWNlYm9vawZ0dW1ibHIAAA==) format('truetype');
font-style: normal;
}
#element {
display: block;
max-width: 400px;
margin: auto;
border-radius: 3px;
cursor: pointer;
}
.e-list-group-item .group {
font-size: 25px;
line-height: 32px;
margin-left: -5px;
}
.text {
margin: 437px;
line-height: 2;
}
.media {
font-size: 17px;
}
980
.icon {
margin: 4px 28px 0 -12px;
color: black;
color: rgba(0, 0, 0, .57);
line-height: 1.9;
font-size: 12px;
height: 20px;
width: 20px;
}
.twitter:before {
content: "\e700";
margin: 8px
}
.youtube:before {
content: "\e703";
margin: 8px
}
.instagram:before {
content: "\e708";
margin: 8px
}
.facebook:before {
content: "\e70a";
margin: 8px
}
.tumblr:before {
content: "\e70b";
margin: 8px
}
</style>
using System;
using System.Linq;
{
981
{
public IActionResult grouptemplate()
{
listdata.Add(new {css= "facebook", socialMedia= "Facebook", category = "F"
});
listdata.Add(new { css= "twitter", socialMedia= "Twitter", category = "T" }
);
listdata.Add(new { css= "tumblr", socialMedia= "Tumblr", category = "T" });
listdata.Add(new { css= "instagram", socialMedia= "Instagram", category = "

I" });
return View();
}
}
}
982
UI Virtualization
UI virtualization loads only viewable list items in a view port, which will improve the ListView
performance while loading a large number of data.
Getting started
UI virtualization can be enabled in the ListView by setting the enableVirtualization property to
true.
It has two types of scrollers as follows:
Window scroll: This scroller is used in the ListView by default.
Container scroll: This scroller is used, when the height property of the ListView is set.
view
virtualization.cs
<ejs-listview id="ui-list" dataSource="ViewBag.listData" enableVirtualization="true"
>
</ejs-listview>
}
<style>
#ui-list {
display: block;
max-width: 400px;
margin: auto;
border-radius: 3px;
cursor: pointer;
}
</style>
using System;
using System.Linq;
{
983
{
{
List<object> listData = new List<object>();
listData.Add(new { listData = "Nancy", id = "0" });
listData.Add(new { listData = "Andrew", id = "1" });
listData.Add(new { listData = "Janet", id = "2" });
listData.Add(new { listData = "Margaret", id = "3" });
listData.Add(new { listData = "Steven", id = "4" });
listData.Add(new { text = "Laura", id = "5" });
listData.Add(new { text = "Robert", id = "6" });
listData.Add(new { text = "Michael", id = "7" });
listData.Add(new { text = "Albert", id = "8" });
listData.Add(new { text = "Nolan", id = "9" });
for (int i = 10; i < 1000; i++)

{
int index = new Random().Next(0, 10);
listData.Add(new
{
text = listData[index].GetType().GetProperty("text").GetValue(l
istData[index], null).ToString(),
id = i.ToString()
});
}
ViewBag.listData = listData;
return View();
}
}
}
We can use template property to customize list items in UI virtualization.
view
virtualization.cs
@{ var template = "<div class='list-container'><div id='icon' class=\"${$imgUrl ? \'
img\' : $icon }\">" +
"<span class=\"${$imgUrl ? \'hideUI\' : \'showUI\' }\">" +
"${icon}</span> <img class=\"${$imgUrl ? \'showUI\' : \'hideUI\' }\" width =
45 height = 45 src=\"${$imgUrl ? $imgUrl : \' \' }\" />" +
"</div><div class='text'>${text}</div></div>";
}
showHeader="true" headerTitle="Contacts" height=500 template=@template >
984
</ejs-listview>
}
<style>
#ui-list {
display: block;
max-width: 400px;
margin: auto;
border-radius: 3px;
cursor: pointer;
}
button {
float: right
}
#icon {
width: 45px;
height: 45px;
text-align: center;
line-height: 45px;
border-radius: 50%;
font-size: 20px;
font-weight: 500;
float: left;
margin-top: 17px;
margin-right: 35px;
}
img {
border-radius: 50%;
border: #ddd;
}
.R {
background: purple;
}
.M {
background: pink;
}
.A {
background: green;
}
.S {
background: lightskyblue;
985
}
.J {
background: orange;
}
.N {
background: blue;
}
#ui-list .e-list-item {
height: 80px;
border: #ddd;
}
.list-container {
width: inherit;
height: 100%;
.showUI {
display: inline;
}
.hideUI {
display: none;
}
.content {
height: 100%;
float: left;
}
.name {
height: 100%;
font-size: 20px;
font-weight: 600;
line-height: 78px;
}
</style>
using System;
using System.Linq;
986
{
{
{
listData.Add(new { text = "Nancy", imgUrl = "", icon = "N", id = "0" });
listData.Add(new { text = "Andrew", imgUrl = "", icon = "A", id = "1" });
listData.Add(new { text = "Janet", imgUrl = "", icon = "J", id = "2" });
listData.Add(new { text = "Margaret", icon = "", imgUrl = "./margaret.png",
id = "3" });
listData.Add(new { text = "Steven", imgUrl = "", icon = "S", id = "4" });
listData.Add(new { text = "Laura", icon = "", imgUrl = "./images/laura.png"
, id = "5" });
listData.Add(new { text = "Robert", imgUrl = "", icon = "R", id = "6" });
listData.Add(new { text = "Michael", imgUrl = "", icon = "M", id = "7" });
listData.Add(new { text = "Albert", icon = "", imgUrl = "./images/albert.pn
g", id = "8" });
listData.Add(new { text = "Nolan", imgUrl = "", icon = "N", id = "9" });
for (int i = 10; i < 1000; i++)

{
listData.Add(new
{
text = commonData[index].GetType().GetProperty("text").GetValue
(commonData[index], null).ToString(),
icon = commonData[index].GetType().GetProperty("icon").GetValue
(commonData[index], null).ToString(),
imgUrl = commonData[index].GetType().GetProperty("imgUrl").GetV
alue(commonData[index], null).ToString(),
id = i.ToString()
});
}
return View();
}
}
}
Conditional rendering
987
The following conditional rendering support is provided for the template and groupTemplate.
Name Syntax
<div class="${ $id % 2 === 0 ? 'even-list' : 'odd-list'}">
conditional class </div>
<div id="${ $id % 2 === 0 ? 'even-list' : 'odd-list'}">

conditional attribute </div>
conditional text <div>${ $id % 2 === 0 ? 'even-list' : 'odd-list'}</div>

content
In the following sample, the light blue is applied for the even list and light coral is applied for the
odd list based on the conditional class.
view
virtualization.cs
@{ var template = "<div id='list-container' class=\"${ $id % 2 === 0 ? \'even-list\
' : \'odd-list\' }\" > ${text} </div>"; }

height=500 template=@template >
</ejs-listview>
}
<style>
#ui-list {
display: block;
max-width: 400px;
margin: auto;
border-radius: 3px;
cursor: pointer;
}
#list-container{
height: inherit;
width: inherit;
padding-left: 30px;
}
#ui-list .e-list-item{
padding: 0;
}
#ui-list .even-list{
background-color: #cfd8dc;
}
988
#ui-list .odd-list{
background-color: #eceff1;
}
</style>
using System;
using System.Linq;
{
{
{
listData.Add(new { listData = "Nancy", id = "0" });
listData.Add(new { listData = "Andrew", id = "1" });
listData.Add(new { listData = "Janet", id = "2" });
listData.Add(new { listData = "Margaret", id = "3" });
listData.Add(new { listData = "Steven", id = "4" });
listData.Add(new { text = "Laura", id = "5" });
listData.Add(new { text = "Robert", id = "6" });
listData.Add(new { text = "Michael", id = "7" });
listData.Add(new { text = "Albert", id = "8" });
listData.Add(new { text = "Nolan", id = "9" });
for (int i = 10; i < 1000; i++)

{
listData.Add(new
{
text = listData[index].GetType().GetProperty("text").GetValue(l
istData[index], null).ToString(),
id = i.ToString()
});
}
return View();
}
}
}
989
Accessibility
The following key shortcuts are used to access the ListView component without any interruption.
Arrow Up Move to the previous list item.
Arrow Down Move to the next list item.
Select Select the targeted list from the whole list.
Back Get back to the previous lists if it is in nested list.
view
accessibility.cs
<ejs-listview id="listview" dataSource="ViewBag.dataSource" showHeader="true" header
Title="Continent">
<e-listview-fieldsettings tooltip="text">
</ejs-listview>
}
<style>
#listview {
display: block;
max-width: 400px;
margin: auto;
border-radius: 3px;
}
</style>
using System;
using System.Linq;
{
{
990
public IActionResult accessibility()
{
listdata.Add(new
{
text = "Asia",
id = "01",
child = new List<object>() { new { text = "India", id = "1", category =
"Asia",
new { id= "1001", text= "Delhi", category= "India" },
new {text= "Kashmir", id= "1002", category= "India"},
new { text= "Goa",id= "1003", category= "India" }
}
},
new { text = "China",id = "2",category = "Asia",
new { text = "Zhejiang", id = "2001", category = "China" },
new {text= "Hunan",id= "2002", category= "China"},
new { text= "Shandong", id= "2003",category= "China"}
}
}
}
});
listdata.Add(new
{
text = "North America",
id = "02",
child = new List<object>() { new { text = "USA", id = "3", category = "
North America",
new {text= "California", id= "3001", category= "USA"},
new { text= "New York",id= "3002", category= "USA" },
new { text= "Florida",id= "3003", category= "USA" }
}
},
new { text = "Canada",id = "4",category = "North America",
new { text = "Ontario", id = "4001", category = "Canada" },
new {text= "Alberta",id= "4002", category= "Canada"},
new { text= "Manitoba", id= "4003",category= "Canada"}
}
}
}
});
listdata.Add(new
{
991
text = "Europe",
id = "03",
child = new List<object>() { new { text = "Germany", id = "5", category
= "Europe",
new {text= "Berlin", id= "5001", category= "Germany"},
new { text= "Bavaria",id= "5002", category= "Germany" },
new { text= "Hesse",id= "5003", category= "Germany" }
}
},
new { text = "France",id = "6",category = "Europe",
new { text = "Paris", id = "6001", category = "France" },
new {text= "Lyon",id= "6002", category= "France"},
new { text= "Marseille", id= "6003",category= "France"}
}
}
}
});
listdata.Add(new
{
text = "Australia",
id = "04",
child = new List<object>() { new { text = "Australia", id = "7", catego
ry = "Australia",
new {text= "Sydney", id= "7001", category= "Australia"},
new { text= "Melbourne",id= "7002", category= "Australia" },
new { text= "Brisbane",id= "7003", category= "Australia" }
}
},
new { text = "New Zealand",id = "8",category = "Australia",
new { text = "Milford Sound", id = "8001", category = "New Ze
aland" },
new {text= "Tongariro National Park",id= "8002", category=
"New Zealand"},
new { text= "Fiordland National Park", id= "8003",category=
"New Zealand"}
}
},
}
});
listdata.Add(new
{
text = "Africa",
992
id = "05",
child = new List<object>() { new { text = "Morocco", id = "9", category
= "Africa",
new {text= "Rabat", id= "9001", category= "Morocco"},
new { text= "Toubkal",id= "9002", category= "Morocco" },
new { text= "Todgha Gorge",id= "9003", category= "Morocco" }
}
},
new { text = "South Africa",id = "10",category = "Africa",
new { text = "Cape Town", id = "10001", category = "South Afr
ica" },
new {text= "Pretoria",id= "10002", category= "South Africa"
},
new { text= "Bloemfontein", id= "10003",category= "South Afr
ica"}
}
},
}
});
return View();
}
}
}
ARIA attributes
The following ARIA attributes are applicable for ListView component based on its state.
aria-selected It indicates the selected list from the whole list.
aria-level It defines the hierarchical structure of a list item.
993
Overview
The MaskedTextBox allows the user to enter the valid input based on the provided mask only.
Key features
Custom Characters: Allows to use your own characters as the mask elements.
Regular Expression: Uses as a mask element for each character of the MaskedTextBox.
Accessibility: Provides built-in accessibility support that helps to access all the
MaskedTextBox component features through the keyboard, on-screen readers, or other
assistive technology devices.
994
Getting Started
This section briefly explains about how to include a simple MaskedTextBox in your ASP.NET
Core application. You can refer ASP.NET Core Getting Started documentation page for
introduction part part of the system requirements and configure the common specifications.

Now open your view page to render MaskedTextBox component.
view
demo.cs
<ejs-maskedtextbox id="mask1" ></ejs-maskedtextbox>
public ActionResult Demo()

{
return View();
}
Set the mask

You can set the mask to the MaskedTextBox to validate the user input by using the mask
property. To know more about the usage of mask and configuration, refer to this link.
The following example demonstrates the usage of mask element 0 that allows any single digit
from 0 to 9 .
view
mask.cs
<ejs-maskedtextbox id="mask1" mask="000-000-0000" placeholder="MaskedTextBox" floatLabe

lType="Always" ></ejs-maskedtextbox>
995
public ActionResult Mask()
{
return View();
}
996
Mask Configuration
The mask is a combination of standard and custom mask elements that validates the user input
based on its behavior.
When the mask value is empty, the MaskedTextBox behaves as an input element with text
type.
Standard mask elements

The following table shows the list of mask elements and its behavior based on MSDN standard.
The mask can be formed by combining any one or more of these mask elements.
Mask Element Description
0 Digit required. This element will accept any single digit from 0 to 9.
9 Digit or space, optional.
# Digit or space, optional, Plus(+) and minus(-) signs are allowed.
L Letter required. It will accept letters a-z and A-Z.
? Letter or space, optional.
& Requires a character.
C Character or space, optional.
A Alphanumeric (A-Za-z0-9) required.
a Alphanumeric (A-Za-z0-9) or space, optional.
< Shift down. Converts all characters to lower case.
> Shift up. Converts all characters to upper case.
| Disable a previous shift up or shift down.
\\ Escapes a mask character, turning it into a literal.
All other Literals. All non-mask elements (literals) will appear as themselves within
characters MaskedTextBox.
The following example demonstrates the usage of standard mask elements.
view
standardmasks.cs
// sets mask with the mask element '#' which accepts any single digit from '0' to '9',
997
space, + and - signs
<ejs-maskedtextbox id="mask1" mask= "#####" placeholder: "Mask ##### (ex: 012+-)" floa
tLabelType: "Always"></ejs-maskedtextbox>
// sets mask format with the mask element 'L' which allows only alphabets('A-Z and a-z'
)
<ejs-maskedtextbox id="mask2" mask= "LLLLLL" placeholder= "Mask LLLLLL (ex: Sample)" f
loatLabelType= "Always"></ejs-maskedtextbox>
// sets mask format with the mask element '&' which allows àlphabets`, `numbers` and `
special characters`
<ejs-maskedtextbox id="mask3" mask="&&&&&" placeholder="Mask &&&&& (ex: A12@#)" floatL
abelType= "Always"></ejs-maskedtextbox>
// sets mask format with the mask element `>` which converts all characters that follow
to upper case and `<` which converts all characters that follow to lower case
<ejs-maskedtextbox id="mask4" mask=">LLL<LLL" placeholder="Mask >LLL<LL (ex: SAMple)"
floatLabelType="Always"></ejs-maskedtextbox>
// sets mask format with the mask element '\\' which turns mask element À` into a lite
ral and it displays the alphabet À`
<ejs-maskedtextbox id="mask5" mask="\\A999" placeholder="Mask \\A999 (ex: A321)"
floatLabelType="Always"></ejs-maskedtextbox>
public ActionResult standardMasks()

{
return View();
}
Custom mask elements

Other than the above standard mask elements, the mask can be configured with the custom
characters or regular expression to define a custom behavior.
Custom characters
You can define any of the non-mask element as the mask element and its behavior through the
customCharacters property.
In the following example, non-mask element P accepts the values P, A, p, a , and M

accepts the values M, m as mentioned in the custom characters collection.
view
998
custom-mask.cs
<ejs-maskedtextbox id="mask" mask="00:00 >PM" customCharacters= "ViewBag.cusObj" placeh

older="Time (ex: 10:00 PM, 10:00 AM)" floatLabelType="Always"></ejs-maskedtextbox>
namespace EJ2CoreSampleBrowser.Controllers.MaskedTextbox
{
public partial class MaskedTextboxController : Controller
{
public IActionResult CustomMask()

{
CustomCharacters customObj = new CustomCharacters();
customObj.P = "P,A,a,p";
customObj.M = "M,m";
ViewBag.cusObj = customObj;
return View();
}
}
}
public class CustomCharacters
{
public string P { get; set; }
public string M { get; set; }
}
Regular expression
Instead of the mask element, you can define your own regular expression to validate the input of
a particular input place. The regular expressions should be wrapped by the square brackets (e.g.,
[ Regex ]).
In the following example, regular expression has been set for each input places.
view
regularExpression.cs
<div class="content-wrapper">
<form id="form-element" class="form-horizontal">
999
<div class="control-label">IP Address (ex: 212.212.111.222)</div>
<ejs-maskedtextbox id="mask1" name="mask_value" mask="[0-2][0-9][0-9].[
0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9]" floatLabelType="Never" created="onCreat
e"></ejs-maskedtextbox>
</div>
</form>
</div>
<script>
var customFn = function (args) {
var mask = document.getElementById('mask1').ej2_instances[0];
var maskValue =mask.element.value;
var splitedValues = maskValue.split('.');
var returnedvalue = true;
if (mask.value.length != 0) {
for (var i = 0; i < splitedValues.length; i++) {
if (parseInt(splitedValues[i]) > 255) {
returnedvalue = false;
}
}
return returnedvalue;
}
else {
return true;
};
};
//value is returned based on the length of mask
var custom = function (args) {
var mask = document.getElementById('mask1').ej2_instances[0];
var dateValue = mask.element.value;
var date = new Date(dateValue);
if (mask.value.length == 0 && date.toString() !== "Invalid IP Address")
{
return 0;
}
else {
return mask.value.length;
}
};
// sets required property in the FormValidator rules collection

var options = {
rules: {
'mask_value': { numberValue: [customFn, 'Enter a valid IP address']
},
},
}
// defines FormValidator to validate the MaskedTextBox
1000
//FormValidator rule is added for empty MaskedTextBox
formObject.addRules('mask_value', { maxLength: [custom, 'IP address is requ
ired'] });
// places error label outside the MaskedTextBox using the customPlacement e

vent of FormValidator
formObject.customPlacement = function (element, errorElement) {
{
element.parentNode.parentNode.appendChild(errorElement);
};
}
function onCreate() {
document.getElementById(this.element.id).setAttribute("name", "mask_val
ue");
}
</script>
}
<style>
.content-wrapper {
width: 50%;
margin: 0px auto;
margin-top: 20px;
min-width: 185px;
max-width: 400px;
}
.control-label {
padding-bottom: 10px;
font-size: 12px;
}
.e-mask.e-control-wrapper {
margin-bottom: 20px;
}
label.e-error {
margin-top: -1px;
}
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
1001
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
namespace EJ2CoreSampleBrowser.Controllers.MaskedTextbox
{
public partial class MaskedTextboxController : Controller
{
public IActionResult RegularExpression()

{
return View();
}
}
}
Prompt character
The Prompt character is a prompting symbol in the MaskedTextBox for the mask elements. The
symbol is used to show the input positions in the MaskedTextBox. You can customize the prompt
character of MaskedTextBox by using the promptChar property.
The following example demonstrates the MaskedTextBox with customized prompt character as
* .
view
prompt.cs
// sets the prompting symbol to the MaskedTextBox

<ejs-maskedtextbox id="mask" mask="999-999-9999" promptChar="#"></ejs-maskedtextbox>
public ActionResult prompt()

{
return View();
}
1002
1003
Accessibility
The MaskedTextBox is characterized with complete ARIA Accessibility support that helps to
access through the on-screen readers and other assistive technology devices. This component is
designed with the reference of the guidelines document given in WAI ARAI Accessibility
practices.
The MaskedTextBox uses the textbox role and following ARIA properties for its element based
on its state.
Property Functionality
aria-live The aria-live attribute indicates the priority of updates to a live region.
aria- The aria-disabled property indicates the disabled state of the

disabled MaskedTextBox.
aria- The aria-valuenow property specifies the current value of the

valuenow MaskedTextBox.
The aria-invalid property indicates that the user input is incorrect or not
aria-invalid
within the acceptable ranges.
aria- The aria-placeholder is a short hint to help the users with data entry when
placeholder the MaskedTextBox has no value.
aria- The aria-labelledby property indicates the floating label element of the
labelledby MaskedTextBox.
1004
How To
Perform custom validation on MaskedTextBox using

FormValidator
To perform custom validation on the MaskedTextBox use the FormValidator along with custom
validation rules.
In the following example, the MaskedTextBox is validated for invalid mobile number by adding
custom validation in the rules collection of the FormValidator.
view
howto.cs
<form id="form-element">
<ejs-maskedtextbox id="mask1" name="mask_value" mask="000-000-0000" placeholder="Mo
bile Number" floatLabelType="Always" ></ejs-maskedtextbox>
<ejs-button id="submit_btn" content="Button"></ejs-button>
</form>
<script>
// checks the length of mask value and returns corresponding boolean value
var customFn = function (args) {
var argsLength = args.element.ej2_instances[0].value.length;
if (argsLength != 0) {
return argsLength >= 10; }
else return true;
};
//if mask value length is 0, 0 is returned else the length is returned

var custom = function (args) {
var argsLength = args.element.ej2_instances[0].value.length;
if (argsLength == 0) {
return 0;
}
else {
return argsLength;
}
};
1005
var options = {
rules: {
'mask_value': { numberValue: [customFn, 'Enter valid mobile number'] },
},
};
// defines FormValidator to validate the MaskedTextBox
//FormValidator rule is added for empty MaskedTextBox

formObject.addRules('mask_value', { maxLength: [custom, 'Enter mobile number'] });
// places error label outside the MaskedTextBox using the customPlacement event of
FormValidator
formObject.customPlacement = function (element, errorElement) {

document.querySelector("#mask1").appendChild(errorElement);
};
document.getElementById("submit_btn").addEventListener('click', function () {
formObject.validate("mask_value");
var ele = document.getElementById('mask1');
// checks for incomplete value and alerts the formt submit
if (ele.value !== "" && ele.value.indexOf(mask.ej2_instances[0].promptChar)
=== -1) {
alert("Submitted");
}
});
</script>
public ActionResult howto()

{
return View();
}
Setting cursor position in MaskedTextBox

By default, on focusing the MaskedTextBox the entire mask gets selected. You can customize by
using any one of the following methods:
Setting cursor position at the start of the MaskedTextBox.

Setting cursor position at the end of the MaskedTextBox.
Setting cursor at the specified position in the MaskedTextBox.
1006
Following is an example that demonstrates the above cases to set cursor position in the
MaskedTextBox using focus event.
view
cursorPosition.cs
<ejs-maskedtextbox id="mask1" name="mask_value1" mask="00000-00000" value='93828-32
132' placeholder="Default cursor position" floatLabelType="Always"></ejs-maskedtextbox>
427' placeholder="Cursor positioned at start" floatLabelType="Always" focus="onfocus.bi
nd(this)"></ejs-maskedtextbox>
131' placeholder="Cursor positioned at end" floatLabelType="Always" focus="onfocus2.bin
d(this)"></ejs-maskedtextbox>
<ejs-maskedtextbox id="mask4" name="mask_value4" mask="+1 000-000-0000" value='234-
432-4324' placeholder="Cursor at specified position" floatLabelType="Always" focus="onf
ocus3.bind(this)"></ejs-maskedtextbox>
<script>
function onfocus(args) {
//sets cursor position at start of MaskedTextBox
args.selectionEnd= args.selectionStart;
}
function onfocus1(args) {
//sets cursor position at end of MaskedTextBox
args.selectionStart=args.selectionEnd;
}
function onfocus2(args) {
//sets cursor at specified position
args.selectionStart = 3;
args.selectionEnd = 3;
}
</script>
public ActionResult cursorPosition()

{
return View();
}
1007
Display numeric keypad in MaskedTextBox for mobile
devices
By default, on focusing the MaskedTextBox, alphanumeric keypad will be displayed on mobile
devices. Sometimes only numeric keypad for number values is needed, and this can be achieved
by setting "type" property to tel . Refer to the following example to enable numeric keypad in
MaskedTextBox.
view
numericKeypad.cs
<ejs-maskedtextbox id="mask1" name="mask_value" mask='00000' type="tel"></ejs-maske
dtextbox>
}
public ActionResult numericKeypad()

{
return View();
}
Change the appearance of MaskedTextBox

The appearance of the MaskedTextBox can be changed by adding custom cssClass to the
component and enabling styles. Refer to the following example to change the appearance of the
MaskedTextBox.
view
customCss.cs
<ejs-maskedtextbox id="mask1" name="mask_value1" mask="00000" value='42648' placeho
lder="Enter user ID" cssClass="e-style" floatLabelType="Always" created="oncreated.bind
(this)" focus="onfocus.bind(this)"></ejs-maskedtextbox>
<script>
function onfocus(args) {
//sets cursor position at start of MaskedTextBox
args.selectionEnd= args.selectionStart;
1008
}
</script>
<style>
.e-mask.e-style .e-control.e-maskedtextbox {
color: #00ffff ;
letter-spacing: 10px ;
font-size: xx-large ;
border: 1px ;
border-color: #ffffff ;
}
.e-control-wrapper.e-mask.e-float-input.e-style .e-float-line::before {
background: #ffffff ;
}
.e-control-wrapper.e-mask.e-float-input.e-style .e-float-line::after {
background: #ffffff ;
}
.e-control-wrapper.e-mask.e-float-input.e-style .e-float-text.e-label-top {
color: #00ffff ;
font-size: medium ;
}
</style>
public ActionResult customCss()

{
return View();
}
1009
Overview
The RadioButton is a graphical user interface element that allows you to select only one option
from the choices. It contains checked and unchecked states.
Key Features
Supports different states.
Supports label and its position.
1010
Getting Started
This section briefly explains about how to create a simple SplitButton in your ASP.NET Core
Add RadioButton to the project

To create simple RadioButton add the ejs-radiobutton tag with id attribute as element in your
Index.cshtml page.
view
default.cs
<ejs-radiobutton id="radio1" label="Option 1" name="default"></ejs-radiobutton>


{
return View();
}
Run the application

The following example shows a default rendering of RadioButton.
view
default.cs


{
return View();
1011
}
Change the RadioButton state

The Essential JS 2 RadioButton contains 2 states visually, they are as follows:
Checked
Unchecked
The RadioButton checked property is used to handle the checked and unchecked state. In the
checked state an inner circle will be added to the visualization of RadioButton.
view
state.cs
<ejs-radiobutton id="radio1" label="Option 1" name="state" checked="true"></ejs-radiobu

tton>
<ejs-radiobutton id="radio2" label="Option 2" name="state"></ejs-radiobutton>
public IActionResult state()

{
return View();
}
1012
Label and Size
This section explains the different sizes and labels.
Label
RadioButton caption can be defined by using the label property. This reduces the manual
addition of label for RadioButton. You can customize the label position before or after the
RadioButton through the labelPosition property.
view
label.cs
<ejs-radiobutton id="radio1" label="Left Side Label" name="position" labelPosition=
"before"></ejs-radiobutton>
<ejs-radiobutton id="radio2" label="Right Side Label" name="position"></ejs-radiobu
tton>
}
<style>
.e-radio-wrapper {
margin-top: 18px;
}
li {
list-style: none;
}
</style>
public ActionResult Label()

{
return View();
}
Size
1013
The different RadioButton sizes available are default and small. To reduce the size of the default
RadioButton to small, set the cssClass property to e-small .
view
size.cs
<ejs-radiobutton id="radio1" label="Small" name="size" checked="true" cssClass="e-s
mall"></ejs-radiobutton>
<ejs-radiobutton id="radio2" label="Default" name="size"></ejs-radiobutton>
}
<style>
.e-radio-wrapper {
margin-top: 18px;
}
li {
list-style: none;
}
</style>

{
return View();
}
1014
How To
Customize RadioButton Appearance

You can customize the appearance of the RadioButton component by using the CSS rules.
Define own CSS rules according to your requirement and assign the class name to the
cssClass property.
The background and border color of the RadioButton is customized through the custom classes
to create the primary, success, info, warning, and danger type of RadioButton.
view
custom.cs
<ejs-radiobutton id="radio1" label="Primary" name="custom" cssClass="e-primary"></e
js-radiobutton>
<ejs-radiobutton id="radio2" label="Success" name="custom" cssClass="e-success"></e
js-radiobutton>
<ejs-radiobutton id="radio3" label="Info" name="custom" checked="true" cssClass="e-
info"></ejs-radiobutton>
<ejs-radiobutton id="radio4" label="Warning" name="custom" cssClass="e-warning"></e
js-radiobutton>
<ejs-radiobutton id="radio5" label="Danger" name="custom" cssClass="e-danger"></ejs
-radiobutton>
}
<style>
.e-radio-wrapper {
margin-top: 18px;
}
li {
list-style: none;
}
.e-radio:checked + .e-success::after { /* csslint allow: adjoining-classes */

}
.e-radio:checked:focus + .e-success::after, .e-radio:checked + .e-success:hover::after

{ /* csslint allow: adjoining-classes */
background-color: #449d44;
}
1015
.e-radio:checked + .e-success::before {
border-color: #689f38;
}
.e-radio:checked:focus + .e-success::before, .e-radio:checked + .e-success:hover::before

border-color: #449d44;
}
.e-radio +.e-success:hover::before {
border-color: #b1afaf
}
.e-radio:checked + .e-info::after { /* csslint allow: adjoining-classes */
}
.e-radio:checked:focus + .e-info::after, .e-radio:checked + .e-info:hover::after { /* c

sslint allow: adjoining-classes */
background-color: #0b7dda;
}
.e-radio:checked + .e-info::before {
border-color: #2196f3;
}
.e-radio:checked:focus + .e-info::before, .e-radio:checked + .e-info:hover::before {

border-color: #0b7dda;
}
.e-radio + .e-info:hover::before {
}
.e-radio:checked + .e-warning::after { /* csslint allow: adjoining-classes */

background-color: #ef6c00;
}
.e-radio:checked:focus + .e-warning::after, .e-radio:checked + .e-warning:hover::after

background-color: #cc5c00;
}
.e-radio:checked + .e-warning::before {
border-color: #ef6c00;
}
.e-radio:checked:focus + .e-warning::before, .e-radio:checked + .e-warning:hover::before

{
1016
border-color: #cc5c00;
}
.e-radio + .e-warning:hover::before {
}
.e-radio:checked + .e-danger::after { /* csslint allow: adjoining-classes */

background-color: #d84315;
}
.e-radio:checked:focus + .e-danger::after, .e-radio:checked + .e-danger:hover::after {
/* csslint allow: adjoining-classes */
background-color: #ba330a;
}
.e-radio:checked + .e-danger::before {
border-color: #d84315;
}
.e-radio:checked:focus + .e-danger::before, .e-radio:checked + .e-danger:hover::before

{
border-color: #ba330a;
}
.e-radio + .e-danger:hover::before {
}
</style>
public ActionResult Custom()

{
return View();
}
Customize width and height

The following section explains about how to customize the height and width of the RadioButton
component.
view
customheight.cs
1017
<ejs-radiobutton id="radio1" label="Option 1" name="default" checked="true"></ejs-r
adiobutton>
}
<style>
.e-radio-wrapper {
margin-top: 18px;
}
li {
list-style: none;
}
.e-radio + label::before {
height: 30px;
width: 30px;
}
.e-radio + label::after {
height: 28px;
width: 28px;
}
.e-radio + label .e-ripple-container {

height: 40px;
left: -6px;
top: -5px;
width: 42px;
}
.e-radio + label .e-label {

font-size: 15px;
height: 32px;
line-height: 30px;
padding-left: 41px;
}
</style>
public ActionResult CustomHeight()

{
return View();
1018
}
Name and Value in form submit

The name attribute of the RadioButton is used to group RadioButton. When the RadioButton are
grouped in form, the checked items value attribute will be post to server on form submit that can
be retrieved through the name. The disabled RadioButton value will not be sent to the server on
form submit.
In the following code snippet, Credit and Debit card is in checked state. Now, the value that is in
checked state will be sent on form submit.
view
form.cs
<ejs-radiobutton id="radio1" label="Credit/Debit Card" name="payment" checked="tru
e"></ejs-radiobutton>
<ejs-radiobutton id="radio2" label="Net Banking" name="payment"></ejs-radiobutton>
<ejs-radiobutton id="radio3" label="Cash on Delivery" name="payment"></ejs-radiobut
ton>
<ejs-radiobutton id="radio4" label="Others" name="payment"></ejs-radiobutton>
<ejs-button id="primarybtn" content="Submit" isPrimary="true"></ejs-button>
}
<style>
.e-radio-wrapper {
margin-top: 18px;
}
button {
}
li {
list-style: none;
}
</style>
public ActionResult Form()

{
return View();
1019
}

RadioButton component can be enabled/disabled by giving disabled property. To disable
RadioButton component, the disabled property can be set as true .
view
disabled.cs
<ejs-radiobutton id="radio1" label="Option 1" name="default" checked="true"></ejs-
radiobutton>
<ejs-radiobutton id="radio2" label="Option 2" name="default" disabled="true"></ejs-
radiobutton>
}
<style>
.e-radio-wrapper {
margin-top: 18px;
}
li {
list-style: none;
}
</style>
public ActionResult Disabled()

{
return View();
}
Right-To-Left
RadioButton component has RTL support. This can be achieved by setting enableRtl as
true .
The following example illustrates how to enable right-to-left support in RadioButton component.
view
1020
rtl.cs
<ejs-radiobutton id="radio1" label="Default" name="default" enableRtl="true"></ejs-
radiobutton>
}
<style>
.e-radio-wrapper {
margin-top: 18px;
}
li {
list-style: none;
}
</style>
public ActionResult Rtl()

{
return View();
}
1021
Overview
The Chart control is used to visualize the data with user interactivity and provides customizing
options to configure the data visually. It can bind data from datasource such as array of JSON
objects , OData web services or DataManager . All chart elements are rendered using Scalable
Vector Graphics (SVG).
Key Features
Supports 16 interactive chart types starting from line series to stacking series.
Support to bind local and remote datasource.
Supports multiple axes, and able to plot data with different data types such as numbers,
datetime, logarithmic and string.
Supports interactive features like zooming, crosshair, trackball, tooltip and selection.
1022
Getting Started
System Requirements
Visual Studio 2017
DotNetCore 2.0

Application
components.
will open.
input box.
Adding TagHelpers
1023

Now open your view page to render our Syncfusion components.
<ejs-rangenavigator></ejs-rangenavigator>
Populate range navigator with data

Now, we are going to provide data to the range navigator. Add a series object to the range
navigator by using series property. Now map the field names x and y in the JSON data to the
xName and yName properties of the series , then set the JSON data to dataSource property.
Since the JSON contains Datetime data, set the valueType as DateTime . By default, the axis
valueType is Numeric.
view
data.cs
<ejs-rangenavigator id="rangeNavigator" valueType="DateTime" labelFormat="MMM-yy">

<e-rangenavigator-series-collection>
<e-rangenavigator-series xName="x" yName="y" dataSource="ViewBag.dataSource">
</e-rangenavigator-series>
</e-rangenavigator-series-collection>
</ejs-rangenavigator>
public IActionResult Data()

{
List dataSource = new List
{
new data { x = new DateTime(2005, 01, 01), y = 21, y1 = 28 },
1024
};
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
}
Enable Tooltip
The tooltip is useful to show the selected data. You can enable tooltip by setting the enable
property as true in tooltip object.
view
tooltip.cs

<e-rangenavigator-tooltip enable="true" format="yyyy/MM/dd" displayMode="Always"></
e-rangenavigator-tooltip>

{
{
};
return View();
}
1025
public class data
{
public DateTime x;
public double y;
public double y1;
}
1026
Selecting Range
The left and right thumb of RangeNavigator are used to indicate the selected range in the large
collection of data. Following are the ways you can select a range.
By dragging the thumbs.

By tapping on the labels.
By setting the start and end through value properties.
Following code example shows how to configure the selected range using value property of
RangeNavigator.
view
range.cs
<ejs-rangenavigator id="rangeNavigator" valueType="DateTime" labelFormat="MMM-yy" value=

"ViewBag.range">

{
{
};
ViewBag.range = [new DateTime(2007, 01, 23), new DateTime(2008, 02, 34)];
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
1027
}
1028
Lightweight range navigator
By default, when the dataSource for series property in RangeNavigator is empty, a light weight
Range navigator will get initialized without chart. The following code example shows the basic
lightweight range navigator.
view
light-weight.cs
<ejs-rangenavigator id="rangeNavigator" valueType="DateTime" labelFormat="MMM-yy" value=

"ViewBag.range" xName="x" yName="y" dataSource="ViewBag.dataSource">

{
{
};
ViewBag.range = [new DateTime(2007, 01, 23), new DateTime(2008, 02, 34)];
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
}
1029
Series Types
Essential JS 2 Range navigator supports 3 types of series, to render the data.
Line
To render a step line series, use series type as Line . By default line series render in range
navigator.
view
line.cs

<e-rangenavigator-series xName="x" yName="y" dataSource="ViewBag.dataSource" >

{
{
};
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
}
1030
Area
To render a step line series, use series type as Area
view
area.cs

<e-rangenavigator-series xName="x" yName="y" dataSource="ViewBag.dataSource" ty
pe="Area">

{
{
};
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
}
StepLine
To render a step line series, use series type as StepLine
view
step.cs
1031
<e-rangenavigator-series xName="x" yName="y" dataSource="ViewBag.dataSource" ty
pe="StepLine">

{
{
};
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
}
1032
Types of data
Numeric
Numeric scale is used to represent the numeric values of data in a chart. By default, the
valueType of a range navigator is Double.
view
double.cs
<ejs-rangenavigator id="rangeNavigator" valueType="Double" labelFormat="MMM-yy">

<e-rangenavigator-series xName="y" yName="y1" dataSource="ViewBag.dataSource">

{
{
new data { y = 12, y1 = 28 },
new data { y = 34, y1 = 44 },
new data { y = 45, y1 = 48 },
new data { y = 56, y1 = 50 },
new data { y = 67, y1 = 66 },
new data { y = 78, y1 = 78 },
new data { y = 89, y1 = 84 },
};
return View();
}
public class data
{
public double y;
public double y1;
}
Range
Minimum and maximum of the Range navigator will be calculated automatically based on the
provided data. You can also customize the range using the minimum, maximum, and interval
properties.
1033
view
range.cs
<ejs-rangenavigator id="rangeNavigator" valueType="Double" minimum=10 maximum=400>


{
{
new data { y = 12, y1 = 28 },
new data { y = 34, y1 = 44 },
new data { y = 45, y1 = 48 },
new data { y = 56, y1 = 50 },
new data { y = 67, y1 = 66 },
new data { y = 78, y1 = 78 },
new data { y = 89, y1 = 84 },
};
return View();
}
public class data
{
public double y;
public double y1;
}
Label Format
Numeric labels can be formatted using the labelFormat property.
Numeric labels support all globalized formats.
view
format.cs

1034
{
{
new data { y = 12, y1 = 28 },
new data { y = 34, y1 = 44 },
new data { y = 45, y1 = 48 },
new data { y = 56, y1 = 50 },
new data { y = 67, y1 = 66 },
new data { y = 78, y1 = 78 },
new data { y = 89, y1 = 84 },
};
return View();
}
public class data
{
public double y;
public double y1;
}
The following table describes the result of applying some commonly used label formats on
numeric values.
Label Label Format

Result Description
Value property value

0.01 p1 1.0%
decimal place

0.01 p2 1.00%
decimal place

0.01 p3 1.000%
decimal place

1000 c1 $1,000.0

1000 c2 $1,000.00
Custom Label Format
1035
The range navigator also supports custom label formats using placeholders such as {value}$, in
which, the value represent the axis label, e.g. 20$.
view
format.cs


{
{
new data { y = 12, y1 = 28 },
new data { y = 34, y1 = 44 },
new data { y = 45, y1 = 48 },
new data { y = 56, y1 = 50 },
new data { y = 67, y1 = 66 },
new data { y = 78, y1 = 78 },
new data { y = 89, y1 = 84 },
};
return View();
}
public class data
{
public double y;
public double y1;
}
Logarithmic Axis
Logarithmic supports logarithmic scale, and it is used to visualize data when the Range navigator
has numerical values in both lower (e.g.: 10-6) and higher (e.g.: 106) orders of magnitude.
view
log.cs
<ejs-rangenavigator id="rangeNavigator" valueType="Logarithmic" labelFormat="MMM-yy">

1036

{
{
new data { y = 12, y1 = 28 },
new data { y = 100, y1 = 44 },
new data { y = 500, y1 = 48 },
new data { y = 1000, y1 = 50 },
new data { y = 5000, y1 = 66 },
new data { y = 7000, y1 = 78 },
new data { y = 89, y1 = 84 },
};
return View();
}
public class data
{
public double y;
public double y1;
}
Range
Minimum and maximum of the Range navigator will be calculated automatically based on the
provided data. You can also customize the range using the minimum, maximum, and interval
properties.
view
log-range.cs
<ejs-rangenavigator id="rangeNavigator" valueType="Logarithmic" labelFormat="MMM-yy">


{
{
new data { y = 12, y1 = 28 },
1037
new data { y = 100, y1 = 44 },
new data { y = 500, y1 = 48 },
new data { y = 1000, y1 = 50 },
new data { y = 5000, y1 = 66 },
new data { y = 7000, y1 = 78 },
new data { y = 89, y1 = 84 },
};
return View();
}
public class data
{
public double y;
public double y1;
}
Logarithmic Base
Logarithmic base can be customized using the logBase property. The default value of the
logBase property is 10.
view
log-base.cs
<ejs-rangenavigator id="rangeNavigator" valueType="Logarithmic" logBase=10>


{
{
new data { y = 12, y1 = 28 },
new data { y = 100, y1 = 44 },
new data { y = 500, y1 = 48 },
new data { y = 1000, y1 = 50 },
new data { y = 5000, y1 = 66 },
new data { y = 7000, y1 = 78 },
new data { y = 89, y1 = 84 },
};
return View();
}
1038
public class data
{
public double y;
public double y1;
}
Date-time
Date-time Range navigator supports date-time scale and displays date-time values as a labels in
the specified format.
view
date-time.cs


{
{
};
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
}
Note: Date-time Range navigator supports date-time scale and displays date-time values as
a labels in the specified format.
1039
Interval Customization
Date-time intervals can be customized using the interval and intervalType properties of the range
navigator. For example, when you set interval as 2 and intervalType as years, the interval is
considered as 2 years. Date-time supports the following interval types:
Auto
Years
Quarter
Months
Weeks
Days
Hours
Minutes
view
date-time-interval.cs
<ejs-rangenavigator id="rangeNavigator" valueType="DateTime" labelFormat="MMM-yy" inter

valType="Months">

{
{
};
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
1040
}
Label Format
Property Value
new
format
03, 10)
new
Date(2000, yMd 04/10/2000
03, 10)
new
Date(2000, MMM Apr
date is displayed
03, 10)
new
Date(2000, hm 12:00 AM
displayed as label
03, 10)
new
12:00:00 The Label is displayed in
Date(2000, hms
AM hours:minutes:seconds format
03, 10)
1041
Period selector
The period selector allows to select a range with specified periods.
Periods
Periods is an array of objects that allows users to specify the range of periods. The “interval”
property specifies the count value of the button, and the “text” property specifies the text to be
displayed on button. The “intervalType” property allows users to customize the intervals of the
buttons. The “intervalType” property supports the following interval types:
Auto
Years
Quarter
Months
Weeks
Days
Hours
Minutes
Seconds
view
periods.cs

<e-rangenavigator-periodselectorsettings>
<e-periods>
<e-period interval="1" intervalType="Months" text="1M"></e-peri
od>
od>
od>
<e-period text="YTD"></e-period>
<e-period interval="1" intervalType="Years" text="1Y"></e-period
>
<e-period interval="2" intervalType="Years" text="2Y"></e-period
>
<e-period text="All"></e-period>
</e-periods>
1042
</e-rangenavigator-periodselectorsettings>

{
{
};
List<RangeNavigatorPeriod> periods = new List<RangeNavigatorPeriod>();
RangeNavigatorPeriod one = new RangeNavigatorPeriod();
one.Text = "1M";
one.IntervalType = RangeIntervalType.Months;
one.Interval = 1;
RangeNavigatorPeriod two = new RangeNavigatorPeriod();
two.Text = "3M";
two.IntervalType = RangeIntervalType.Months;
two.Interval = 3;
RangeNavigatorPeriod three = new RangeNavigatorPeriod();
three.Text = "6M";
three.IntervalType = RangeIntervalType.Months;
three.Interval = 6;
RangeNavigatorPeriod four = new RangeNavigatorPeriod();
four.Text = "YTD";
RangeNavigatorPeriod five = new RangeNavigatorPeriod();
five.Text = "1Y";
five.Interval = 1;
RangeNavigatorPeriod six = new RangeNavigatorPeriod();
six.Text = "2Y";
six.Interval = 2;
six.Selected = true;
RangeNavigatorPeriod seven = new RangeNavigatorPeriod();
seven.Text = "ALL";
periods.Add(one);
periods.Add(two);
periods.Add(three);
periods.Add(four);
periods.Add(five);
periods.Add(six);
1043
periods.Add(seven);
ViewBag.periods = periods;
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
}
Note: To use the period selector feature, inject the PeriodSelector module using the
RangeNavigator.Inject(PeriodSelector) method.
Positioning period selector

The “position” property allows users to position the period selector either at the “top” or “bottom”.
view
position.cs

<e-rangenavigator-periodselectorsettings position="Bottom">
<e-periods>
<e-period interval="1" intervalType="Months" text="1M"></e-period>
<e-period interval="1" intervalType="Years" text="1Y"></e-period>
</e-periods>

{
{
1044
};
one.Text = "1M";
one.Interval = 1;
two.Text = "3M";
two.Interval = 3;
three.Text = "6M";
three.Interval = 6;
four.Text = "YTD";
five.Text = "1Y";
five.Interval = 1;
six.Text = "2Y";
six.Interval = 2;
seven.Text = "ALL";
periods.Add(one);
periods.Add(two);
periods.Add(three);
periods.Add(four);
periods.Add(five);
periods.Add(six);
periods.Add(seven);
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
}
1045
Height
The “height” property allows users to specify the height for period selector. The default value of
the height property is 43.
view
height.cs

<e-rangenavigator-series xName="x" yName="y" dataSource="ViewBag.dataSource" he
ight="45">
<e-periods>
</e-periods>

{
{
};
one.Text = "1M";
one.Interval = 1;
two.Text = "3M";
1046
two.Interval = 3;
three.Text = "6M";
three.Interval = 6;
four.Text = "YTD";
five.Text = "1Y";
five.Interval = 1;
six.Text = "2Y";
six.Interval = 2;
seven.Text = "ALL";
periods.Add(one);
periods.Add(two);
periods.Add(three);
periods.Add(four);
periods.Add(five);
periods.Add(six);
periods.Add(seven);
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
}
Visibility of range navigator

The “disableRangeSelector” property allows users to render the period selector without range
navigator.
view
visible.cs
<ejs-rangenavigator id="rangeNavigator" valueType="DateTime" labelFormat="MMM-yy" disab

leRangeSelector=true>
1047
<e-periods>
</e-periods>

{
{
};
one.Text = "1M";
one.Interval = 1;
two.Text = "3M";
two.Interval = 3;
three.Text = "6M";
three.Interval = 6;
four.Text = "YTD";
five.Text = "1Y";
five.Interval = 1;
1048
six.Text = "2Y";
six.Interval = 2;
seven.Text = "ALL";
periods.Add(one);
periods.Add(two);
periods.Add(three);
periods.Add(four);
periods.Add(five);
periods.Add(six);
periods.Add(seven);
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
}
1049
Labels
Multilevel labels
The second level labels for the range navigator can be enabled by setting the “enableGrouping”
property to true. This is restricted to date-time axis alone.
view
multi.cs

<e-rangenavigator-series xName="x" yName="y" dataSource="ViewBag.dataSource" en
ableGrouping=true>

{
{
};
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
}
Grouping
1050
The second level axis labels can be grouped using “groupBy” property with the following interval
types:
Auto
Years
Quarter
Months
Weeks
Days
Hours
Minutes
Seconds
view
group.cs
<ejs-rangenavigator id="rangeNavigator" valueType="DateTime" labelFormat="MMM-yy" enabl

eGrouping=true groupBy="Months">

{
{
};
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
}
1051
Smart labels
The “labelIntersectAction” property is used to avoid overlapping of labels.
The following code sample shows setting the labelIntersectAction property to Hide.
view
smart.cs


{
{
};
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
}
Label positioning
By default, the labels can be placed at outside of the range navigator. You can place the labels
inside the range navigator using the labelPosition property.
view
position.cs
1052

{
{
};
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
}
Labels customization
The font size, color, family, etc. can be customized using the “labelStyle” property.
view
custom.cs

1053
{
{
};
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
}
1054
Grid and Tick Lines
Grid line customization

You can customize the width, color, and dashArray of the major grid lines using the
majorGridLines property.
view
grid.cs
<ejs-rangenavigator id="rangeNavigator" valueType="Double" labelFormat="{value}K">


{
{
new data { y = 12, y1 = 28 },
new data { y = 34, y1 = 44 },
new data { y = 45, y1 = 48 },
new data { y = 56, y1 = 50 },
new data { y = 67, y1 = 66 },
new data { y = 78, y1 = 78 },
new data { y = 89, y1 = 84 },
};
ViewBag.lineWidth = new RangeNavigatorMajorGridLines { Width = 2, color = "
Red" };
return View();
}
public class data
{
public double y;
public double y1;
}
Tick line customization
1055
You can customize the width, color, and height of the major tick lines using the majorTickLines
property.
view
tick.cs
<ejs-rangenavigator id="rangeNavigator" valueType="Double" labelFormat="{value}K">


{
{
new data { y = 12, y1 = 28 },
new data { y = 34, y1 = 44 },
new data { y = 45, y1 = 48 },
new data { y = 56, y1 = 50 },
new data { y = 67, y1 = 66 },
new data { y = 78, y1 = 78 },
new data { y = 89, y1 = 84 },
};
ViewBag.lineWidth = new RangeNavigatorMajorGridLines { Width = 2, color = "
Red" };
return View();
}
public class data
{
public double y;
public double y1;
}
1056
Customization
Navigator appearance
The navigator can be customized using the “navigatorStyleSettings” property. The
“selectedRegionColor” property is used to specify the color for selected region whereas the
“unSelectedRegionColor” property is used to specify the color for unselected region.
view
appearance.cs
<ejs-rangenavigator id="rangeNavigator">
<e-rangenavigator-navigatorStyleSettings unselectedRegionColor="skyblue" selectedRe
gionColor="pink">
</e-rangenavigator-navigatorStyleSettings >

{
{
new data { y = 12, y1 = 28 },
new data { y = 34, y1 = 44 },
new data { y = 45, y1 = 48 },
new data { y = 56, y1 = 50 },
new data { y = 67, y1 = 66 },
new data { y = 78, y1 = 78 },
new data { y = 89, y1 = 84 },
};
return View();
}
public class data
{
public double y;
public double y1;
}
Thumb
1057
The thumb property provides options to customize the border, fill, size, and type of thumb. The
types of thumb can be “Circle” and “Rectangle”.
view
thumb.cs
<e-rangenavigator-navigatorStyleSettings unselectedRegionColor="skyblue" selectedRe
gionColor="pink" thumb="ViewBag.thumb">
</e-rangenavigator-navigatorStyleSettings>

{
{
new data { y = 12, y1 = 28 },
new data { y = 34, y1 = 44 },
new data { y = 45, y1 = 48 },
new data { y = 56, y1 = 50 },
new data { y = 67, y1 = 66 },
new data { y = 78, y1 = 78 },
new data { y = 89, y1 = 84 },
};
ViewBag.thumb = new { type = " Rectangle", color = "Pink"}
return View();
}
public class data
{
public double y;
public double y1;
}
Border customization
Using the “navigatorBorder” property, you can customize the “width” and “color” of the range
navigator.
view
border.cs
1058
<e-rangenavigator-navigatorBorder width="2" color="red">
</e-rangenavigator-navigatorBorder>

{
{
new data { y = 12, y1 = 28 },
new data { y = 34, y1 = 44 },
new data { y = 45, y1 = 48 },
new data { y = 56, y1 = 50 },
new data { y = 67, y1 = 66 },
new data { y = 78, y1 = 78 },
new data { y = 89, y1 = 84 },
};
ViewBag.border = new { width = 2, color = "Pink"}
return View();
}
public class data
{
public double y;
public double y1;
}
Deferred update
If the “enableDeferredUpdate” property is set to true, then the changed event will be fired after
dragging the slider. If the “enableDeferredUpdate” is false, then the changed event will be fired
when dragging the slider. By default, the “enableDeferredUpdate” is set to false.
view
<ejs-rangenavigator id="rangeNavigator" enableDeferredUpdate=true>

1059
Allow snapping
The “allowSnapping” property toggles the placement of the slider exactly to the left or on the
nearest interval.
view
snap.cs
<ejs-rangenavigator id="rangeNavigator" allowSnapping=true>


{
{
new data { y = 12, y1 = 28 },
new data { y = 34, y1 = 44 },
new data { y = 45, y1 = 48 },
new data { y = 56, y1 = 50 },
new data { y = 67, y1 = 66 },
new data { y = 78, y1 = 78 },
new data { y = 89, y1 = 84 },
};
return View();
}
public class data
{
public double y;
public double y1;
}
Animation
The speed of the animation can be controlled using the “animationDuration” property. The default
value of the “animationDuration” property is 500 milliseconds.
view
1060
animation.cs
<ejs-rangenavigator id="rangeNavigator" animationDuration="2000">


{
{
new data { y = 12, y1 = 28 },
new data { y = 34, y1 = 44 },
new data { y = 45, y1 = 48 },
new data { y = 56, y1 = 50 },
new data { y = 67, y1 = 66 },
new data { y = 78, y1 = 78 },
new data { y = 89, y1 = 84 },
};
return View();
}
public class data
{
public double y;
public double y1;
}
1061
Tooltip
The range navigator supports tooltips for sliders. Sliders are used to select data at a range in the
range navigator. Tooltips display the selected start and end values.
Customization
Tooltips can be customized using the following properties:
tooltip: Customizes the text displayed in tooltip.

enable: Customizes the visibility of the tooltip.
fill: Customizes the background color of the tooltip.
opacity: Customizes the opacity of the tooltip.
textStyle: Customizes the font size, color, family, style, weight, alignment, and overflow of
the tooltip.
view
tooltip.cs


{
{
};
return View();
}
public class data
{
public DateTime x;
1062
public double y;
public double y1;
}
Label Format
You can format and parse the date to all globalize format using labelFormat property in an axis.
view

Label Format
Property Value
new
format
03, 10)
new
Date(2000, yMd 04/10/2000
03, 10)
new
Date(2000, MMM Apr
date is displayed
03, 10)
new
Date(2000, hm 12:00 AM
displayed as label
03, 10)
new
12:00:00 The Label is displayed in
Date(2000, hms
AM hours:minutes:seconds format
03, 10)
1063
RTL
The range navigator provides RTL (right-to-left) support. This can be enabled using the
“enableRtl” property.
view
rtl.cs
<ejs-rangenavigator id="rangeNavigator" valueType="DateTime" labelFormat="MMM-yy" enabl

eRtl=true>

{
{
};
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
}
1064
Export and print
Export
The rendered range navigator can be exported to JPEG, PNG, SVG, or PDF format using the
export method in the range navigator. The input parameters for this method are Export Type for
format and fileName for result.
view
export.cs

<ejs-button id="export">
</ejs-button>
<script>
document.getElementById('export').onclick = function () {
var control = document.getElementById('export').ej2_instances[0];
control.export("PNG", "range");
};
</script>

{
{
};
return View();
}
public class data
1065
{
public DateTime x;
public double y;
public double y1;
}
Print
The rendered range navigator can be printed directly from the browser by calling the public
method print. The ID of the range navigator div element must be passed as argument to that
method.
view
print.cs

<ejs-button id="print">
</ejs-button>
<script>
document.getElementById('print').onclick = function () {
var chart = document.getElementById('print-container').ej2_instances[0]
;
chart.print();
};
</script>

{
{
};
1066
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
}
1067
Overview
The Schedule component is an event calendar which facilitates user with the common Outlook-
calendar features, thus allowing the users to plan and manage their events/appointments and its
time in an efficient way.
Key Features
Views - Schedule is now availed with 6 different view modes – day, week, work week,
month, agenda and month agenda. It is possible to configure view-based settings on each
view mode. The Week view is set as active view by default.
Data binding - Seamless data binding with various client- side and remote data sources
thus allowing the data to load on demand by default to reduce the data transfer and loading
time.
Recurrence - Allows the user to repeat a set of events on a daily, weekly, monthly, or yearly
basis.
Template - The key elements like events, date header, work cells and event tooltip comes
with the default template support which allows the flexible end-user customization to embed
any kind of text, images, or styles to it.
Time zone - Regardless of whatever time zone your system follows, Schedule supports
setting your own required time zone value to it as well as to each event – thus allowing the
events to display on its exact local time.
Customizable working days and hours - Users can set specific work hour range which is
visually differentiated with active colour. Also, the working days collection can be customized
with specific days, so that the remaining days will be considered as weekend.
Custom editor template - Template option is availed for event editor, thus allowing the
users to add their own custom editor design and also provides option to add additional fields
onto the default event editor.
Adaptive rendering - Adapts with optimal user interfaces for mobile and desktop form-
Keyboard interaction - All the common actions such as traversing through the
appointments, multiple cell selection, add/edit/delete the appointments, navigate to other
views, dates and much more can be performed through keyboard inputs.
Localization - All the static text and date content can be localized to any desired language.
Also, it can be displayed with appropriate time mode and date-format as per the localized
language.
RTL - Supports displaying the component to display in the direction from right to left.
1068
Getting Started
This section briefly explains about how to include a simple Schedule in your ASP.NET Core
application. You can refer the ASP.NET Core Getting Started documentation page for
introduction part of the system requirements and common component configurations.
Initialize the Schedule component

Schedule component can be rendered by using the ejs-schedule tag helper in ASP.NET Core
application. Add the below simple code to your index.cshtml page which is available within the
Views/Home folder, to initialize the Schedule.
view
<ejs-schedule id="schedule"></ejs-schedule>
Running the above code will display the empty Schedule on the browser.
Setting specific date

By default, Schedule displays initially with the system's current date and also marks the current
system time by an indicator to its left. To load the Schedule with different date initially, then the
selectedDate property needs to be set with specific date value as shown below.
view
data.cs
<div class="control-section">
<div class="control_wrapper schedule-control-section">
<ejs-schedule id="schedule" height="550" selectedDate="new DateTime(2018, 2
, 15)">
<e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedu
le-eventsettings>
</ejs-schedule>
</div>
</div>
}
1069
using System;
using System.Linq;
using WebApplication1.Models;
{
public partial class ScheduleController : Controller
{
public IActionResult WorkDays()
{
ViewBag.appointments = GetScheduleData();
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{Id = 1, Subject = "Explosion of Betelgeuse Star", StartTime = new DateTime(
2018, 2, 11, 9, 30, 0), EndTime = new DateTime(2018, 2, 11, 11, 0, 0) });
{ Id = 2, Subject = "Thule Air Crash Report", StartTime = new DateTime(2018
, 2, 12, 12, 0, 0), EndTime = new DateTime(2018, 2, 12, 14, 0, 0) });
{ Id = 3, Subject = "Blue Moon Eclipse", StartTime = new DateTime(2018, 2,
13, 9, 30, 0), EndTime = new DateTime(2018, 2, 13, 11, 0, 0) });
{ Id = 4, Subject = "Meteor Showers in 2018", StartTime = new DateTime(2018
, 2, 14, 13, 0, 0), EndTime = new DateTime(2018, 2, 14, 14, 30, 0) });
{ Id = 5, Subject = "Milky Way as Melting pot", StartTime = new DateTime(20
18, 2, 15, 12, 0, 0), EndTime = new DateTime(2018, 2, 15, 14, 0, 0) });
return appData;
}
}
public class AppointmentData

{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}
}
1070
1071
Appointments
Appointment Types
The types of appointments available within Scheduler can be categorized as follows
Normal
Represents an appointment that is created for a certain time interval in one or more number of
days. If the normal appointment is created for more than 24 hours, then those longer
appointments will be rendered on the all-day row.
If the normal appointment is to be created for two days (say from November 25, 2015 –
11.00 PM to November 26, 2015 2.00 AM) but less than 24 hour time interval, then the
appointment is split into two partitions and will be displayed appropriately on both the days.
All-Day
Represents an appointment that is created for an entire day such as holiday events. It renders
separately in an All-day row, a separate place for all-day appointments. In Timeline (horizontal)
view, all-day appointment renders in the usual work cells, as no all-day cells are present in that
view.
Recurrence
Represents an appointment that is created for a certain time interval that occurs repeatedly in a
daily, weekly, monthly, yearly or every weekday basis at the same time interval based on the
recurrence rule. The other available options and validations that can be performed on recurrence
appointments can be referred from here.
Appointment Fields
The Schedule dataSource usually holds the event instances, where each of the instance are
defined with the set of fields depicted here. It is mandatory to map these fields with the equivalent
fields of database, when remote data is bound to it. When the local JSON data is bound, then the
field names defined within the instances needs to be mapped with the availed properties
correctly.
The fields available on each event object are as follows.
Field name Description
The id field needs to be defined as mandatory, when the

Schedule is bound to remote data and it is optional, if the same is
id
bound with JSON data. This field usually assigns ID value to each
of the events.
1072
The subject field is optional, and usually assigns the subject text
subject
to each of the events.
The startTime field defines the start time of an event and it is

startTime
mandatory to provide it for any of the valid event objects.
The endTime field defines the end time of an event and it is

endTime mandatory to provide the end time for any of the valid event
objects.
It maps the startTimezone field from the dataSource and usually

accepts the valid IANA timezone names. It is assumed that the
value provided for this field is taken into consideration while
startTimezone
processing the startTime field. When this field is not mapped with
any timezone names, then the events will be processed based on
the timezone assigned to the Schedule.
It maps the endTimezone field from the dataSource and usually

accepts the valid IANA timezone names. It is assumed that the
value provided for this field is taken into consideration while
endTimezone
processing the endTime field. When this field is not mapped with
any timezone names, then the events will be processed based on
the timezone assigned to the Schedule.
It maps the location field from the dataSource and the location
location field value will be displayed over events, while given it for an event
object.
It maps the description field from the dataSource and denotes

description
the event description which is optional.
The isAllDay field is mapped from the dataSource and is used to

isAllDay denote whether an event is created for an entire day or for specific
time alone.
It maps the recurrenceID field from dataSource and usually holds

recurrenceID the ID value of the parent recurrence event. It is applicable only for
the edited occurrence events.
It maps the recurrenceRule field from dataSource and is used to

recurrenceRule uniquely identify whether the event belongs to a recurring event
type or normal ones.
It maps the recurrenceException field from dataSource and is

recurrenceException used to hold the exception dates which needs to be excluded from
recurring type.
The below example depicts the local JSON data assigned to Schedule's dataSource.
view
data.cs
1073
, 15)">
<e-schedule-eventsettings dataSource="@ViewBag.appointments">
<e-eventsettings-fields id="Id">
<e-field-subject name="Subject"></e-field-subject>
<e-field-location name="Location"></e-field-location>
<e-field-description name="Description"></e-field-description>
<e-field-isallday name="IsAllDay"></e-field-isallday>
<e-field-starttime name="StartTime"></e-field-starttime>
<e-field-endtime name="EndTime"></e-field-endtime>
<e-field-starttimezone name="StartTimezone"></e-field-starttime
zone>
<e-field-endtimezone name="EndTimezone"></e-field-endtimezone>
<e-field-recurrencerule name="RecurrenceRule"></e-field-recurre
ncerule>
<e-field-recurrenceid name="RecurrenceId"></e-field-recurrenceid
>
</e-eventsettings-fields>
</e-schedule-eventsettings>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
{
public IActionResult appointment-fields()
{
return View();
}
{
{
Id = 2,
Subject = "Paris",
1074
StartTime = new DateTime(2018, 2, 15, 10, 0, 0),
EndTime = new DateTime(2018, 2, 15, 12, 30, 0),
IsAllDay = false,
RecurrenceID = 10,
RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=5",
Location = "London",
Description = "Summer vacation planned for outstation.",
StartTimezone = "Asia/Yekaterinburg",
EndTimezone = "Asia/Yekaterinburg"
});
return appData;
}
}
{
public bool IsAllDay { get; set; }
public int RecurrenceID { get; set; }
public string RecurrenceRule { get; set; }
public string Location { get; set; }
public string Description { get; set; }
public string StartTimezone { get; set; }
public string EndTimezone { get; set; }
}
}
Custom field mapping

Scheduler provides option to use custom field names for appointments as shown below.
view
data.cs
, 15)">
<e-eventsettings-fields id="TravelId">
<e-field-subject name="TravelSummary"></e-field-subject>
1075
<e-field-location name="Source"></e-field-location>
<e-field-description name="Comments"></e-field-description>
<e-field-isallday name="FullDay"></e-field-isallday>
<e-field-starttime name="DepartureTime"></e-field-starttime>
<e-field-endtime name="ArrivalTime"></e-field-endtime>
<e-field-starttimezone name="Origin"></e-field-starttimezone>
<e-field-endtimezone name="Destination"></e-field-endtimezone>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
{
public IActionResult custom-field()
{
return View();
}
{
{
TravelId = 2,
TravelSummary = "Paris",
DepartureTime = new DateTime(2018, 2, 15, 10, 0, 0),
ArrivalTime = new DateTime(2018, 2, 15, 12, 30, 0),
FullDay = false,
Source = "London",
Comments = "Summer vacation planned for outstation.",
Origin = "Asia/Yekaterinburg",
Destination = "Asia/Yekaterinburg"
});
return appData;
}
1076
}
{
public int TravelId { get; set; }
public string TravelSummary { get; set; }
public DateTime DepartureTime { get; set; }
public DateTime ArrivalTime { get; set; }
public bool FullDay { get; set; }
public string Source { get; set; }
public string Comments { get; set; }
public string Origin { get; set; }
public string Destination { get; set; }
}
}
Handling additional fields

Scheduler provides option to include 'n' custom fields for appointments and those field values can
be accessed with in sample end. The following code example will include the custom fields
Status and Priority with in appointment collection.
view
data.cs
, 15)">
<e-field-subject name="Subject"></e-field-subject>
<e-field-isallday name="IsAllDay"></e-field-isallday>
<e-field-starttime name="StartTime"></e-field-starttime>
<e-field-endtime name="EndTime"></e-field-endtime>
</ejs-schedule>
</div>
</div>
}
using System;
1077
using System.Linq;
{
{
public IActionResult additioinal-fields()
{
return View();
}
{
{
Id = 2,
Subject = "Meeting",
IsAllDay = false,
Status = "Completed",
Priority = "High"
});
return appData;
}
}
{
public string Status { get; set; }
public string Priority { get; set; }
}
}
It is not applicable to define the custom fields with in eventSettings property.
Field validation
1078
It is possible to validate the required fields of the appointment window from client-side before
submitting it, by adding appropriate validation rules to each fields. The appointment fields have
been extended to accept both String and object type values. Therefore, in order to perform
validations, it is necessary to specify object values for the appointment fields.
view
data.cs
@{
var validationRules = new Dictionary<string, object>() { { "required", true } };
var descriptionValidationRules = new Dictionary<string, object>() { { "required", t
rue }, { "minLength", 5 } };
}
, 15)">
<e-schedule-eventsettings dataSource="@ViewBag.datasource">
<e-field-subject name="Subject" validation="validationRules"></
e-field-subject>
<e-field-location name="Location" validation="validationRules">
</e-field-location>
<e-field-description name="Description" validation="description
ValidationRules"></e-field-description>
<e-field-starttime name="StartTime" validation="validationRules"
></e-field-starttime>
<e-field-endtime name="EndTime" validation="validationRules"></
e-field-endtime>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
1079
{
{
public IActionResult field-validation()
{
ViewBag.datasource = new ScheduleData().GetScheduleData();
return View();
}
}
}
Recurrence options
There are scenarios where you require the same appointments to be repeatedly created for
multiple days on daily, weekly, monthly, and yearly or on every weekday basis. While creating or
binding the recurrence appointment, recurrenceRule contains recurrence pattern in string
format.
Recurrence rule
The recurrence appointments are created based on the recurrence rule. The recurrenceRule is
a string value that contains the details of the recurrence appointments like
repeat type - daily/weekly/monthly/yearly/every weekday

how many times it needs to be repeated
the interval duration
the time period to render the appointment, etc.,
It has the following properties based on which the recurrence appointments are rendered in the
Schedule control with its respective time period.
Property Purpose
Maintains the Repeat type (Daily, Weekly, Monthly, Yearly, Every week day)
FREQ
value of the appointment. Example: FREQ=DAILY;INTERVAL=1
Maintains the interval value of the appointments. When you create the daily
appointment at an interval of 2, the appointments are rendered on the days
INTERVAL
Monday, Wednesday and Friday (Creates an appointment on all days by
leaving the interval of one day gap). Example: FREQ=DAILY;INTERVAL=2
It holds the appointment’s count value. When the COUNT value is 10, then 10
COUNT instances of appointments are created in the recurrence series. Example:
FREQ=DAILY;INTERVAL=1;COUNT=10
This property holds the end date value (in ISO format) denoting when the
UNTIL recurrence actually ends. Example:
FREQ=DAILY;INTERVAL=1;UNTIL=20180530T041343Z;
1080
It holds the day value(s), representing on which the appointments actually
renders. Create the weekly appointment, and select the day(s) from the day
options (Monday/Tuesday/Wednesday/Thursday/Friday/Saturday/Sunday).
BYDAY When Monday is selected, the first two letters of the selected day "MO" is
saved in the BYDAY property. When multiple days are selected, the values
are separated by commas. Example:
FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,WE;COUNT=10
This property is used to store the date value of the Month, while creating the
Month recurrence appointment. When you create a Monthly recurrence
BYMONTHDAY appointment for every 3rd day of the month, then BYMONTHDAY holds the
value 3 and creates the appointment on 3rd day of every month. Example:
FREQ=MONTHLY;BYMONTHDAY=3;INTERVAL=1;COUNT=10
This property is used to store the index value of the selected Month while
creating the yearly appointments. When you create the yearly appointment on
BYMONTH June month, the index value of June month 6 will get stored in the BYMONTH
field. The appointment is created on every 6th month of a year. Example:
FREQ=YEARLY;BYMONTHDAY=16;BYMONTH=6;INTERVAL=1;COUNT=10
This property is used to store the index value of the week. When you create
the monthly appointment in second week of a month, the index value of the
BYSETPOS
second week (2) is stored in BYSETPOS. Example:
FREQ=MONTHLY;BYDAY=MO;BYSETPOS=2;COUNT=10
The default recurrence validation has been included for recurrence appointments similar to
the one available in outlook. The validation occurs during the recurrence appointment
creation, drag and drop or resizing of the recurrence appointments and also if any single
occurrence changes.
Recurrence options with CRUD

The recurring appointments can be edited or deleted in two ways as below:
Single occurrence
Entire series
Single occurrence
When an option EDIT EVENT is selected, a single occurrence of the recurrence appointment
alone will be edited. Once it is edited then
recurrenceID field will be added which holds the id value of its parent recurrence
appointment. It is applicable only for the edited occurrence appointments.
recurrenceException field will be added to its parent recurrence appointment which holds
the edited occurrence appointment date in string type.
When an option DELETE EVENT is selected, a single occurrence of the recurrence appointment
alone will be deleted. Once it is edited then recurrenceException field will be added to its parent
recurrence appointment which holds the deleted occurrence appointment date in string type.
1081
Entire series
When an option EDIT SERIES is selected, entire recurrence series will be edited. Once this
option is chosen then the whole recurrence appointment collection including its edited occurrence
will be re-rendered with the new value.
When an option DELETE SERIES is selected, entire recurrence series will be deleted. Once this
option is chosen then the whole recurrence appointment collection including its edited occurrence
will be removed from Schedule.
Event customization
The field names that are mapped from the dataSource to the appropriate field properties within
the eventSettings can be accessed within the template. The following code example will
customize the appointment default color and time format.
view
data.cs
, 15)" readonly="true">
<e-schedule-eventsettings dataSource="@ViewBag.datasource" template="@V
iewBag.template">
</ejs-schedule>
</div>
</div>
<style>
.e-schedule .e-vertical-view .e-content-wrap .e-appointment {
border-radius: 8px;
}
.e-schedule .e-vertical-view .e-content-wrap .e-appointment .e-appointment-deta

ils {
padding: 0;
height: 100%;
}
.e-schedule .template-wrap {
height: 100%;
white-space: normal;
}
1082
.e-schedule .template-wrap .subject {
font-weight: 600;
font-size: 15px;
padding: 4px 4px 4px;
overflow: hidden;
}
.e-schedule .template-wrap .time {

height: 50px;
font-size: 12px;
overflow: hidden;
}
</style>
}
@section PreScripts {
var instance = new ej.base.Internationalization();
function getTimeString(value) {
return instance.formatDate(value, { skeleton: 'hm' });
}
</script>
}
using System;
using System.Linq;
{
{
public IActionResult event-customization()
{
ViewBag.datasource = new ScheduleData().GetWebinarData();
ViewBag.template = "<div class='template-wrap' style='background:${Secondar
yColor}'><div class='subject' style='background:${PrimaryColor}'>${Subject}</div><div c
lass='time' style='background:${PrimaryColor}'>Time: ${getTimeString(data.StartTime)} -
${getTimeString(data.EndTime)}</div><div class='image'><img src = '../../Content/sched
ule/images/${ImageName}.svg' alt='${ImageName}'/></div><div class='description'>${Descr
iption}</div><div class='footer' style='background:${PrimaryColor}'></div></div>";
1083
return View();
}
}
}
Tooltip
The tooltip can be applied with the customized template design. By making use of template
feature with tooltip, all the field names that are mapped from the dataSource to the appropriate
field properties within the eventSettings can be accessed.
view
data.cs
@{
var template = "<div class='tooltip-wrap'>"+
"<div class='content-area'><div class='name'>${Subject}</></div>" +
"${if(City !== null && City !== undefined)}<div class='city'>${City}</div>${/if}" +
"<div class='time'>From : ${StartTime.toLocaleString()} </div>" +
"<div class='time'>To : ${EndTime.toLocaleString()} </div></div></div>";
}
, 15)">
<e-schedule-eventsettings dataSource="@ViewBag.datasource" enableTooltip
="true" tooltipTemplate="template">
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
1084
{
{
public IActionResult tooltip()
{
ViewBag.datasource = new ScheduleData().GetEventsData();
return View();
}
}
}
1085
Data-binding
The Schedule uses DataManager , which supports both RESTful JSON data services binding and
local JavaScript object array binding. The dataSource property can be assigned either with the
instance of DataManager or JavaScript object array collection. It supports two kinds of data
binding method:
Local data
Remote data
Local data
To bind local data to the Schedule, you can assign a JavaScript object array to the dataSource
property. The local data source can also be provided as an instance of the DataManager .
view
data.cs
<ejs-schedule id="schedule" width="100%" height="550" selectedDate="new Dat
eTime(2018, 2, 15)">
<e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule
-eventsettings>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
{
public IActionResult local-data()
1086
{
return View();
}
}
}
By default, DataManager uses JsonAdaptor for local data-binding.
Remote data
To bind remote data to Schedule component, assign service data as an instance of
DataManager to the dataSource property. To interact with remote data source, provide the
endpoint url .
OData
OData is a standardized protocol for creating and consuming data. You can retrieve data from
OData service using the DataManager. Refer to the following code example for remote Data
binding using OData service.
view
data.cs
@{
var dataManager = new DataManager() { Url = "https://js.syncfusion.com/demos/ejserv
ices/api/Schedule/LoadData", Adaptor = "ODataAdaptor", CrossDomain = true };
}
<ejs-schedule id="schedule" width="100%" height="550" selectedDate="new DateTim
e(2017, 6, 11)" readonly="true">
<e-schedule-eventsettings dataSource="dataManager">
</ejs-schedule>
</div>
}
using System;
using System.Linq;
1087
{
{
public IActionResult Odata()
{
return View();
}
}
}
Web API
You can use WebApiAdaptor to bind Schedule with Web API created using OData endpoint.
view
data.cs
@{
ices/api/Schedule/LoadData", Adaptor = "WebApiAdaptor", CrossDomain = true };
}
</ejs-schedule>
</div>
}
using System;
using System.Linq;
{
1088
{
public IActionResult web-api()
{
return View();
}
}
}
UrlAdaptor
UrlAdaptor also used to bind appointment in Schedule as shown below.
@Html.EJS().Schedule("schedule").Width("100%").Height("550px").EventSetting
s(e => e.DataSource(d => d.Url("Home/GetData").Adaptor("UrlAdaptor").CrossDomain(true))
).SelectedDate(new DateTime(2017, 6, 11)).Render()
</div>
</div>
}
Example for ASP.NET CORE
@{
var dataManager = new DataManager() { Url = "Home/GetData", Adaptor = "UrlAdaptor",
CrossDomain = true };
}
</ejs-schedule>
</div>
}
Definition for the controller method GetData can be referred here.
Passing additional parameters
1089
To add a custom parameter to the data request, use the addParams method of Query class.
Assign the Query object with additional parameters to the Schedule query property.
view
data.cs
@{
ices/api/Schedule/LoadData", Adaptor = "ODataAdaptor" };
}
e(2017, 6, 11)">
</ejs-schedule>
</div>
}
using System;
using System.Linq;
{
{
public IActionResult additional-parameter()
{
return View();
}
}
}
The parameters added using the query property will be sent along with the data request
for every Schedule action.
Handling the failure actions
1090
During server interaction from the Schedule, some server-side exceptions may occur, and you
can acquire those error messages or exception details in client-side using the
actionFailure event.
The argument passed to the actionFailure event contains the error details returned from the
server.
view
data.cs
@{
var dataManager = new DataManager() { Url = "http://some.com/invalidUrl", Adaptor =
"UrlAdaptor", CrossDomain = true };
}
e(2017, 6, 11)" actionFailure="onActionFailure">
</ejs-schedule>
</div>
function onActionFailure(args) {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
scheduleObj.element.parentNode.insertBefore(span, scheduleObj.element);
span.style.color = '#FF0000';
span.innerHTML = 'Server exception: 404 Not found';
}
</script>
}
using System;
using System.Linq;
{
{
public IActionResult failure-actions()
{
1091
return View();
}
}
}
The actionFailure event will be triggered not only for the server errors, but also when
there is an exception while processing the Schedule actions.
Performing CRUD actions

CRUD actions can be performed on Scheduler appointments using the available adaptors in
DataManager as shown below.
@Html.EJS().Schedule("schedule").Width("100%").Height("550px").EventSetting
s(e => e.DataSource(d => d.Url("Home/GetData").CrudUrl("Home/UpdateData").Adaptor("UrlA
daptor").CrossDomain(true))).SelectedDate(new DateTime(2017, 6, 5)).Render()
</div>
</div>
}
Example for ASP.NET CORE
@{
var dataManager = new DataManager() { Url = "Home/GetData", Adaptor = "UrlAdaptor",
CrudUrl = "Home/UpdateData", CrossDomain = true };
}
e(2017, 6, 5)">
</ejs-schedule>
</div>
}
The server-side controller code to handle the CRUD operations are as follows.
1092
using System;
using System.Linq;
using System.Web;
using ScheduleCRUD.Models;
using System.Collections;
namespace ScheduleCRUD.Controllers
{
public class HomeController : Controller
{
ScheduleDataDataContext db = new ScheduleDataDataContext();
// ScheduleDataDataContext is a LINQ-to-SQL data class name that is defined in the .dbm
l file to access the tables from the database
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult GetData() // To initially bind the appointments with Schedule
r
{
List<MultipleResource> data = new ScheduleDataDataContext().MultipleResourc
es.ToList();
return Json(data, JsonRequestBehavior.AllowGet);
}
public JsonResult UpdateData(EditParams param)

{
// this block of code will execute while inserting the appointments
if (param.action == "insert" || (param.action == "batch" && param.added !=
null))
{
var value = param.action == "insert" ? param.value : param.added[0];
int intMax = db.MultipleResources.ToList().Count > 0 ? db.MultipleResou
rces.ToList().Max(p => p.Id) : 1;
DateTime startTime = Convert.ToDateTime(value.StartTime);
DateTime endTime = Convert.ToDateTime(value.EndTime);
MultipleResource appoint = new MultipleResource()
{
Id = intMax + 1,
StartTime = startTime,
EndTime = endTime,
Subject = value.Subject,
AllDay = value.AllDay
};
db.MultipleResources.InsertOnSubmit(appoint);
1093
db.SubmitChanges();
}
// this block of code will execute while removing the appointment
if (param.action == "remove" || param.deleted != null)
{
if (param.action == "remove")
{
int key = Convert.ToInt32(param.key);
MultipleResource app = db.MultipleResources.Where(c => c.Id == key)
.FirstOrDefault();
if (app != null) db.MultipleResources.DeleteOnSubmit(app);
}
else
{
foreach (var apps in param.deleted)
{
MultipleResource app = db.MultipleResources.Where(c => c.Id ==
apps.Id).FirstOrDefault();
if (apps != null) db.MultipleResources.DeleteOnSubmit(app);
}
}
db.SubmitChanges();
}
// this block of code will execute while updating the appointment
if ((param.action == "batch" && param.changed != null) || param.action == "
update")
{
var value = param.action == "update" ? param.value : param.changed[0];
var filterData = db.MultipleResources.Where(c => c.Id == Convert.ToInt3
2(value.Id));
if (filterData.Count() > 0)
{
DateTime startTime = Convert.ToDateTime(value.StartTime);
DateTime endTime = Convert.ToDateTime(value.EndTime);
MultipleResource appoint = db.MultipleResources.Single(A => A.Id ==
Convert.ToInt32(value.Id));
appoint.StartTime = startTime;
appoint.EndTime = endTime;
appoint.Subject = value.Subject;
appoint.AllDay = value.AllDay;
}
db.SubmitChanges();
}
var data = db.MultipleResources.ToList();
return Json(data, JsonRequestBehavior.AllowGet);
}
}
}
1094
1095
Editor customization
Custom editor template

The event window can be customized by making use of the editorTemplate API. Here, the
custom design is built with the required fields through the script template and its type should be
text/x-template.
Each field defined through it should contain the e-field class, so as to allow the processing of
those fields in the default event object from internal source. The ID of this customized script
template section is assigned to the editorTemplate option, so that this customized fields will be
replaced onto the default editor window.
As we are using our Syncfusion sub-components within this editor in the below demo, the custom
defined form elements needs to be configured as required Syncfusion components such as
DropDownList and DateTimePicker which needs to be done within the popupOpen event. This
particular step can be skipped, if the user needs to simply use the normal form design with
applicable fields.
view
data.cs
, 15)" views="@ViewBag.view" popupOpen="onPopupOpen" editorTemplate="#EventEditorTempla
te" showQuickInfo="false" >
-eventsettings>
</ejs-schedule>
</div>
</div>
<style>
.custom-event-editor .e-textlabel {
padding-right: 15px;
text-align: right;
}
.custom-event-editor td {
padding: 7px;
padding-right: 16px;
}
1096
</style>
<script id="EventEditorTemplate" type="text/template">
<table class="custom-event-editor" width="100%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">Summary</td>
<td colspan="4">
<input id="Subject" class="e-field e-input" type="text" value=""
name="Subject" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">Status</td>
<td colspan="4">
<input type="text" id="EventType" name="EventType" class="e-fie
ld" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">From</td>
<td colspan="4">
<input id="StartTime" class="e-field" type="text" name="StartTi
me" />
</td>
</tr>
<tr>
<td class="e-textlabel">To</td>
<td colspan="4">
<input id="EndTime" class="e-field" type="text" name="EndTime"
/>
</td>
</tr>
<tr>
<td class="e-textlabel">Reason</td>
<td colspan="4">
<textarea id="Description" class="e-field e-input" name="Descri
ption" rows="3" cols="50"
style="width: 100%; height: 60px !important; resize:
vertical"></textarea>
</td>
</tr>
</tbody>
</table>
</script>
function onPopupOpen(args) {
if (args.type === 'Editor') {
var statusElement = args.element.querySelector('#EventType');
1097
if (!statusElement.classList.contains('e-dropdownlist')) {
var dropDownListObject = new ej.dropdowns.DropDownList({
placeholder: 'Choose status', value: statusElement.value,
dataSource: ['New', 'Requested', 'Confirmed']
});
dropDownListObject.appendTo(statusElement);
statusElement.setAttribute('name', 'EventType');
}
var startElement = args.element.querySelector('#StartTime');
if (!startElement.classList.contains('e-datetimepicker')) {
new ej.calendars.DateTimePicker({ value: new Date(startElement.valu
e) || new Date() }, startElement);
}
var endElement = args.element.querySelector('#EndTime');
if (!endElement.classList.contains('e-datetimepicker')) {
new ej.calendars.DateTimePicker({ value: new Date(endElement.value)
|| new Date() }, endElement);
}
}
}
</script>
}
using System;
using System.Linq;
{
{
public IActionResult custom-editor-template()
{
List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
{
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek
},
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
};
ViewBag.view = viewOption;
return View();
1098
}
}
}
Customizing the quick pop-ups

The quick pop up window can be customized by making use of the popupOpen event which will
trigger when a pop up window is about to open. In the below demo an additional description field
is added.
view
data.cs
, 15)" views="@ViewBag.view" actionBegin="onActionBegin" popupOpen="onPopupOpen">
-eventsettings>
</ejs-schedule>
</div>
</div>
function onActionBegin(args) {
if (args.requestType === 'eventCreate') {
var eventData = args.data;
eventData.Description = document.getElementById("DescriptionValue").inn
erText;
}
}
if (args.type === 'QuickInfo') {
if (args.target.classList.contains("e-work-cells")) {
if (!args.element.querySelector('.custom-field-row')) {
var row = ej.base.createElement('div', { className: 'custom-fie
ld-row' });
var formElement = args.element.querySelector('.e-schedule-form'
);
formElement.appendChild(row);
var container = ej.base.createElement('div', { className: 'cust
om-field-container' });
var classNames = 'e-field e-custom-description';
1099
var inputEle = ej.base.createElement('input', {
className: classNames, attrs: { type: 'text', value: '', na
me: 'Description' }
});
container.appendChild(inputEle);
row.appendChild(container);
ej.inputs.Input.createInput({
element: inputEle, floatLabelType: 'Auto',
properties: {
enableRtl: scheduleObj.enableRtl,
placeholder: "Description"
}
});
var element = document.querySelector(".e-custom-description");
element.addEventListener("keypress", function (e) {
document.getElementById("DescriptionValue").innerHTML = e.t
arget.value;
});
}
}
else if (args.target.classList.contains("e-appointment")) {
var eventData = args.data;
var row = ej.base.createElement('div', { className: 'e-event-descri
ption' });
row.textContent = eventData.Description;
var element = args.element.querySelector('.e-subject-wrap');
element.parentNode.insertBefore(row, element.nextSibling);
}
}
}
</script>
}
using System;
using System.Linq;
{
{
public IActionResult custom-quick-popup()
{
1100
{
}
};
return View();
}
}
}
1101
Timezone
The Scheduler makes use of the System time zone by default. If it needs to follow some other
user-specific time zone, then the API timezone can be used. Apart from the default action of
applying specific timezone to the entire Scheduler, it is also possible to set different time zone
values for each appointments through the properties startTimezone and endTimezone which
can be defined as separate fields within the appointment collection.
Display appointments on client timezone

When no specific time zone is set to Schedule through timezone API, appointments will be
displayed based on the client timezone value. It is the default behavior.
Appointments based on Schedule timezone

When specific time zone is set to Schedule through timezone API which is different from client
timezone then the appointments will be displayed based on Schedule timezone regardless of its
client timezone. In the below demo appointments will be displayed at Eastern Time (UTC -05:00).
view
data.cs
<ejs-schedule id="schedule" width="100%" height="550px" timezone="America/N
ew_York" selectedDate="new DateTime(2018, 6, 17)">
-eventsettings>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
1102
{
{
public ActionResult schedule-timezone()
{
ViewBag.datasource = new ScheduleData().GetFifaEventsData();
return View();
}
}
}
Display appointments on same time everywhere

Setting timezone to UTC will only display appointments as same as in database timings for all
users in different time zone.
view
data.cs
<ejs-schedule id="schedule" width="100%" height="550px" timezone="UTC" sele
ctedDate="new DateTime(2018, 6, 17)">
-eventsettings>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
{
1103
public ActionResult sametime()
{
ViewBag.datasource = new ScheduleData().GetFifaEventsData();
return View();
}
}
}
Customizing the timezone collection

Instead of displaying all the default timezone collection (more than 200), you can display your
custom collection at sample side as shown below.
view
data.cs
<ejs-schedule id="schedule" width="100%" height="550px" selectedDate="new D
ateTime(2018, 6, 17)">
-eventsettings>
</ejs-schedule>
</div>
</div>
}
var data = [{ Value: 'America/New_York', Text: '(UTC-05:00) Eastern Time' }, {
Value: 'UTC', Text: 'UTC' }, { Value: 'Asia/Kolkata', Text: '(UTC+05:30) India Standard
Time' }];
var timezoneData = ej.schedule.timezoneData;
timezoneData.splice.apply(timezoneData, [0, timezoneData.length].concat(data));
</script>
}
using System;
using System.Linq;
1104
{
{
public ActionResult timezone-collection()
{
ViewBag.datasource = new ScheduleData().GetResourceData();
List<OwnerResources> owners = new List<OwnerResources>();
owners.Add(new OwnerResources { OwnerText = "Nancy", Id = 1, OwnerColor = "
#ffaa00" });
owners.Add(new OwnerResources { OwnerText = "Steven", Id = 2, OwnerColor =
"#f8a398" });
owners.Add(new OwnerResources { OwnerText = "Michael", Id = 3, OwnerColor =
"#7499e1" });
ViewBag.Owners = owners;
string[] resources = new string[] { "Owners" };
ViewBag.Resources = resources;
return View();
}
}
public class OwnerResources
{
public string OwnerText { set; get; }
public int Id { set; get; }
public string OwnerColor { set; get; }
}
}
1105
Views
Schedule allows to display the events on all its available views such as
Day
Week
Work week
Month
Agenda
Month-Agenda
Except Month-Agenda view, all the other views are displayed by default on the Schedule.
View-specific settings
The fields available are as follows.
Applicable
Property Type Description
views
Day,
Week,
It accepts the schedule
Work
view name, based on
week,
option View which we can define with
Month,
its related properties in a
Agenda,
single object.
Month-
Agenda.
Day,
To denote whether the
Week,
view name given on the
Work
option is active or not.
week,
isSelected Boolean It acts similar to the
Month,
currentView property
Agenda,
and defines the active
Month-
view of Schedule.
Agenda.
By default, Schedule
follows the date-format
as per the default culture
assigned to it. It is also
possible to manually set
specific date format by Day,
using the dateFormat Week,
property. The format of Work
the date range label in week,
dateFormat Date
the header bar depends Month,
on the dateFormat Agenda,
value or else based on Month-
the locale assigned to Agenda.
1106
the Schedule. It gets
applied only to the view
objects on which it is
defined.
Day,
When set to true ,
Week,
prevents the CRUD
Work
actions on the respective
week,
readonly Boolean views. By default, it is set
Month,
to false . It gets applied
Agenda,
only to the view objects
Month-
on which it is defined.
Agenda.
It is used to specify the

starting hour, from which
the Schedule starts to Day,
display. It accepts the Week,
startHour String
time string in a short Work
skeleton format and also, week.
hides the time beyond
the specified start time.
It is used to specify the

Day,
end hour, at which the
Week,
endHour String Schedule ends. It too
Work
accepts the time string in
week.
a short skeleton format.
It is used to allow or
disallow the virtual
allowVirtualScrolling Boolean Agenda.
scrolling functionality on
Agenda View.
It accepts either the

string or HTMLElement
as template design
Day,
content and parse it
Week,
appropriately before
Work
displaying it onto the
week,
dateHeaderTemplate String date header cells. The
Month,
field that can be
Agenda,
accessed via this
Month-
template is date . It gets
Agenda.
defined.
The template option

which is used to render
the customized work
cells on the Schedule.
Here, the template Day,
accepts either the string Week,
or HTMLElement as Work
cellTemplate String template design and then week,
the parsed design is Month,
displayed onto the work Month-
cells. The field Agenda.
1107
accessible via template
is date . It gets applied
only to the view objects
on which it is defined.
It accepts either the

string or HTMLElement
as template design
content and parse it
appropriately before
displaying it onto the
event background. All the
Day,
event fields mapped to
Week,
Schedule from
Work
dataSource can be
week,
eventTemplate String accessed within this
Month,
template code. It is
Agenda,
similar to that of the
Month-
template option
Agenda.
available within the
eventSettings property,
whereas it will get
applied only on the
events of the view to
which it is currently being
defined.
When set to false , it

hides the weekend days
of a week from the
Schedule. The days
which are not defined in
the working days Day,
collection are usually Week,
treated as weekend Month,
showWeekend Boolean
days. If the working days Agenda,
are defined as [1, 2, 3, Month-
4], then the remaining Agenda.
days of that week will be
considered as the
weekend days and will
be hidden on all the
views.
When the same view is

Day,
customized with different
Week,
intervals, this property
displayName String Work
allows the user to set
week,
different display name for
Month.
each of the views.
It accepts the number

Day,
value denoting to include
Week,
the number of days,
interval Number Work
weeks, work-weeks or
week,
months on the defined
Month.
view type.
It is used to set the
1108
working days on
Schedule. The only days
Day,
that are defined in this
Week,
collection will be Work
rendered on the
workDays Number[] week,
workWeek view whereas
Month,
on other views, it will Month-
display all the usual days Agenda.
and simply highlights the
working days with
different shade.
The template option

which is used to render
the customized header
cells on the Schedule.
Here, the template
accepts either the string Day,
or HTMLElement as Week,
template design and then Work
the parsed design is week,
resourceHeaderTemplate String
displayed onto the Month,
header cells. All the Agenda,
resource fields mapped Month-
within resources can be Agenda.
accessed within this
template code. It gets
defined.
Allows to set different Day,

timescale configuration Week,
timeScale TimeScaleModel
on each applicable view Work
modes. week.
Day,
Week,
Allows to set different Work
resource grouping week,
group GroupModel
options on all available Month,
schedule view modes. Agenda,
Month-
Agenda.
Extended views
Views can be extended to display n number of days, weeks and months on a single view using
interval property. Refer the below code example to display 3 days, 2 weeks and 4 months on
the respective views.
view
data.cs
1109
ateTime(2018, 2, 15)">
<e-schedule-views>
<e-view option="Day" displayName="3 Days" interval="3"></e-view>
<e-view option="Week" displayName="2 Weeks" interval="2" isSelected=
"true"></e-view>
<e-view option="Month" displayName="4 Months" interval="4"></e-view>
</e-schedule-views>
<e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedu
le-eventsettings>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
{
public ActionResult extended-views()
{
return View();
}
}
}
interval property is not applicable on agenda and month agenda views.
Display schedule with specific views
1110
To display specific views alone and to configure other properties available within it, views
property can be used.
To configure Schedule with simply 2 views but with different configurations, refer the below code
example.
view
data.cs
<ejs-schedule id="schedule" height="550" view="@ViewBag.view" cellTemplate=
"#apptemplate" selectedDate="new DateTime(2018, 2, 15)">
</ejs-schedule>
</div>
</div>
<script id="apptemplate" type="text/template">
${if (type === "monthCells")}
<div class="templatewrap">
${getCellContent(data.date)}
</div> ${/if}
</script>
function getCellContent(date) {
var weekEnds = [0, 6];
if (weekEnds.indexOf(date.getDay()) >= 0) {
return "<img src='weekend.png' /><span class='caption'>Weekend</span>";
}
return '';
}
</script>
}
using System;
using System.Linq;
{
{
1111
public ActionResult specific-views()
{
{
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week, Sho
wWeekend = false },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month}
};
return View();
}
}
}
Above code example display Schedule with 2 views namely Week and Month – on which
weekend days are set to hidden in Week view and cell templates are applied on Month
view.
1112
Resources
The Scheduler provides Resources support, with which the single Scheduler is shared by
multiple resources simultaneously. Each resource in the Scheduler is arranged in a column/row
wise, with individual spacing to display all its respective appointments on a single page. It also
supports the grouping of resources, thus enabling the categorization of resources in a
hierarchical structure and shows it either in expandable groups (Horizontal view) or else vertical
hierarchy one after the other (Vertical view).
One or more resources can be assigned to the Scheduler appointments by making selection of
the resource options available in the appointment window.
Resources fields
The default options available within the resources collection are as follows,
field (String)
A value that binds to the resource field of event object.
title (String)
It holds the title name of the resource field to be displayed on the Schedule appointment window.
name (String)
A unique resource name used for differentiating various resource objects while grouping.
allowMultiple (Boolean)
When set to true , allows multiple selection of resource names, thus creating multiple instances
of same appointment for the selected resources.
resourceColorField (String)
Binds the resource level name, whose color will be applied to events.
dataSource (Object)
Assigns the resource dataSource , where data can be passed either as an array of JavaScript
objects, or else can create an instance of DataManager in case of processing remote data and
can be assigned to the dataSource property. With the remote data assigned to dataSource ,
check the available adaptors to customize the data processing.
query (Query)
Defines the external query that will be executed along with the data processing.
1113
idField (String)
Binds the id field name from the dataSource .
textField (String)
Binds the text field name from the dataSource .
groupIDField (String)
Binds the group-id field name from the dataSource .
colorField (String)
Binds the color field name from the dataSource .
startHourField (String)
Binds the start hour field name from the dataSource .
endHourField (String)
Binds the end hour field name from the dataSource .
workDaysField (String)
Binds the work days field name from the dataSource .
cssClassField (String)
Binds the custom CSS class field name from the dataSource .
Multiple resources (without grouping)

It is possible to display the Scheduler in default look without visually showcasing all the resources
on it, but it allow the user to assign the required resources to the appointments through the
appointment window resource options.
The appointments belonging to all the resources will be displayed on the Scheduler which will be
differentiated based on the resource color assigned in the resources (depicting to which
resource that particular appointment belongs).
Example: To display default Scheduler with multiple resource options in the appointment
window,
view
data.cs
1114
ateTime(2018, 6, 5)">
<e-schedule-group byGroupID="false" resources="@ViewBag.Resources"></e-
schedule-group>
<e-schedule-resources>
<e-resource dataSource="@ViewBag.Rooms" field="RoomId" title="Room"
name="Rooms" textField="RoomText" idField="id" groupIDField="RoomGroupId" colorField="c
olor" allowMultiple="false"></e-resource>
<e-resource dataSource="@ViewBag.Owners" field="OwnerId" title="Own
er" name="Owners" textField="OwnerText" idField="id" groupIDField="OwnerGroupId" colorF
ield="color" allowMultiple="true"></e-resource>
</e-schedule-resources>
<e-schedule-views>
<e-view option="Week"></e-view>
<e-view option="Month"></e-view>
<e-view option="Agenda"></e-view>
</e-schedule-views>
-eventsettings>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
{
{
List<RoomResources> rooms = new List<RoomResources>();

rooms.Add(new RoomResources { RoomText = "ROOM 1", Id = 1, RoomColor = "#cb
6bb2" });
rooms.Add(new RoomResources { RoomText = "ROOM 2", Id = 2, RoomColor = "#56
ca85" });
1115
ViewBag.Rooms = rooms;

#ffaa00" });
"#f8a398" });
"#7499e1" });
ViewBag.Resources = new string[] { "Rooms", "Owners" };

return View();
}
}
public class RoomResources

{
public string RoomText { set; get; }
public string RoomColor { set; get; }
}
{
}
}
Setting allowMultiple to true in the above code snippet allows the user to select
multiple resources in the appointment window and also creates multiple copies of the same
appointment in the Scheduler for each resources while saving.
Group by levels
Scheduler supports both single and multiple levels of resource grouping that can be customized
either in horizontal or vertical Scheduler views. In Vertical view - the levels are displayed in a tree
structure one after the other, but in horizontal view – the levels are grouped in a vertically
expandable/collapsible structure. Scheduler also provides
Option to group same child resource(s) under different parent resource(s).
Option to group resource(s) on day basis.
Option to edit all resource events simultaneously.
1116
Single level
This type of grouping allows the Scheduler to display all the resources at a single level
simultaneously. The appointments will make use of the colorField defined for the first resource
instance as its background color.
Example: To display the Scheduler with single level resource grouping options,
view
data.cs
ateTime(2018, 6, 5)">
<e-schedule-group resources="@ViewBag.Resources"></e-schedule-group>
er" name="Owners" textField="OwnerText" idField="id" colorField="color" allowMultiple="
true"></e-resource>
<e-schedule-views>
</e-schedule-views>
-eventsettings>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
1117
{
public ActionResult single-level()
{
#ffaa00" });
"#f8a398" });
"#7499e1" });
return View();
}
}
{
}
}
The name field mentioned in the resource object needs to be specified within the group
property in order to enable the grouping option in Scheduler.
Multi-Level
This type of grouping displays the resources in the Scheduler at multiple levels with a set of
resources grouped under each parent. The appointments will make use of the colorField
defined for the first/top level resource instance as its background color.
Example: To display the Scheduler with multiple level resource grouping options,
view
data.cs
ateTime(2018, 6, 5)">
1118
schedule-group>
<e-resource dataSource="@ViewBag.Rooms" field="RoomId" title="Room"
name="Rooms" textField="RoomText" idField="id" groupIDField="RoomGroupId" colorField="c
olor" allowMultiple="false"></e-resource>
er" name="Owners" textField="OwnerText" idField="id" groupIDField="OwnerGroupId" colorF
ield="color" allowMultiple="true"></e-resource>
<e-schedule-views>
</e-schedule-views>
-eventsettings>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
{
{
List<RoomResources> rooms = new List<RoomResources>();

rooms.Add(new RoomResources { RoomText = "ROOM 1", Id = 1, RoomColor = "#cb
6bb2" });
rooms.Add(new RoomResources { RoomText = "ROOM 2", Id = 2, RoomColor = "#56
ca85" });
ViewBag.Rooms = rooms;

1119
#ffaa00" });
"#f8a398" });
"#7499e1" });
ViewBag.Resources = new string[] { "Rooms", "Owners" };

return View();
}
}
public class RoomResources

{
public string RoomText { set; get; }
public string RoomColor { set; get; }
}
{
}
}
Group all child resources

This type of grouping displays the same child resources under different parent resource(s). To
enable such grouping, it is necessary to set byGroupID to false within the group whereby
allowing all the resources available in each child level to group under its parent resources. With
this option available, we can avoid the need to provide multiple definitions of the same data to be
grouped under different parent.
Example: To display the Scheduler with same set of child resource under different parent
grouping options,
view
data.cs
<ejs-schedule id="schedule" width="100%" height="550px" currentView="WorkWe
1120
ek" selectedDate="new DateTime(2018, 6, 5)">
schedule-group>
<e-resource dataSource="@ViewBag.Projects" field="ProjectId" title=
" Choose Project" name="Projects" textField="text" idField="id" colorField="color"></e-
resource>
<e-resource dataSource="@ViewBag.Categories" field="CategoryId" tit
le="Category" name="Categories" textField="text" idField="id" colorField="color" allowM
ultiple="true"></e-resource>
<e-eventsettings-fields>
<e-field-subject name="Subject" title="Summary"></e-field-subje
ct>
<e-field-description name="Description" title="Comments"></e-fi
eld-description>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
{
public ActionResult group-child()
{
ViewBag.datasource = new ScheduleData().GetResourceTeamData();
List<ProjectResource> projects = new List<ProjectResource>();

projects.Add(new ProjectResource { text = "PROJECT 1", id = 1, color = "#cb
6bb2" });
projects.Add(new ProjectResource { text = "PROJECT 2", id = 2, color = "#56
ca85" });
ViewBag.Projects = projects;
1121
List<CategoryResource> categories = new List<CategoryResource>();
categories.Add(new CategoryResource { text = "Development", id = 1, color =
"#1aaa55" });
categories.Add(new CategoryResource { text = "Testing", id = 2, color = "#7
fa900" });
ViewBag.Categories = categories;
ViewBag.Resources = new string[] { "Projects", "Categories" };

return View();
}
}
public class ProjectResource
{
public string text { set; get; }
public int id { set; get; }
public string color { set; get; }
}
public class CategoryResource
{
}
}
Group by date
This type of grouping displays the resource group on day basis. To enable such grouping, it is
necessary to set byDate to true within the group whereby allowing all the resource group
under the date.
Example: To display the Scheduler with resource group under date option,
view
data.cs
ateTime(2018, 4, 1)">
<e-schedule-group byDate="true" resources="@ViewBag.Resources"></e-sche
dule-group>
1122
<e-resource dataSource="@ViewBag.Owners" field="OwnerId" title="Ass
ignee" name="Owners" textField="text" idField="id" colorField="color" allowMultiple="tr
ue"></e-resource>
<e-schedule-views>
</e-schedule-views>
<e-field-subject name="Subject" title="Task"></e-field-subject>
<e-field-location name="Location" title="Project Name"></e-fiel
d-location>
<e-field-description name="Description" title="Comments"></e-fi
eld-description>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
{
public ActionResult GroupByDate()
{
List<OwnerRes> owners = new List<OwnerRes>();

owners.Add(new OwnerRes { text = "Alice", id = 1, color = "#1aaa55" });
owners.Add(new OwnerRes { text = "Smith", id = 2, color = "#7fa900" });

return View();
1123
}
}
public class OwnerRes
{
}
}
Linked events
This type of option allow us to edit all resource events simultaneously and to enable such option,
it is necessary to set allowGroupEdit to true within the group . With this property enabled, a
single appointment object will be maintained within the appointment collection, even if it is shared
by more than one resource – whereas the resource fields of such appointment object will hold the
IDs of the multiple resources separated by commas. Any actions such as create, edit or delete
held on any one of the event, will be reflected on all other related instances visible on the UI.
view
data.cs
<ejs-schedule id="schedule" width="100%" height="550px" currentView="WorkWe
ek" resourceHeaderTemplate="#resourceTemplate" selectedDate="new DateTime(2018, 6, 5)">
<e-schedule-group allowGroupEdit="true" resources="@ViewBag.Resources">
</e-schedule-group>
<e-resource dataSource="@ViewBag.Conferences" field="ConferenceId"
title="Attendees" name="Conferences" textField="text" idField="id" colorField="color" a
llowMultiple="true"></e-resource>
<e-schedule-views>
<e-view option="Day"></e-view>
<e-view option="WorkWeek"></e-view>
</e-schedule-views>
<e-field-subject name="Subject" title="Conference Name"></e-fie
ld-subject>
<e-field-description name="Description" title="Summary"></e-fie
1124
ld-description>
<e-field-starttime name="StartTime" title="From"></e-field-star
ttime>
<e-field-endtime name="EndTime" title="To"></e-field-endtime>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
{
public ActionResult GroupEditing()
{
ViewBag.datasource = new ScheduleData().GetResourceConferenceData();
{
},
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month },
};
List<ConferenceRes> conferences = new List<ConferenceRes>();

conferences.Add(new ConferenceRes { text = "Margaret", id = 1, color = "#1a
aa55" });
conferences.Add(new ConferenceRes { text = "Robert", id = 2, color = "#357c
d2" });
conferences.Add(new ConferenceRes { text = "Laura", id = 3, color = "#7fa90
0" });
ViewBag.Conferences = conferences;
string[] resources = new string[] { "Conferences" };

1125
return View();
}
}
public class ConferenceRes
{
}
}
Setting different work days and hours

It is possible to assign different work-days and work-hours for each resources present within the
Scheduler. The process of assigning different working days for every individual resources is
applicable only for the vertical Scheduler mode and not for timeline view, whereas the
customization of work-hours for each resources is applicable on both the Scheduler orientation.
Example: To display the Scheduler with each individual resources having different work-hours
and work-days,
view
data.cs
, 1)">
<e-resource dataSource="@ViewBag.Doctors" field="DoctorId" title="D
octor Name" name="Doctors" textField="text" idField="id" colorField="color" workDaysFie
ld="workDays" startHourField="startHour" endHourField="endHour"></e-resource>
<e-schedule-views>
</e-schedule-views>
<e-field-subject name="Subject" title="Service Type"></e-field-
subject>
<e-field-location name="Location" title="Patient Name"></e-fiel
d-location>
1126
<e-field-description name="Description" title="Summary"></e-fie
ld-description>
<e-field-starttime name="StartTime" title="From"></e-field-star
ttime>
<e-field-endtime name="EndTime" title="To"></e-field-endtime>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
{
public ActionResult custom-workdays()
{
ViewBag.datasource = new ScheduleData().GetDoctorData();
List<DoctorRes> doctors = new List<DoctorRes>();
doctors.Add(new DoctorRes { text = "Will Smith", id = 1, color = "#ea7a57",
workDays = new List<int> { 1, 2, 4, 5 }, startHour = "07:00", endHour = "13:00" });
doctors.Add(new DoctorRes { text = "Alice", id = 2, color = "rgb(53, 124, 2
10)", workDays = new List<int> { 1, 3, 5 }, startHour = "09:00", endHour = "17:00" });
doctors.Add(new DoctorRes { text = "Robson", id = 3, color = "#7fa900", sta
rtHour = "08:00", endHour = "16:00" });
ViewBag.Doctors = doctors;
string[] resources = new string[] { "Doctors" };

return View();
}
}
public class DoctorRes
{
public List<int> workDays { set; get; }
public string startHour { set; get; }
1127
public string endHour { set; get; }
}
}
Dynamically add or remove resources to and from the

Schedule layout
Initially Schedule is displayed with single resource with its related set of appointments. When the
additional checkboxes given are checked and unchecked, the respective resources gets added
up or removed from the schedule layout. To add new resources dynamically, addResource
method is used which accepts the arguments such as resource object, resource name (within
which level, the resource object to be added) and index (position where the resource needs to be
added). To remove the resources dynamically, removeResource method is used which accepts
the index (position from where the resource to be removed) and resource name (within which
level, the resource object presents) as parameters.
view
data.cs
<table id="property" title="Show / Hide Resource" style="width: 100%">
<tbody>
<tr style="height: 100%">
<td style="width: 25%">
<ejs-checkbox id="personal" change="onChange" checked="true" di
sabled="true" label="My Calendar" value="1"></ejs-checkbox>
</td>
<ejs-checkbox id="company" change="onChange" checked="false" la
bel="Company" value="2"></ejs-checkbox>
</td>
<ejs-checkbox id="birthdays" change="onChange" checked="false"
label="Birthdays" value="3"></ejs-checkbox>
</td>
<ejs-checkbox id="holidays" change="onChange" checked="false" l
abel="Holidays" value="4"></ejs-checkbox>
</td>
</tr>
</tbody>
</table>
</div>
1128
<ejs-schedule id="schedule" height="550" selectedDate="new DateTime(2018, 4, 1)"
>
<e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eve
ntsettings>
<e-resource field="CalendarId" title="Calendars" name="Calendars" allow
Multiple="true" dataSource="@ViewBag.Calendars" textField="CalendarName" idField="Calen
darId" colorField="CalendarColor"></e-resource>
<e-schedule-views>
<e-view option="Month">
</e-view>
</e-schedule-views>
</ejs-schedule>
</div>
<style>
.property-panel-content .e-checkbox-wrapper.personal .e-label {
color: #808080;
}
.property-panel-content .e-checkbox-wrapper.personal .e-frame {

background-color: #c43081;
}
.property-panel-content .e-checkbox-wrapper.company .e-frame {

background-color: #ff7f50;
}
.property-panel-content .e-checkbox-wrapper.birthday .e-frame {

background-color: #AF27CD;
}
.property-panel-content .e-checkbox-wrapper.holiday .e-frame {

}
.e-schedule .e-month-view .e-appointment {

}
.highcontrast .property-panel-content .e-checkbox-wrapper .e-frame.e-check,

.bootstrap .property-panel-content .e-checkbox-wrapper .e-frame.e-check {
color: #fff;
1129
}
</style>
var calendarCollections = [
{ CalendarName: 'My Calendar', CalendarId: 1, CalendarColor: '#c43081'
},
{ CalendarName: 'Company', CalendarId: 2, CalendarColor: '#ff7f50' },
{ CalendarName: 'Birthday', CalendarId: 3, CalendarColor: '#AF27CD' },
{ CalendarName: 'Holiday', CalendarId: 4, CalendarColor: '#808000' }
];
var value = parseInt(args.event.target.getAttribute('value'), 10);
var resourceData = calendarCollections.filter(function (calendar) { return
calendar.CalendarId === value; });
if (args.checked) {
scheduleObj.addResource(resourceData[0], 'Calendars', value - 1);
} else {
scheduleObj.removeResource(value, 'Calendars');
}
}
</script>
}
using System;
using System.Linq;
{
{
public ActionResult AddRemoveResources()
{
List<CalendarRes> calendarCollections = new List<CalendarRes>();
calendarCollections.Add(new CalendarRes { CalendarName = "My Calendar", Cal
endarId = 1, CalendarColor = "#c43081" });
ViewBag.Calendars = calendarCollections;
ScheduleData data = new ScheduleData();

List<ScheduleData.ResourceEventsData> holidayData = data.GetHolidayData();
List<ScheduleData.ResourceEventsData> birthdayData = data.GetBirthdayData()
;
List<ScheduleData.ResourceEventsData> companyData = data.GetCompanyData();
1130
List<ScheduleData.ResourceEventsData> personalData = data.GetPersonalData()
;
ViewBag.datasource = holidayData.Concat(birthdayData).Concat(companyData).C
oncat(personalData);

{
};
string[] resources = new string[] { "Calendars" };

return View();
}
public class CalendarRes
{
public string CalendarName { set; get; }
public int CalendarId { set; get; }
public string CalendarColor { set; get; }
}
}
}
1131
Read Only
An interaction with the appointments of the Scheduler can be enabled/disabled through the
readonly property. When the readonly property is set to true , it is not possible to do any
actions on the appointments, but you can navigate between the schedule dates, views and can
also be able to see the appointment details in the quick window. By default, this property is set to
false .
view
data.cs
, 15)" readonly="true">
-eventsettings>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
{
public IActionResult read-only()
{
return View();
}
}
1132
How to prevent the pop-ups from opening
When readonly is set to true , only the CRUD action will be prevented but still popup will be
displayed with appointment details, which can be allowed only to view. Refer the below code
example to disable the popup when readonly is set to true .
view
data.cs
, 15)" readonly="true" popupOpen="onPopupOpen" eventRendered="onEventRendered" eventCli
ck="onEventClick">
-eventsettings>
</ejs-schedule>
</div>
</div>
<style>
.e-schedule .e-read-only {
opacity: .8;
}
</style>
var isReadOnly = function (data) {
return data.ReadOnly || (data.EndTime < new Date());
};
function onEventClick(args) {
if ((args.element).classList.contains('e-read-only')) {
args.cancel = true;
}
}
function onEventRendered(args) {
if (isReadOnly(args.data)) {
args.element.setAttribute('aria-readonly', 'true');
args.element.classList.add('e-read-only');
}
}
if (args.type === 'editor' && isReadOnly(args.data)) {
args.cancel = true;
}
}
1133
</script>
}
using System;
using System.Linq;
{
{
public IActionResult prevent-popup()
{
return View();
}
}
1134
TimeScale
The timeScale allows the user to set the required time slot duration for the work cells that
displays on the Scheduler. It includes the below properties such as,
enable - It accepts true or false value, denoting whether to show or hide the time slots. Its
default value is true.
interval – Specifies the major time slot duration.
slotCount – Specifies the value, based on which the minor time slots are divided into
appropriate count.
The interval and slotCount can be set on the Scheduler with the following code example.
view
data.cs
<ejs-schedule id="schedule" width="100%" height="550px" showTimeIndicator="
false" selectedDate="new DateTime(2018, 2, 15)">
<e-schedule-timescale enable="true" interval="60" slotCount="6"></e-sch
edule-timescale>
<e-schedule-views>
</e-schedule-views>
-eventsettings>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
1135
{
{
public ActionResult timescale()
{
return View();
}
}
}
Customizing time cells

The timeScale is also availed with template options to allow customization. It includes the
following 2 properties for customization -
majorSlotTemplate - Accepts the id value of the template design block preceded by a

symbol #, which gets applied for the major time slots.
minorSlotTemplate - Accepts the id value of the template design block preceded by a

symbol #, which gets applied for the minor time slots.
view
data.cs
ateTime(2018, 2, 15)">
<e-schedule-timescale interval="60" slotCount="6"></e-schedule-timescale
>
<e-schedule-views>
</e-schedule-views>
-eventsettings>
</ejs-schedule>
</div>
</div>
<script id="majorSlotTemplate" type="text/x-template">
1136
<div>${majorSlotTemplate(data.date)}</div>
</script>
<script id="minorSlotTemplate" type="text/x-template">
<div style="text-align: right; margin-right: 15px">${minorSlotTemplate(data.dat
e)}</div>
</script>
window.majorSlotTemplate = function (date) {
return instance.formatDate(date, { skeleton: 'hm' });
};
window.minorSlotTemplate = function (date) {
return instance.formatDate(date, { skeleton: 'ms' }).replace(':00', '');
};
</script>
}
using System;
using System.Linq;
{
{
public ActionResult custom-timecells()
{
return View();
}
}
}
On/Off timescale
The time cells can be enabled / disabled on Schedule, by setting true / false to the enable
property available within timeScale . It's default value is true .
view
data.cs
1137
ateTime(2018, 2, 15)">
<e-schedule-timescale enable="false"></e-schedule-timescale>
<e-schedule-views>
</e-schedule-views>
-eventsettings>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
{
public ActionResult on-off-timescale()
{
return View();
}
}
}
On/Off Time indicator

The current time indicator visually depicts the live current system time appropriately on the user
interface. It can be enabled / disabled by setting true / false to the showTimeIndicator
property. It's default value is true .
1138
view
data.cs
<ejs-schedule id="schedule" width="100%" height="550px" showTimeIndicator="
false" selectedDate="new DateTime(2018, 6, 5)">
<e-schedule-views>
</e-schedule-views>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
{
public ActionResult time-indicator()
{
return View();
}
}
}
1139
Header bar customization
Show/Hide header bar

By default, the header bar holds the date and view navigation options, to which the user can add
their own custom items onto it. Schedule header bar can be enabled / disabled by setting true /
false to the showHeaderBar property. It's default value is true .
view
data.cs
<ejs-schedule id="schedule" height="550" views="@ViewBag.view" selectedDate=
"new DateTime(2018, 2, 15)" showHeaderBar="false">
-eventsettings>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
{
public ActionResult show-hide-headerbar()
{
{
1140
}
};
return View();
}
}
}
Customizing header bar

Below demo shows the way of adding custom items into the Schedule header bar. Here, an
employee image is added to the header bar, clicking on which will open the popup showing that
person's short profile information.
[src/app/app.ts]
Now, run the application in the browser using the following command.
view
data.cs
"new DateTime(2018, 2, 15)" actionComplete="onActionComplete" actionBegin="onActionBegi
n">
-eventsettings>
</ejs-schedule>
</div>
</div>
<style>
.e-schedule .e-schedule-toolbar .user-icon {
background-image: url('./content/schedule/images/nancy.png');
background-position: center center;
border-radius: 50%;
height: 24px;
min-width: 24px !important;
}
1141
.e-schedule .e-schedule-toolbar .e-toolbar-items span.e-btn-icon.user-icon.e-ic
ons {
line-height: 24px !important;
min-height: 24px !important;
}
.e-schedule .e-schedule-toolbar .e-toolbar-items .e-schedule-user-icon .e-tbar-

btn:hover {
background-color: inherit;
}
.e-schedule .e-schedule-toolbar .e-toolbar-items .e-schedule-user-icon .e-tbar-

btn-text {
display: none;
}
.e-schedule .e-schedule-toolbar .e-toolbar-pop .e-schedule-user-icon .e-tbar-bt

n-text {
padding-left: 8px !important;
}
.e-profile-wrapper {
width: 210px;
height: 80px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.e-profile-wrapper .profile-container {
display: flex;
padding: 10px;
}
.e-profile-wrapper .profile-image {
background-image: url('./content/schedule/images/nancy.png');
border-radius: 50%;
width: 60px;
height: 60px;
}
.e-profile-wrapper .content-wrap {
padding-left: 10px;
}
1142
.e-profile-wrapper .name {
font-size: 14px;
line-height: 20px;
font-weight: 500;
margin-top: 2px;
}
.e-profile-wrapper .destination {
font-size: 12px;
}
.e-profile-wrapper .status-icon {
height:6px;
width:6px;
background:green;
border-radius:100%;
float:left;
margin-right:4px;
margin-top:4px;
}
.e-profile-wrapper .status {
font-size: 11px;
}
</style>
var profilePopup;
if (args.requestType === 'toolbarItemRendering') {
var userIconItem = {
align: 'Right', prefixIcon: 'user-icon', text: 'Nancy', cssClass: '
e-schedule-user-icon'
};
args.items.push(userIconItem);
}
}
function onActionComplete(args) {
var scheduleElement = document.getElementById('schedule');
if (args.requestType === 'toolBarItemRendered') {
var userIconEle = scheduleElement.querySelector('.e-schedule-user-icon'
);
userIconEle.onclick = function () {
profilePopup.relateTo = userIconEle;
profilePopup.dataBind();
if (profilePopup.element.classList.contains('e-popup-close')) {
profilePopup.show();
} else {
profilePopup.hide();
1143
}
};
}
var userContentEle = ej.base.createElement('div', {
className: 'e-profile-wrapper'
});
scheduleElement.parentElement.appendChild(userContentEle);
var userIconEle = scheduleElement.querySelector('.e-schedule-user-icon');
var getDOMString = ej.base.compile('<div class="profile-container"><div cla
ss="profile-image">' +
'</div><div class="content-wrap"><div class="name">Nancy</div>' +
'<div class="destination">Product Manager</div><div class="status">' +
'<div class="status-icon"></div>Online</div></div></div>');
var output = getDOMString({});
profilePopup = new ej.popups.Popup(userContentEle, {
content: output[0],
relateTo: userIconEle,
position: { X: 'left', Y: 'bottom' },
collision: { X: 'flip', Y: 'flip' },
targetType: 'relative',
viewPortElement: scheduleElement,
width: 210,
height: 80
});
profilePopup.hide();
}
</script>
}
using System;
using System.Linq;
{
{
public ActionResult custom-headerbar()
{
{
1144
};
return View();
}
}
}
Customizing date header

The dateHeaderTemplate option is used to customize the date header cells of day, week and
work-week views. In month view, the date header is not applicable and therefore the same
customization can be added beside the date text in the month cells by making use of the
renderCells event.
view
data.cs
<ejs-schedule id="schedule" height="550" views="@ViewBag.view" renderCell="
onRenderCell" cssClass="schedule-date-header-template" dateHeaderTemplate="#template" s
electedDate="new DateTime(2018, 2, 15)">
-eventsettings>
</ejs-schedule>
</div>
</div>
<style>
.schedule-date-header-template.e-schedule .e-vertical-view .e-header-cells {
padding: 0;
text-align: center !important;
}
.schedule-date-header-template.e-schedule .date-text {
font-size: 14px;
}
.schedule-date-header-template.e-schedule.e-device .date-text {
font-size: 12px;
}
.schedule-date-header-template.e-schedule .weather-image {
width: 20px;
height: 20px;
1145
}
.schedule-date-header-template.e-schedule .weather-text {
font-size: 11px;
}
.schedule-date-header-template.e-schedule .e-month-view .weather-image {

float: right;
margin: -20px 2px 0 0;
width: 20px;
height: 20px;
}
</style>
<script id="template" type="text/template">
<div class="date-text">${getDateHeaderText(data.date)}</div>
${getWeather(data.date)}
</script>
window.getDateHeaderText = function (value) {
return instance.formatDate(value, { skeleton: 'Ed' });
};
function getWeather(value) {
switch (value.getDay()) {
case 0:
return '<div class="weather-text">25°C</div>';
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
default:
return null;
}
}
if (args.elementType === 'monthCells') {
var ele = document.createElement('div');
ele.innerHTML = getWeather(args.date);
1146
(args.element).appendChild(ele.firstChild);
}
}
</script>
}
using System;
using System.Linq;
{
{
public ActionResult custom-dateheader()
{
{
},
};
return View();
}
}
}
1147
Working Days and Hours
The Scheduler can be customized in various aspects like -
Setting different day hour limits

Setting different working hours
Setting different work days and first day of week
Option to show/hide week end in Schedule
Schedule Display Hours

It denotes the start and end hour time limits to be displayed on the Scheduler. To set this time
limit, two properties namely startHour and endHour can be used. The following code example
renders the scheduler from 7.00 AM to 6.00 PM.
view
data.cs
ateTime(2018, 2, 15)" startHour="07:00" endHour="18:00">
<e-schedule-views>
</e-schedule-views>
-eventsettings>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
1148
{
{
public ActionResult display-hours()
{
return View();
}
}
}
Working Hours
Working hours indicates the work hour limit within the Scheduler, which is highlighted visually
with white color work cells. workHours is a object property which contains the below specified
options,
highlight – enables/disables the highlighting of work hours.

start - sets the start time of the working/business hour in a day.
end - sets the end time limit of the working/business hour in a day.
view
data.cs
ateTime(2018, 2, 15)">
<e-schedule-views>
</e-schedule-views>
<e-schedule-workhours highlight="true" start="11:00" end="20:00"></e-sc
hedule-workhours>
-eventsettings>
</ejs-schedule>
</div>
</div>
}
1149
using System;
using System.Linq;
{
{
{
return View();
}
}
}
Working Days
The working days of a week can be set on Schedule using the workDays property which accepts
the collection of day indexes (from 0 to 6) of a week. By default, it is set to [1, 2, 3, 4, 5] and in
the below demo, it has been set to [1, 3, 5] which means that Monday, Wednesday, Friday is
being set as working days of a week and is visually differentiated from non-working days. The
working hours usually applies only on these given working days.
view
data.cs
<ejs-schedule id="schedule" width="100%" height="550px" workDays="@ViewBag.
workday" selectedDate="new DateTime(2018, 2, 15)">
<e-schedule-views>
</e-schedule-views>
-eventsettings>
1150
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
{
{
ViewBag.workday = new int[] { 1, 3, 5 };
return View();
}
}
}
Setting start day of the week

The first day of the week can also be set on the Schedule by making use of the firstDayOfWeek
property, doing so which will make the Schedule to start with that day.
Here, Sunday is always denoted as 0, Monday as 1 and so on.
view
data.cs
<ejs-schedule id="schedule" width="100%" height="550px" firstDayOfWeek="1"
selectedDate="new DateTime(2018, 2, 15)">
<e-schedule-views>
1151
</e-schedule-views>
-eventsettings>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
{
{
return View();
}
}
}
Hide Weekend Days

The showWeekend property is used either to show or hide the weekend days of a week and it is
not applicable on work-week view. By default, it is set to true . The days which are not a part of
the working days collection of a Schedule are usually considered as weekend days.
Here, the working days are defined as [1, 3, 4, 5] on Schedule and the remaining days (0, 2, 6 –
Sunday, Tuesday and Saturday) are considered as weekend days and will be hidden from the
views as the showWeekend property is set to false .
view
data.cs
<ejs-schedule id="schedule" width="100%" height="550px" workDays="@ViewBag.
1152
workday" showWeekend="false" selectedDate="new DateTime(2018, 2, 15)">
<e-schedule-views>
</e-schedule-views>
-eventsettings>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
{
{
ViewBag.workday = new int[] { 1, 3, 4, 5 };
return View();
}
}
}
1153
Globalization
Globalization is the combination of internalization and localization. You can adapt the component
to various languages by parsing and formatting the date or number ( Internationalization ),
adding culture specific customization and translation to the text ( Localization ).
Internationalization library provides support for formatting and parsing the number, date, and time
by using the official Unicode CLDR JSON data and also provides the loadCldr method to load
the culture specific CLDR JSON data.
By default, all the Essential JS 2 component are specific to English culture ('en-US'). If you want
to go with the different culture other than English, follow the below steps.
data). For more information about CLDR-Data, refer to this link.
\scripts\cldr-data .
Now use the loadCultureFiles method to load the culture specific CLDR JSON data.
In ASP.NET MVC refer the culture files directly from \scripts\cldr-data location. In ASP.NET
Core refer the culture files directly from \wwwroot\scripts\cldr-data location as like the below
code examples for both ASP.NET Core and MVC
function loadCultureFiles(de) {
var val, ajax;

ajax = new ej.base.Ajax(location.origin + '/../scripts/cldr-data/main/' + n
ame + '/' + files[prop], 'GET', false);

ajax = new ej.base.Ajax(location.origin + '/../wwwroot/scripts/cldr-data/ma
in/' + name + '/' + files[prop], 'GET', false);
val = value;
};
ajax.send();
1154
};
loadCulture(prop);
}
}

L10n.load({
"de": {
"schedule": {
"day": "journée",
"week": "La semaine",
"workWeek": "Semaine de travail",
"month": "Mois",
},
});
view
data.cs
ateTime(2018, 2, 15)">
<e-schedule-views>
</e-schedule-views>
-eventsettings>
</ejs-schedule>
</div>
</div>
<script>
var scheduleObject = document.getElementById('schedule').ej2_instances[0];
loadCultureFiles('fr-CH');
scheduleObject.locale = 'fr-CH';
1155
});
}
var val, ajax;
ajax = new ej.base.Ajax(location.origin + '/../../scripts/cldr-data
/supplemental/' + files[prop], 'GET', false);
} else {
/main/' + name + '/' + files[prop], 'GET', false);
}
val = value;
};
ajax.send();
};
loadCulture(prop);
}
}
</script>
}
using System;
using System.Linq;
{
{
{
return View();
}
}
1156
}
Localization
Localization library allows users to localize the default text contents of the Schedule to
different cultures using the locale property.
view
data.cs
ateTime(2018, 2, 15)">
<e-schedule-views>
</e-schedule-views>
-eventsettings>
</ejs-schedule>
</div>
</div>
<script>
var scheduleObject = document.getElementById('schedule').ej2_instances[0];
L10n.load({
"fr-CH": {
"schedule": {
"day": "journée",
"week": "La semaine",
"workWeek": "Semaine de travail",
"month": "Mois",
},
}
});
loadCultureFiles('fr-CH');
scheduleObject.locale = 'fr-CH';
});
1157
}
var val, ajax;
/supplemental/' + files[prop], 'GET', false);
} else {
/main/' + name + '/' + files[prop], 'GET', false);
}
val = value;
};
ajax.send();
};
loadCulture(prop);
}
}
</script>
}
using System;
using System.Linq;
{
{
{
return View();
}
}
}
1158
Date format
Scheduler can be used with all valid date formats and the default date format is "MM/dd/yyyy". If
the dateFormat property is not specified particularly, then it will be taken based on the locale
that is assigned to the Scheduler. The default locale applied on the Scheduler is "en-US", which
makes it to follow the "MM/dd/yyyy" pattern.
view
data.cs
<ejs-schedule id="schedule" width="100%" height="550px" dateFormat="yyyy/MM
/dd" selectedDate="new DateTime(2018, 2, 15)">
<e-schedule-views>
</e-schedule-views>
-eventsettings>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
{
{
return View();
}
1159
}
}
Time mode
The time mode of the Scheduler can be either 12 or 24 hours format which is based on the
locale set to the Scheduler. Since the default locale value of the Scheduler is en-US, the
time mode will be set to 12 hours format automatically.
RTL
The Schedule layout and behavior can be changed as per the common RTL conventions by
setting enableRtl to true as shown below. Its default value is false .
view
data.cs
<ejs-schedule id="schedule" width="100%" height="550px" enableRtl="true" se
lectedDate="new DateTime(2018, 2, 15)">
<e-schedule-views>
</e-schedule-views>
-eventsettings>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
1160
{
{
return View();
}
}
}
1161
Schedule dimensions
The dimension normally refers to the height and width of the element. The Schedule height
and width properties accepts the following values.
auto
When height and width properties are set to auto , Schedule elements default height and width
will be assigned. It is the default value for both the properties.
pixel
Schedule height and width will be adjusted as per the given pixel values. It accepts both string
and number values.
percentage
When height and width properties are given as percentage, then the Schedule parent element
height and width will be assigned.
1162
Customization
Setting cell dimensions

The height and width of the Schedule cells can be customized by cssClass field which
overrides the default CSS class. By doing so, it also needs to adjust the outer event wrapper
element to cope with the CSS changes which can be done by calling the adjustEventWrapper
method.
view
data.cs
, 15)" views="@ViewBag.view" cssClass="schedule-cell-dimension" actionComplete="onActio
nComplete" created="onCreated">
-eventsettings>
</ejs-schedule>
</div>
</div>
<style>
.schedule-cell-dimension.e-schedule .e-vertical-view .e-date-header-wrap table
col,
.schedule-cell-dimension.e-schedule .e-vertical-view .e-content-wrap table col
{
width: 200px;
}
.schedule-cell-dimension.e-schedule .e-vertical-view .e-time-cells-wrap table th

,
.schedule-cell-dimension.e-schedule .e-vertical-view .e-work-cells {
height: 100px;
}
.schedule-cell-dimension.e-schedule .e-month-view .e-work-cells,

.schedule-cell-dimension.e-schedule .e-month-view .e-date-header-wrap table col
{
width: 200px;
}
1163
.schedule-cell-dimension.e-schedule .e-month-view .e-work-cells {
height: 200px;
}
</style>
function onCreated(args) {
scheduleObj.adjustEventWrapper();
}
function onActionComplete(args) {
if (args.requestType === 'dateNavigate' || args.requestType === 'viewNaviga
te') {
scheduleObj.adjustEventWrapper();
}
}
</script>
}
using System;
using System.Linq;
{
{
public IActionResult cell-dimensions()
{
ViewBag.datasource = new ScheduleData().GetEmployeeEventData();
{
},
};
return View();
}
}
}
1164
Scroll to specific time
You can manually scroll to specific time on Schedule by making use of the scrollTo method as
shown below.
view
data.cs
<table style="width: 100%">
<tbody>
<tr style="height: 50px">
<td>
<div>
Scroll To
</div>
</td>
<td>
<div>
<ejs-timepicker id="ScrollToHour" width="120" format="HH:mm"
value="new DateTime(2000, 1, 1, 9, 0, 0)" change="onChange"></ejs-timepicker>
</div>
</td>
</tr>
</tbody>
</table>
<ejs-schedule id="schedule" height="550" views="@ViewBag.view">
-eventsettings>
</ejs-schedule>
</div>
</div>
scheduleObj.scrollTo(args.text);
}
</script>
}
1165
using System;
using System.Linq;
{
{
public IActionResult scrollto-specific-time()
{
{
},
};
return View();
}
}
}
Making specific events read-only

You can restrict the CRUD operations on specific appointments based on certain conditions. In
the below demo, the events that has occurred on the past hours from the current time are made
as read-only and the CRUD actions has been prevented on it.
view
data.cs
<ejs-schedule id="schedule" height="550" views="@ViewBag.view" popupOpen="o
nPopupOpen" eventRendered="onEventRendered" eventClick="onEventClick">
-eventsettings>
1166
</ejs-schedule>
</div>
</div>
<style>
.e-schedule .e-read-only {
opacity: .8;
}
</style>
var isReadOnly = function (data) {
return data.ReadOnly || (data.EndTime < new Date());
};
function onEventClick(args) {
if ((args.element).classList.contains('e-read-only')) {
args.cancel = true;
}
}
function onEventRendered(args) {
if (isReadOnly(args.data)) {
args.element.setAttribute('aria-readonly', 'true');
args.element.classList.add('e-read-only');
}
}
if (args.type === 'editor' && isReadOnly(args.data)) {
args.cancel = true;
}
}
</script>
}
using System;
using System.Linq;
{
{
public IActionResult read-only()
{
ViewBag.datasource = new ScheduleData().GetReadonlyEventsData();
1167
{
}
};
return View();
}
}
}
The event editor is prevented to open on the read-only events by setting args.cancel to
true within the popupOpen event.
Check for the cell availability

You can check whether the given time range slots are available for event creation or already
occupied by other events using isSlotAvailable method. In the below demo, if the applicable
time slot already contains an appointment, then no more appointments can be added to that cell.
view
data.cs
, 15)" views="@ViewBag.view" actionBegin="onActionBegin">
-eventsettings>
</ejs-schedule>
</div>
</div>
if (args.requestType === 'eventCreate' && args.data.length > 0) {
var eventData = args.data[0];
var eventField = scheduleObj.eventFields;
var startDate = eventData[eventField.startTime];
var endDate = eventData[eventField.endTime];
args.cancel = !scheduleObj.isSlotAvailable(startDate, endDate);
}
1168
}
</script>
}
using System;
using System.Linq;
{
{
public IActionResult cell-availability()
{
{
}
};
return View();
}
}
}
Cell customization
The cellTemplate option which accepts the template string is used to customize the cell
background with specific images / appropriate text on the given date values.
view
data.cs
2, 15)" views="@ViewBag.view" cellTemplate="#apptemplate">
1169
-eventsettings>
</ejs-schedule>
</div>
</div>
<style>
.e-schedule .e-month-view .e-work-cells {
position: relative;
}
.e-schedule .templatewrap {
text-align: center;
position: absolute;
width: 100%;
}
.e-schedule .templatewrap img {
width: 25px;
height: 25px;
}
.e-schedule .caption {
overflow: hidden;
}
</style>
<script id="apptemplate" type="text/template">
${if (type === "monthCells")}
<div class="templatewrap">
${getCellContent(data.date)}
</div> ${/if}
</script>
function getCellContent(date) {
if (date.getMonth() === 9 && date.getDate() === 31) {
return '<div class="caption">Thanksgiving day</div>';
} else if (date.getMonth() === 11 && date.getDate() === 9) {
return '<div class="caption">Party time</div>';
return '<div class="caption">Party time</div>';
return '<div class="caption">Happy birthday</div>';
return '<div class="caption">Christmas Eve</div>';
return '<div class="caption">Christmas Day</div>';
return '<div class="caption">New Year"s Day</div>';
return '<div class="caption">Get together</div>';
}
1170
return '';
}
</script>
}
using System;
using System.Linq;
{
{
public IActionResult cell-customization()
{
{
};
return View();
}
}
}
Schedule element customization

Cells can be customized like changing its background color, adding custom template using
renderCell event. In the below demo, cell's default work hour background color is changed.
view
data.cs
2, 15)" views="@ViewBag.view" renderCell="onRenderCell">
-eventsettings>
1171
</ejs-schedule>
</div>
</div>
if (args.element.classList.contains('e-work-hours') && (args.date.getDate()
=== 12 || args.date.getDate() === 14)) {
args.element.style.background = '#deecfc';
}
}
</script>
}
using System;
using System.Linq;
{
{
public IActionResult cell-customization()
{
{
}
};
return View();
}
}
}
In month view, date header is not applicable and therefore renderCells event is used to
display custom text in Cells as shown here.
1172
Recurrence editor
Recurrence rule generation

The recurrence rule can be generated based on the options selected from the Recurrence editor
and it usually follows the iCalendar specifications. The generated recurrence rule string is a
valid one to be used with the Schedule event’s recurrence rule field.
view
data.cs
<div class="content-wrapper recurrence-editor-wrap">
<div style="padding-bottom:15px;">
<label>Rule Output</label>
<div class="rule-output-container">
<div id="rule-output">FREQ=DAILY;INTERVAL=1;</div>
</div>
</div>
<ejs-recurrenceeditor id="RecurrenceEditor" selectedType="1" change="onChan
ge"></ejs-recurrenceeditor>
</div>
</div>
<style>
.recurrence-editor-wrap {
margin: 0 25%;
}
.rule-output-container {
height: auto;
border: 1px solid #969696;
}
#rule-output {
padding: 8px 4px;
text-align: center;
min-height: 20px;
overflow: hidden;
overflow-wrap: break-word;
}
@@media (max-width: 580px) {
1173
margin: 0 5%;
}
}
</style>
var element = document.querySelector('#rule-output');
element.innerText = args.value;
}
</script>
}
using System;
using System.Linq;
{
{
public IActionResult rule-generation()
{
return View();
}
}
}
Recurrence date generation

You can parse the recurrenceRule of an appointment using getRecurrenceDates method which
generates the date based on the recurrenceRule . The parameters available are as follows.
Field name Type Description

startDate Date Appointment start date.
rule String Appointment recurrence rule.
excludeDate String Date's (in ISO format) needs to be excluded. It is optional.

maximumCount Number No of dates to be generated. It is optional.
viewDate Date Current view range's first date. It is optional.
1174
view
data.cs
<div class="content-wrapper recurrence-editor-wrap">
<div style="padding-bottom:15px;">
<label id="rule-label">Date Collections</label>
<div class="rule-output-container">
<div id="rule-output"></div>
</div>
</div>
<ejs-recurrenceeditor id="RecurrenceEditor"></ejs-recurrenceeditor>
</div>
</div>
<style>
margin: 0 25%;
}
.rule-output-container {
height: auto;
}
#rule-output {
padding: 8px 4px;
text-align: center;
min-height: 20px;
overflow: hidden;
overflow-wrap: break-word;
}
#RecurrenceEditor {
display: none;
}
</style>
var outputElement = document.querySelector('#rule-output');
var labelElement = document.querySelector('#rule-label');
var recObject = document.getElementById('RecurrenceEditor').ej2_instances[0
];
var dates = recObject.getRecurrenceDates(new Date(2018, 0, 7, 10, 0), 'FREQ
=DAILY;INTERVAL=1', '20180108T114224Z,20180110T114224Z', 4, new Date(2018, 0, 7));
var dateCollection = [];
for (var index = 0; index < dates.length; index++) {
1175
dateCollection.push(new Date(dates[index]));
}
outputElement.innerText = dateCollection;
});
</script>
}
using System;
using System.Linq;
{
{
public IActionResult date-genaration()
{
return View();
}
}
}
Above demo will generate two dates January 7 & 9 by excluding the January 8 & 10 since
those dates were given in exclusion list. Generated dates are good to create appointment
collections.
1176
Accessibility
Accessibility is achieved in the Schedule component through WAI-ARIA standard and keyboard
navigation. The Schedule features can be effectively accessed through assistive technologies
such as screen readers.
WAI-ARIA
WAI-ARIA (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to
increase the accessibility of web pages, dynamic content, and user interface components
developed with Ajax, HTML, JavaScript,and related technologies. ARIA provides additional
semantics to describe the role, state, and functionality of web components.
The following ARIA attributes are used in the Schedule:
Property Functionalities
It gives assistive technologies about how to handle each element in a

role
widget.
aria-disabled It indicates the disabled state of the Schedule.
aria-selected It indicates the currently selected cell of the Schedule.
aria-live It indicates a string value that labels the Schedule element.
aria-label It indicates the disabled state of the Schedule and its items.
aria-
It indicates editor dialog title to the user through assistive technologies.
labelledby
aria- It indicates editor dialog content description to the user through assistive
describedby technologies.
Keyboard navigation
All the Schedule actions can be controlled via keyboard keys and is availed by using
allowKeyboardInteraction property which is set to true by default. The applicable key
combinations and its relative functionalities are listed below.
Interaction
Description
Keys
Alt + j Focuses the Schedule [Provided from application end].
Focuses the first or active item on the schedule header bar and then move
Tab the focus to the next available event elements. If no events present, then
focus moves out of the component.
Reverse focusing of the Tab functionality. Inverse focusing of event
1177
Shift + elements from the last one and then move onto the first or active item on
Tab Schedule header bar and then moves out of the component.
Enter Opens the quick popup on the selected cells or events.

Escape Closes any of the popup that are in open state.
Arrow To move onto the next available cells in either of the needed directions (left,
right, top and right)
Shift +
For multiple cell selection on either direction.
Arrow
Delete Deletes one or more selected events.
Ctrl +
Click on To select multiple events.
events
Alt +
Number
To switch between the views on Schedule.
(from 1 to
6)
Ctrl +
Left To navigate to the previous date period.
Arrow
Ctrl +
Right To navigate to the next date period.
Arrow
Left or
On pressing any of these keys when focus is currently on the Schedule
Right
header bar, moves the focus to the previous or next items in the header bar.
Arrow
Space or
It activates any of the focused items.
Enter
Page Up &
Page To scroll through the work cells area.
Down
Home To move the selection to the first cell of Schedule.
1178
How To
Prioritize the color for resource events

By default top level resource color will be applied for the events. If user wants to apply specific
resource color to events irrespective of its parent resource color, it can be achieved by
resourceColorField field within eventSettings property as shown below.
view
data.cs
<ejs-schedule id="schedule" height="550" views="@ViewBag.view" currentView=
"WorkWeek" selectedDate="new DateTime(2018, 2, 15)" navigating="onNavigating">
schedule-group>
<e-resource dataSource="@ViewBag.Projects" field="ProjectId" title=
" Choose Project" name="Projects" textField="text" idField="id" colorField="color"></e-
resource>
<e-resource dataSource="@ViewBag.Categories" field="CategoryId" tit
le="Category" name="Categories" textField="text" idField="id" colorField="color" allowM
ultiple="true"></e-resource>
-eventsettings>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
1179
{
{
public ActionResult resource-color()
{
ViewBag.datasource = new ScheduleData().GetResourceTeamData();
List<ProjectResource> projects = new List<ProjectResource>();

projects.Add(new ProjectResource { text = "PROJECT 1", id = 1, color = "#cb
6bb2" });
projects.Add(new ProjectResource { text = "PROJECT 2", id = 2, color = "#56
ca85" });
ViewBag.Projects = projects;
List<CategoryResource> categories = new List<CategoryResource>();

categories.Add(new CategoryResource { text = "Development", id = 1, color =
"#1aaa55" });
categories.Add(new CategoryResource { text = "Testing", id = 2, color = "#7
fa900" });
ViewBag.Categories = categories;
ViewBag.Resources = new string[] { "Projects", "Categories" };

return View();
}
}
public class ProjectResource
{
}
public class CategoryResource
{
}
}
The resourceColorField field value should be as same as the name field value given with
in resources property.
Manually open the event editor

Schedule allows user to manually open the event editor on specific time or on certain events
using openEditor method as shown below.
1180
view
data.cs
<div>
<ejs-button id="btn1" content="Click to open Editor"></ejs-button>
<ejs-button id="btn2" content="Click to open Event Editor"></ejs-button>
</div>
"new DateTime(2018, 2, 15)">
-eventsettings>
</ejs-schedule>
</div>
</div>
document.getElementById('btn1').onclick = function () {
var cellData = {
startTime: new Date(2018, 1, 15, 10, 0),
endTime: new Date(2018, 1, 15, 11, 0),
};
scheduleObj.openEditor(cellData, 'Add');
};
var eventData = {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 1, 14, 13, 0),
EndTime: new Date(2018, 1, 14, 14, 30)
};
scheduleObj.openEditor(eventData, 'Save');
};
</script>
}
using System;
using System.Linq;
1181
{
{
public ActionResult event-editor()
{
{
},
};
return View();
}
}
}
Set different work hours

By default, the work hours of the Scheduler is highlighted based on the start and end values
provided within the workHours property which remains same for all days. To highlight different
work hours range for different days, setWorkHours method can be used as follows.
[src/app/app.ts]
Now, run the application in the browser using the following command.
view
data.cs
<div>
<ejs-button id="btn1" content="Change the work hours"></ejs-button>
</div>
"new DateTime(2018, 2, 15)">
1182
<e-schedule-workhours highlight="true" start="9:00" end="11:00"></e-sch
edule-workhours>
-eventsettings>
</ejs-schedule>
</div>
</div>
var dates = [new Date(2018, 1, 15), new Date(2018, 1, 17)];
scheduleObj.setWorkHours(dates, '11:00', '20:00');
};
</script>
}
using System;
using System.Linq;
{
{
public ActionResult different-workhours()
{
{
},
};
return View();
}
}
}
Customize the events dynamically before it renders on UI
1183
The eventRendered event will be triggered before rendering the appointments on Schedule
where it can be customized. In the below demo, custom field CategoryColor is added to the
appointment collection and based on certain condition, appointment background color is changed
with CategoryColor field value.
view
data.cs
<div>
<ejs-button id="btn1" content="ADD"></ejs-button>
<ejs-button id="btn2" content="EDIT"></ejs-button>
<ejs-button id="btn3" content="DELETE"></ejs-button>
</div>
"new DateTime(2018, 2, 15)">
-eventsettings>
</ejs-schedule>
</div>
</div>
var Data = [{
Id: 1,
Subject: 'Conference',
EndTime: new Date(2018, 1, 12, 10, 0),
IsAllDay: false
}, {
Id: 2,
Subject: 'Meeting',
EndTime: new Date(2018, 1, 15, 11, 30),
IsAllDay: false
}];
scheduleObj.addEvent(Data);
};
var Data = {
Id: 3,
Subject: 'Testing-edited',
1184
EndTime: new Date(2018, 1, 11, 11, 0),
IsAllDay: false
};
scheduleObj.saveEvent(Data);
};
scheduleObj.deleteEvent(4);
};
</script>
}
using System;
using System.Linq;
{
{
public ActionResult dynamic-appointments()
{
ViewBag.datasource = GetScheduleData();
{
},
};
return View();
}
{
{
Id = 3,
Subject = "Testing",
1185
IsAllDay = false,
});
{
Id = 4,
Subject = "Vacation",
IsAllDay = false,
});
return appData;
}
}
{
}
}
Prevent the date navigation while clicking on the date

header
While navigating the views in Schedule, navigating event will be triggered where navigating to
certain views can be prevented. In the below demo, navigating to other views is prevented when
the current view is 'Week'.
view
data.cs
<ejs-schedule id="schedule" height="550" views="@ViewBag.view" currentView=
"WorkWeek" selectedDate="new DateTime(2018, 2, 15)" navigating="onNavigating">
-eventsettings>
</ejs-schedule>
</div>
</div>
1186
function onNavigating(args) {
if (args.previousView === 'Week') {
args.cancel = true;
}
}
</script>
}
using System;
using System.Linq;
{
{
public ActionResult navigating()
{
{
},
};
return View();
}
}
}
Set default value for Subject field

Event window default fields name like Title, Location, etc.. can be customized and default value
can be set to Subject field using default property which will be added if an appointment is
created with empty subject.
view
data.cs
1187
"new DateTime(2018, 2, 15)">
<e-field-subject title="Event Name" name="Subject" default="Add
Name"></e-field-subject>
<e-field-location title="Event Location" name="Location"></e-fi
eld-location>
<e-field-description title="Summary" name="Description"></e-fie
ld-description>
<e-field-starttime title="From" name="StartTime"></e-field-star
ttime>
<e-field-endtime title="To" name="EndTime"></e-field-endtime>
</ejs-schedule>
</div>
</div>
}
using System;
using System.Linq;
{
{
public ActionResult default-subject()
{
{
},
1188
};
return View();
}
}
}
Set different event duration on appointment window

In event window, start/end time duration will be processed based on the interval value within
the timeScale property. By default, interval value is 30, therefore in event window start/end
time duration will be in 30 mins duration. You can set custom interval range to the start/end time
in event window using popupOpen event as shown below.
view
data.cs
<ejs-schedule id="schedule" height="550" views="@ViewBag.view" popupOpen="o
nPopupOpen" selectedDate="new DateTime(2018, 2, 15)">
-eventsettings>
</ejs-schedule>
</div>
</div>
args.duration = 40;
}
</script>
}
using System;
using System.Linq;
1189
{
{
public ActionResult event-duration()
{
{
},
};
return View();
}
}
}
Dynamically add, edit and remove appointments

CRUD actions can be manually performed on appointments using addEvent , saveEvent and
deleteEvent methods as shown below.
Normal event
view
data.cs
<div>
</div>
"new DateTime(2018, 2, 15)">
-eventsettings>
</ejs-schedule>
</div>
1190
</div>
var Data = [{
Id: 1,
EndTime: new Date(2018, 1, 12, 10, 0),
IsAllDay: false
}, {
Id: 2,
Subject: 'Meeting',
EndTime: new Date(2018, 1, 15, 11, 30),
IsAllDay: false
}];
};
var Data = {
Id: 3,
EndTime: new Date(2018, 1, 11, 11, 0),
IsAllDay: false
};
scheduleObj.saveEvent(Data);
};
scheduleObj.deleteEvent(4);
};
</script>
}
using System;
using System.Linq;
{
1191
{
public ActionResult dynamic-appointments()
{
{
},
};
return View();
}
{
{
Id = 3,
IsAllDay = false,
});
{
Id = 4,
IsAllDay = false,
});
return appData;
}
}
{
}
}
1192
Recurrence event
view
data.cs
<div>
</div>
"new DateTime(2018, 2, 15)">
-eventsettings>
</ejs-schedule>
</div>
</div>
var Data = [{
Id: 1,
EndTime: new Date(2018, 1, 15, 10, 0),
IsAllDay: false,
RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=2'
}];
};
var Data = {
Id: 3,
RecurrenceID: 3,
EndTime: new Date(2018, 1, 11, 11, 0),
IsAllDay: false,
};
scheduleObj.saveEvent(Data, 'EditOccurrence');
};
1193
var Data = {
Id: 4,
Subject: 'Vacation',
RecurrenceID: 4,
EndTime: new Date(2018, 1, 12, 12, 0),
IsAllDay: false,
};
scheduleObj.deleteEvent(Data, 'DeleteSeries');
};
</script>
}
using System;
using System.Linq;
{
{
public ActionResult DateHeader()
{
{
},
};
return View();
}
{
{
1194
Id = 3,
IsAllDay = false,
RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=3",
});
{
Id = 4,
IsAllDay = false,
RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=2"
});
return appData;
}
}
{
public string RecurrenceRule { get; set; }
}
}
When a single occurrence of the recurrence appointment is edited, recurrenceID field will
be added which holds the id value of its parent recurrence appointment. It is applicable
only for the edited occurrence appointments. Therefore the collection passing to the
saveEvent with action as EditOccurrence should have RecurrenceID field as shown
above.
1195
Overview
The Sidebar is an expandable and collapsible component that typically acts as a side container
to place primary or secondary content alongside the main content.
There is a flexible option to show and hide Sidebar as per user interactions. Any type of HTML
content and component can be placed in the Sidebar for quick access and for easy navigation
like quick references, menu, list, and tree view.
Key features
1. Context: The Sidebar can be initialized in any HTML element other than the body element.
2. Types and positions: Supports Push , Over , Slide , and Auto to expand or collapse
the sidebar, and also allows to position it in the Left or Right direction.
3. Auto close: Allows to set the Sidebar in an expanded or collapsed state only in certain
resolutions.
4. Dock: By default, supports display of short notifications about the content on docked mode.
1196
Getting Started
This section briefly explains about how to include a simple Sidebar in your ASP.NET Core
our components.

Now open your view page to render Sidebar components.
<ejs-sidebar id="default-sidebar">
<div class="title-header">
<div style="display:inline-block"> Sidebar </div>
</div>
</ejs-sidebar>
<div class="title default">Main content</div>
<div class="sub-title">
Place your primary content here.
</div>
Run the application

The following example shows a basic Sidebar component.
view
getting-started.cs
<ejs-sidebar id="default-sidebar" closeOnDocumentClick="false">

</div>
1197
</ejs-sidebar>
<div>
</div>
</div>
<style>
.center-align {
text-align: center;
padding: 20px;
}
.title {
text-align: center;
font-size: 20px;
padding: 15px;
}
.column {
padding: 10px;
}
.sub-title {
text-align: center;
font-size: 16px;
padding: 10px;
}
body {
padding-top: 0px;
}
.center {
text-align: center;
display: none;
font-size: 13px;
font-weight: 400;
margin-top: 20px;
}
.sb-content-tab .center {
display: block;
}
.sb-content-tab #wrapper {
display: none;
1198
}
#default-sidebar {
background-color: rgb(25, 118, 210);
color: #ffffff;
}
#default-sidebar .close-btn:hover {
color: rgba(0, 0, 0, .87);
}
.e-sidebar .title-header #close {

color: #fafafa;
cursor: pointer;
line-height: 25px;
}
.e-sidebar.e-left .title-header #close {

float: right;
}
.e-sidebar.e-right .title-header #close {

float: left;
}
.title-header {
text-align: center;
font-size: 18px;
padding: 15px;
}
.title.default {
}
</style>
using System;
using System.Linq;
{
public partial class SidebarController : Controller
{
1199
{
return View();
}
}
}
Enable backdrop
Enabling the showBackdrop in the Sidebar component will prevent the main content from user
interactions. Here, the DOM elements will not get changed. It only closes the main content by
covering with a black backdrop overlay and focuses the Sidebar in the screen.
view
backdrop.cs
<ejs-sidebar id="default-sidebar" showBackdrop="true" type="Push" width="280px">

<div class="title"> Sidebar content</div>
Click the button to close the Sidebar.
</div>
<div class="center-align">
<ejs-button id="close" content="Close Sidebar"></ejs-button>
</div>
</ejs-sidebar>
<div>
<div class="title">Main content</div>
<div class="sub-title"> Click the button to open/close the Sidebar.</div>
<div style="padding:20px" class="center-align">
<ejs-button id="toggle" content="Toggle Sidebar" cssClass="e-info"></ejs-bu
tton>
</div>
</div>
document.getElementById('toggle').onclick = function () {
var defaultSidebar = document.getElementById("default-sidebar").ej2_instanc
es[0];
defaultSidebar.toggle();
}
// Close the sidebar
document.getElementById('close').onclick = function () {
1200
es[0];
defaultSidebar.hide();
}
});
</script>
<style>
.header {
width: 100%;
height: 40px;
font-size: 20px;
line-height: 40px;
font-weight: 500;
background: #eee;
}
.center-align {
text-align: center;
padding: 20px;
}
#close, #close:hover, #close:active, #close:focus { /* csslint allow: adjoining-cla

sses*/
background: #fafafa;
color: black
}
.title {
text-align: center;
font-size: 20px;
padding: 15px;
}
.sub-title {
text-align: center;
font-size: 16px;
padding: 10px;
}
.center {
text-align: center;
display: none;
font-size: 13px;
font-weight: 400;
margin-top: 20px;
}
#wrapper {
1201
display: block;
}
.sb-content-tab .center { /* csslint allow: adjoining-classes*/

display: block;
}
.sb-content-tab #wrapper { /* csslint allow: adjoining-classes*/

display: none;
}
.right {
float: right;
}
body {
margin: 0;
}
#default-sidebar {
color: #ffffff;
}
.book .ej2-sample-frame { /* csslint allow: adjoining-classes */

padding: 0;
}
</style>
using System;
using System.Linq;
{
{
public IActionResult backdrop()
{
return View();
}
}
}
1202
Position
Positioning the Sidebar to the right or left of the main content can be achieved by using the
position property. If the position is not set, the Sidebar will expand from the left to the body
element.
view
position.cs
<ejs-sidebar id="default-sidebar" closeOnDocumentClick="false" type="Push" width="280px"

target="maincontent">
</div>
</div>
</ejs-sidebar>
<div id="head">
<ejs-button id="toggle" isToggle="true" cssClass="e-info" iconCss="e-icons burg-ico
n" content="Open"></ejs-button>
</div>
<div class="maincontent" style="height:335px;border:1px solid gray">
<div>
<div class="column">
<ejs-radiobutton type="radio" id="left" checked="true" label="left" name
="state" change="positionChange"></ejs-radiobutton>
</div>
<div class="column">
<ejs-radiobutton type="radio" id="right" label="Right" name="state" cha
nge="positionChange"></ejs-radiobutton>
</div>
</div>
</div>
</div>
es[0];
var togglebtn = document.getElementById("toggle").ej2_instances[0];
1203
if (document.getElementById('toggle').classList.contains('e-active')) {
togglebtn.content = 'Close';
defaultSidebar.show();
} else {
togglebtn.content = 'Open';
}
}
es[0];
document.getElementById('toggle').classList.remove('e-active');
togglebtn.content = 'Open'
}
});
function positionChange(args) {
var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0
];
defaultSidebar.position = (args.event.target.id == "left") ? "Left" : "Right";
}
</script>
<style>
.header {
width: 100%;
height: 40px;
font-size: 20px;
line-height: 40px;
font-weight: 500;
background: #eee;
}
.center-align {
text-align: center;
padding: 20px;
}
.burg-icon:before {
content: '\e7f6';
font-size: 16px;
}
.title {
text-align: center;
1204
font-size: 20px;
padding: 15px;
}
#head {
border-bottom-color: transparent;
background: #00897B;
}
#toggle, #container .e-btn.e-info, #container .e-btn.e-info:hover, #container .e-btn

.e-info:focus { /* csslint allow: adjoining-classes*/
background: #00695C;
box-shadow: none;
border-radius: 0;
height: 39px;
width: 100px;
}

sses*/
color: black
}
.sub-title {
text-align: center;
font-size: 16px;
padding: 10px;
}
.radiobutton {
padding: 10px;
}
.center {
text-align: center;
display: none;
font-size: 13px;
font-weight: 400;
margin-top: 20px;
}
.column {
padding: 10px;
}
1205
display: block;
}

display: none;
}
.right {
float: right;
}
body {
margin: 0;
}
#default-sidebar {
background-color: #26A69A;
color: #ffffff;
}
.close-btn:hover {
color: #fafafa;
}
.content-section { /* csslint allow: adjoining-classes */

}

padding: 0;
}
</style>
using System;
using System.Linq;
{
{
public IActionResult position()
{
1206
return View();
}
}
}
1207
Context
By default, Sidebar initializes context to the body element. Using the target property, set
context element to initialize Sidebar inside any HTML element apart from the body element.
view
context.cs
<ejs-sidebar id="default-sidebar" type="Push" width="280px" target="maincontent">

</div>
</div>
</ejs-sidebar>
<div id="head">
<ejs-button id="toggle" content="Open" isToggle="true" cssClass="e-info" iconCss
="e-icons burg-icon"></ejs-button>
</div>
<div>
<div class="sub-title"> content goes here.</div>
</div>
</div>
es[0];
} else {
}
}
1208
es[0];
}
});
</script>
<style>
.header {
width: 100%;
height: 40px;
font-size: 20px;
line-height: 40px;
font-weight: 500;
background: #eee;
}
.center-align {
text-align: center;
padding: 20px;
}
.burg-icon:before {
content: '\e7f6';
font-size: 16px;
}
.title {
text-align: center;
font-size: 20px;
padding: 15px;
}
#head {
}
#toggle, #toggle:hover, #toggle:focus { /* csslint allow: adjoining-classes*/

box-shadow: none;
border-radius: 0;
height: 39px;
1209
width: 100px;
}

sses*/
color: black
}
.sub-title {
text-align: center;
font-size: 16px;
padding: 10px;
display: flex;
}
.radiobutton {
padding: 10px;
}
.center {
text-align: center;
display: none;
font-size: 13px;
font-weight: 400;
margin-top: 20px;
}
.sub-title {
text-align: center;
font-size: 16px;
padding: 10px;
}
#wrapper {
display: block;
}

display: block;
}

display: none;
}
1210
.right {
float: right;
}
body {
margin: 0;
}
#default-sidebar {
color: #ffffff;
}
.close-btn:hover {
color: #fafafa;
}

}

padding: 0;
}
</style>
using System;
using System.Linq;
{
{
public IActionResult context()
{
return View();
}
}
}
1211
Types
The Sidebar component's expand behaviour can be modified based on the purpose of use.
Expanding types of Sidebar

The Sidebar can be set to initialize based on four different types that are consistent with the main
component as explained below.
Item Description
Over Sidebar floats over the main content area.
Push
Sidebar pushes the main content area to appear side-by-side, and shrinks the
main content within the screen width.
Sidebar translates the x and y positions of main content area based on the
Slide Sidebar width. The main content area will not be adjusted within the screen
width.
Sidebar with Over type in mobile resolution, and Push type in other higher
Auto
resolutions.
Auto is the default expand mode.
In the following sample, the types of Sidebar are demonstrated.
view
types.cs
<ejs-sidebar id="default-sidebar" type="Push" target="maincontent">

</div>
</div>
</ejs-sidebar>
<div id="head">
<ejs-button id="toggle" content="Open" isToggle="true" cssClass="e-info" iconCss
="e-icons burg-icon"></ejs-button>
</div>
<div class="content">
1212
<div class="radiobutton">
<ejs-radiobutton id="over" checked="true" label="Over" name="state"
change="positionChange"></ejs-radiobutton>
</div>
<ejs-radiobutton id="push" label="Push" name="state" change="positi
onChange"></ejs-radiobutton>
</div>
<ejs-radiobutton id="slide" label="Slide" name="state" change="posi
tionChange"></ejs-radiobutton>
</div>
<ejs-radiobutton id="auto" label="Auto" name="state" change="positi
onChange"></ejs-radiobutton>
</div>
</div>
</div>
</div>
es[0];
} else {
}
}
es[0];
}
});
function positionChange(args) {
1213
var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0
];
if (args.event.target.id == "over") {
defaultSidebar.type = "Over"
} else if (args.event.target.id == "push") {
defaultSidebar.type = "Push"
}
else if (args.event.target.id == "slide") {
defaultSidebar.type = "Slide"
}
else {
defaultSidebar.type = "Auto"
} }
</script>
<style>
.header {
width: 100%;
height: 40px;
font-size: 20px;
line-height: 40px;
font-weight: 500;
background: #eee;
}
.center-align {
text-align: center;
padding: 20px;
}
.burg-icon:before {
content: '\e7f6';
font-size: 16px;
}
.title {
text-align: center;
font-size: 20px;
padding: 15px;
}
#head {
}
#toggle, #toggle:hover, #toggle:focus { /* csslint allow: adjoining-classes*/

1214
box-shadow: none;
border-radius: 0;
height: 39px;
width: 100px;
}

sses*/
color: black
}
.sub-title {
text-align: center;
font-size: 16px;
padding: 10px;
display: flex;
}
.radiobutton {
padding: 10px;
}
.center {
text-align: center;
display: none;
font-size: 13px;
font-weight: 400;
margin-top: 20px;
}
.sub-title {
text-align: center;
font-size: 16px;
padding: 10px;
}
#wrapper {
display: block;
}

display: block;
}
1215
display: none;
}
.right {
float: right;
}
body {
margin: 0;
}
#default-sidebar {
color: #ffffff;
}
.close-btn:hover {
color: #fafafa;
}

}

padding: 0;
}
</style>
using System;
using System.Linq;
{
{
public IActionResult types()
{
return View();
}
}
}
1216
Auto-close
Sidebar often behaves differently on a mobile versus a desktop display. It has an effective
feature that offers to set it in opened or closed state corresponding to the specified resolution.
This is achieved through mediaQuery property that allows you to set the Sidebar in an expanded
state or collapsed state only in user-defined resolution.
view
autoclose.cs
<ejs-sidebar id="default-sidebar" width="280px" created="onCreated">

</div>
</ejs-sidebar>
<div>
</div>
</div>
function onCreated() {
var obj = document.getElementById("default-sidebar").ej2_instances[0];
obj.mediaQuery = window.matchMedia('(min-width: 600px)');
}
</script>
<style>
.center-align {
text-align: center;
padding: 20px;
}
.title {
text-align: center;
font-size: 20px;
padding: 15px;
}
.column {
padding: 10px;
1217
}
.sub-title {
text-align: center;
font-size: 16px;
padding: 10px;
}
body {
padding-top: 0px;
}
.center {
text-align: center;
display: none;
font-size: 13px;
font-weight: 400;
margin-top: 20px;
}
display: block;
}
display: none;
}
#default-sidebar {
color: #ffffff;
}
color: rgba(0, 0, 0, .87);
}

color: #fafafa;
cursor: pointer;
line-height: 25px;
}

float: right;
}
1218
float: left;
}
.title-header {
text-align: center;
font-size: 18px;
padding: 15px;
}
.title.default {
}
</style>
using System;
using System.Linq;
{
{
public IActionResult autoclose()
{
return View();
}
}
}
In this sample,the Sidebar will be in an expanded state only in resolution below 400px .
view
autoclose.cs
<ejs-sidebar id="default-sidebar" width="280px" created="onCreated">

</div>
</ejs-sidebar>
<div>
1219
</div>
</div>
function onCreated() {
var obj = document.getElementById("default-sidebar").ej2_instances[0];
obj.mediaQuery = window.matchMedia('(max-width: 400px)');
}
</script>
<style>
.center-align {
text-align: center;
padding: 20px;
}
.title {
text-align: center;
font-size: 20px;
padding: 15px;
}
.column {
padding: 10px;
}
.sub-title {
text-align: center;
font-size: 16px;
padding: 10px;
}
body {
padding-top: 0px;
}
.center {
text-align: center;
display: none;
font-size: 13px;
font-weight: 400;
margin-top: 20px;
}
display: block;
1220
}
display: none;
}
#default-sidebar {
color: #ffffff;
}
color: rgba(0, 0, 0, .87);
}

color: #fafafa;
cursor: pointer;
line-height: 25px;
}

float: right;
}

float: left;
}
.title-header {
text-align: center;
font-size: 18px;
padding: 15px;
}
.title.default {
}
</style>
using System;
using System.Linq;
1221
{
{
public IActionResult autoclose()
{
return View();
}
}
}
1222
Dock
Dock state of the Sidebar reserves some space on the page that always remains in a visible
state when the Sidebar is collapsed. It is used to show the short term of a content like icons
alone instead of lengthy text.
view
dock.cs
<ejs-sidebar id="dockSidebar" width="220px" dockSize="72px" enableDock="true">

<div class="dock">
<ul>
<li class="sidebar-item" id="toggle">
<span class="e-icons expand"></span>
<span class="e-text" title="menu">Menu</span>
</li>
<li class="sidebar-item">
<span class="e-icons home"></span>
<span class="e-text" title="home">Home</span>
</li>
<span class="e-icons profile"></span>
<span class="e-text" title="profile">Profile</span>
</li>
<span class="e-icons info"></span>
<span class="e-text" title="info">Info</span>
</li>
<span class="e-icons settings"></span>
<span class="e-text" title="settings">Settings</span>
</li>
</ul>
</div>
</ejs-sidebar>


<div id="main-content container-fluid col-md-12 ">
<div class="sub-title"> Click the expand icon to open and collapse icons to close t
he Sidebar</div>
</div>
<script>
1223
dockBar = document.getElementById('dockSidebar').ej2_instances[0];
dockBar.toggle();
};
});
</script>
<style>
/* Content area styles */
.title {
text-align: center;
font-size: 20px;
padding: 15px;
}
.sub-title {
text-align: center;
font-size: 16px;
padding: 10px;
}
#wrapper .sub-title .column {

padding: 10px;
}
.center {
text-align: center;
display: none;
font-size: 13px;
font-weight: 400;
margin-top: 20px;
}
display: block;
}
/* end of content area styles */
/* Sidebar styles */
display: none;
}
#dockSidebar.e-sidebar.e-right.e-close {
1224
visibility: visible;
transform: translateX(0%);
}
#dockSidebar .e-icons::before {
font-size: 25px;
}
/* dockbar icon Style */
#dockSidebar .home::before {
content: '\e7a4';
}
#dockSidebar .profile::before {
content: '\e7d4';
}
#dockSidebar .info::before {
content: '\e7e7';
}
#dockSidebar .settings::before {
content: '\e7cf';
}
.e-sidebar .expand::before,
.e-sidebar.e-right.e-open .expand::before {
content: '\e85c';
}
.e-sidebar.e-open .expand::before,
.e-sidebar.e-right .expand::before {
content: '\e98f';
}
/* end of dockbar icon Style */
#dockSidebar.e-close .sidebar-item {
padding: 5px 20px;
}
#dockSidebar.e-dock.e-close span.e-text {
display: none;
}
#dockSidebar.e-dock.e-open span.e-text {
}
1225
#dockSidebar li {
list-style-type: none;
cursor: pointer;
}
#dockSidebar ul {
padding: 0px;
}
#dockSidebar.e-sidebar ul li:hover span {

color: white
}
#dockSidebar span.e-icons {
color: #c0c2c5;
line-height: 2
}
.e-open .e-icons {
margin-right: 16px;
}
.e-open .e-text {
overflow: hidden;
line-height: 23px;
font-size: 15px;
}
.sidebar-item {
text-align: center;
border-bottom: 1px #e5e5e58a solid;
}
.e-sidebar.e-open .sidebar-item {
text-align: left;
padding-left: 15px;
color: #c0c2c5;
}
#dockSidebar.e-sidebar {
background: #2d323e;
overflow: hidden;
}
/* end of sidebar styles */

</style>
1226
using System;
using System.Linq;
{
{
public IActionResult dock()
{
return View();
}
}
}
1227
How To
Initialize the Sidebar with ListView

Any HTML element can be placed in the Sidebar content area. Sidebar supports all types of
HTML structures like TreeView , ListView , etc.
In the following example, the Sidebar is rendered with ListView component in its content area.
Add the HTML div tag with its id attribute as default in your index.html file to initialize
the Sidebar.
view
sidebar.cs
<ejs-sidebar id="default-sidebar" type="Over" width="100%">

<div class="title1"> Menu </div>
<div class="closebtn">
<ejs-button id="close" content="Close Sidebar" cssClass="e-btn close-b
tn" iconCss="e-icons close-icon"></ejs-button>
</div>
<div id="listcontainer">
<ejs-listview id="list" dataSource="ViewBag.dataSource"> </ejs-listview>
</div>
* ListView component is placed inside the sidebar content area.
</div>
</ejs-sidebar>
<div>
<div class="title2">Main content</div>
tton>
</div>
</div>
es[0];
1228
}
es[0];
}
});
</script>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
top: 45%;
left: 45%;
}
.center-align {
text-align: center;
padding: 20px;
}
.header {
width: 100%;
height: 40px;
font-size: 20px;
line-height: 40px;
font-weight: 500;
background: #eee;
}
.close-btn, .e-listview .e-list-item, #default-sidebar {

color: #ffffff;
}
.close-btn {
box-shadow: none;
}
.closebtn {
1229
top: 15px;
line-height: 36px;
height: 42px;
color: black;
position: absolute;
right: 10px;
}
#listcontainer {
width: 100%;
}
#list {
margin: 0 auto;
width: 30%;
}
.close-icon::before {
content: '\e945';
}
.e-listview .e-list-item {
text-align: center;
font-size: 14px;
padding: 0;
}
.e-btn.close-btn :hover { /* csslint allow: adjoining-classes*/

box-shadow: none;
background: transparent;
}
.e-icons.close-icon { /* csslint allow: adjoining-classes*/

line-height: 2.2;
}
.title1 {
text-align: center;
font-size: 20px;
padding: 15px;
}
.title2 {
text-align: center;
font-size: 20px;
padding: 15px;
}
.sub-title {
1230
text-align: center;
font-size: 12px;
padding: 10px;
}
.center {
text-align: center;
display: none;
font-size: 13px;
font-weight: 400;
margin-top: 20px;
}
.col-lg-12.col-sm-12.col-md-12, .control-section { /* csslint allow: adjoining-clas

ses*/
padding: 0;
}
#wrapper {
display: block;
}
display: block;
}
display: none;
}
.right {
float: right;
}
body {
margin: 0;
}
.close-btn:hover {
color: #fafafa;
}

}
</style>
1231
using System;
using System.Linq;
{
{
public IActionResult sidebar()
{
data.Add(new { text = "Home", id = "list-01" });
data.Add(new { text = "Offers", id = "list-02" });
data.Add(new { text = "Support", id = "list-03" });
data.Add(new { text = "Logout", id = "list-04" });
return View();
}
}
}
Open and close the Sidebar

Opening and closing the Sidebar can be achieved with built-in public methods.
show(): Method to open the Sidebar.

hide(): Method to close the Sidebar.
toggle(): Method to toggle the open/close state of the Sidebar.
In the following sample, toggle method has been used to show or hide the Sidebar on button
click.
view
open.cs
<ejs-sidebar id="default-sidebar" showBackdrop="false">

</div>
</div>
1232
</ejs-sidebar>
<div>
tton>
</div>
</div>
es[0];
}
es[0];
}
});
</script>
<style>
.header {
width: 100%;
height: 40px;
font-size: 20px;
line-height: 40px;
font-weight: 500;
background: #eee;
}
.center-align {
text-align: center;
padding: 20px;
}

sses*/
color: black
}
1233
.title {
text-align: center;
font-size: 20px;
padding: 15px;
}
.sub-title {
text-align: center;
font-size: 16px;
padding: 10px;
}
.center {
text-align: center;
display: none;
font-size: 13px;
font-weight: 400;
margin-top: 20px;
}
#wrapper {
display: block;
}

display: block;
}

display: none;
}
.right {
float: right;
}
body {
margin: 0;
}
#default-sidebar {
color: #ffffff;
}

padding: 0;
}
1234
</style>
using System;
using System.Linq;
{
{
public IActionResult open()
{
return View();
}
}
}
1235
Overview
The Slider component allows the user to select a value or range of values in-between the min
and max range, by dragging the handle over the slider bar.
There are three types of Slider:
Default - Shows a default slider to select a single value.

MinRange - Displays fill color from the start value to the current selected value.
Range - Select a range of values.
Key Features
Types: Provided three types of Slider.
Orientation: Displays the Slider in horizontal or vertical direction.
Buttons: Provided built-in support to render the buttons in both edges of the Slider.
Tooltip: Displays a tooltip to show the currently selected value.
Ticks: Displays a scale with small and big ticks.
Format: Customize the slider values into various format.
Limits and Drag Interval: Slider thumb movement restriction and interval dragging.
Accessibility: Built-in compliance with the WAI-ARIA specifications.
Keyboard Interaction: The Slider can be intractable through the keyboard.
1236
Getting Started
This section briefly explains about how to render Slider component in your ASP.NET Core
use our components.
Adding Slider component to the Application

Slider component can be rendered with the help of ejs-slider tag helper. Add the below code
to your index.cshtml page which is present under Views/Home folder
<ejs-slider id="default" value="40" type="MinRange" ></ejs-slider>
Run the application

The following example shows a default rendering of Slider.
view
HomeController.cs
<ejs-slider id="default" value="40" type="MinRange" ></ejs-slider>

{
return View();
}
1237
1238
Ticks
The Ticks in Slider supports you to easily identify the current value/values of the Slider. It
contains smallStep and largeStep . The value of the major ticks alone will be displayed in the
slider. In order to enable/disable the small ticks, use the showSmallTicks property.
view
ticks.cs
<ejs-slider id="default" value="30">
<e-slider-tooltipdata showOn="Always" isVisible="true" placement="Before"> </e-
slider-tooltipdata>
<e-slider-ticksdata placement="After" showSmallTicks="true" largeStep="20" smal
lStep="10"></e-slider-ticksdata>
</ejs-slider>
}
public ActionResult Ticks()

{
return View();
}
Step
When the Slider is moved, it increases/decreases the value based on the step value. By default,
the value is increased/decreased by 1. Use the step property to change the increment step
value.
view
step.cs
<ejs-slider id="default" value="30" step="10">
<e-slider-tooltipdata showOn="Always" isVisible="true" placement="Before"> </e-
slider-tooltipdata>
<e-slider-ticksdata placement="After" showSmallTicks="true" largeStep="20" smal
lStep="10"></e-slider-ticksdata>
</ejs-slider>
}
public ActionResult Step()
1239
{
return View();
}
Min and Max

Enables the minimum/starting and maximum/ending value of the Slider, by using the min and
max property. By default, the minimum value is 1 and maximum value is 100. In the following
sample the slider is rendered with the min value as 100 and max value as 1000.
view
min-max.cs
<ejs-slider id="default" value="300" min="100" max="1100">
<e-slider-tooltipdata showOn="Always" isVisible="true" placement="Before"> </e-slid
er-tooltipdata>
<e-slider-ticksdata placement="After" showSmallTicks="true" largeStep="200" smallSt
ep="100"></e-slider-ticksdata>
</ejs-slider>
}
public ActionResult MiniMax()

{
return View();
}
1240
Formatting
The format feature used to customize the units of Slider values to desired format. The
formatted values will also be applied to the ARIA attributes of the slider. There are two ways of
achieving formatting in slider.
Use the format API of slider which utilizes our Internationalization to format values.
Customize using the events namely renderingTicks and tooltipChange .
view
format.cs
<ejs-slider id="default" value="30" min="0" max="100" step="1" >
<e-slider-tooltipdata isVisible="true" format="c2"> </e-slider-tooltipdata>
<e-slider-ticksdata placement="After" format="c2" showSmallTicks="true" largeStep="
20" smallStep="10"></e-slider-ticksdata>
</ejs-slider>
public ActionResult Format()

{
return View();
}
Using format API

In this method, we have different predefined formatting styles like Numeric (N), Percentage (P),
Currency (C) and # specifiers. In this below example we have formatted the ticks and tooltip
values into percentage.
view
format-api.cs
<ejs-slider id="default" value="0.3" min="0" max="1" step="0.01" >
<e-slider-tooltipdata showOn="Always" isVisible="true" placement="Before" format="P
0"> </e-slider-tooltipdata>
<e-slider-ticksdata placement="After" showSmallTicks="true" largeStep="0.2" smallSt
ep="0.1" format="P0"></e-slider-ticksdata>
</ejs-slider>
}
1241
public ActionResult FormatAPI()
{
return View();
}
Using Events
In this method, we will be retrieving the values from the slider events then process them to
desired formatted the values. In this sample we have customized the ticks values into weekdays
as one formatting and tooltip values into day of the week as another formatting.
view
events.cs
<ejs-slider id="default" value="0" min="0" max="6" tooltipChange="tooltipChangeHandle
r" renderingTicks="renderingTicksHandler">
<e-slider-tooltipdata isVisible="true" placement="Before"> </e-slider-tooltipdata>
<e-slider-ticksdata placement="After" largeStep="1"></e-slider-ticksdata>
</ejs-slider>
}
<script>
function renderingTicksHandler(args) {
// Weekdays Array
var daysArr = ['Sunday','Monday','Tuesday','Wednesday','Thrusday','Frid
ay','Saturday'];
// Customizing each ticks text into weeksdays
args.text = daysArr[parseFloat(args.value)];
}
function tooltipChangeHandler(args) {
// Customizing tooltip to display the Day (in numeric) of the week
args.text = 'Day ' + (Number(args.value) + 1).toString();
}
</script>
public ActionResult Events()

{
return View();
}
1242
Movement Limits and Drag Interval
The slider limits restrict the slider thumb between a particular range. This is used if higher or
lower value affects the process or product where the slider is being used.
The following are the six options in the slider's limits object. Each API in the limits object is
optional.
enabled : Enables the limits in the Slider.

minStart : Sets the minimum limit for the first handle.
minEnd : Sets the maximum limit for the first handle.
maxStart : Sets the minimum limit for the second handle.
maxEnd : Sets the maximum limit for the second handle.
startHandleFixed : Locks the first handle.
endHandleFixed : Locks the second handle.
Default and MinRange Slider limits

There is only one handle in the Default and MinRange Slider, so minStart , minEnd , and
startHandleFixed options can be used. When the limits are enabled in the Slider, the limited
area becomes darken. So you can differentiate the allowed and restricted area. Refer to the
following snippet to enable the limits in the Slider.
view
default-limits.cs
<ejs-slider id="default" value="25" min="0" max="100" step="1" type="Default">

<e-slider-tooltipdata isVisible="true"></e-slider-tooltipdata>
<e-slider-limitsdata enabled="true" minStart="10" minEnd="40"></e-slider-limitsdata>
</ejs-slider>

{
return View();
}
Range Slider limits
1243
In the range slider, both handles can be restricted and locked from the limit's object. In this
sample, the first handle is limited between 10 and 40, and the second handle is limited between
60 and 90.
view
range-limits.cs
<ejs-slider id="default" value="ViewBag.range" min="0" max="100" step="1" type="Range">

<e-slider-limitsdata enabled="true" minStart="10" minEnd="40" maxStart="60" maxEnd=
"90"></e-slider-limitsdata>
</ejs-slider>

{
ViewBag.range = new int[] { 25, 75 };
return View();
}
Handle lock
The movement of slider handles can be locked by enabling the startHandleFixed and
endHandleFixed properties in the limit's object. In this sample, the movement of both slider
handles has been locked.
view
handle-lock.cs
<ejs-slider id="default" value="ViewBag.range" min="0" max="100" step="1" type="Range">

<e-slider-limitsdata enabled="true" startHandleFixed="true" endHandleFixed="true"></
e-slider-limitsdata>
</ejs-slider>

{
ViewBag.range = new int[] { 25, 75 };
return View();
}
1244
Accessibility
The Slider is characterized with complete ARIA Accessibility support that helps to access by on-
screen readers and other assistive technology devices. This component is designed with the
reference of guidelines document given in the WAI ARAI Accessibility Practices.
The Slider component uses the Slider role and the following ARIA properties for its element
based on the state.
Properties Functionalities
aria-valuenow It Indicates the current value of the slider.
aria-valuetext Returns the current text of the slider.
aria-valuemin It Indicates the Minimum value of the slider.
aria-valuemax It Indicates the Maximum value of the slider.
aria-orientation It Indicates the Slider Orientation.
aria-label Slider left and right button label text (increment and decrement).
aria-labelledby It indicates the name of the Slider.
The Keyboard interaction of the Slider component is designed based on the WAI-ARIA Practices
described for Slider. Users can use the following shortcut keys to interact with the Slider.
Keyboard
Actions
shortcuts
Right
Arrow Up Increase the Slider value.
Arrow
Left
Arrow Down Decrease the Slider value.
Arrow
Home Moves to the start value (for Range Slider when the second thumb is
focused and the Home key is pressed, it moves to the first thumb value).
End Moves to the end value (for Range Slider when the first thumb is focused
and the End key is pressed, it moves to the second thumb value).
Page Up Increases the Slider by largeStep value.
Page Down Decreases the Slider by largeStep value.
1245
accessbility.cs
<ejs-slider id="minRangeObj" value="30" step="10" showButtons="true" type="MinRange"
>
<e-slider-tooltipdata isVisible="true" placement="Before" showOn="Always"> </e-
slider-tooltipdata>
<e-slider-ticksdata placement="After" largeStep="20" smallStep="10" showSmallTi
cks="true"></e-slider-ticksdata>
</ejs-slider>
<ejs-slider id="weekdaysObj" step="1" min="0" max="6">

<e-slider-tooltipdata isVisible="true" placement="Before" showOn="Always" change
="change"> </e-slider-tooltipdata>
<e-slider-ticksdata placement="After" largeStep="1" renderingTicks="renderingTi
cksHandler"></e-slider-ticksdata>
</ejs-slider>
}
<script>
// Weekdays Array
var daysArr = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thrusday', 'Friday'
, 'Saturday'];
// Customizing each ticks text into weeksdays
args.value = daysArr[parseFloat(args.value)];
}
function change(args) {
// Customizing tooltip to display the Day (in numeric) of the week
args.tooltipText = 'Day ' + (Number(args.tooltipText) + 1).toString();
}
</script>
public ActionResult Accessbility()

{
return View();
}
1246
How To
Value formatting using slider
Date Format
The Date formatting can be achieved in ticks and tooltip using renderingTicks and
tooltipChange events respectively. The process of formatting is explained in the below sample.
view
date-format.cs
<ejs-slider id="default" step="86400000" min="1371081600000" max="1371772800000" sh
owButtons="true" tooltipChange="tooltipChangeHandler" renderingTicks="renderingTicksHan
dler">
<e-slider-tooltipdata isVisible="true" placement="Before"> </e-slider-tooltipda
ta>
<e-slider-ticksdata placement="After" largeStep="172800000" renderingTicks="ren
deringTicksHandler" change="change"></e-slider-ticksdata>
</ejs-slider>
}
<script>
var totalMiliSeconds = Number(args.text);
// Converting the current milliseconds to the respective date in desired format
let custom = { year: "numeric", month: "short", day: "numeric" };
args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
}
var totalMiliSeconds = Number(args.value);
// Converting the current milliseconds to the respective date in desired format
var custom = { year: "numeric", month: "short", day: "numeric" };
args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
}
</script>
public ActionResult DateFormat()

{
return View();
}
Time Format
1247
The time formatting can be achieved same as the date formatting using renderingTicks and
change events. The process of time formatting is explained in the below sample.
view
time-format.cs
<ejs-slider id="default" step="3600000" min="1373693400000" max="1373715000000" sho
wButtons="true" tooltipChange="tooltipChangeHandler" renderingTicks="renderingTicksHand
ler">
<e-slider-tooltipdata isVisible="true" placement="Before"> </e-slider-tooltipda
ta>
<e-slider-ticksdata placement="After" largeStep="7200000" renderingTicks="rende
ringTicksHandler"></e-slider-ticksdata>
</ejs-slider>
}
var totalMiliSeconds = Number(args.text);
var custom = { hour: '2-digit', minute: '2-digit' };
args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
}
var totalMiliSeconds = Number(args.value);
var custom = { hour: '2-digit', minute: '2-digit' };
args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
}
</script>
public ActionResult TimeFormat()

{
return View();
}
Numeric Value Customization

The numeric values can be formatted into different decimal digits or fixed number of whole
numbers or to represent the units. The Numeric processing is demonstrated below.
view
numeric-value.cs
<ejs-slider id="kilometer" value="30" step="1" min="0" max="100">
<e-slider-tooltipdata isVisible="true" format="##.## Km"> </e-slider-tooltipdata
1248
>
<e-slider-ticksdata placement="After" largeStep="20" format="##.## Km" smallStep
="10" showSmallTicks="true"></e-slider-ticksdata>
</ejs-slider>
<ejs-slider id="decimalobj" value="0.15" step="0.01" min="0.1" max=".2">

<e-slider-tooltipdata isVisible="true" format="##.#00"> </e-slider-tooltipdata>
<e-slider-ticksdata placement="After" largeStep="0.02" format="##.#00" smallStep
="0.01" showSmallTicks="true"></e-slider-ticksdata>
</ejs-slider>
<ejs-slider id="sliderobj" value="5" step="1" min="0" max="100">

<e-slider-tooltipdata isVisible="true" format="00##"> </e-slider-tooltipdata>
<e-slider-ticksdata placement="After" largeStep="20" format="00##" smallStep="1
0" showSmallTicks="true"></e-slider-ticksdata>
</ejs-slider>
}
public ActionResult NumericValue()

{
return View();
}
1249
Overview
Split button triggers default action when primary button is clicked and toggle contextual overlays
for displaying list of action items when dropdown button is clicked. It can contain both text and
images.
Key Features
Icons
Popup Items
Accessibility
How To
1250
Getting Started
This section briefly explains about how to create a simple SplitButton in your ASP.NET Core
Add SplitButton to the project

To create SplitButton add the ejs-splitbutton tag with id attribute as element in your
Index.cshtml page.
view
<ejs-splitbutton id="element" content="Paste" items="@ViewBag.items"></ejs-splitbutton>
ViewBag.items variable is used for bounding the items property in view page.
Bind dataSource
Populate the action items in SplitButton by using the items property. Here, the JSON values
are passed to the SplitButton component are generated in HomeController.cs and assigned to
ViewBag variable.

{
items.Add(new
{
text = "Cut"
});
items.Add(new
{
text = "Copy"
});
items.Add(new
{
text = "Paste"
});
return View();
}
1251
Run the application

The following example shows a basic SplitButton.
view
default.cs
<ejs-splitbutton id="element" content="Paste" items="@ViewBag.items"></ejs-splitbutton>

{
items.Add(new
{
text = "Cut"
});
items.Add(new
{
text = "Copy"
});
items.Add(new
{
text = "Paste"
});
return View();
}
1252
Icons
SplitButton Icons
SplitButton can have an icon to provide the visual representation of the action. To place the icon
on a SplitButton, set the iconCss property to e-icons with the required icon CSS. By default,
the icon is positioned to the left side of the SplitButton. You can customize the icon's position by
using the iconPosition property
The following example illustrates how to place icon in SplitButton component.
view
iconbutton.cs
<ejs-splitbutton id="element" content="Paste" items="ViewBag.items" iconCss="e-icons
e-paste"></ejs-splitbutton>

e-paste" iconPosition="Top"></ejs-splitbutton>
}
<style>
.e-split-btn-wrapper{
}
.e-paste::before {
content: '\e71f';
}
</style>
using System;
using System.Linq;
{
public class SplitButtonController : Controller
{
public IActionResult IconButton()
{
1253
items.Add(new
{
text = "Cut"
});
items.Add(new
{
text = "Copy"
});
items.Add(new
{
text = "Paste"
});
return View();
}
}
}
name to the element. You can also use third party icons on the SplitButton using the
iconCss property.
Vertical Button
Vertical Button in SplitButton can be achieved by adding e-vertical class using cssClass
property.
The following example illustrates how to vertical support in SplitButton component.
view
verticalbutton.cs
e-paste" cssClass="e-vertical"></ejs-splitbutton>
}
<style>
}
.e-paste::before {
content: '\e71f';
}
</style>
1254
using System;
using System.Linq;
{
{
public IActionResult VerticalButton()
{
items.Add(new
{
text = "Cut"
});
items.Add(new
{
text = "Copy"
});
items.Add(new
{
text = "Paste"
});
return View();
}
}
}
1255
Popup Items
Icons
The Popup action item have an icon or image to provide visual representation of the action. To
place the icon on a popup item, set the iconCss property to e-icons with the required icon
CSS. By default, the icon is positioned to the left side of the popup action item.
In the following sample, the icons for Cut, Copy, Paste, Undo and Redo menu items are added
using the iconCss property.
view
popupicons.cs
}
<style>
}
.e-cut::before {
content: '\e759';
}
.e-copy::before {
content: '\e70a';
}
.e-paste::before {
content: '\e71f';
}
</style>
using System;
using System.Linq;
1256
{
{
public IActionResult PopupIcons()
{
items.Add(new
{
text = "Cut",
});
items.Add(new
{
text = "Copy",
});
items.Add(new
{
text = "Paste",
});
return View();
}
}
}
Template
Item Templating
Popup items can be customized by using the beforeItemRender event. The item render event
triggers while rendering each Popup action item. The event argument will be used to identify the
action item and customize it based on the requirement.
view
itemtemplate.cs
<ejs-splitbutton id="element" items="ViewBag.items" iconCss="e-icons e-paste" befor

eItemRender="beforeItemRender"></ejs-splitbutton>
1257
<scripts>
var shortCutSpan = createElement('span');
args.element.appendChild(shortCutSpan);
shortCutSpan.setAttribute('class','shortcut');
shortCutSpan.classList.add('e-icons');
(text === 'Cut') ? shortCutSpan.classList.add('e-cut') : (text === 'Paste') ? s
hortCutSpan.classList.add('e-paste') : shortCutSpan.classList.add('e-copy');
}
</scripts>
<style>
}
.e-cut::before {
content: '\e759';
}
.e-copy::before {
content: '\e70a';
}
.e-paste::before {
content: '\e71f';
}
</style>
using System;
using System.Linq;
{
{
public IActionResult ItemTemplate()
{
1258
items.Add(new
{
text = "Cut"
});
items.Add(new
{
text = "Copy"
});
items.Add(new
{
text = "Paste"
});
return View();
}
}
}
Popup Templating
The whole popup can be customized as per the requirement. In the following example, the popup
can be customized by handling it in target property.
view
popuptemplate.cs
<div id='dropdowntarget'>
<div id= "first">
<div id='black'></div>
<div id='red'></div>
<div id='green'></div>
<div id='gray'></div>
<div id='blue'></div>
<div id='violet'></div>
<div id='brown'></div>
<div id='darkgoldenrod'></div>
<div id='aquamarine'></div>
</div>
</div>
<ejs-splitbutton id="element" target="#dropdowntarget" iconCss="e-icons e-color"></

ejs-splitbutton>
1259
<style>
.shortcut {
float: right;
margin-top: 9px;
padding-left: 30px;
}
.e-color::before {
content: '\e778';
color:black;
}
}
#dropdowntarget {
border: 0.5px solid grey;
height: 110px;
width: 110px;
}
#black {
width: 30px;
height: 30px;
background-color: black;
margin: 5px 5px;
float:left;
}
#red{
width: 30px;
height: 30px;
background-color: red;
margin: 5px 0px;
float:left;
}
#green{
width: 30px;
height: 30px;
background-color: green;
margin: 5px 5px;
float:left;
}
#gray{
width: 30px;
1260
height: 30px;
background-color: gray;
margin: 0px 5px;
float:left;
}
#blue{
width: 30px;
height: 30px;
background-color: blue;
float:left;
}
#violet{
width: 30px;
height: 30px;
background-color: violet;
margin: 0px 5px;
float:left;
}
#brown{
width: 30px;
height: 30px;
background-color: brown;
margin: 5px 5px;
float:left;
}
#darkgoldenrod{
width: 30px;
height: 30px;
background-color: darkgoldenrod;
margin: 5px 0px;
float:left;
}
#aquamarine{
width: 30px;
height: 30px;
background-color: aquamarine;
margin: 5px 5px;
float:left;
}
#icon{
width: 10px;
height: 10px;
background-color: aquamarine;
1261
position: absolute;
}
</style>
using System;
using System.Linq;
{
{
public IActionResult PopupTemplate()
{
return View();
}
}
}
1262
Accessibility
ARIA attributes
interface controls with AJAX, HTML, JavaScript, and related technologies. SplitButton provides
attributes like aria-expanded , aria-owns and aria-haspopup applied for action item in
SplitButton. It helps the people with disabilities by providing information about the widget for
assistive technology in the screen readers. SplitButton component contains the menuItem role.
menuItem This role will be specified for an action items.
aria-
Indicates the availability and type of interactive SplitButton popup element.
haspopup
aria- Indicates whether the SplitButton popup can be expanded or collapsed, as

expanded well as indicates whether its current state is expanded or collapsed.
Identifies an elements in order to define a visual, functional, or contextual

aria-owns parent/child relationship between DOM elements where the DOM hierarchy
cannot be used to represent the relationship.
Keyboard
Actions
shortcuts
Esc Closes the opened popup.
Enter Opens the popup, or activates the highlighted item and closes the
popup.
Space Opens the popup.

Up Navigates up or to the previous action item.
Down Navigates down or to the next action item.
Alt + Up Arrow Opens the popup.

Alt + Down
Arrow Closes the popup.
view
accessibility.cs
1263
}
<style>
}
.e-cut::before {
content: '\e759';
}
.e-copy::before {
content: '\e70a';
}
.e-paste::before {
content: '\e71f';
}
</style>
using System;
using System.Linq;
{
{
{
items.Add(new
{
text = "Cut",
});
items.Add(new
{
text = "Copy",
});
1264
items.Add(new
{
text = "Paste",
});
return View();
}
}
}
1265
How To
The following section explains how to customize various aspects of the SplitButton.
Set the Disabled state

SplitButton component can be enabled or disabled by disabled property. To disable SplitButton
component, set the disabled property as true.
The following example illustrates how to set the disable state in SplitButton component.
view
disabled.cs
<ejs-splitbutton id="element" content="Paste" items="@ViewBag.items" iconCss="e-ico

ns e-sigma" disabled=true></ejs-splitbutton>
<styles>
.e-sigma::before {
content: '\e7d3';
}
}
</styles>
using System;
using System.Linq;
{
{
public IActionResult Disabled()
{
1266
items.Add(new
{
text = "Autosum"
});
items.Add(new
{
text = "Average"
});
items.Add(new
{
text = "Count numbers"
});
items.Add(new
{
text = "Min"
});
items.Add(new
{
text = "Max"
});
return View();
}
}
}
Create right-to-left SplitButton

SplitButton component has RTL support. This can be achieved by setting enableRtl as true .
The following example illustrates how to enable right-to-left support in SplitButton component.
view
rtl.cs
<ejs-splitbutton id="rtl" content="Message" items="ViewBag.items" iconCss="e-icons

e-message" enableRtl=true></ejs-splitbutton>
<styles>
.e-sigma::before {
1267
content: '\e7d3';
}
}
</styles>
using System;
using System.Linq;
{
{
{
items.Add(new
{
text = "Autosum"
});
items.Add(new
{
text = "Average"
});
items.Add(new
{
text = "Count numbers"
});
items.Add(new
{
text = "Min"
});
items.Add(new
{
text = "Max"
});
return View();
}
}
1268
}
Dialog open on popup item click

This section explains about how to open a dialog on SplitButton popup item click. This can be
achieved by handling dialog open in select event of the SplitButton.
In the following example, Dialog will open while selecting Update... item:
Grouped Items in Popup

Grouped items are possible in SplitButton by templating entire popup with ListView. Check
ListView grouping and create such items. Create ListView with id listview and provide
element of the ListView as target of SplitButton to render it in popup area.
In this following example, ListView is created and its element is set as target for SplitButton.
Underline a character in a text

To underline a particular character in a text, it can be handled in beforeItemRender event by
adding <u> tag in between the text and given as innerHTML in li rendering.
In the following example, C is underlined in the text Copy :
1269
Overview
The Switch is a graphical user interface element that allows you to toggle between checked /
unchecked states..
Key Features
Supports text.
1270
Getting Started
This section briefly explains about how to create a simple Switch in your ASP.NET Core
Add Switch to the project

To create simple Switch add the ejs-switch tag with id attribute as element in your
Index.cshtml page.
view
default.cs
<ejs-switch id="default"></ejs-switch>

{
return View();
}
Run the application

The following example shows a default rendering of Switch.
view
default.cs
<ejs-switch id="default"></ejs-switch>

{
return View();
}
Set text on Switch
1271
This section explains how to set onLabel and offLabel texts on Switch. In the following
example, onLabel is set as ON and offLabel is set as OFF .
view
default.cs
<ejs-switch id="default" onlabel="ON" offlabel="OFF"></ejs-switch>

{
return View();
}
Switch does not have text support for material themes, and does not support long custom
text.
1272
Accessibility
interface controls with AJAX, HTML, JavaScript, and related technologies.
Switch provides built-in compliance with WAI-ARIA specifications. WAI-ARIA support is

achieved through the attributes like aria-checked and aria-disabled . It helps the people with
disabilities by providing information about the widget for assistive technology in the screen
readers, such as screen readers.
role Indicates the switch component.
aria-
Indicates whether the input is checked, unchecked.
checked
aria- Indicates that the element is perceivable but disabled, so it is not editable or
disabled otherwise operable.
Keyboard
Actions
shortcuts
Space When the switch has focus, pressing the Space key changes the state
of the switch.
view
default.cs
<table class='size'>
<tr>
<td class='lSize'>Checked</td>
<td>
<ejs-switch id="switch1" checked="true"></ejs-switch>
</td>
</tr>
<tr>
<td class='lSize'>Unchecked</td>
<td>
<ejs-switch id="switch2"></ejs-switch>
</td>
</tr>
1273
</table>
</div>
}
<style>
#container {
visibility: hidden;
margin-left: 10px;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
top: 45%;
left: 45%;
}
.size tr td {
padding: 10px;
}
.size .lSize {
font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
font-size: 13px;
cursor: pointer;
user-select: none;
}
</style>

{
return View();
}
1274
How To
Customize the appearance of a Switch

You can customize the appearance of the Switch component using the CSS rules. Define your
own CSS rules according to your requirement and assign the class name to the cssClass
property.
Customize Switch bar and handle

Switch bar and handle can be customized as per requirement using CSS rules. Switch bar and
handle customized using cssClass property. In the following sample, the border-radius CSS
property for e-switch-inner and e-switch-handle elements was changed border radius circle
to square shape.
view
default.cs
<ejs-switch id="switch1" cssClass="square"></ejs-switch>
<ejs-switch id="switch2" cssClass="custom-switch"></ejs-switch>
<ejs-switch id="switch3" cssClass="handle-text"></ejs-switch>
}
<style>
/* Square Switch */
.e-switch-wrapper.square .e-switch-inner,
.e-switch-wrapper.square .e-switch-handle {
border-radius: 0;
}
/* Customize Handle and Bar Switch */

.e-switch-wrapper.custom-switch {
width: 50px;
height: 24px;
}
.e-switch-wrapper.custom-switch .e-switch-handle {
width: 20px;
height: 16px;
}
.e-switch-wrapper.custom-switch .e-switch-inner,
.e-switch-wrapper.custom-switch .e-switch-handle {
1275
border-radius: 0;
}
.e-switch-wrapper.custom-switch .e-switch-handle.e-switch-active {
left: 42px;
}
/* Customize Handle and Bar Switch */

.e-switch-wrapper.handle-text {
width: 58px;
height: 24px;
}
.e-switch-wrapper.handle-text .e-switch-handle {
width: 26px;
height: 20px;
left: 2px;
background-color: #fff;
}
.e-switch-wrapper.handle-text .e-switch-inner,
.e-switch-wrapper.handle-text .e-switch-handle {
border-radius: 0;
}
.e-switch-wrapper.handle-text .e-switch-handle.e-switch-active {
left: 46px;
}
.e-switch-wrapper.handle-text .e-switch-inner.e-switch-active,
.e-switch-wrapper.handle-text:hover .e-switch-inner.e-switch-active .e-switch-on {
background-color: #4d841d;
border-color: #4d841d;
}
.e-switch-wrapper.handle-text .e-switch-inner,
.e-switch-wrapper.handle-text .e-switch-off {
background-color: #e3165b;
border-color: #e3165b;
}
.e-switch-wrapper.handle-text .e-switch-inner:after,
.e-switch-wrapper.handle-text .e-switch-inner:before {
font-size: 10px;
position: absolute;
line-height: 21px;
font-family: "Helvetica", sans-serif;
z-index: 1;
height: 100%;
1276
transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.e-switch-wrapper.handle-text .e-switch-inner:before {
content: "OFF";
color:#e3165b;
left: 3px;
}
.e-switch-wrapper.handle-text .e-switch-inner:after{
content: "ON";
right: 5px;
color: #fff;
}
input[class$='e-switch']:checked + .e-switch-inner:before {
color: #fff;
}
input[class$='e-switch']:checked + .e-switch-inner:after {
color: #4d841d;
}
</style>

{
return View();
}
Color the Switch

Switch colors can be customized as per the requirement using CSS rules. Switch bar and handle
colors customized using cssClass property. In the following sample, the e-switch-inner and
e-switch-off elements background and border colors were changed from default colors.
view
default.cs
<ejs-switch id="switch1" cssClass="bar-color"></ejs-switch>
<ejs-switch id="switch2" cssClass="handle-color"></ejs-switch>
<ejs-switch id="switch3" cssClass="custom-iOS"></ejs-switch>
}
<styles>
/* Custom color Switch */
1277
.e-switch-wrapper.bar-color .e-switch-inner.e-switch-active,
.e-switch-wrapper.bar-color:hover .e-switch-inner.e-switch-active .e-switch-on {
background-color: #4d841d;
border-color: #4d841d;
}
.e-switch-wrapper.bar-color .e-switch-inner,
.e-switch-wrapper.bar-color .e-switch-off {
border-color: #e3165b;
}
.e-switch-wrapper.bar-color .e-switch-handle {
}
/* handle color Switch */

.e-switch-wrapper.handle-color .e-switch-handle {
}
.e-switch-wrapper.handle-color .e-switch-handle.e-switch-active {
background-color: #4d841d
}
.e-switch-wrapper.handle-color .e-switch-inner.e-switch-active,
.e-switch-wrapper.handle-color:hover .e-switch-inner.e-switch-active .e-switch-on {
border-color: #ccc;
}
.e-switch-wrapper.handle-color .e-switch-inner,
.e-switch-wrapper.handle-color .e-switch-off {
border-color: #ccc;
}
/* iOS Switch */
.e-switch-wrapper.custom-iOS .e-switch-inner.e-switch-active,
.e-switch-wrapper.custom-iOS:hover .e-switch-inner.e-switch-active .e-switch-on {
background-color: #3df865;
border-color: #3df665;
}
.e-switch-wrapper.custom-iOS {
width: 42px;
height: 24px;
}
1278
.e-switch-wrapper.custom-iOS .e-switch-handle {
width: 20px;
height: 20px;
}
.e-switch-wrapper.custom-iOS .e-switch-handle.e-switch-active {
margin-left: -22px;
}
</styles>

{
return View();
}
Change Size
The different Switch sizes available are default and small. To reduce the size of default Switch to
small, set the cssClass property to e-small .
view
default.cs
<tr>
<td class='lSize'>Small</td>
<td>
<ejs-switch id="switch1" cssClass="e-small"></ejs-switch>
</td>
</tr>
<tr>
<td class='lSize'>Default</td>
<td>
</td>
</tr>
</table>
</div>
}
<style>
#container {
visibility: hidden;
margin-left: 10px;
1279
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
top: 45%;
left: 45%;
}
.size tr td {
padding: 10px;
}
.size .lSize {
font-size: 13px;
cursor: pointer;
user-select: none;
}
</style>

{
return View();
}
Set disabled state

Switch can be disabled by setting the disabled property to true.
The following example illustrates how to disable support in Switch component.
view
default.cs
<ejs-switch id="default" disabled="true"></ejs-switch>

{
return View();
}
1280
Enable ripple for Switch label
By default, label with ripple effect is not available in Switch. You can achieve this using
rippleMouseHandler method. The following example illustrates how to enable ripple effect for
labels in Switch component.
view
default.cs
<tr>
<td class='lSize'><label for='switch1'>USB Tethering</label></td>
<td>
</td>
</tr>
</table>
</div>
}
<style>
#container {
visibility: hidden;
margin-left: 10px;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
top: 45%;
left: 45%;
}
.e-switch-wrapper {
margin-top: 18px;
}
.size tr td {
padding: 10px;
}
.size .lSize {
padding-top: 24px;
1281
font-size: 13px;
}
.size .lSize label{

cursor: pointer;
user-select: none;
}
</style>

{
return View();
}
Enable RTL
Switch component has RTL support. This can be achieved by setting enableRtl as true .
The following example illustrates how to enable right-to-left support in Switch component.
view
default.cs
<ejs-switch id="default" enableRtl="true"></ejs-switch>

{
return View();
}
Submit name and value in form

The name attribute of the Switch is used to group Switches. When the Switches are grouped in
form, the checked items value attribute will post to the server on form submit. The disabled and
unchecked Switch values will not be sent to the server on form submit.
In the following code snippet, USB and Wi-Fi in the checked state, and Bluetooth is in disabled
state. Values that are in checked state only be sent on form submit.
view
default.cs
1282
<form>
<tr>
<td class='lSize'>USB</td>
<td>
</td>
</tr>
<tr>
<td class='lSize'>Wi-Fi</td>
<td>
</td>
</tr>
<tr>
<td class='lSize'>Bluetooth</td>
<td>
</td>
</tr>
<tr>
<td>
<ejs-button id="btnElement" ></ejs-button>
</td>
</tr>
</table>
</form>
</div>
}
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
top: 45%;
left: 45%;
}
button {
1283
}
.size tr td {
padding: 10px;
}
.size .lSize {
font-size: 13px;
}
.size .lSize label {

user-select: none;
}
</style>

{
return View();
}
1284
Overview
The TextBox is an input element that allows to get input from the user. It allows the user to edit or
display the text value.
Key features
Groups: Supports to group the icon element with the input.
Floating Label: Enables floating support to placeholder text of TextBox.
Sizing: Allows to set Small and Normal sized TextBox.
Validation States: Supports to indicate Success , Error , and Warning state.
1285
Getting Started
This section briefly explains about how to include a simple Textbox in your ASP.NET Core
use our components.
Prerequisites
on the machine.
Visual Studio 2017

DotNet Core 2.0

ASP.NET Core
The following steps to create ASP.NET Core Application with Essential JS 2 for ASP.NET Core.
Step 1 : Create ASP.NET Core Web Application with default template project in Visual Studio
2017.
1286
Step 2 : Once your project created. We need to add Syncfusion EJ2 package into your
Open the nugget package manager.
1287
Install the Syncfusion.EJ2 package to the application.
Assembly Reference.
N> We need install NewtonSoft.JSON as dependency since it Syncfusion.EJ2 dependent to

NewtonSoft.JSON package.
Step 3 : Open the _ViewImports.cshtml to import Syncfusion.EJ2 package.
1288
Step 4 : Add client side resource through CDN or local package in the layout page
_Layout.cshtml.
@* Syncfusion Essential JS2 Styles *@

@* Syncfusion Essential JS2 Scripts *@

Step 5 : Adding Script Manager in layout page _Layout.cshtml.
Step 6 : Adding Syncfusion Essential JS2 for ASP.Net Core component in any page you want.
For Example, I have added the Textbox component in Index.cshtml page.
<div class="e-input-group">
<input class="e-input" placeholder="Enter Name" type="text">
</div>

Now open your view page to render Textbox component.
view
input.cs
<div class="control_wrapper accordion-control-section">
<input class="e-input" name='input' type="text" placeho
lder="Enter Name"/>
</div>
</div>
1289
</div>
}
@section Script{
<script>
var inputObject = {};
var input = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e
-input-group input');
var focusFn = function (index) {
return function () {
getParentNode(input[index]).classList.add('e-input-focus');
};
};
var blurFn = function (index) {
return function () { getParentNode(input[index]).classList.remove('e-input-
focus'); };
};
for (var i = 0; i < input.length; i++) {
input[i].addEventListener('focus', focusFn(i));
input[i].addEventListener('blur', blurFn(i));
}
function getParentNode(element) {
var parentNode = element.parentNode;
if (parentNode.classList.contains('e-input-in-wrap')) {
return parentNode.parentNode;
}
return parentNode;
}
</script>
}
using System;
using System.Linq;
{
public partial class TextboxController : Controller
{
// GET: //
{
return View();
}
1290
}
}
Adding icons to the TextBox

You can create a TextBox with icon as a group by creating the parent div element with the class
e-input-group and add the icon element as span with the class e-input-group-icon . For
detailed information, refer to the Groups section.
view
icon.cs
<input class="e-input" name='input' type="text" placeho
lder="Enter Date"/>
<span class="e-input-group-icon e-input-popup-date"></s
pan>
</div>
</div>
</div>
}
@section Script{
<script>
};
};
focus'); };
};
var mouseupFn = function () {
var ele = this; setTimeout(function () {
ele.classList.remove('e-input-btn-ripple');
}, 500);
1291
};
}
for (var j = 0; j < inputIcon.length; j++) {
inputIcon[j].addEventListener('mousedown', function () {
});
inputIcon[j].addEventListener('mouseup', mouseupFn);
}
}
return parentNode;
}
</script>
}
using System;
using System.Linq;
{
{
// GET: //
{
return View();
}
}
}
Floating label
The floating label TextBox floats the label above the TextBox after focusing, or filled with value in
the TextBox. You can create the floating label TextBox by creating the parent div element with
the class e-float-input and append the span, label elements with the class added as e-
1292
float-line and e-float-text accordingly. For detailed information, refer to the Groups
section.
view
floating.cs
<input type="text" required/>
<label class="e-float-text">Enter Date </label>
pan>
</div>
</div>
</div>
}
@section Script{
<script>
};
};
focus'); };
};
}, 500);
};
}
1293
});
}
}
return parentNode;
}
</script>
}
using System;
using System.Linq;
{
{
// GET: //
{
return View();
}
}
}
1294
Groups
The following section explains you the steps required to create TextBox with icon and
floating label .
TextBox:
Create a parent div element with the class e-input-group
Place input element with the class e-input inside the parent div element.
<input class="e-input" name='input' type="text" placeholder="Enter Date"/>
</div>
Floating label:
Add the e-float-input class to the parent div element.
Remove the e-input class and add required attribute to the input element.
Place the span element with class e-float-line after the input element.
Place the label element with class e-float-text after the above created span element.
When you focus or filled with value in the TextBox, the label floats above the TextBox.
Creating the Floating label TextBox, you have to set the required attribute to the Input
element to achieve the floating label functionality which is used for validating the value
existence in TextBox. If you want to render the Floating label TextBox without required
attribute then refer to the Floating label without required attribute section.

<input type="text" required/>
<label class="e-float-text">Enter Name </label>
</div>
And refer to the following sections to add the icons to the TextBox.
With icon and floating label

Create an icon element as a span with the class e-input-group-icon , and the user can place
the icon in either side of TextBox by adding the created icon element before/after the input.
1295
For the floating label enabled TextBox add the icon element as first or last element inside the
TextBox wrapper,and based on the element position it will act as prefix or suffix icon.
view
icon.cs
<h4> TextBox with icons </h4>
<input class="e-input" type="text" placeholder="Enter
Date"/>
<span class="e-input-group-icon e-input-popup-date"></
span>
</div>
<div class="e-input-group e-float-icon-left">

<span class="e-input-group-icon e-input-date"></span>
<div class="e-input-in-wrap">
<input class="e-input" type="text" placeholder=
"Enter Date"/>
</div>
</div>
<div class="e-input-group e-float-icon-left">

<span class="e-input-group-icon e-input-date"></span>
<input class="e-input" type="text" placeholder=
"Enter Date"/>
<span class="e-input-group-icon e-input-down"></
span>
</div>
</div>
<h4> Floating label with icons </h4>

<input required type="text" />
<label class="e-float-text"> Enter Date </label>
<span class="e-input-group-icon e-input-popup-d

ate"></span>
</div>
1296
<div class="e-float-input e-input-group e-float-icon-left">
<span class="e-input-group-icon e-input-date"></
span>
<label class="e-float-text"> Enter Date
</label>
</div>
</div>
<div class="e-float-input e-input-group e-float-icon-left">

<span class="e-input-group-icon e-input-date"></
span>
<label class="e-float-text"> Enter Date
</label>
<span class="e-input-group-icon e-input
-down"></span>
</div>
</div>
</div>
</div>
}
@section Script{
<script>
};
};
focus'); };
};
}, 500);
};
1297
}
});
}
}
return parentNode;
}
</script>
}
using System;
using System.Linq;
{
{
// GET: //
{
return View();
}
}
}
With clear button and floating label

The clear button is added to the input for clearing the value given in the TextBox. It is shown only
when the input field has a value, otherwise not shown.
You can add the clear button to the TextBox by placing the span element with the class e-clear-
icon after the input element.
1298
view
clear.cs
<h4> TextBox with clear button </h4>
<input class='e-input custom-input0' required="true" pl
aceholder="Enter Name" value="John"/>
<span class="e-clear-icon"></span>
</div>
<h4> Floating TextBox with clear button </h4>
<input required="true" class="custom-input1" value="Joh
n" />
<label class="e-float-text">Enter Name </label>
<span class="e-clear-icon"></span>
</div>
</div>
</div>
}
@section Script{
<script>
};
};
focus'); };
};

}
1299
}
return parentNode;
}
// Code to clear the input field when click on clear button
var inputClearIcon = document.querySelectorAll('.e-clear-icon');

for (var i = 0; i < inputClearIcon.length; i++) {
inputClearIcon[i].addEventListener('click', function () {
var element = '.custom-input'+i;
var inputEle = document.querySelectorAll(element);
inputEle[0].value = "";
});
}
</script>
}
using System;
using System.Linq;
{
{
// GET: //
{
return View();
}
}
}
You should add the code to handle the click event of clear button.
Floating label without required attribute

You can render the Floating label TextBox without required attribute by manually float the
label above of the TextBox using input events. You can manually float the label above of the
TextBox by adding the below list of classes to the floating label element. The classes are:
e-label-top Floats the label above of the TextBox.
1300
e-label-bottom Label to be placed as placeholder for the TextBox.
view
floating.cs
<div class="e-float-input">
<input type="text" id='inpt1' />
<label class="e-float-text"> Enter Value </label>
</div>
</div>
</div>
}
@section Script{
<script>
/* To get the Input element */
var inputElement = document.getElementById('inpt1');
/* Update the label position based on Input value */

updateLabelState(inputElement.value, inputElement.parentElement.querySe
lector('.e-float-text'));
inputElement.addEventListener("focus", function () {
var label = this.parentElement.querySelector('.e-float-text');
label.classList.add('e-label-bottom');
label.classList.remove('e-label-top');
});
inputElement.addEventListener("blur", function () {
updateLabelState(this.value, this.parentElement.querySelector('
.e-float-text'));
});
inputElement.addEventListener("input", function () {
updateLabelState(this.value, this.parentElement.querySelector('
.e-float-text'));
});
/* Update the label position based on Input value */
/* e-label-top - Floats the label above of the TextBox */
1301
/* e-label-bottom - Label to be placed as placeholder for the TextBox */
function updateLabelState(value,label) {
if (value) {
label.classList.add('e-label-top');
label.classList.remove('e-label-bottom');
} else {
label.classList.add('e-label-bottom');
label.classList.remove('e-label-top');
}
}
</script>
}
<style>
.control-section {
margin: 0 auto;
padding: 20px 10px;
width: 260px;
}
</style>
using System;
using System.Linq;
{
{
// GET: //
{
return View();
}
}
}
Multi-line input with floating label

Add the HTML textarea element with the e-input class to create default multi-line input.
1302
Add the floating label support to the multi-line input by creating the floating label structure as
defined in the initial section.
view
<textarea class="e-input"> Address </textarea>
<textarea required></textarea>
<label class="e-float-text"> Address </label>
</div>
</div>
</div>
}
@section Script{
<script>
var inputElement = document.querySelectorAll('.e-input-group .e-input,.

e-float-input.e-input-group input');
// Add 'e-input-focus' class to the input for achive ripple effect when
focus on the input field.
for (var i = 0; i < inputElement.length; i++) {

inputElement[i].addEventListener('focus', function () {
var parentElement = this.parentNode;
if (parentElement.classList.contains('e-input-in-wrap')
) {
parentElement.parentNode.classList.add('e-input
-focus');
} else {
}
});
inputElement[i].addEventListener('blur', function () {
) {
parentElement.parentNode.classList.remove('e-in
1303
put-focus');
} else {
this.parentNode.classList.remove('e-input-focus'
);
}
});
}
</script>
}
1304
Sizing
You can render the TextBox in two different sizes.
Property Description
Normal By default, the TextBox is rendered with normal size.
You need to add e-small class to the input element, or else add to the input
Small
container.
view
sizing.cs
<h4> Normal Size </h4>
<input class="e-input" type="text" placeholder="Enter N
ame" />
</div>
<input type='text' required />
<label class="e-float-text">Enter Name</label>
</div>
<input class="e-input" type="text" placeholder="Enter D
ate" />
pan>
</div>
<h4> Small Size </h4>
<div class="e-input-group e-small">

<input class="e-input" type="text" placeholder="Enter N
ame" />
</div>
<div class="e-float-input e-small">

1305
</div>
<div class="e-input-group e-small">

<input class="e-input" type="text" placeholder="Enter D
ate" />
pan>
</div>
</div>
</div>
}
@section Script{
<script>


) {
-focus');
} else {
}
});
) {
put-focus');
} else {
);
}
});
}
1306
// Add 'e-input-btn-ripple' class to the icon element for achive ripple
effect when click on the icon.

for (var i = 0; i < inputIcon.length; i++) {
});
var element = this;
}, 500);
});
}
</script>
}
<style>
.e-input-group-icon:before {
font-family: e-icons;
}
.e-input-group .e-input-group-icon.e-input-popup-date { /* csslint allow: adjoining-cla

sses */
font-size:16px;
}
.e-input-group.e-small .e-input-group-icon.e-input-popup-date { /* csslint allow: adjoi

ning-classes */
font-size:14px;
}
.e-input-group-icon.e-input-popup-date:before { /* csslint allow: adjoining-classes */

content: "" ;
}
.e-input-group-icon.e-input-up:before { /* csslint allow: adjoining-classes */

content: '\e85e';
}
.e-input-group-icon.e-input-down:before { /* csslint allow: adjoining-classes */

content: "";
}
.e-input-group-icon.e-input-plus:before { /* csslint allow: adjoining-classes */

content: '\e7ba';
1307
}
.e-input-group-icon.e-input-minus:before { /* csslint allow: adjoining-classes */

content: '\e814';
}
.e-input-group-icon.e-input-date:before { /* csslint allow: adjoining-classes */

content: "" ;
}
.e-input-group-icon.e-input-left:before { /* csslint allow: adjoining-classes */

content: '\e904';
}
.e-input-group-icon.e-input-right:before { /* csslint allow: adjoining-classes */

content: '\e913';
}
.e-input-group-icon.e-input-reload:before { /* csslint allow: adjoining-classes */

content: '\e837';
}
.e-input-group-icon.e-input-search:before { /* csslint allow: adjoining-classes */

content: '\e806';
}
#input-container .e-input-group { /* csslint allow: adjoining-classes */

margin: 30px 0;
}

margin: 30px 0;
}
</style>
using System;
using System.Linq;
{
{
1308
// GET: //
{
return View();
}
}
}
1309
Validation
The TextBox supports three types of validation styles namely error , warning , and success .
These states are enabled by adding corresponding classes .e-error , .e-warning , or .e-
success to the input parent element.
view
validation.cs
<div class="e-input-group e-warning">
<input class="e-input" type="text" placeholder="Input with war
ning" />
</div>
<div class="e-input-group e-error">

<input class="e-input" type="text" placeholder="Input with err
or" />
</div>
<div class="e-input-group e-success">

<input class="e-input" type="text" placeholder="Input with suc
cess" />
</div>
</div>
</div>
}
@section Script{
<script>


1310
) {
-focus');
} else {
}
});
) {
put-focus');
} else {
);
}
});
}


});
var element = this;
}, 500);
});
}
</script>
}
<style>
}

sses */
font-size:16px;
}
1311
ning-classes */
font-size:14px;
}

content: "" ;
}

content: '\e85e';
}

content: "";
}

content: '\e7ba';
}

content: '\e814';
}

content: "" ;
}

content: '\e904';
}

content: '\e913';
}

content: '\e837';
}

content: '\e806';
}

margin: 30px 0;
}
1312
margin: 30px 0;
}
</style>
using System;
using System.Linq;
{
{
// GET: //
{
return View();
}
}
}
1313
How To
Set the rounded corner

Render the TextBox with rounded corner by adding the e-corner class to the input parent
element.
view
rounded-corner.cs
<div class="e-input-group e-corner">
<input class="e-input" type="text" placeholder="Enter Date" />
<span class="e-input-group-icon e-input-popup-date"></span>
</div>
<div class="e-float-input e-input-group e-corner">

<span class="e-float-line"> </span>
<label class="e-float-text">Enter Date </label>
<span class="e-input-group-icon e-input-popup-date"></span>
</div>
</div>
</div>
}
@section Script{
<script>


1314
) {
-focus');
} else {
}
});
) {
put-focus');
} else {
);
}
});
}


});
var element = this;
}, 500);
});
}
</script>
}
<style>
}

sses */
font-size:16px;
}
1315
ning-classes */
font-size:14px;
}

content: "" ;
}

content: '\e85e';
}

content: "";
}

content: '\e7ba';
}

content: '\e814';
}

content: "" ;
}

content: '\e904';
}

content: '\e913';
}

content: '\e837';
}

content: '\e806';
}

margin: 30px 0;
}
1316
margin: 30px 0;
}
</style>
using System;
using System.Linq;
{
{
// GET: //
{
return View();
}
}
}

Disable the TextBox by adding the e-disabled to the input parent element and set disabled
attribute to the input element.
view
disabled.cs
<input class="e-input" type="text" placeholder="Enter Name" dis
abled/>
<div class="e-float-input e-disabled">

<input type='text' required disabled/>
</div>
</div>
1317
</div>
}
@section Script{
<script>


) {
-focus');
} else {
}
});
) {
put-focus');
} else {
);
}
});
}
</script>
}
using System;
using System.Linq;
1318
{
{
// GET: //
{
return View();
}
}
}
Set the read-only TextBox

You can make the TextBox as read-only by setting the readonly attribute to the input
element.
view
read-only.cs
<input class="e-input" type="text" placeholder="Enter Name" val
ue="John" readonly/>
<input type='text' required readonly value="John"/>
<label class="e-float-text e-label-top">Enter Name</lab
el>
</div>
</div>
</div>
}
@section Script{
<script>

1319

) {
-focus');
} else {
}
});
) {
put-focus');
} else {
);
}
});
}
</script>
}
using System;
using System.Linq;
{
{
// GET: //
{
return View();
}
}
}
1320
Add TextBox programmatically
Create a TypeScript file and import the Input modules from ej2-inputs library as shown
below.
import {Input} from '@syncfusion/ej2-inputs';
Pass the HTML Input element as parameter to the createInput method.
You can also add the icons on the input by passing buttons property value with the class
name e-input-group-icon as parameter to the createInput method.
view
textbox.cs
</div>
</div>
}
@section Script{
<script>


this.parentNode.classList.add('e-input-focus')
});
this.parentNode.classList.remove('e-input-focus')
});
}
1321

});
var element = this;
}, 500);
});
}
</script>
}
<style>
sses */
font-size:16px;
}
}

content: '\e85e';
}

content: "";
}

content: '\e7ba';
}

content: '\e814';
}

content: "" ;
}
1322
content: "" ;
}

content: '\e904';
}

content: '\e913';
}

content: '\e837';
}

content: '\e806';
}

margin: 30px 0;
}
</style>
using System;
using System.Linq;
{
{
// GET: //
{
return View();
}
}
}
Add floating label to TextBox programmatically
1323
The Floating Label TextBox floats label above the TextBox after focusing, or entering a value
in the TextBox.
Floating label supports the types of actions as given below.
Type Description
The floating label will float above the input after focusing, or entering a value in
Auto
the input.
Always The floating label will always float above the input.
Never By default, never float the label in the input when the placeholder is available.
Create a TypeScript file and import the Input modules from ej2-inputs library as shown
below.
import {Input} from '@syncfusion/ej2-inputs';
Pass the HTML Input element and floatLabelType property as Auto to the createInput
method.
Set the placeholder value to the input element via element attribute or pass the
parameter to the createInput method.
The watermark label will be updated based on the specified placeholder value of the
Floating Label TextBox .
You can add the icons on the input by passing buttons property value with the class
name e-input-group-icon as parameter to the createInput method.
view
floating-label.cs
<h4> FloatLabelType as Auto </h4>
</div>
<div id="input-container-01">
<h4> FloatLabelType as Always </h4>
</div>
<h4> FloatLabelType as Never </h4>
</div>
1324
<h4> Float label input with icons </h4>
</div>
</div>
</div>
}
@section Script{
<script>
var inputObj;
var element = <HTMLInputElement>document.createElement('input');

document.getElementById('input-container').appendChild(element);
Input.createInput({
element: element,
floatLabelType: "Auto",
properties:{
placeholder: 'Enter Name'
}
});
var element2 = document.createElement('input');

document.getElementById('input-container-01').appendChild(element2);
Input.createInput({
element: element2,
floatLabelType: "Always",
properties:{
placeholder:'Enter Name'
}
});
var element3 = document.createElement('input');

document.getElementById('input-container-02').appendChild(element3);
Input.createInput({
element: element3,
floatLabelType: "Never",
properties:{
placeholder:'Enter Name'
}
});
</script>
}
<style>
}
1325
sses */
font-size:16px;
}

content: "" ;
}

content: '\e85e';
}

content: "";
}

content: '\e7ba';
}

content: '\e814';
}

content: "" ;
}

content: '\e904';
}

content: '\e913';
}

content: '\e837';
}

content: '\e806';
}
#input-container-03 .e-input-group { /* csslint allow: adjoining-classes */

margin: 30px 0;
}
1326
#input-container-03 .e-float-input { /* csslint allow: adjoining-classes */
margin: 30px 0;
}
</style>
using System;
using System.Linq;
{
{
// GET: //
{
return View();
}
}
}
Change the floating label color of the TextBox

You can change the floating label color of the TextBox for both success and warning
validation states by applying the following CSS styles.
/* For Success state */

.e-float-input.e-success label.e-float-text,
.e-float-input.e-success input:focus ~ label.e-float-text,
.e-float-input.e-success input:valid ~ label.e-float-text {
color: #22b24b;
}
/* For Warning state */

.e-float-input.e-warning label.e-float-text,
.e-float-input.e-warning input:focus ~ label.e-float-text,
.e-float-input.e-warning input:valid ~ label.e-float-text {
color: #ffca1c;
}
view
validation-state.cs
1327
<div className="e-float-input e-input-group e-success">
<span className="e-float-line"></span>
<label className="e-float-text">Success</label>
</div>
<div className="e-float-input e-input-group e-warning">
<span className="e-float-line"></span>
<label className="e-float-text">Warning</label>
</div>
</div>
</div>
}
@section Script{
<script>


) {
-focus');
} else {
}
});
) {
put-focus');
1328
} else {
);
}
});
}
</script>
}
<style>
.e-float-input.e-success label.e-float-text{ /* csslint allow: adjoining-classes */
color: #22b24b;
}
.e-float-input.e-success input:focus ~ label.e-float-text{ /* csslint allow: adjoinin
g-classes */
color: #22b24b;
}
.e-float-input.e-success input:valid ~ label.e-float-text { /* csslint allow: adjoini
ng-classes */
color: #22b24b;
}
.e-float-input.e-warning label.e-float-text{ /* csslint allow: adjoining-classes */

color: #ffca1c;
}
.e-float-input.e-warning input:focus ~ label.e-float-text{ /* csslint allow: adjoinin
g-classes */
color: #ffca1c;
}
.e-float-input.e-warning input:valid ~ label.e-float-text { /* csslint allow: adjoini
ng-classes */
color: #ffca1c;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#input-container {
width: 240px;
margin: 0 auto;
padding: 20px 0px;
}
1329
}
.e-input-group .e-input-group-icon.e-input-popup-date { /* csslint allow: adjoi

ning-classes */
font-size:16px;
}
.e-input-group.e-small .e-input-group-icon.e-input-popup-date { /* csslint allo

w: adjoining-classes */
font-size:14px;
}
.e-input-group-icon.e-input-popup-date:before { /* csslint allow: adjoining-cla

sses */
content: "" ;
}

content: '\e85e';
}
content: "";
}
content: '\e7ba';
}
.e-input-group-icon.e-input-minus:before { /* csslint allow: adjoining-classes

*/
content: '\e814';
}
content: "" ;
}

margin: 26px 0;
}

margin: 26px 0;
}
1330
</style>
using System;
using System.Linq;
{
{
// GET: //
{
return View();
}
}
}
Change the color of the TextBox based on its value

You can change the color of the TextBox by validating its value using regular expression in the
keyup event for predicting the numeric values as demonstrated in the following code sample.
view
text-color.cs
<div class="wrap">
<div className="e-input-group">
<input className="e-input" id="numericOnly" type="text" placeholder="Enter
numeric values" onkeyup="onKeyup(this)" />
</div>
<input type="text" onkeyup="onKeyup(this)" required/>
<label class="e-float-text">Enter numeric values</label>
</div>
</div>
</div>
1331
}
@section Script{
<script>
var inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-inpu

e input field.

} else {
}
});
} else {
}
});
}
function onKeyup(e) {
let str = e.value.match(/^[0-9]+$/);
if (!((str && str.length > 0)) && e.value.length) {
e.parentElement.classList.add('e-error');
} else {
e.parentElement.classList.remove('e-error');
}
}
</script>
}
<style>
.e-input-group.e-error input.e-input { /* csslint allow: adjoining-classes */
color: #f44336;
}
.e-float-input.e-error input { /* csslint allow: adjoining-classes */
1332
color: #f44336;
}
.wrap label { /* csslint allow: adjoining-classes */

font-weight:bold;
}
#container {
visibility: hidden;
}
.wrap {
margin: 0 auto;
padding: 20px 10px;
width: 340px;
}

margin: 30px 0;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#input-container {
width: 240px;
margin: 0 auto;
padding: 20px 0px;
}
}
.e-input-group .e-input-group-icon.e-input-popup-date { /* csslint allow: adjoi

ning-classes */
font-size:16px;
}
.e-input-group.e-small .e-input-group-icon.e-input-popup-date { /* csslint allo

font-size:14px;
1333
}
.e-input-group-icon.e-input-popup-date:before { /* csslint allow: adjoining-cla

sses */
content: "" ;
}

content: '\e85e';
}
content: "";
}
content: '\e7ba';
}
.e-input-group-icon.e-input-minus:before { /* csslint allow: adjoining-classes

*/
content: '\e814';
}
content: "" ;
}

margin: 26px 0;
}

margin: 26px 0;
}
</style>
using System;
using System.Linq;
1334
{
{
// GET: //
{
return View();
}
}
}
1335
Overview
TimePicker is an intuitive interface control which provides an options to select a time value from
popup list or to set a desired time value. test
Key Features
The TimePicker provides the following features.
Time Range
Globalization
Time Format
Strict Mode
Accessibility
1336
Getting Started
This section briefly explains how to include a simple TimePicker component in your ASP.NET
our components.
Initialize TimePicker component to the Application

TimePicker component can be rendered by using the ejs-timepicker tag helper in ASP.NET
Core application. Add the below simple code to your index.cshtml page which is available
within the Views/Home folder, to initialize the TimePicker.
The following example shows a basic TimePicker component.
view
<ejs-timepicker id="timepicker"></ejs-timepicker>
Running the above code will display the basic TimePicker on the browser.
Setting the value, min, and max time

The following example demonstrates how to set the value, min and max time on initializing the
TimePicker. The TimePicker allows you to select the time value within a range from 7:00 AM to
4:00 PM .
view
daterange.cs
<ejs-timepicker id="timepicker" value="@ViewBag.value" min="@ViewBag.minVal" max="@View

Bag.maxVal"></ejs-timepicker>
using System;
using System.Linq;
1337
{
{

{
ViewBag.minVal= new DateTime(2017,05,07, 07,00,00);
ViewBag.maxVal = new DateTime(2017,05,07, 04,00,00);
ViewBag.value = new DateTime(2017,05,07, 01,00,00);
return View();
}
}
}
Setting the time format

Time formats is a way of representing the time value in different string format in textbox and
popup list. By default, the TimePicker's format is based on the culture. You can also customize
the format by using the format property. To know more about the time format standards, refer
to the Date and Time Format section.
The following example demonstrates the TimePicker component in 24 hours format with 60
minutes interval. The time interval is set to 60 minutes by using the step property.
view
format.cs
<ejs-timepicker id="timepicker" format="HH:mm" step="60" value="@ViewBag.value"></ejs-t

imepicker>
using System;
using System.Linq;
{
{
public IActionResult Format()

{
1338
ViewBag.value = DateTime.Now;
return View();
}
}
}
1339
Time Range
TimePicker provides an option to select a time value within a specified range by using the min
and max properties. The min value should always be lesser than the max value. Otherwise, only
the min value will be considered. If the value is invalid or out of range, the value sets to null
with an error class ( .e-error ) added to textbox to indicate that the entered time value is invalid.
The value property depends on the min/max with respect to strictMode property.
The following example allows you to select a time value within a range of 9:00 AM to 11:30
AM .
view
timerange.cs

Bag.maxVal"></ejs-timepicker>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
If the value of min or max property is changed through code behind you have to update
the value property to set within the range.
1340
Globalization
Globalization is the combination of internalization and localization. You can adapt the component
to various languages by parsing and formatting the date or number internationalization , and
also add culture specific customization and translation to the text localization .
By default, TimePicker time format and meridian names are specific to the American English
culture. It utilizes the Essential JavaScript 2 Internationalization package to parse and
format the date object based on the culture by using the official UNICODE CLDR JSON data. It
folder and refer from the \wwwroot\cldr-data location as like the below code examples.
var val, ajax;
val = value;
};
ajax.send();
};
1341
loadCulture(prop);
}
}
var val, ajax;
val = value;
};
ajax.send();
};
loadCulture(prop);
}
}

L10n.load({
'de': {
'timepicker': { placeholder: 'Wählen Sie Zeit' }
}
});
The following example demonstrates the TimePicker in German culture.
view
<ejs-timepicker id="timepicker" placeholder="Select Time"></ejs-timepicker>
<script>
timepicker = document.getElementById('timepicker').ej2_instances[0];
1342
L10n.load({
'de': {
'timepicker': { placeholder: 'Wählen Sie Zeit' }
}
});
timepicker.locale = "de";
loadCultureFiles("de");
});
var val, ajax;
} else {
}
val = value;
};
ajax.send();
};
loadCulture(prop);
}
}
</script>
Right-To-Left
The TimePicker supports RTL (right-to-left) functionality for languages like Arabic and Hebrew to
displays the text in the right-to-left direction. Use enableRtl property to set the RTL direction.
The following code example demonstrates the TimePicker component in Arabic culture. It also
explains how to set localized text to the placeholder using L10n.load method.
The following example demonstrates TimePicker in Arabic culture with right-to-left direction.
view
1343
<ejs-timepicker id="timepicker" placeHolder="Select a time" enableRtl=true></ejs-timepi
cker>
<script>
timepicker = document.getElementById('timepicker').ej2_instances[0];
L10n.load({
'ar': {
'timepicker': { placeholder: '‫} 'ﺣﺪد اﻟﻮﻗﺖ‬
}
});
timepicker.locale = "ar";
});
}
var val, ajax;
} else {
}
val = value;
};
ajax.send();
};
loadCulture(prop);
}
}
</script>
1344
Strict mode
The strictMode is an act that allows you to enter only valid time value within the specified
min/max range in the textbox. If the time value is invalid, the component value sets to the
previous value. If the time value is out of range, the component sets the time value to min/max
value.
The following example demonstrates the TimePicker in strictMode with min/max range of
10:00 AM to 4:00 PM . It allows you to enter only valid time within the specified range. If you
enter the out-of-range value like 8:00 PM , the value sets to the max time 4:00 PM as the value
8:00 PM is greater than max value of 4:00 PM . If you enter invalid time value like 9:00 tt ,
the value sets to the previous value.
view
strictmode.cs

Bag.maxVal" strictMode=true></ejs-timepicker>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
By default, the value of strictMode is false , If the value is invalid or out-of-range, the
component highlights with error class (.e-error) to indicate that value is invalid or out-of-range.
1345
If you are entering the invalid or out-of-range value, then the component gets highlighted with
error class to indicate the value is invalid or out-of-range.
view
normalmode.cs

Bag.maxVal" strictMode=false></ejs-timepicker>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
If the value of min or max property is changed through code behind, update the value
property to set within the range.
1346
Accessibility
The web accessibility makes web applications and its content more accessible to people with
disabilities without any barriers. It especially it tracks the dynamic value changes and DOM
changes.
The TimePicker component has covered the WAI-ARIA specifications with the following list of
WAI-ARIA attributes: aria-haspopup , aria-selected , aria-disabled , aria-
activedescendant , aria-expanded , aria-owns , and aria-autocomplete .
Here in TimePicker, the combobox plays the role of input element, and the listbox plays the
role of popup element.
Aria-haspopup: Provides the information about whether this element display a pop-up
window or not.
Aria-selected: Indicates the current selected value of the TimePicker component.
Aria-disabled: Indicates disabled state of the TimePicker component.
Aria-expanded: Indicates the expanded state of the popup.
Aria-autocomplete: Indicates whether user input completion suggestions are provided or

not.
Aria-owns: Attribute that creates a parent/child relationship between two DOM element in
the accessibility layer.
Aria-activedescendent: Attribute that helps in managing the current active child of the
TimePicker component.
Role: Attribute that gives assistive technology information for handling each element in a
widget.
Keyboard accessibility is one of the most important aspects of web accessibility. Disabled people
like blind and those who have motor disabilities or birth defects use keyboard shortcuts more
than the mouse.
The TimePicker component has built-in keyboard accessibility support by following the WAI-ARIA
practices.
It supports the following list of shortcut keys to interact with the TimePicker control.
Press To do this
1347
Upper Arrow Navigate and select the previous item.
Down Arrow Navigate and select the next item.

Left Arrow Move the cursor towards arrow key pressed direction.
Right Arrow Move the cursor towards arrow key pressed direction.
Home Navigate and select the first item.
End Navigate and select the last item.
Enter Select the currently focused item and close the popup.
Alt + Upper Arrow Close the popup.

Alt + Down Arrow Open the popup.
Esc Close the popup.
In the below sample use the alt+t keys to focus the TimePicker component.
view
<script>
document.onkeyup = function (e) {
var timepicker = document.getElementById('timepicker').ej2_instances[0];
if (e.altKey && e.keyCode === 84 /* t */) {
// press alt+t to focus the control by calling public method.
timepicker.focusIn(e);
}
};
</script>
<ejs-timepicker id="timepicker" placeHolder="Select a time"></ejs-timepicker>
1348
How To
The following section explains how to customize the TimePicker component in various aspects.
CSS customization
TimePicker allows you to customize the textbox and popup list appearance to suit your
application by using cssClass property.
The below sample demonstrates customization of text appearance in a textbox, popup button,
and popup list along with hover and active state by using e-custom-style class. Following is the
list of available classes used to customize the entire TimePicker component.
e-time-wrapper Applied to TimePicker wrapper element.
e-timepicker Applied to input element and TimePicker popup element.
e-time-wrapper.e-timepicker Applied to input element only.
e-input-group-icon.e-time-icon Applied to popup button.
e-float-text Applied to floating label text element.
e-popup Applied to popup element.
e-timepicker.e-popup Applied to TimePicker popup element only.
e-list-parent Applied to popup UL element.
e-timepicker.e-list-parent Applied to TimePicker popup UL element only.
e-list-item Applied to LI elements.
e-hover Applied to LI element hovering time.
e-active Applied to active LI element.
view
<ejs-timepicker id="timepicker" placeHolder="Select a time" cssClass="e-custom-style"></

ejs-timepicker>
<style>
/*customize the input element text color*/

.e-time-wrapper.e-custom-style #element { /* csslint allow: adjoining-classes */
display: block;
color: blue;
}
1349
/*customize the floating label and popup button text color*/
.e-time-wrapper.e-custom-style .e-float-text.e-label-bottom, /* csslint allow: adjoinin
g-classes */
.e-time-wrapper.e-custom-style .e-input-group-icon.e-time-icon.e-icons { /* csslint all
ow: adjoining-classes */
color: blue;
}
/*customize the input element text selection*/

.e-time-wrapper.e-custom-style.e-input-group::before, /* csslint allow: adjoining-class
es */
.e-time-wrapper.e-custom-style.e-input-group::after, /* csslint allow: adjoining-classe
s */
.e-time-wrapper.e-custom-style.e-input-group .e-timepicker::selection { /* csslint allo
background: blue;
}
.e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul, /* csslint allow: adjoining-c

lasses */
.e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul .e-list-item { /* csslint allo
background-color: #c0ebff;
}
/*customize the list item hover color*/

.e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul .e-list-item.e-hover, /* cssli
nt allow: adjoining-classes */
.e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul .e-list-item.e-active.e-hover
background-color: blue;
color: #fff;
}
/*customize the active element text color*/

.e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul .e-list-item.e-active { /* css
lint allow: adjoining-classes */
color:#333;
}
</style>
Client side validation using FormValidator
1350
To achieve client side validation in a TimePicker component, use Essential JavaScript 2
FormValidator. It provides an option to customize feedback error messages to the corresponding
fields for taking action and resolving the issue.
In the following example, the required field validation is implemented by mapping the name
attribute value to the rules property. It validates the TimePicker component and displays the
validation message when the textbox value is empty during form post back or focus out.
view
validation.cs
<form id="form-element" class="form-vertical">

<div class="col-sm-3 control-label">Required</div>
<div class="col-sm-6">
<ejs-timepicker id="formTest" value="@ViewBag.value" cssClass="form
-control"></ejs-timepicker>
</div>
</div>
</form>
<script>
var options = {
rules: {
//must specify the name attribute value in rules section
'formTest': { required: true }
},
customPlacement: (inputElement, errorElement) => {
//to place the error message in custom position
//inputElement - target element where the error text will be ap
pended
//errorElement - error text which will be displayed.
inputElement.parentElement.parentElement.appendChild(errorEleme
nt);
}
};
});
</script>
using System;
using System.Linq;
1351
{
{

{
ViewBag.value = DateTime.Now;
return View();
}
}
}
1352
Overview
actions.
Key features
1. Position: Enables to position the toast anywhere on the screen. It has a predefined set of
2. Autohide and TimeOut: Toast can be expired based on the timeOut property; it hides toast
3. Multi Toast: Toasts can support to display multiple toasts with various time delay.
4. Progress Bar: Supports to visually indicate time lapse when the toast expires.
5. Action Buttons: Supports to add buttons in the toast for archiving any actions within the
toast.
6. Template: User customized element can be defined for the toast using the template
property.
1353
Getting Started
This section briefly explains about how to render Toast component in your ASP.NET Core
Adding Toast component to the Application

Now open your view page to render Toast component.
view
HomeController.cs
<ejs-toast id="element" title="Matt sent you a friend request" content="You have a new
friend request yet to accept"></ejs-toast>
setTimeout(
() => {
var toastObj = document.getElementById('element').ej2_instances[0];
toastObj.target = document.body;
toastObj.show();
}, 1000);
</script>
public ActionResult Toast()

{
return View();
}
1354
Configuring Options
This section explains the steps required to customize the appearance of the toast using built-in
APIs.
Title and content template

Toast can be created with the notification message. The message contains title and
content of the toasts. The title and contents are adaptable in any resolution.
The Title or Content property can be given as HTML element/element ID to a string that can
be displayed as a toast.
view
HomeController.cs
<ejs-button id="button" content="Show Toast" cssClass="e-btn"></ejs-button>
setTimeout(
() => {
toastObj.show();
}, 1000);
toastObj.show();
});
</script>

{
return View();
}
Specifying custom target

By default, the toast can be rendered in the document body. You can change the target position
for toast rendering using the target property. Based on the target, the position will be
updated.
1355
Close button
By default, the showCloseButton is not enabled. You can enable it by setting the true value.
Before expiring the toast, you can use this button to close or destroy toasts manually.
Progress bar
By default, the showProgressBar is not enabled. If it is enabled, it can visually indicate how long
to get toast expires. Based on the timeOut property, progress bar will appear.
Newest on top
By default, the newly created toasts will append next with existing toasts. You can change the
sequence like inserting before the toast by enabling the newestOnTop .
Here, The following sample demonstrates the combination of the target , showCloseButton ,
showProgressBar , and newestOnTop properties in toast.
view
HomeController.cs
<ejs-toast id="element" title="File Downloading" content="<div class='progress'><span s

tyle='width: 80%'></span></div>" showCloseButton="true" target="#toast_target" newestOn
Top="true" showProgressBar="true">
<e-toast-position X="@(new object[] { "Center" })"></e-toast-position>
</ejs-toast>
<ejs-button id="button" content="Show Toast" cssClass="e-btn"></ejs-button>
setTimeout(
() => {
toastObj.show();
}, 1000);
toastObj.show();
});
</script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
1356
top: 45%;
width: 30%;
}
.e-toast-message {
width: 100%;
}
.progress {
height: 20px;
position: relative;
margin: 20px 0 20px 0;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.progress span {
background-color: #f0a3a3;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0
a3a3), color-stop(1, #f42323));
display: block;
height: 100%;
width: 50%;
position: relative;
overflow: hidden;
}
.progress span::after {
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent), to(transparent));
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: 50px 50px;
-webkit-animation: moveAnimate 2s linear infinite;
overflow: hidden;
}
@@-webkit-keyframes moveAnimate {
1357
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
</style>

{
return View();
}
Width and height

The dimensions of the toast can be set using the width and height properties. This will
individually set all toasts. You can create different custom dimension toasts.
By default, the toast can be rendered with '300px' width with 'auto' height.
In mobile devices, the default width of the toast gets '100%' width of the page. When you
set toast width as '100%', the toast occupies full width and will be displayed at the top or
bottom based on the position Y property.
Both the width and height properties allow setting pixels/numbers/percentage. The number value
is considered as pixels.
view
HomeController.cs
friend request yet to accept" width="400" height="150">
<e-toast-position X="Center" Y="Bottom"></e-toast-position>
</ejs-toast>
<div class='row' style="padding-top: 20px" id="toast_pos_target">
<table>
<tr>
<td>
<div style='padding:25px 0 0 0;'>
<ejs-radiobutton id="topAlign" label="Top" name="toast" value="Targ
et" change="checkboxChange"></ejs-radiobutton>
</div>
</td>
<td>
1358
<ejs-radiobutton id="bottomAlign" label="Bottom" name="toast" value=
"Global" change="checkboxChange1" checked="true"></ejs-radiobutton>
</div>
</td>
</tr>
<tr>
<td>
<ejs-checkbox id="fullWidth" label="100% Width" change="onChange">
</ejs-checkbox>
</div>
</td>
</tr>
</table>
</div>
<ejs-button id="show_toast" content="Show Toast" cssClass="e-btn"></ejs-button>
setTimeout(
() => {
toastObj.show();
}, 1000);
document.getElementById("show_toast").addEventListener('click', function () {
toastObj.show();
});
var timeDelay = 500;
function checkboxChange(e) {
if (e.event.target.checked) {
toastObj.position.Y = "Top";
toastObj.hide();
toastShow(timeDelay);
}
}
function checkboxChange1(e) {
if (e.event.target.checked) {
toastObj.position.Y = "Bottom";
toastObj.hide();
}
}
function toastShow(timeOutDelay) {
setTimeout(
() => {
1359
toastObj.show();
}, timeOutDelay);
}
function onChange(e) {
if (e.checked) {
toastObj.hide();
toastObj.width = "100%";
toastObj.title = "";
toastObj.content = "<div class='e-custom'>Take a look at our next generatio
n <b>Javascript</b> <a href='https://ej2.syncfusion.com/home/index.html' target='_blank
'>LEARN MORE</a></div>";
} else {
toastObj.hide();
toastObj.width = 300;
toastObj.title = 'Matt sent you a friend request',
toastObj.content = 'You have a new friend request yet to accept',
}
}
</script>

{
return View();
}
1360
Positions
The toast position can be updated based on predefined positions or customizable positions. The
predefined position combinations are updated in the X and Y position properties.
Predefined
X Positions
Left
Center
Right
Y Positions
Top
Bottom
In multiple toast display, the new toast position will not be updated on dynamic change of
property values until the old toast messages removed. The toast occupies full width when
you set the width to '100%', so the X positions will not affect the changes when the width is
'100%'.
Custom
Custom X and Y positions can be given as pixels/numbers/percentage. The number value is
considered as pixels based on the top and left values updated in the toast.
view
HomeController.cs
<div class="col-lg-12 control-section toast-pos-section">

<div class="control_wrapper" id="toast_pos_target">
<ejs-toast id="toast_pos" title="Matt sent you a friend request" content="You h
ave a new friend request yet to accept" icon="e-laura">
<e-toast-position X="Right" Y="Bottom"></e-toast-position>
</ejs-toast>
<div id="toast_pos_property">
<table style="width: 100%">
<tbody>
<tr>
<td>
<div style="padding:25px 0 0 0;">
1361
<ejs-radiobutton id="dropdownRadio" label="Position" na
me="toastPos" value="Position" change="checkboxChange2" checked="true"></ejs-radiobutton
>
</div>
</td>
<td>
<ejs-radiobutton id="customRedio" label="Custom" name="
toastPos" value="Custom" change="checkboxChange3"></ejs-radiobutton>
</div>
</td>
</tr>
<tr>
<td id="dropdownChoose" colspan="2">
<div id="dropdown" style="padding-top:25px;">
<ejs-dropdownlist id="position" dataSource="@ViewBag.da
ta" placeholder="Select a position" index="5" popupHeight="200px" change="valueChange">
<e-dropdownlist-fields text="Value" value="Id"></e-
dropdownlist-fields>
</ejs-dropdownlist>
</div>
</td>
</tr>
<tr>
<td colspan="2" id="customChoose" style="display: none">
<form id="formId" class="form-horizontal">
<div class="e-row">
<input class="e-input" id="xPos" name="Digits"
value="50" digits="true" data-digits-message="Please enter digits only." required="">
<label class="e-float-text" for="Digits">X Posi
tion</label>
</div>
</div>
<div class="e-row">
<input class="e-input" id="yPos" name="Digits"
value="50" digits="true" data-digits-message="Please enter digits only." required="">
<label class="e-float-text" for="Digits">Y Posi
tion</label>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
1362
<ejs-radiobutton id="radio1" label="Target" name="toast"
value="Target" change="checkboxChange"></ejs-radiobutton>
</div>
</td>
<td>
<ejs-radiobutton id="radio2" label="Global" name="toast"
value="Global" change="checkboxChange1" checked="true"></ejs-radiobutton>
</div>
</td>
</tr>
</tbody>
</table>
<div id="toast_btn" style="padding-top: 25px">
<button class="e-btn e-control" id="show_Toast" style="margin-right: 15
px"> Show Toast </button>
<button class="e-btn e-control" id="hideTosat"> Hide All </button>
</div>
</div>
</div>
</div>
setTimeout(
() => {
var toastObj = document.getElementById('toast_pos').ej2_instances[0];
toastObj.show();
}, 200);
function toastShow() {
setTimeout(
() => {
toastObj.show();
}, 200);
}
var btnEle = document.getElementById('show_Toast');

btnEle.onclick = function () {
if (customFlag) {
setcustomPosValue();
}
toastObj.show();
};
document.getElementById('hideTosat').onclick = function () {
toastObj.hide('All');
1363
};
document.onclick = function (e) {

if (e.target !== btnEle && toastObj.target === document.body) {
}
};
var customFlag = false;
function checkboxChange(e) {
if (this.checked) {
toastObj.target = document.getElementById('toast_pos_target');
toastShow(1000);
}
}
if (this.checked) {
toastShow(1000);
}
}
var listObj = document.getElementById('position').ej2_instances[0];
if (this.checked) {
document.getElementById('dropdownChoose').style.display = 'table-cell';
document.getElementById('customChoose').style.display = 'none';
setToastPosValue(listObj.value.toString()); customFlag = false; toastShow(1
000);
}
}
if (this.checked) {
document.getElementById('dropdownChoose').style.display = 'none';
document.getElementById('customChoose').style.display = 'table-cell';
setcustomPosValue(); customFlag = true; toastShow(1000);
}
1364
}
//Setting Toast Custom Position

function setcustomPosValue() {
var initialWid = toastObj.width.toString();
toastObj.width = initialWid;
toastObj.position.X = parseInt((document.getElementById('xPos')).value, 10);
toastObj.position.Y = parseInt((document.getElementById('yPos')).value, 10);
}
//Setting Toast Position

function setToastPosValue(value) {
var initialWid = toastObj.width.toString();
toastObj.width = initialWid;
switch (value) {
case 'topleft':
toastObj.position.X = 'Left'; toastObj.position.Y = 'Top'; break;
case 'topright':
toastObj.position.X = 'Right'; toastObj.position.Y = 'Top'; break;
case 'topcenter':
toastObj.position.X = 'Center'; toastObj.position.Y = 'Top'; break;
case 'topfullwidth':
toastObj.width = '100%'; toastObj.position.X = 'Center'; toastObj.posit
ion.Y = 'Top'; break;
case 'bottomleft':
toastObj.position.X = 'Left'; toastObj.position.Y = 'Bottom'; break;
case 'bottomright':
toastObj.position.X = 'Right'; toastObj.position.Y = 'Bottom'; break;
case 'bottomcenter':
toastObj.position.X = 'Center'; toastObj.position.Y = 'Bottom'; break;
case 'bottomfullwidth':
toastObj.width = '100%'; toastObj.position.X = 'Center'; toastObj.posit
ion.Y = 'Bottom'; break;
}
}
function valueChange(e) {
toastObj.hide('All'); setToastPosValue(e.value.toString()); toastShow(1000);
}
</script>
<style>
.toast-pos-section #toast_pos_property {
height: 500px;
border: none;
margin: auto;
}
1365
#toast_pos_property td {
width: 50%;
}
.e-toast-icon.e-laura.e-icons {
border-radius: 50%;
background-image: url('./../css/Toast/laura.png');
height: 50px !important;
background-size: 50px 50px;
margin: 0;
}
@@media (min-width: 740px) {

#toast_pos_property {
width: 450px;
}
}
</style>

{
ViewBag.data = new Pos().Positions();
return View();
}
public class Pos
{
public string Value { get; set; }
public string Id { get; set; }
public List<Pos> Positions()
{
List<Pos> position = new List<Pos>();
position.Add(new Pos { Id="topleft", Value = "Top Left" });
position.Add(new Pos { Id="topright", Value = "Top Right" });
position.Add(new Pos { Id="topcenter", Value = "Top Center" });
position.Add(new Pos { Id="topfullwidth", Value = "Top Full Width" });
position.Add(new Pos { Id="bottomleft", Value = "Bottom Left" });
position.Add(new Pos { Id="bottomright", Value = "Bottom Right" });
position.Add(new Pos { Id="bottomcenter", Value = "Bottom Center" });
position.Add(new Pos { Id="bottomfullwidth", Value = "Bottom Full Width"
});
return position;
}
1366
}
1367
Action Buttons
You can include action buttons to the toast control by adding the buttons property. The
collection of Essential JS 2 button models can be bound to the model property inside the
buttons property. You can also include the click event callback function for each button.
view
HomeController.cs
<ejs-toast id="element" title="Anjolie Stokes" extendedTimeout="20000" content="<p><img

src='./laura.png'></p>" width="230" height="250">
<e-toast-buttons>
<e-toast-buttonmodelprops click="btnClick" model="@(new { content="Ignore"})">
</e-toast-buttonmodelprops>
<e-toast-buttonmodelprops model="@(new { content="reply"})">
</e-toast-buttons>
</ejs-toast>
setTimeout(
() => {
toastObj.show();
}, 1000);
toastObj.show();
});
function btnClick(e) {
var toastEle = ej.base.closest(e.target, '.e-toast');
toastObj.hide(toastEle);
}
</script>
using Syncfusion.EJ2.Notifications;

{
List<ToastButtonModelProps> buttons = new List<ToastButtonModelProps>() { };
buttons.Add(new ToastButtonModelProps() { Click= "btnClick", Model = new DefaultBu
ttonModel() { content = "Ignore" } });
1368
buttons.Add(new ToastButtonModelProps() { Model = new DefaultButtonModel() { conten
t = "reply" } });
ViewBag.ToastButtons = buttons;
return View();
}
public class DefaultButtonModel
{
}
1369
Time out
The toast can be expired based on the timeOut property. The toast can live till the time out
reaches without user interaction, a time out value is considered as a millisecond.
The timeOut delay can be visually represented using Progress Bar .
The extendedTimeOut property determines how long the toast should be displayed after a
user hovers over it.
You can terminate the process by using the showCloseButton property for destroying the
toast at any time.
view
HomeController.cs
<div class="e-float-input"><input class="e-input" id="toast_input_index" required="" va

lue="0"><span class="e-float-line"></span><label class="e-float-text">Enter timeOut</la
bel></div>
<ejs-toast id="element" title="Anjolie Stokes" content="<p><img src='./laura.png'></p>"
width="230" height="250">
<e-toast-buttons>
<e-toast-buttonmodelprops model="@(new { content="Ignore"})">
<e-toast-buttonmodelprops model="@(new { content="reply"})">
</e-toast-buttons>
</ejs-toast>
setTimeout(
() => {
toastObj.show();
}, 1000);
var value = parseInt(document.getElementById('toast_input_index').value)
toastObj.show({ timeOut: value });
});
</script>
1370
using Syncfusion.EJ2.Notifications;

{
List<ToastButtonModelProps> buttons = new List<ToastButtonModelProps>() { };
buttons.Add(new ToastButtonModelProps() { Click= "btnClick", Model = new DefaultBu
ttonModel() { content = "Ignore" } });
buttons.Add(new ToastButtonModelProps() { Model = new DefaultButtonModel() { conten
t = "reply" } });
ViewBag.ToastButtons = buttons;
return View();
}
public class DefaultButtonModel
{
}
Static toast
You can prevent auto hiding in a toast as visible like static by setting zero ( 0 ) value in the
timeOut Property.
view
HomeController.cs
friend request yet to accept" showCloseButton="true" timeOut="0">
<e-toast-position X="Right"></e-toast-position>
</ejs-toast>
setTimeout(
() => {
toastObj.show();
}, 1000);
toastObj.show();
});
</script>
1371
{
return View();
}
1372
Template
The Template property can be given as the HTML element ; this can be either a string or
query selector .
The HTML element tag can be given as a string for the Template property.
template: "<div>Toast Content</div>"
The Template property allows getting the template content using the query selector . Here, the
element 'ID' attribute is specified in the template.
template: "#Template"
view
HomeController.cs
<div id="template_toast">
<ejs-toast id="element" extendedTimeout="0" timeOut="120000">
</ejs-toast>
</div>
<br /><br />

<div id='result'></div>
</div>
<script id="template_toast_ele" type="text/x-template">
<div id='template_toast' style="display: none">
<img src="http://npmci.syncfusion.com/development/demos/src/toast/resource/map.
jpg" width="100%" height="70%">
1373
</script>
setTimeout(
() => {
toastObj.show({ template: document.getElementById('template_toast_ele').inn
erHTML});
}, 1000);
toastObj.show();
});
</script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#snooze,
#dismiss {
}
body > #element .e-toast {

}
.toast-template-section #reminder {
text-align: center;
margin: 15px;
}
#toast_custom .e-toast-template {
display: inline-flex;
}
#template_toast .toast-icons {
font-size: 35px;
height: auto;
margin: auto;
}
1374
#template_toast .toast-icons.e-alarm::before {
content: "\e702";
}
#template_toast .horizontal-align {
flex-direction: row;
width: 100%;
}
#template_toast .horizontal-align,
#template_toast #snoozedropDown,
#template_toast .snooze,
#template_toast .snoozeBtn {
margin: 10px 0;
}
#template_toast .horizontal-align .toast-content .toast-title {

font-weight: 500;
}
#template_toast .horizontal-align .toast-content .toast-message {

opacity: 0.4;
}
#template_toast .horizontal-align .toast-content {

flex: 1;
flex-direction: column;
margin-left: 10px;
}
</style>

{
return View();
}
1375
Animations
The toast control supports custom animations for both shows and hide actions from the provided
animation option of the Animation library.
The default animation is given as FadeIn for showing the toast and FadeOut for hiding the
toast.
The following sample demonstrates some types of animations that suit toast. You can check all
the animation effects here.
view
HomeController.cs
<div id="default" style="padding-bottom:75px;">

<div class='row'> <ejs-button id="show_toast" content="Show Toast" cssClass="e-btn">
</ejs-button> </div>
<div class='row'>
<div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<label> Show Animation </label>
</div>
<ejs-dropdownlist id="showAnimation" dataSource="@ViewBag.data" placeholder=
"Select a animate type" index="0" popupHeight="200px" change="valueChange">
<e-dropdownlist-fields text="Value" value="Id"></e-dropdownlist-fields>
</ejs-dropdownlist>
</div>
</div>
<div class='row'>
<label> Hide Animation </label>
</div>
<ejs-dropdownlist id="hideAnimation" dataSource="@ViewBag.data" index="0" p
laceholder="Select a animate type" change="valueChange1">
<e-dropdownlist-fields text="Value" value="Id"></e-dropdownlist-fields>
</ejs-dropdownlist>
</div>
</div>
<ejs-toast id="element" title="Matt sent you a friend request" content="You have a
new friend request yet to accept">
</ejs-toast>
</div>
1376
setTimeout(
() => {
toastObj.show();
}, 1000);
toastObj.show();
});
function valueChange(e) {
toastObj.animation.show.effect = e.value;
}
function valueChange1(e) {
toastObj.animation.hide.effect = e.value;
}
</script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.row {
margin: 15px;
}
</style>

{
ViewBag.data = new Pos().Positions();
return View();
}
public class Pos
{
public string Value { get; set; }
public string Id { get; set; }
public List<Pos> Positions()
{
List<Pos> position = new List<Pos>();
position.Add(new Pos { Id= "FadeIn", Value = "Fade In" });
1377
position.Add(new Pos { Id= "FadeZoomIn", Value = "Fade Zoom In"});
position.Add(new Pos { Id= "FadeZoomOut", Value = "Fade Zoom Out" });
position.Add(new Pos { Id= "FlipLeftDownIn", Value = "Flip Left Down In"
});
position.Add(new Pos { Id= "FlipLeftDownOut", Value = "Flip Left Down O
ut" });
position.Add(new Pos { Id= "FlipLeftUpIn", Value = "Flip Left Up In" })
;
position.Add(new Pos { Id= "FlipLeftUpOut", Value = "Flip Left Up Out"
});
position.Add(new Pos { Id= "FlipRightDownIn", Value = "Flip Right Down
In" });
position.Add(new Pos { Id = "FlipRightUpIn", Value = "Flip Right Up In"
});
position.Add(new Pos { Id = "FlipRightUpOut", Value = "Flip Right Up Ou
t" });
position.Add(new Pos { Id = "SlideBottomIn", Value = "Slide Bottom In"
});
position.Add(new Pos { Id = "SlideBottomOut", Value = "Slide Bottom Out"
});
position.Add(new Pos { Id = "SlideLeftIn", Value = "Slide Left In" });
position.Add(new Pos { Id = "SlideLeftOut", Value = "Slide Left Out" })
;
position.Add(new Pos { Id = "SlideRightIn", Value = "Slide Right In" })
;
position.Add(new Pos { Id = "SlideRightOut", Value = "Slide Right Out"
});
position.Add(new Pos { Id = "SlideTopIn", Value = "Slide Top In" });
position.Add(new Pos { Id = "SlideTopOut", Value = "Slide Top Out" });
position.Add(new Pos { Id = "ZoomIn", Value = "Zoom In" });
position.Add(new Pos { Id = "ZoomOut", Value = "Zoom Out" });
return position;
}
}
1378
Accessibility
The toast component has been designed with WAI-ARIA specifications in mind by applying the
prompt WAI-ARIA roles, states, and properties with the keyboard support. It helps users who use
assistive WAI-ARIA accessibility support, which is achieved using attributes.
It provides information about the elements in a document for assistive technology.
The toast component implements the keyboard navigation support by using the following WAI-
ARIA practices and is tested in major screen readers.
ARIA attributes
Class Description
alert:
role Identifies the element as a container when alert content will be added or
updated.
view
HomeController.cs
setTimeout(
() => {
toastObj.show();
}, 1000);
</script>

{
return View();
}
1379
Overview
The Tooltip component displays a pop-up containing an information or a message when you
hover, click, focus, or touch an element. The information displayed in the Tooltip can include
simple text, images, hyperlinks, or custom templates. In mobile devices, to display the Tooltip,
you need to tap and hold the target elements.
Key features
Tooltip
Can be displayed in 12 different positions.

Supports animation effects while showing/hiding the Tooltip.
Content can be assigned with static text, template, or loaded dynamically via AJAX.
Supports 4 opening modes, Hover , Click , Focus , and Custom .
Supports auto tip positioning.
Can be moved along with the mouse pointer using the mouse trailing option.
Can be opened in Sticky mode, allowing you to close/hide the Tooltip manually.
1380
Getting Started
This section briefly explains about how to render Tooltip component in your ASP.NET Core
use our components.
Adding Tooltip component to the Application

Tooltip component can be rendered with the help of ejs-tooltip tag helper. Add the below
code to your index.cshtml page which is present under Views/Home folder, where the Tooltip
is initialized.
<ejs-tooltip id="Tooltip" content="Lets go green & Save Earth !!!">


<span id='target'>Show Tooltip</span>
</ejs-tooltip>
Run the application

The following example shows a basic Tooltip.
view
HomeController.cs
<ejs-tooltip id="Tooltip" content="Lets go green & Save Earth !!!">


</ejs-tooltip>
<style>
#Tooltip {
1381
position: absolute;
left: calc( 50% - 60px);
top: 38%;
}
</style>

{
return View();
}
In the above sample code, #target is the id of the element in a page to which the
Tooltip is initialized.
Initialize Tooltip within a container

You can create Tooltips on multiple targets within a container. To do so, you have to define
specific target elements to the target property so that the Tooltip is initialized only on matched
targets within a container. In this case, the Tooltip content is assigned from the title attribute
of the target element.
Refer to the following code example to create a Tooltip on multiple targets within a container.
view
HomeController.cs
<ejs-tooltip id="details" position="RightCenter" target=".e-info">

<form id="details" role="form">
<table>
<tr>
<td class="info"> User Name:</td>
<td> <input type="text" class="e-info" name="firstname"
title="Please enter your name"> </td>
</tr>
<tr>
1382
<td class="info"> Email Address:</td>
<td> <input type="text" class="e-info" name="email" tit
le="Enter a valid email address"></td>
</tr>
<tr>
<td class="info"> Password:</td>
<td> <input type="password" class="e-info" name="passwo
rd" title="Be at least 8 characters length"></td>
</tr>
<tr>
<td class="info"> Confirm Password:</td>
<td> <input type="password" class="e-info" name="Cpwd"
title="Re-enter your password"></td>
</tr>
</table>
<input id="sample" type="submit" value="Submit">
<input id="clear" type="reset" value="Reset">
</form>
</ejs-tooltip>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#details table th, #details table td {

padding: 15px;
text-align: left;
}
#details .info {
font-weight: bold;
}
</style>
1383
{
return View();
}
In the above sample, #details refers to the container's id, and the target .e-info refers
to the target elements available within that container.
1384
Setting Dimension
Height and width

The Tooltip can either be assigned auto height and width values or specific pixel values. The
width and height properties are used to set the outer dimension of the Tooltip element. The
default value for both the properties is auto . It also accepts string and number values in pixels.
The following sample explains how to set dimensions for the Tooltip.
view
height-width.cs
<ejs-tooltip id="tooltip" height="40px" width="150px" content="Tooltip with specifi
c width and height">
</ejs-tooltip>
}
<style>
#tooltip {
position: absolute;
top: 38%;
}
</style>
public ActionResult Dimension()

{
return View();
}
Scroll mode
When height is specified with a certain pixel value and the Tooltip content overflows, the
scrolling mode gets enabled.
view
scroll-mode.cs
1385
<ejs-tooltip id="tooltip" height="60px" width="300px" isSticky="true" target="#tar
get" content="<div><b>Environmentally friendly</b> or environment-friendly, (also refer
red to as eco-friendly, nature-friendly, and green) are marketing and sustainability te
rms referring to goods and services, laws, guidelines and policies that inflict reduced
, minimal, or no harm upon ecosystems or the environment.</div>">
<p>
A green home is a type of house designed to be
<a id="target">
<u>environmentally friendly</u>
</a> and sustainable. And also focuses on the efficient use of "ene
rgy, water, and building materials." As green homes
have become more prevalent we have also seen the emergence of green
affordable housing.
</p>
</div>
</ejs-tooltip>
}
<style>
#tooltip {
position: absolute;
top: 38%;
}
</style>
public ActionResult Dimension()

{
return View();
}
The scrolling mode can best be seen when the sticky mode of the Tooltip is enabled. To
enable sticky mode, set the isSticky property to true.
1386
Content
A text or a piece of information assigned to the Tooltip's content property will be displayed as
the main text stream of the Tooltip. It can be a string or a template content. If the content
property is not provided with any specific value, then it takes the value assigned to the title
attribute of the target element on which the Tooltip was initialized. The content can also
dynamically be assigned to the Tooltip via AJAX.
Template content
Any text or image can be added to the Tooltip, by default. To customize the Tooltip layout or to
create your own visualized element on the Tooltip, template can be used.
Refer to the following code example to add formatted HTML content to the Tooltip.
view
template.cs
<ejs-tooltip id="tooltipContent" target="#target" content="<div><p><strong>Environm
entally friendly</strong> or <strong>environment-friendly</strong>, <i>(also referred t
o as eco-friendly, nature-friendly, and green)</i> are marketing and sustainability ter
ms referring to goods and services, laws, guidelines and policies that inflict reduced,
minimal, or no harm upon ecosystems or the environment.</p></div>">
<p>
A green home is a type of house designed to be
<a id="target">
<u>environmentally friendly</u>
</a> and sustainable. And also focuses on the efficient use of "ene
rgy, water, and building materials." As green homes
have become more prevalent we have also seen the emergence of green
affordable housing.
</p>
</div>
</ejs-tooltip>
}
public ActionResult Template()

{
1387
return View();
}
Dynamic content via AJAX

The Tooltip content can be dynamically loaded by making use of the AJAX call. The AJAX
request is usually made within the beforeRender event of the Tooltip, and then the Tooltip's
content is assigned the value retrieved on it's success.
view
ajaxcontent.cs
<h4 class="list-header">National Sports</h4>

<ejs-tooltip id="Tooltip" content="Loading..." beforeRender="onBeforeRender" ta
rget="#countrylist [title]" showTipPointer="true" position="RightCenter">

<ejs-listview id="countrylist" dataSource="ViewBag.data" enable="true">
<e-listview-fieldsettings text="text" tooltip="id"></e-listview-fie
ldsettings>
</ejs-listview>
</ejs-tooltip>
</div>
}
<script>
/**
* Process tooltip ajax content.
*/
function onBeforeRender(args) {
var _this = this;
this.content = 'Loading...';
this.dataBind();
var ajax = new ej.base.Ajax("@Url.Content("~/Scripts/tooltip/tooltipdata.js
on")", 'GET', true);
ajax.send().then(function (result) {
result = JSON.parse(result);
for (var i = 0; i < result.length; i++) {
if (result[i].Id === args.target.getAttribute('data-content')) {
_this.content = "<div class='contentWrap'><span class=" + result[i]
.Class + "></span><div class='def'>" + result[i].Sports + "</div></div>";
}
}
1388
_this.dataBind();
}, function (reason) {
_this.content = reason.message;
_this.dataBind();
});
}
</script>
<link href="~/css/tooltip/icons.css" rel="stylesheet" />
<style>
.e-bigger [class^="sports-icon-"],
.e-bigger [class*=" sports-icon-"] {
font-size: 18px;
}
[class^="sports-icon-"],
[class*=" sports-icon-"] {
font-family: 'sportsicons';
speak: none;
font-size: 16px;
font-style: normal;
padding-right: 6px;
}
.sports-icon-cricket:before {
content: "\e703";
}
.sports-icon-archery:before {
content: "\e705";
}
.sports-icon-table-tennis:before {
content: "\e702";
}
.sports-icon-baseball:before {
content: "\e706";
}
.sports-icon-hockey:before {
content: "\e701";
}
.sports-icon-shooting:before {
1389
content: "\e700";
}
.def {
float: right;
}
#countrylist {
border-radius: 3px;
max-width: 170px;
margin: 0 auto;
overflow: hidden;
}
.list-header {
text-align: center;
color: rgba(0, 0, 0, 0.54);
}
@@media (max-width: 481px) {

#countrylist {
margin: 0;
}
.list-header {
text-align: left;
}
}
</style>
public ActionResult AjaxContent()

{
List<object> country = new List<object>();
country.Add(new { id = "1", text = "Australia" });
country.Add(new { id = "2", text = "Bhutan" });
country.Add(new { id = "3", text = "China" });
country.Add(new { id = "4", text = "Cuba" });
country.Add(new { id = "5", text = "India" });
country.Add(new { id = "6", text = "Switzerland" });
country.Add(new { id = "7", text = "United States" });
ViewBag.data = country;
return View();
1390
Tooltip Positioning
Tooltips can be attached to 12 static locations around the target. On initializing the Tooltip, you
can set the position property with any one of the following values:
TopLeft
TopCenter
TopRight
BottomLeft
BottomCenter
BottomRight
LeftTop
LeftCenter
LeftBottom
RightTop
RightCenter
RightBottom
By default, Tooltip is placed at the TopCenter of the target element.
view
tooltippositions.cs
<ejs-tooltip id="Tooltip" position="TopCenter" content=@ViewBag.custom>
<div id='container'> <div id="content" title="Tooltip content"> <sp
an>Show tooltip</span> <select id="positions" class="form-control" onchange="onChange(t
his)"> <option value="TopLeft">Top Left</option> <option value="TopCenter" selected="">
Top Center</option> <option value="TopRight">Top Right</option> <option value="BottomLe
ft">Bottom Left</option> <option value="BottomCenter">Bottom Center</option> <option va
lue="BottomRight">Bottom Right</option> <option value="LeftTop">Left Top</option> <opti
on value="LeftCenter">Left Center</option> <option value="LeftBottom">Left Bottom</opti
on> <option value="RightTop">Right Top</option> <option value="RightCenter">Right Center
</option> <option value="RightBottom">Right Bottom</option> </select></div> </div> </e-
content-template> </ejs-tooltip>
}
<style>
#target {
background-color: #ececec;
border: 1px solid #c8c8c8;
margin: 70px auto;
1391
padding: 20px;
width: 200px;
}
.customtip.e-tooltip-wrap {
padding: 4px;
}
.customtip.e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
height: 20px;
width: 12px;
}
.customtip.e-tooltip-wrap .e-arrow-tip.e-tip-top {
height: 20px;
width: 12px;
}
.customtip.e-tooltip-wrap .e-arrow-tip.e-tip-left {
height: 12px;
width: 20px;
}
.customtip.e-tooltip-wrap .e-arrow-tip.e-tip-right {
height: 12px;
width: 20px;
}
.customtip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 20px solid #616161;
}
.customtip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
border-bottom: 20px solid #616161;
}
.customtip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
border-bottom: 6px solid transparent;
border-right: 20px solid #616161;
border-top: 6px solid transparent;
}
1392
.customtip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
border-left: 20px solid #616161;
}
</style>
<script>
var tooltip;
tooltip = document.getElementById('Tooltip').ej2_instances[0];
}
tooltip.position = args.value;
}
</script>
public ActionResult TooltipAnimation()

{
ViewBag.content = "Tooltip Content";
return View();
}
Tip pointer positioning

The Tooltip pointer can be attached or detached from the Tooltip by using the showTipPointer
property. Pointer positions can be adjusted using the tipPointerPosition property that can be
assigned to one of the following values:
auto
start
middle
end
The following code example illustrates how to set the pointer to the start position of the Tooltip.
view
tippointer.cs
<ejs-tooltip id="tooltip" tipPointerPosition="Start" content="Tooltip content">
<div id='target'>
1393
<span>Show tooltip</span>
</div>
</ejs-tooltip>
</div>
}
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#target {
margin: 50px auto;
padding: 20px;
width: 250px;
}
</style>
public ActionResult TipPointer()

{
return View();
}
By default, tip pointers are auto adjusted so that the arrow does not point outside the target
element.
Dynamic positioning
The Tooltip and its tip pointer can be positioned dynamically based on the target's location. This
can be achieved by using the refresh method, which auto adjusts the Tooltip over the target.
view
1394
dynamicposition.cs
<ejs-tooltip id="targetContainer" content=@ViewBag.content offsetX="-15" target="#d
emoSmart">
<div id="demoSmart"></div>
</ejs-tooltip>
}
var tooltip, ele;
ele = document.getElementById('demoSmart');
tooltip = document.getElementById("targetContainer").ej2_instances[0];
////Initialize Draggable for tooltip element
var drag = new ej.base.Draggable(ele, {
clone: false,
dragArea: '#targetContainer',
drag: function (args) {
if (args.element.getAttribute('data-tooltip-id') === null) {
tooltip.open(args.element);
}
else {
tooltip.refresh(args.element);
}
},
dragStart: function (args) {
if (args.element.getAttribute('data-tooltip-id') !== null) {
return;
}
tooltip.open(args.element);
},
dragStop: function (args) {
tooltip.close();
}
});
}
</script>
<style type="text/css">
#demoSmart {
background: rebeccapurple;
height: 50px;
left: 35%;
position: absolute;
top: 35%;
1395
width: 50px;
}
#targetContainer {
margin: 10px;
min-height: 320px;
width: 100%;
float: left;
border-radius: 3px;
}
.control-section {
padding: 3px;
margin-right: 20px;
}
</style>
public ActionResult DynamicPosition()

{
ViewBag.custom = "Drag Me";
return View();
}
When mouse trailing option is enabled, the tip pointer position gets auto adjusted based on
the target, and other position values like start, end, and middle are not applied (to prevent
the pointer from moving out of target).
Mouse Trailing
Tooltips can be positioned relative to the mouse pointer. This behavior can be enabled or
disabled by using the mouseTrail property. By default, it is set to false .
view
mousetrailing.cs
<ejs-tooltip id="Tooltip" mouseTrail="true" content="Tooltip content">
<div id="target" style="margin: 50px;">
Show tooltip
</div>
</ejs-tooltip>
}
1396
<style>
#target {
margin: 80px auto;
padding: 20px;
width: 200px;
}
</style>
public ActionResult MouseTrailing()

{
return View();
}
When mouse trailing option is enabled, the tip pointer position gets auto adjusted based on
the target, and other position values like start, end, and middle are not applied (to prevent
the pointer from moving out of target).
Setting offset values

Offset values are set to specify the distance between the target and tooltip element. offsetX
and offsetY properties are used to specify the offset left and top values.
offsetX specifies the distance between the target and Tooltip element in X axis.
offsetY specifies the distance between the target and Tooltip element in Y axis.
The following code example illustrates how to set offset values.
view
offsetvalues.cs
<ejs-tooltip id="Tooltip" mouseTrail="true" showTipPointer="false" content=@ViewBag
.content offsetX="30" offsetY="30">
<div id="target">Show tooltip</div>
</ejs-tooltip>
}
<style>
#target {
1397
margin: 80px auto;
padding: 20px;
width: 200px;
}
</style>
public ActionResult offsetvalues()

{
return View();
}
By default, collision is handled automatically and therefore when collision is detected the
Tooltip fits horizontally and flips vertically.
1398
Open Mode
You can decide the mode on which the Tooltip is to be opened on a page, i.e., on hovering,
focusing, or clicking on the target elements.
On mobile devices, Tooltips appear when you tap and hold the element, even if the
opensOn option is assigned with Hover . Tooltips are also displayed as long as you
continue to tap and hold the element. On lift, it disappears in the next 1.5 seconds. If there
is another action before that time ends, then the Tooltip disappears.
The opensOn property can take either a single or a combination of multiple values, separated by
space from the following options. The table below explains how the Tooltip opens on both
desktop and mobile based on the value(s) assigned to the opensOn property. By default, it takes
Auto value.
Values Desktop Mobile
Tooltip opens on tap

Tooltip appears when you hover over the target or
Auto and hold of the target
when the target element receives the focus.
element.
Tooltip opens on tap

Hover Tooltip appears when you hover over the target. and hold of the target
element.
Tooltip appears
Click Tooltip appears when you click a target element. when you single tap
the target element.
Tooltip appears with

Tooltip appears when you focus (say through tab key)
Focus a single tap on the
on a target element.
target element.
Tooltip is not triggered by any default action. So, you

Custom have to bind your own events and use either open Same as Desktop.
or close public methods.
To open the Tooltip for multiple actions, say while hovering over or clicking on a target element,
the opensOn property can be assigned with multiple values, separated by space as Hover
Click .
Auto value cannot be used with any combination for multiple values.
The following code example shows how to set the open mode for Tooltips.
view
open-mode.cs
<ejs-tooltip id="tooltiphover" content=@ViewBag.hover OpensOn="Hover">
1399
<div class="blocks"><span>Hover Me !(Default)</span></div>
</ejs-tooltip>
<ejs-tooltip id="tooltipclick" content=@ViewBag.click OpensOn="Click">
<div class="blocks"><span>Click Me !</span></div>
</ejs-tooltip>
<ejs-tooltip id="tooltipfocus" content=@ViewBag.focus OpensOn="Focus" target=".
e-info">
<div class="blocks"><span><input class="e-info" type="text" placeholder=
"Focus and blur" /></span></div>
</ejs-tooltip>
<ejs-tooltip id="tooltipcustom" content=@ViewBag.custom OpensOn="Custom" created
="created">
<div class="blocks">
<input id="tooltipopen" value="Click to open tooltip manually" type=
"button"/>
</div>
</ejs-tooltip>
}
<style>
#tooltiphover {
width: 200px;
}
#tooltipclick {
width: 200px;
}
#tooltipfocus {
width: 200px;
line-height: 17px;
}
#tooltipcustom {
width: 200px;
}
#tooltipfocus .blocks span {
1400
line-height: 17px;
}
#tooltipcustom .blocks #tooltipopen {
line-height: 17px;
}
.blocks {
line-height: 50px;
margin: 0 10px 10px 0;
overflow: hidden;
text-align: center;
width: 200px;
}
</style>
<script>
function created() {
document.getElementById('tooltipopen').addEventListener("click", function () {
var customTooltip = document.getElementById('tooltipcustom').ej2_instances[0
];
if (this.getAttribute("data-tooltip-id")) {
customTooltip.close();
} else {
customTooltip.open(this);
}
});
}
</script>
public ActionResult OpenMode()

{
ViewBag.hover = "Tooltip from hover";
ViewBag.click = "Tooltip from click";
ViewBag.focus = "Tooltip from focus";
ViewBag.custom = "Tooltip from custom mode";
return View();
}
Custom open mode
1401
Other than the above specified options, the Custom mode makes the Tooltip appear on screen
for user-defined custom actions such as right-click , double-click , and so on. Here, the
tooltip is not triggered by any default action, and you have to bind your own events and use either
open or close public methods to show or hide the Tooltips.
The following code example shows how to define custom open mode for the Tooltip.
view
custom-mode.cs
<ejs-tooltip id="box" content="Tooltip from custom mode" OpensOn="Custom" created=
"created">
<div id="content">
Double-click to open Tooltip.
</div>
</ejs-tooltip>
}
<style>
#box {
margin: 50px auto;
padding: 20px;
width: 250px;
}
</style>
<script>
document.getElementById('box').addEventListener("dblclick", function () {
var tooltip = document.getElementById('box').ej2_instances[0];
tooltip.close();
} else {
tooltip.open(this);
}
});
}
</script>
public ActionResult CustomMode()

{
return View();
}
1402
Sticky mode
With this mode set to true , Tooltips can be made to show up on the screen as long as the
close icon is pressed. In this mode, close icon is attached to the Tooltip located at the top right
corner. This mode can be enabled or disabled using the isSticky property.
view
sticky-mode.cs
<ejs-tooltip id="target" content=@ViewBag.content isSticky="true">
<div id="content">
Show tooltip
</div>
</ejs-tooltip>
}
<style>
#target {
margin: 80px auto;
padding: 20px;
width: 200px;
}
</style>
public ActionResult StickyMode()

{
ViewBag.content = "Click close icon to close me";
return View();
}
Open/Close Tooltip with delay

The Tooltips can be opened or closed after some delay by using the openDelay and
closeDelay properties.
view
delay-mode.cs
1403
<ejs-tooltip id="target" content=@ViewBag.content openDelay="1000" closeDelay="1000">
<div id="content">
Show tooltip
</div>
</ejs-tooltip>
}
<style>
#target {
margin: 80px auto;
padding: 20px;
width: 200px;
}
</style>
public ActionResult DelayMode()

{
ViewBag.content = "Tooltip with delay";
return View();
}
1404
Animation
To animate the Tooltip, a set of specific animation effects are available, and it can be controlled
using the animation property. The animation property also allows you to set delay, duration,
and various other effects of your choice.
AnimationModel is derived from base to apply the chosen animation effect, duration, etc. on
Tooltips.
By default, Tooltip entrance occurs over 150 ms using the ease-out timing function. It exits also
at 150 ms, but uses ease-in timing function.
view
animation.cs
<ejs-tooltip id="tooltip" content= "Tooltip content" animation="ViewBag.animation">
<div id="target">
Show tooltip
</div>
</ejs-tooltip>
}
<style>
#target {
margin: 50px auto;
padding: 10px;
width: 100px;
}
</style>

{
ViewBag.animation = new
{
open = new { effect = "ZoomIn", duration = 1000, delay = 0 },
close = new { effect = "ZoomOut", duration = 500, delay = 0 }
};
return View();
1405
}
The default animation effect for the Tooltip is set to FadeIn for its open action, and FadeOut for
its close action. The default duration is set to 150 ms and delay is set to 0.
Animation effects
The animation effects that are applicable to Tooltips are:
FadeIn
FadeOut
FadeZoomIn
FadeZoomOut
FlipXDownIn
FlipXDownOut
FlipXUpIn
FlipXUpOut
FlipYLeftIn
FlipYLeftOut
FlipYRightIn
FlipYRightOut
ZoomIn
ZoomOut
None
When the effect is specified as None , no effect will be applied to the Tooltip, and animation is
considered to be set to off .
Some of the above animation effects suits the Tooltip better when its tip pointer is hidden.
This can be achieved by setting the showTipPointer to false.
Animating via open/close methods

Animations can also be applied on Tooltips dynamically through open and close methods.
These methods accept the animation model as an optional parameter. If you pass
TooltipAnimationSettings , animation takes this model; otherwise, it takes the values from the
animation property. It is also possible to pass different animations for Tooltips on each target.
Refer to the code snippet below to apply animations using public methods.
view
animation-openclose.cs
1406
<ejs-tooltip id="tooltip" content="Tooltip content" opensOn="Custom" created="creat
ed">
<div id="target">
Show tooltip
</div>
</ejs-tooltip>
}
<style>
#target {
margin: 50px auto;
padding: 10px;
width: 100px;
}
</style>
<script>
document.getElementById('target').addEventListener("click", function () {
var tooltip = document.getElementById('tooltip').ej2_instances[0];
var closeAnimation = { effect: 'FadeOut', duration: 1000 }
tooltip.close(closeAnimation);
} else {
var openAnimation = { effect: 'FadeIn', duration: 1000 }
tooltip.open(this, openAnimation);
}
});
}
</script>

{
return View();
}
Apply transition
The transition effect can be applied on Tooltips by using the beforeRender event as given in the
following work-around code example.
view
animation-transition.cs
1407
<ejs-tooltip id="tooltip" target=".circletool" beforeRender="onBeforeRender" afterC
lose="onAfterClose" closeDelay=1000 animation="ViewBag.animation">
<div>
<h3> Transition effect </h3>
<div id="box" class="e-prevent-select">
<div class="circletool" style="top:18%;left:5%" title="This is Turt
le !!!"></div>
<div class="circletool" style="top:30%;left:30%" title="This is Sna
ke !!!"></div>
<div class="circletool" style="top:80%;left:80%" title="This is Cro
c !!!"></div>
<div class="circletool" style="top:65%;left:50%" title="This is Str
ing Ray !!!"></div>
<div class="circletool" style="top:75%;left:15%" title="This is Blo
b Fish !!!"></div>
<div class="circletool" style="top:30%;left:70%" title="This is Mam
moth !!!"></div>
</div>
</div>
</ejs-tooltip>
}
<style>
#box {
height: 200px;
margin-left: 10px;
margin-right: 10px;
position: relative;
}
.circletool {
background: yellowgreen;
height: 20px;
position: absolute;
width: 20px;
}
</style>
<script>
function onBeforeRender(args) {
if (args.element) {
// here prevent animation while apply transition
this.animation = { open: { effect: 'None' } };
args.element.style.display = 'block';
1408
args.element.style.transitionProperty = 'left,top';
args.element.style.transitionDuration = '1000ms';
}
}
function onAfterClose(args) {
// restore the animation effects
this.animation = { open: { effect: 'ZoomIn', duration: 500 }, close: { effect:
'ZoomOut', duration: 500 } };
}
</script>

{
ViewBag.animation = new
{
open = new { effect = "ZoomIn", duration = 500 },
close = new { effect = "ZoomOut", duration = 500 }
};
return View();
}
1409
Customization
The Tooltip can be customized by using the cssClass property, which accepts custom CSS
class names that define specific user-defined styles and themes to be applied on the Tooltip
element.
Tip pointer customization

Styling the tip pointer's size, background, and border color's can be done using the cssClass
property, as given below.
view
tooltip-pointer.cs
<ejs-tooltip id="tooltip" cssClass="customtip" content="Tooltip arrow customized">
<div id="target">
Show tooltip
</div>
</ejs-tooltip>
}
<style>
#target {
margin: 70px auto;
padding: 20px;
width: 200px;
}
.customtip.e-tooltip-wrap {
padding: 4px;
}
.customtip.e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
height: 20px;
width: 12px;
}
1410
.customtip.e-tooltip-wrap .e-arrow-tip.e-tip-top {
height: 20px;
width: 12px;
}
.customtip.e-tooltip-wrap .e-arrow-tip.e-tip-left {
height: 12px;
width: 20px;
}
.customtip.e-tooltip-wrap .e-arrow-tip.e-tip-right {
height: 12px;
width: 20px;
}
.customtip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
}
.customtip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
}
.customtip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
}
.customtip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
}
</style>
public ActionResult TooltipPointer()

{
return View();
}
1411
Tooltip customization
The complete look and feel of the Tooltip can be customized by changing it's background color,
opacity, content font, etc. The following code example shows the way to achieve it.
view
tooltip-view.cs
<ejs-tooltip id="target" cssClass="customtooltip" content="Tooltip customized">
<div id="content" >
Show tooltip
</div>
</ejs-tooltip>
}
<style>
#target {
margin: 70px auto;
padding: 20px;
width: 200px;
}
.customtooltip.e-tooltip-wrap .e-tip-content {
line-height: 20px;
}
.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
height: 12px;
left: 50%;
top: 100%;
width: 24px;
}
.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-top {
height: 12px;
left: 50%;
top: -9px;
width: 24px;
}
.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-left {
height: 24px;
1412
left: -9px;
top: 48%;
width: 12px;
}
.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-right {
height: 24px;
left: 100%;
top: 50%;
width: 12px;
}
.customtooltip.e-tooltip-wrap {
border-radius: 4px;
opacity: 1;
}
.customtooltip.e-tooltip-wrap.e-popup {
}
.customtooltip.e-tooltip-wrap .e-tip-content {
color: #000;
font-size: 12px;
}
.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
}
.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
}
.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
}
.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
1413
}
.customtooltip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom {
color: #fff;
font-size: 25.9px;
}
</style>
public ActionResult TooltipView()

{
return View();
}
1414
Overview
The uploader component is used to upload images, documents, and other files to the server.
This component is the extended version of HTML5 that is uploaded with multiple file selection,
auto upload, drag and drop, progress bar, preload files, and validation.
Key features
Asynchronous upload - Allows you to upload the files asynchronously. The upload process
requires save and remove action URL to manage upload process in the server.
Drag and drop - Allows you to drag files from the file explorer and drop into the drop area.
By default, the uploader component act as drop area element.
Form supports - The selected or dropped files are received as a collection in a form action
when the form is submitted.
Validation - Validates the selected file size and extension by using the allowedExtensions,
maxFileSize, and minFileSize properties.
Template - You can customize default appearance of the uploader using the template
property along with the buttons property.
Localization - Supports to localize the text content of action buttons, file status, clear icon
title, tooltips, and text content of drag area.
1415
Getting Started
This section briefly explains about how to include a simple Uploader in your ASP.NET Core
use our components.
Adding TagHelpers
@addTagHelper *, Syncfusion.EJ2.Uploader
Adding uploader component to the application

Now open your view page to render uploader component.
view
getting-started.cs
<ejs-uploader id="uploadFiles" autoUpload="false"></ejs-uploader>
1416
using System;
using System.Linq;
namespace EJ2CoreSampleBrowser.Controllers.TextBoxes
{
public partial class UploaderController : Controller
{
{
return View();
}
}
}
Adding drop area

By default, the uploader component allows to upload files by drag the files from file explorer, and
drop into the drop area. You can configure any other external element as drop target using
dropArea property.
In the following sample, drop target is configured.
view
drop-area.cs
@{
var dropAreaElem = document.getElementById('droparea');
}
<div id='droparea'>Drop files here to upload</div>
<ejs-uploader id="uploadFiles" dropArea ="@dropAreaElem" autoUpload="false"></ejs-u

ploader>
}
using System;
using System.Linq;
1417
{
{
{
return View();
}
}
}
Configure asynchronous settings

The uploader component process the files to upload in Asynchronous mode by default. Define
the properties saveUrl and removeUrl to handle the save and remove action as follows.
view
async-settings.cs
@{
var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "ht
tps://aspnetmvc.syncfusion.com/services/api/uploadbox/Save", RemoveUrl = "https://aspne
tmvc.syncfusion.com/services/api/uploadbox/Remove" };
}
<ejs-uploader id="uploadFiles" asyncSettings="@asyncSettings" autoUpload="false"></e
js-uploader>
}
using System;
using System.Linq;
{
{
1418
{
return View();
}
}
}
Handle success and failed upload

You can handle the success and failure actions using the success and failure events. To handle
these events, define the function and assign it to the corresponding event as follows.
view
success_failed.cs
@{
}
<ejs-uploader id="uploadFiles" asyncSettings="@asyncSettings" success="onUploadSucce
ss" failure="onUploadFailed" autoUpload="false"></ejs-uploader>
}
<script>
function onUploadSuccess(args) {
var _this = this;
var spinnerElement = document.getElementById('dropArea');
var li = document.getElementById('dropArea').querySelector('[data-file-name="'
+ args.file.name + '"]');
if (!ej.base.isNullOrUndefined(li.querySelector('.progress-bar-container'))) {
ej.base.detach(li.querySelector('.progress-bar-container'));
}
if (args.operation === 'upload') {
li.querySelector('.file-name').classList.add('upload-success');
li.querySelector('.close-icon-container').classList.add('delete-icon');
(li.querySelector('.close-icon-container')).onclick = function () {
generateSpinner(_this.uploadWrapper);
};
li.querySelector('.close-icon-container').onkeydown = function (e) {
if (e.keyCode === 13) {
generateSpinner(e.target.closest('.e-upload'));
}
};
}
1419
if (args.operation === 'remove') {
this.fileList.splice(this.fileList.indexOf(li), 1);
this.filesData.splice(this.fileList.indexOf(li), 1);
ej.base.detach(li);
ej.popups.hideSpinner(spinnerElement);
ej.base.detach(spinnerElement.querySelector('.e-spinner-pane'));
}
ej.base.EventHandler.add(li.querySelector('.close-icon-container'), 'click', re
moveFiles, this);
}
function generateSpinner(targetElement) {
ej.popups.createSpinner({ target: targetElement, width: '25px' });
ej.popups.showSpinner(targetElement);
}
function onUploadFailed(args) {
moveFiles, this);
li.querySelector('.file-name ').classList.add('upload-fails');
}
}
</script>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
1420
Asynchronous upload
The uploader component allows you to upload the files asynchronously. The upload process
requires save and remove action URL to manage the upload process in the server.
* The save action is necessary to handle the upload operation.

* The remove action is optional, one can handle the removed files from server.
The File can be uploaded automatically or manually. For more information, you can refer to the
Auto Upload section from the documentation.
Multiple file upload

By Default, the uploader component allows you to select and upload multiple files
simultaneously. The selected files are organized in a list for every file selection until you clear it
by clicking clear button that is shown in footer. You can add the multiple attributes to original
input element of file by enabling the multiple file selection. The following example explains about
multiple file upload settings.
view
multiple.cs
@{
}

js-uploader>
using System;
using System.Linq;
1421
{
{
{
return View();
}
}
}
Single file upload

You can select and upload a single file by disabling the multiple file selection property. The file
list item is removed for every selection and it always maintain a single file to upload. You can
remove the multiple attributes form the original input element of file by enabling the single file
upload property.
The following example explains about single file upload settings.
view
single.cs
@{
}
<ejs-uploader id="uploadFiles" asyncSettings="@asyncSettings" multiple="false" autoU
pload="false"></ejs-uploader>
}
using System;
using System.Linq;
{
{
1422
{
return View();
}
}
}
Save action
The save action handler upload the files that needs to be specified in the saveUrl property. The
save handler receives the submitted files and manages the save process in server. After
uploading the files to server location, the color of the selected file name changes to green and
the remove icon is changed as bin icon.
* When the file is uploaded successfully, the event “success” triggers to handle the
operation after upload.
* When the file is failed to upload, the event “failure” triggers with information, w
hich cause this failure.
You can cancel the upload process by setting the upload event argument eventargs.cancel to
true.
view
save.cs
@{
tps://aspnetmvc.syncfusion.com/services/api/uploadbox/Save" };
}
js-uploader>
}
using System;
using System.Linq;
{
1423
{
{
return View();
}
}
}
Server-side configuration for save action

This section explains how to handle the server-side action for saving the file from server.
[AcceptVerbs("Post")]
public void Save()
{
try
{
if (HttpContext.Current.Request.Files.AllKeys.Length > 0)
{
var httpPostedFile = HttpContext.Current.Request.Files["UploadFiles"];
if (httpPostedFile != null)
{
var fileSave = HttpContext.Current.Server.MapPath("UploadedFiles");
var fileSavePath = Path.Combine(fileSave, httpPostedFile.FileName);
if (!File.Exists(fileSavePath))
{
httpPostedFile.SaveAs(fileSavePath);
HttpResponse Response = HttpContext.Current.Response;
Response.Clear();
Response.ContentType = "application/json; charset=utf-8";
Response.StatusDescription = "File uploaded succesfully";
Response.End();
}
else
{
Response.Clear();
Response.Status = "400 File already exists";
Response.StatusCode = 400;
Response.StatusDescription = "File already exists";
Response.End();
}
}
}
}
1424
catch (Exception e)
{
HttpResponse Response = System.Web.HttpContext.Current.Response;
Response.Clear();
Response.Status = "400 No Content";
Response.StatusDescription = e.Message;
Response.End();
}
}
Remove action
The remove action is optional. Specify the URL to handle remove process from server. The
remove handler receives the posted files and handle the remove operation in server.
* When the files are removed successfully from the server, the success event triggers
to denote the process has completed.
* When remove action fails, the event “failure” triggers with information, which caus
e failure in remove process.
You can differentiate the file operation whether the success event triggers from save or
remove action in its arguments eventArgs.operation.
You can remove the files which is not uploaded locally by clicking the remove icon. In this case,
the success or failure events will not be triggered.
view
remove.cs
@{
}

js-uploader>
1425
using System;
using System.Linq;
{
{
{
return View();
}
}
}
Server-side configuration for remove action

This section explains how to handle the server-side action for removing the file from server.
public void Remove()
{
try
{
var fileSave = "";
if (HttpContext.Current.Request.Form["cancel-uploading"] != null)
{
fileSave = HttpContext.Current.Server.MapPath("UploadingFiles");
}
else
{
fileSave = HttpContext.Current.Server.MapPath("UploadedFiles");
}
var fileName = HttpContext.Current.Request.Files["UploadFiles"].FileName;
var fileSavePath = Path.Combine(fileSave, fileName);
if (File.Exists(fileSavePath))
{
File.Delete(fileSavePath);
}
}
catch (Exception e)
{
Response.Clear();
1426
Response.Status = "404 File not found";
Response.StatusDescription = "File not found";
Response.End();
}
}
Auto upload
By default, the uploader processes the files to upload once the files are selected and added in
upload queue. To upload manually, disable the autoUpload property. When you disable this
property, you can use the action buttons to call upload all or clear all actions manually. You can
change those buttons text using the buttons property in Uploader component.
view
auto-upload.cs
<ejs-uploader id="uploadFiles" autoUpload="false"></ejs-uploader>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
Preload files
1427
The uploader component allows you to preload the list of files that are uploaded in the server.
The preloaded files are useful to view and remove the files from server that can be achieved by
the files property. By default, the files are configured with uploaded successfully state on
rendering file list. The following properties are mandatory to configure the preloaded files:
* Name
* Size
* Type
view
preload-files.cs
@{
}
<ejs-uploader id="uploadFiles" asyncSettings="@asyncSettings" autoUpload="false">
<e-uploader-files>
<e-uploader-uploadedfiles name="Books" Size=500000 type=".png"></e-uploader-upl
oadedfiles>
<e-uploader-uploadedfiles name="Movies" Size=12000 type=".pdf"></e-uploader-upl
oadedfiles>
<e-uploader-uploadedfiles name="Study materials" size="500000" type=".docx"></e
-uploader-uploadedfiles>
</e-uploader-files>
</ejs-uploader>
}
using System;
using System.Linq;
{
{
{
return View();
}
}
1428
}
Adding additional HTTP headers with upload action

The Uploader component allows you to add the additional headers with save and remove
action requests using the uploading and removing events, which helps to send validation
token on file upload. Access the current request and set the request header within these events.
The following code block shows how to add the additional headers with save and remove action
request.
<ejs-uploader id="UploadFiles" dropArea=".control-fluid" uploading="addHeaders" remov

ing = "addHeaders" asyncSettings="@asyncSettings"></ejs-uploader>
function addHeaders(args) {
args.currentRequest.setRequestHeader('custom-header', 'Syncfusion');
}
1429
Chunk Upload
The Uploader sends the large file split into small chunks and transmits to the server using AJAX.
You can also pause, resume, and retry the failed chunk file.
The chunk upload works in asynchronous upload only.

This feature is available from the Essential Studio Vol 2, 2018 release.
To enable the chunk upload, set the size to chunkSize option of the upload and it receives the
value in bytes .
view
chunk.cs
@{
tmvc.syncfusion.com/services/api/uploadbox/Remove", chunkSize = 102400 };
}
js-uploader>
}
using System;
using System.Linq;
{
{
{
return View();
}
}
}
1430
The chunk upload functionality separates the selected files into blobs of the data or chunks.
These chunks are transmitted to the server using an AJAX request. The chunks are sent in
sequential order, and the next chunk can be sent to the server according to the success of the
previous chunk. If any one of the chunk failed, then the remaining chunk cannot be sent to the
server. The chunkSuccess or chunkFailure event will be triggered when the chunk is sent to the
server successfully or failed. If all the chunks are sent to the server successfully, the uploader
success event is triggered.
Chunk upload will work when the selected file size is greater than the specified chunk size.
otherwise, it upload the files normally.
Additional configurations
To modify the chunk upload, the following options can be used.
RetryAfterDelay - If error occurs while sending any chunk request from JavaScript, hold the
operation for 500 milliseconds (by default), and retry the operation using chunk. This can be
achieved by using the asyncSettings.retryAfterDelay property. You can modify the holding
time interval in milliseconds.
RetryCount - Specifies the number of retry actions performed when the file fails to upload.
By default, retry action is performed 3 times. If the file fails to upload continuously, the
request is aborted and the uploader failure event will trigger.
The following sample specifies the chunk upload delay with 3000 milliseconds and the retry count
is 5. The failure event is triggered as the wrong saveUrl is used.
view
retry.cs
@{
tmvc.syncfusion.com/services/api/uploadbox/Remove", chunkSize = 102400, retryCount = 5,
retryAfterDelay = 3000 };
}
js-uploader>
}
using System;
1431
using System.Linq;
{
{
{
return View();
}
}
}
Resumable upload
Allows you to resume an upload operation after a network failure or manually interrupts (pause)
the upload. You can perform pause and resume upload actions using public methods (pause and
resume) and UI interaction. The pause icon is enabled after the upload begins.
This pause and resume features available only when the chunk upload is enabled.
view
resumable.cs
@{
}
js-uploader>
}
using System;
using System.Linq;
1432
{
{
{
return View();
}
}
}
Cancel upload
The uploader component allows you to cancel the uploading file. This can be achieved by
clicking the cancel icon or using the cancel method. The cancelling event will be fired whenever
the file upload request is canceled. While canceling the upload request, the partially uploaded file
is removed from the server.
When the request fails, the pause icon is changed to retry icon. By clicking the retry icon, sends
the failed chunk request again to the server and upload started from where it is failed. You can
retry the canceled upload request again using retry UI or retry methods. But, if you retry this, the
file upload action again starts from initial.
The following example explains about chunk upload with cancel support.
view
cancel.cs
@{
}
js-uploader>
}
using System;
using System.Linq;
1433
{
{
{
return View();
}
}
}
The retry action has different working behavior for chunk upload and default upload.
Chunk upload - Retries to upload the failed request where it is failed previously.
Default upload - Retries to upload the failed file again from initial.
Server-Side configurations
The server-side implementation entirely depends on the application requirements and logic. The
following code snippet provides the server-side logic to handle the chunk upload using the
uploader components.
// Server configuration for upload a file.

public void Save()
{
try
{
if (HttpContext.Current.Request.Files.AllKeys.Length > 0)
{
var httpPostedChunkFile = HttpContext.Current.Request.Files["chunkFile"];
if (httpPostedChunkFile != null)
{
var saveFile = HttpContext.Current.Server.MapPath("UploadingFiles");
// Save the chunk file in temporery location with .part extension
var SaveFilePath = Path.Combine(saveFile, httpPostedChunkFile.FileName
+ ".part");
var chunkIndex = HttpContext.Current.Request.Form["chunk-index"];
if (chunkIndex == "0")
{
httpPostedChunkFile.SaveAs(SaveFilePath);
}
else
{
// Merge the current chunk file with previous uploaded chunk files
MergeChunkFile(SaveFilePath, httpPostedChunkFile.InputStream);
var totalChunk = HttpContext.Current.Request.Form["total-chunk"];
1434
if (Convert.ToInt32(chunkIndex) == (Convert.ToInt32(totalChunk) - 1
))
{
var savedFile = HttpContext.Current.Server.MapPath("UploadedFil
es");
var originalFilePath = Path.Combine(savedFile, httpPostedChunkF
ile.FileName);
// After all the chunk files completely uploaded, remove the .p
art extension and move this file into save location
System.IO.File.Move(SaveFilePath, originalFilePath);
}
}
HttpResponse ChunkResponse = HttpContext.Current.Response;
ChunkResponse.Clear();
ChunkResponse.ContentType = "application/json; charset=utf-8";
ChunkResponse.StatusDescription = "File uploaded succesfully";
ChunkResponse.End();
}
var httpPostedFile = HttpContext.Current.Request.Files["UploadFiles"];
if (httpPostedFile != null)
{
var fileSave = HttpContext.Current.Server.MapPath("UploadedFiles");
var fileSavePath = Path.Combine(fileSave, httpPostedFile.FileName);
if (!File.Exists(fileSavePath))
{
Response.Clear();
Response.StatusDescription = "File uploaded succesfully";
Response.End();
}
else
{
Response.Clear();
Response.Status = "400 File already exists";
Response.StatusDescription = "File already exists";
Response.End();
}
}
}
}
catch (Exception e)
{
Response.Clear();
1435
Response.Status = "400 No Content";
Response.StatusDescription = e.Message;
Response.End();
}
}
// Server configuration for remove a uploaded file
public void Remove()
{
try
{
var fileSave = "";
if (HttpContext.Current.Request.Form["cancel-uploading"] != null)
{
fileSave = HttpContext.Current.Server.MapPath("UploadingFiles");
} else
{
fileSave = HttpContext.Current.Server.MapPath("UploadedFiles");
}
var fileName = HttpContext.Current.Request.Files["UploadFiles"].FileName;
var fileSavePath = Path.Combine(fileSave, fileName);
if (File.Exists(fileSavePath))
{
File.Delete(fileSavePath);
}
}
catch (Exception e)
{
Response.Clear();
Response.Status = "404 File not found";
Response.StatusDescription = "File not found";
Response.End();
}
}
// Merge the current chunk file with previous uploaded chunk files
public void MergeChunkFile(string fullPath, Stream chunkContent)
{
try
{
using (FileStream stream = new FileStream(fullPath, FileMode.Append, FileAccess
.Write, FileShare.ReadWrite))
{
using (chunkContent)
{
chunkContent.CopyTo(stream);
}
1436
}
}
catch (IOException ex)
{
throw ex;
}
}
1437
Drag and drop
The uploader component allows you to drag and drop the files to upload. You can drag the files
from file explorer and drop into the drop area. By default, the uploader component act as drop
area element. The drop area gets highlighted when you drag the files over drop area.
Custom drop area

The uploader component allows you to set external target element as drop area using the
dropArea property. The element can be represented as HTML element or element’s id.
view
custom-drop.cs
index.css
@{
var dropAreaElem = document.getElementById('droparea');
}
<ejs-uploader id="uploadFiles" dropArea ="@dropAreaElem" autoUpload="false"></ejs-up

loader>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
1438
#droparea {
padding: 50px 25px;
margin: 30px auto;
text-align: center;
width: 20%;
}
.e-file-select,
.e-file-drop {
display: none;
}
body .e-upload-drag-hover {
outline: 2px dashed brown;
}
#uploadfile {
width: 60%;
margin-left: 5%;
}
Customize drop area

You can customize the appearance of drop area by overriding the default drop area styles. The
class “” and “” is available to handle this customization.
view
customize-drop.cs
@{
tmvc.syncfusion.com/services/api/uploadbox/Remove" },
dropAreaElem = document.getElementById('droparea');
}
<div id='dropArea' style='height: auto; overflow: auto'>
<span id='drop'> Drop files here or <a href="" id='browse'><u>Browse</u></a> </sp
an>
<ejs-uploader id="uploadFiles" asyncSettings="@asyncSettings" dropArea="@dropArea
Elem" ></ejs-uploader>
</div>
}
1439
using System;
using System.Linq;
{
{
{
return View();
}
}
}
1440
Validation
The uploader component validate the selected files size and extension using the
allowedExtensions, minFileSize and maxFileSize properties. The files can be validated before
uploading to the server and can be ignored on uploading. Also, you can validate the files by
setting the HTML attributes to the original input element. The validation process occurs on drag-
and-drop the files also.
File type
You can allow the specific files alone to Upload using the allowedExtensions property. The
extension can be represented as collection by comma separators. The uploader component
filters the selected or dropped files to match against the specified file types and processes the
upload operation. The validation happens when you specify value to inline attribute to accept the
original input element.
view
type-validation.cs
@{
var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "http
s://aspnetmvc.syncfusion.com/services/api/uploadbox/Save", RemoveUrl = "https://aspnetm
vc.syncfusion.com/services/api/uploadbox/Remove" };
}
<ejs-uploader id="uploadFiles" asyncSettings="@asyncSettings" minFileSize="10000" max

FileSize="1500000" autoUpload="false"></ejs-uploader>
using System;
using System.Linq;
{
{
1441
{
return View();
}
}
}
File size
The uploader component allows you to validate the files based on its size. The validation helps to
restrict uploading large files or empty files to the server. The size can be represented in bytes .
By default, the uploader component allows you to upload minimum file size as 0 byte and
maximum file size as 28.4 MB using the minFileSize and maxFileSize properties.
view
size-validation.cs
@{
}
<ejs-uploader id="uploadFiles" asyncSettings="@asyncSettings" minFileSize="10000" ma
xFileSize="1500000" autoUpload="false"></ejs-uploader>
}
using System;
using System.Linq;
{
{
{
return View();
}
}
1442
}
Maximum files count

You can restrict uploading the maximum number of files using the *selected event. In the
selected event arguments, you can get the currently selected files details using the
getFilesData() . You can modify the files details and assign the modified file list to the
eventArgs.modifiedFilesData .
view
max-count-validation.cs
@{
}
<ejs-uploader id="uploadFiles" asyncSettings="@asyncSettings" selected="onFileSelect
ed" success="onUploadSuccess"
dropArea="dropElement" autoUpload="false"></ejs-uploader>
}
<script>
function onFileSelected(args : SelectedEventArgs) : void {
// Filter the 5 files only to showcase
args.filesData.splice(5);
let filesData : FileInfo[] = uploadObj.getFilesData();
let allFiles : FileInfo[] = filesData.concat(args.filesData);
if (allFiles.length > 5) {
for (let i : number = 0; i < allFiles.length; i++) {
if (allFiles.length > 5) {
allFiles.shift();
}
}
args.filesData = allFiles;
// set the modified custom data
args.modifiedFilesData = args.filesData;
}
args.isModified = true;
}
function onUploadSuccess(args: any): void {

let li: HTMLElement = this.uploadWrapper.querySelector('[data-file-name="' + ar
gs.file.name + '"]');
1443
(li.querySelector('.e-file-delete-btn') as HTMLElement).onclick = () => {
generateSpinner(this.uploadWrapper);
};
(li.querySelector('.e-file-delete-btn') as HTMLElement).onkeydown = (e: any
) => {
}
};
} else {
hideSpinner(this.uploadWrapper);
detach(this.uploadWrapper.querySelector('.e-spinner-pane'));
}
}
function generateSpinner(targetElement: HTMLElement): void {

createSpinner({ target: targetElement, width: '25px' });
showSpinner(targetElement);
}
</script>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
Duplicate files
You can validate the duplicate files before uploading to server using the selected event. Compare
the selected files with the existing files data and filter the file list by removing the duplicate files.
1444
view
@{
}
<ejs-uploader id="uploadFiles" asyncSettings="@asyncSettings" selected="onFileSelec
ted" autoUpload="false"></ejs-uploader>
}
<script>
function onFileSelect(args : any) {
let existingFiles: FileInfo[] = this.getFilesData();
for (let i: number = 0; i < args.filesData.length; i++) {
for(let j: number = 0; j < existingFiles.length; j++) {
if (!isNullOrUndefined(args.filesData[i])) {
if (existingFiles[j].name == args.filesData[i].name) {
args.filesData.splice(i, 1);
}
}
}
}
existingFiles = existingFiles.concat(args.filesData);
args.modifiedFilesData = existingFiles;
}
</script>
1445
Forms Support (Synchronous Upload)
The Uploader component works with HTML form like default file input. The following configuration
is must to make the Uploader work inside the form.
* `saveUrl` and `removeUrl` must be null.

* àutoUpload` must be disabled.
* `name` attribute must be added in input element.
The selected or dropped files are received as a collection in form action when the form is
submitted. The form action handles the server-side operations that manage the file upload
process. When you reset the form, the file list and data will be cleared.
view
formsupport.cs
index.css
@{
var Modalanimation = new Syncfusion.EJ2.Popups.DialogAnimationSettings { Effect =
Syncfusion.EJ2.Popups.DialogEffect.Zoom };
}
<h4 class="form-title">Photo Contest</h4>

<div class="control_wrapper" id="control_wrapper">

<form id="form1" method="post">
<div class="form-group" style="padding-top: 11px;">
<input type="text" id="name" name="name" data-required-message=
"* Enter your name" required="" data-msg-containerid="nameError">
<label class="e-float-text e-label-top" for="name">Name</label>
</div>
<div id="nameError"></div>
</div>
<input type="email" id="email" name="email" data-validation="em
ail" data-required-message="* Enter your email" required="" data-msg-containerid="mailE
rror">
1446
<label class="e-float-text e-label-top" for="email">Email</label
>
</div>
<div id="mailError"></div>
</div>
<input type="text" id="mobileno" name="mobile" data-required-me
ssage="* Enter your mobile number" required="" data-msg-containerid="noError">
<label class="e-float-text e-label-top" for="mobile">Mobile No</
label>
</div>
<div id="noError"></div>
</div>
<div class="e-float-input upload-area">
<input type="text" id="upload" readonly name="upload" data-requ
ired-message="* Select any file" required="" data-msg-containerid="uploadError">
<button id="browse" type="button" class="e-control e-btn e-info"
onclick="browseClick()">Browse..</button>
<label class="e-float-text e-label-top" for="upload">Choose a f
ile</label>
</div>
<div id="uploadError"></div>
<ejs-uploader id="fileupload" autoUpload="false" selected="onFileSe
lect" multiple="false" allowedExtensions="image/*" > </ejs-uploader>
</div>
<textarea class="address-field" rows="2" id="Address"></textarea
>
<label class="e-float-text e-label-top">Address</label>
</div>
</div>
</form>
<div class="submitBtn">
<button class="submit-btn e-btn" id="submit-btn" onclick="onFormSubmit(
)">Submit</button>
</div>
<ejs-dialog id="confirmationDialog" width="335px" visible="false" content="
Your details has been updated successfully, Thank you" target=".control-fluid" isModal=
"true" animationSettings="@Modalanimation"></ejs-dialog>
</div>
</div>
}
1447
<link href="~/css/uploader/forms.css" rel="stylesheet" />
<script>
var confirm = document.getElementById("confirmationDialog").ej2_instances[0

];
confirm.visible = false;
}
function onFileSelect(args) {
var inputElement = document.getElementById('upload');
inputElement.value = args.filesData[0].name;
}
var options = {
customPlacement: function (inputElement, errorElement) {
inputElement = inputElement.closest('.form-group').querySelector('.erro
r');
inputElement.parentElement.appendChild(errorElement);
},
rules: {
'name': {
required: true
},
'email': {
required: true
},
'upload': {
required: true
},
'mobile': {
required: true
}
}
};
var inputElement = document.getElementById('upload');
var formID = document.getElementById('form1');
var formObj = new ej.inputs.FormValidator(formID, options);

function onFormSubmit() {
var confirm = document.getElementById("confirmationDialog").ej2_instances[0
];
var formStatus = formObj.validate();
if (formStatus) {
1448
formObj.element.reset();
confirm.show();
}
confirm.overlayClick = function () {
confirm.hide();
};
}
function browseClick() {
document.getElementsByClassName('e-file-select-wrap')[0].querySelector('but
ton').click();
return false;
};
</script>
}
using System;
using System.Linq;
{
{
{
return View();
}
}
}
.control_wrapper {
max-width: 400px;
margin: auto;
}
#control_wrapper {
max-width: 440px;
margin: auto;
border: 0.5px solid grey;
padding: 1% 4% 2%;
1449
}
.bootstrap label.e-float-text.e-label-top {
font-weight: bold;
}
.highcontrast #control_wrapper {
}
.upload-area, .e-bigger .upload-area {

width: 69%;
}
.e-error {
padding-top: 3px;
}
.e-upload {
width: 100%;
position: relative;
margin-top: 15px;
}
.control_wrapper .e-upload .e-upload-drag-hover {

margin: 0;
}
.submit-btn {
margin-top: 15px;
position: relative;
}
.submitBtn {
position: relative;
left: 79%;
}
.form-support {
width: 100%;
}
.success .form-support {
display: none;
}
.success .successmsg {
border: 0.5px solid green;
padding: 10%;
1450
color: green;
}
#form1 {
position: relative;
top: 14%;
}
.form-support td {
width: 100%;
padding-top: 4%;
}
.e-upload {
display: none;
}
.choose-file {
width: 60%;
}
#browse {
left: 46%;
float: right;
top: -26px
}
.e-bigger #browse {
top: -41px;
}
.e-bigger.material #browse {
top: -35px;
}
.e-bigger.fabric #browse, .e-bigger.highcontrast #browse {

top: -41px;
left: 50%;
}
.fabric #browse, .highcontrast #browse {

top: -32px;
}
.bootstrap #browse {
top: -34px;
}
1451
.form-title {
text-align: center;
}
1452
Template
You can customize the default appearance of the uploader using a template along with buttons.
File list template

The template property is used to customize the default appearance of each file in the list. It can
be represented as the HTML element or string. The selected or dropped files are displayed as
per the template layout provided. The remove and progress bar action is handled using the
corresponding events when the template is defined.
For example, you can display file type icon along with the default UI elements.
view
index.css
@{
var asyncSettings = new Syncfusion.EJ2.Uploader.UploaderAsyncSettings { SaveUrl = "
https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save", RemoveUrl = "https://asp
netmvc.syncfusion.com/services/api/uploadbox/Remove" };
}
<div id='dropArea'>
<span id='drop' class="droparea"> Drop files here or <a href="" id='browse'><u>
Browse</u></a> </span>
<ejs-uploader
template="<span class='wrapper'><span class='icon sf-icon-${type}'></span><span
class='name file-name'>${name}</span></span>" +
"<span class='file-size-td file-size'>${size} bytes</span> <span class='e-icons
e-file-remove-btn' title='Remove'></span> <br/> " +
"<progress id='progressBar' class='progressbar' value='0' max='100'></progress>
<span class='percent-td percent'></span>",
id="UploadFiles"
asyncSettings="@asyncSettings"
progress="onFileUpload"
selected="onSelect"
success="onuploadSuccess"
failure="onuploadFailed"></ejs-uploader>
</div>
<div style='margin-left: 50px; padding-top:25px;'>
<button class="e-btn e-css" id="clearbtn">Clear All</button>
</div>
}
1453
<script>
document.getElementById('browse').onclick = function () {
document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button'
).click();
return false;
};
function onFileUpload(args: any) {
let progressValue: number = Math.round((args.e.loaded / args.e.total) * 100);
li.getElementsByTagName('progress')[0].value = progressValue;
li.getElementsByClassName('percent')[0].textContent = progressValue.toString()
+ " %";
}
function onuploadSuccess(args: any) {
let height: string = document.getElementById('dropArea').style.height;
height = (parseInt(height) - 40) + 'px';
document.getElementById('dropArea').style.height = height;
} else {
let li: HTMLElement = this.uploadWrapper.querySelector('[data-file-name="'
let progressBar: HTMLElement = li.getElementsByTagName('progress')[0];
progressBar.classList.add('e-upload-success');
li.getElementsByClassName('percent')[0].classList.add('e-upload-success');
document.getElementById('dropArea').style.height = parseInt(height) - 15 +
'px';
}
}
function onuploadFailed(args: any) {
let progressBar: HTMLElement = li.getElementsByTagName('progress')[0];
progressBar.classList.add('e-upload-failed');
li.getElementsByClassName('percent')[0].classList.add('e-upload-failed');
}
function onSelect(args: SelectedEventArgs) {
let length: number = args.filesData.length;
height = parseInt(height) + (length * 55) + 'px';
document.getElementById('dropArea').style.height = height;
}
</script>
1454
#dropArea {
min-height: 50px;
padding-top: 15px;
position: relative;
}
#drop {
padding: 3% 30% 3%;
display: inherit;
border: 1px dashed #c3c3cc
}
.droparea {
font-size: 13px;
}
.e-bigger .droparea {
font-size: 14px;
}
.control_wrapper {
max-width: 400px;
margin: auto;
}
.e-file-select-wrap {
display: none;
}
.e-upload {
float: none;
border: none;
}
.ul-element {
list-style: none;
width: 100%;
padding-left: 0;
}
.file-name {
padding: 8px 6px 8px 0;
font-size: 13px;
width: 46%;
position: relative;
top: 4px;
}
1455
.e-bigger .file-name {
font-size: 14px;
}
.file-size {
padding: 4px;
font-size: 13px;
width: 18%;
position: relative;
}
.e-bigger .file-size {
font-size: 14px;
}
.file-lists {
border: 1px solid lightgray;
padding: 0 6px 0 14px;
margin-top: 15px;
position: relative;
}
.file-size, .file-name {
font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
overflow: hidden;
}
.progress-bar-container {
display: block;
float: right;
height: 20px;
right: 13%;
top: 14px;
position: relative;
width: 20%;
}
.progress{
width: 100%;
height: 15px;
-webkit-appearance: none;
-moz-appearance: none;
}
1456
.close-icon-container
{
cursor: pointer;
font-size: 11px;
height: 24px;
margin: 0 12px 0 22px;
padding: 0;
position: absolute;
right: 0;
width: 24px;
top: 6px;
}
.e-icons::before {
left: 7px;
position: inherit;
top: 7px;
content: '\e932';
}
.delete-icon::before {
content: '\e94a';
}
.close-icon-container:hover {
background-color: #d0cdcd;
border-radius: 50%;
box-shadow: 0 0 0 transparent;
}
.highcontrast .close-icon-container:hover {
background-color: #ffd939;
}
.highcontrast .close-icon-container {
color: #ffffff;
}
.upload-success {
color: #2bc700;
}
.upload-fails {
color: #f44336;
}
progress::-webkit-progress-bar {
border: 1px solid lightgrey;
1457
background-color: #ffffff;
border-radius: 2px;
}
#dropArea progress {
border-radius: 2px;
}
.highcontrast #dropArea progress {
border: none;
}
.highcontrast progress::-webkit-progress-bar {
border: none;
}
.material progress::-webkit-progress-value {
border-radius: 2px;
background-color: #ff4081;
}
.bootstrap progress::-webkit-progress-value {
border-radius: 2px;
background-color: #1f496e;
}
.fabric progress::-webkit-progress-value {
background-color: #1763ff;
border-radius: 2px;
top: -66px;
}
.highcontrast progress::-webkit-progress-value {
border-radius: 2px;
}
.material progress::-moz-progress-bar {
border-radius: 2px;
}
.bootstrap progress::-moz-progress-bar {
border-radius: 2px;
}
.fabric progress::-moz-progress-bar {
border-radius: 2px;
top: -66px;
}
.highcontrast progress::-moz-progress-bar {
border-radius: 2px;
1458
}
Custom template
You can design the own template by preventing the default file list including buttons. The
showFileList property is used to display whether the default file list or own file list when you use
custom template to upload or remove the files, pass the custom UI argument as true to call
upload / remove public method as follows:
UploaderObj. upload(filesData, true) ;
UploaderObj. remove(filesData, true) ;
Refer to the following code sample.
view
index.css
@{
var asyncSettings = new Syncfusion.EJ2.Uploader.UploaderAsyncSettings { SaveUrl = "
https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save", RemoveUrl = "https://asp
netmvc.syncfusion.com/services/api/uploadbox/Remove" };
}
<div class="control_wrapper">
<div id='dropArea'>
<span id='drop' class="droparea"> Drop files here or <a href="" id='bro
wse'><u>Browse</u></a> </span>
<ej-uploader id="fileUpload" asyncSettings="@asyncSettings" selected="o
nFileSelect" success="onUploadSuccess" failure="onUploadFailed" progress="onFileUpload"
autoUpload="false"></ej-uploader>
</div>
</div>
</div>
}
<style>
#dropArea {
min-height: 50px;
padding-top: 15px;
position: relative;
}
1459
#drop {
padding: 3% 30% 3%;
display: inherit;
}
.droparea {
font-size: 13px;
}
font-size: 14px;
}
.control_wrapper {
max-width: 400px;
margin: auto;
}
display: none;
}
.e-upload {
float: none;
border: none;
}
.ul-element {
list-style: none;
width: 100%;
padding-left: 0;
}
.file-name {
font-size: 13px;
width: 46%;
position: relative;
top: 4px;
}
font-size: 14px;
}
.file-size {
padding: 4px;
1460
font-size: 13px;
width: 18%;
position: relative;
}
font-size: 14px;
}
.file-lists {
margin-top: 15px;
position: relative;
background: rgba(0, 0, 0, 0.04);
}
overflow: hidden;
}
span.progress-bar-container {
display: block;
float: right;
height: 20px;
right: 13%;
top: 14px;
position: relative;
width: 20%;
}
.progress{
width: 100%;
height: 15px;
}
{
cursor: pointer;
font-size: 11px;
height: 24px;
padding: 0;
position: absolute;
1461
right: 0;
width: 24px;
top: 6px;
}
.close-icon-container.e-icons::before {
left: 7px;
position: inherit;
top: 7px;
content: '\e932';
}
.close-icon-container.delete-icon::before {
content: '\e94a';
}
background-color: rgba(0, 0, 0, 0.12);
border-radius: 50%;
}
}
color: #ffffff;
}
.upload-success {
color: #2bc700;
}
.upload-fails {
color: #f44336;
}
border-radius: 2px;
}
border-radius: 2px;
}
1462
border: none;
}
border: none;
}
border-radius: 2px;
}
border-radius: 2px;
}
border-radius: 2px;
top: -66px;
}
border-radius: 2px;
}
border-radius: 2px;
}
border-radius: 2px;
}
border-radius: 2px;
top: -66px;
}
border-radius: 2px;
}
</style>
<script>
var dropElement = document.getElementsByClassName('control-fluid')[0];
var filesDetails = [];
document.getElementById('browse').onclick = function () {
document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button'
1463
).click();
return false;
};
document.getElementById('clearbtn').onclick = function () {
var uploadObj = document.getElementById("fileUpload")
uploadObj.ej2_instances[0].element.value = '';
ej.base.detach(document.getElementById('dropArea').querySelector('.upload-list-
root'));
uploadObj.ej2_instances[0].filesData = [];
uploadObj.ej2_instances[0].fileList = [];
};
var parentElement; var proxy; var progressbarContainer;
function onFileSelect(args) {
if (ej.base.isNullOrUndefined(document.getElementById('dropArea').querySelector(
'.upload-list-root'))) {
parentElement = ej.base.createElement('div', { className: 'upload-list-root'
});
parentElement.appendChild(ej.base.createElement('ul', { className: 'ul-elem
ent' }));
document.getElementById('dropArea').appendChild(parentElement);
}
for (var i = 0; i < args.filesData.length; i++) {
formSelectedData(args.filesData[i], this); // create the LI element for
each file Data
}
this.filesData = this.filesData.concat(args.filesData);
this.upload(args.filesData, true);
args.cancel = true;
}
function formSelectedData(selectedFiles, proxy) {
var liEle = ej.base.createElement('li', { className: 'file-lists', attrs: { 'da
ta-file-name': selectedFiles.name } });
liEle.appendChild(ej.base.createElement('span', { className: 'file-name ', inne
rHTML: selectedFiles.name }));
liEle.appendChild(ej.base.createElement('span', { className: 'file-size ', inne
rHTML: proxy.bytesToSize(selectedFiles.size) }));
if (selectedFiles.status === proxy.localizedTexts('readyToUploadMessage')) {
progressbarContainer = ej.base.createElement('span', { className: 'progress
-bar-container' });
progressbarContainer.appendChild(ej.base.createElement('progress', { classN
ame: 'progress', attrs: { value: '0', max: '100' } }));
liEle.appendChild(progressbarContainer);
}
else {
liEle.querySelector('.file-name').classList.add('upload-fails');
}
var closeIconContainer = ej.base.createElement('span', { className: 'e-icons cl
ose-icon-container' });
ej.base.EventHandler.add(closeIconContainer, 'click', removeFiles, proxy);
1464
liEle.appendChild(closeIconContainer);
document.querySelector('.ul-element').appendChild(liEle);
proxy.fileList.push(liEle);
}
function onFileUpload(args) {
ej.base.EventHandler.remove(li.querySelector('.close-icon-container'), 'click',
removeFiles);
var progressValue = Math.round((args.e.loaded / args.e.total) * 100);
if (!isNaN(progressValue)) {
li.getElementsByTagName('progress')[0].value = progressValue; // Updating
the progress bar value
}
}
var _this = this;
var spinnerElement = document.getElementById('dropArea');
if (!ej.base.isNullOrUndefined(li.querySelector('.progress-bar-container'))) {
}
li.querySelector('.file-name').classList.add('upload-success');
li.querySelector('.close-icon-container').classList.add('delete-icon');
(li.querySelector('.close-icon-container')).onclick = function () {
generateSpinner(_this.uploadWrapper);
};
li.querySelector('.close-icon-container').onkeydown = function (e) {
}
};
}
this.fileList.splice(this.fileList.indexOf(li), 1);
this.filesData.splice(this.fileList.indexOf(li), 1);
ej.base.detach(li);
ej.popups.hideSpinner(spinnerElement);
ej.base.detach(spinnerElement.querySelector('.e-spinner-pane'));
}
moveFiles, this);
}
function generateSpinner(targetElement) {
ej.popups.createSpinner({ target: targetElement, width: '25px' });
ej.popups.showSpinner(targetElement);
}
1465
function onUploadFailed(args) {
moveFiles, this);
li.querySelector('.file-name ').classList.add('upload-fails');
}
}
function removeFiles(args) {
var status = this.filesData[this.fileList.indexOf(args.currentTarget.parentElem
ent)].status;
if (status === this.localizedTexts('uploadSuccessMessage')) {
this.remove(this.filesData[this.fileList.indexOf(args.currentTarget.parentE
lement)]);
this.filesData.splice(this.fileList.indexOf(args.currentTarget.parentElemen
t), 1);
}
else {
ej.base.detach(args.currentTarget.parentElement);
}
}
</script>
#dropArea {
min-height: 50px;
padding-top: 15px;
position: relative;
}
#drop {
padding: 3% 30% 3%;
display: inherit;
}
.droparea {
font-size: 13px;
}
font-size: 14px;
}
.control_wrapper {
1466
max-width: 400px;
margin: auto;
}
display: none;
}
.e-upload {
float: none;
border: none;
}
.ul-element {
list-style: none;
width: 100%;
padding-left: 0;
}
.file-name {
font-size: 13px;
width: 46%;
position: relative;
top: 4px;
}
font-size: 14px;
}
.file-size {
padding: 4px;
font-size: 13px;
width: 18%;
position: relative;
}
font-size: 14px;
}
.file-lists {
margin-top: 15px;
position: relative;
1467
background: #d0cdcd;
}
overflow: hidden;
}
.progress-bar-container {
display: block;
float: right;
height: 20px;
right: 13%;
top: 14px;
position: relative;
width: 20%;
}
.progress{
width: 100%;
height: 15px;
-moz-appearance: none;
}
{
cursor: pointer;
font-size: 11px;
height: 24px;
padding: 0;
position: absolute;
right: 0;
width: 24px;
top: 6px;
}
.close-icon-container::before {
left: 7px;
position: inherit;
top: 7px;
content: '\e932';
}
.delete-icon::before {
content: '\e94a';
1468
}
background-color: #d0cdcd;
border-radius: 50%;
}
}
color: #ffffff;
}
.upload-success {
color: #2bc700;
}
.upload-fails {
color: #f44336;
}
border-radius: 2px;
}
border-radius: 2px;
}
border: none;
}
border: none;
}
border-radius: 2px;
}
border-radius: 2px;
1469
}
border-radius: 2px;
top: -66px;
}
border-radius: 2px;
}
border-radius: 2px;
}
border-radius: 2px;
}
border-radius: 2px;
top: -66px;
}
border-radius: 2px;
}
1470
Localization
The Localization library allows you to localize static text content of the uploader. The static text
contains default text content of action buttons, file status, clear icon title, tooltips, and text content
of drag area. Define the locale object for a culture and assign it to L10n load method.
The following are the list of keys and its values used in the uploader component:
Key Description
Browse To customize the browse button text.
Clear To customize the clear button text.
Upload To customize the upload button text.
dropFilesHint To customize the drop area text.
uploadFailedMessage To customize the status text when the file is failed to upload.
To customize the status text when the file is uploaded

uploadSuccessMessage
successfully.
To customize the status text when the file is removed the

removedSuccessMessage
successfully from the serve.
removedFailedMessage To customize the status text while the file is failed to remove.
inProgress To customize the status text while the upload is in progress.
pauseUpload To customize the status text while the uploading is paused.
fileUploadCancel To customize the status text when uploading is cancelled.
To customize the status text when the file is selected and

readyToUploadMessage
ready to upload.
To customize the status text when the file size is greater than
invalidMaxFileSize
the maximum file size.
invalidFileType To customize the status text when the file type is invalid.
To customize the status text when the file size is less than
invalidMinFileSize
the minimum file size.
remove To customize tooltip text for remove icon.
cancel To customize tooltip text for cancel icon.
delete To customize tooltip text for delete icon.
view
localization.cs
@{
1471
tmvc.syncfusion.com/services/api/uploadbox/Remove" },
dropAreaElem = document.getElementById('droparea');
}
<ejs-uploader id="uploadFiles" asyncSettings="@asyncSettings" dropArea="@dropAreaE
lem" locale="fr-CH"></ejs-uploader>
}
<script>
L10n.load({
"fr-CH": {
"uploader": {
"invalidMinFileSize" : "La taille du fichier est trop petite! S'il vous pla
ît télécharger des fichiers avec une taille minimale de 10 Ko",
"invalidMaxFileSize" : "La taille du fichier dépasse 28 Mo",
"invalidFileType" : "Le type de fichier n'est pas autorisé",
"Browse" : "Feuilleter",
"Clear" : "Clair",
"Upload" : "Télécharger",
"dropFilesHint" : "ou Déposer des fichiers ici",
"uploadFailedMessage" : "Impossible d'importer le fichier",
"uploadSuccessMessage" : "Fichier téléchargé avec succès",
"removedSuccessMessage": "Fichier supprimé avec succès",
"removedFailedMessage": "Le fichier n'a pas pu être supprimé",
"inProgress": "Téléchargement",
"readyToUploadMessage": "Prêt à télécharger",
"remove": "Retirer",
"cancel": "Annuler",
"delete": "Supprimer le fichier"
}
}
})
</script>
using System;
using System.Linq;
{
{
1472
{
return View();
}
}
}
1473
Accessibility
The uploader component characterized with complete ARIA accessibility support that helps to be
accessible by on-screen readers and other assistive technology devices.
The following are the standard keys that works on uploader component:
Keyboard
Actions
shortcuts
Tab Moves focus to next element.
Shift + Tab Moves focus to previous element.
Enter Triggers corresponding action to the button element.
Closes the file browser dialog alone and cancels the upload on drop
Esc
the file.
view
keyboard.cs
@{
}
js-uploader>
}
using System;
using System.Linq;
{
{
1474
{
return View();
}
}
}
1475
How To
Hide default drop area

You can achieve this behavior by overriding the corresponding uploader styles. Override the
following styles to hide the default drop area behavior.
* .e-upload.e-control
* .e-upload .e-file-select
* .e-upload .e-file-drop
view
hide-drop.cs
index.css
@{
}
<ejs-uploader id="UploadFiles" dropArea=".control-fluid" asyncSettings="@asyncSettin

gs"> </ejs-uploader>
using System;
using System.Linq;
{
{
{
return View();
}
1476
}
}
#droparea {
padding: 50px 25px;
margin: 30px auto;
text-align: center;
width: 20%;
}
.e-file-select,
.e-file-drop {
display: none;
}
body .e-upload-drag-hover {
outline: 2px dashed brown;
}
#uploadfile {
width: 60%;
margin-left: 5%;
}
.e-control .e-file-select,
.e-control .e-file-drop {
display: none;
}
Preview images before uploading

The uploader component allows to create preview images before uploading. The preview images
can be created by reading the file using selected event. Also, the user can create preview images
after uploading to server using success event. Refer to the following link to learn about how to
create image preview.
Image Preview in ASP.NET CORE
Achieve invisible upload

You can achieve the invisible upload feature by using the selected event in uploader component.
Refer to the following example.
view
invisible.cs
1477
@{
}
<div id='preview'></div>
<ejs-uploader id="UploadFiles" selected="onSelect" allowedExtensions=".jpg, .j
peg,.png" asyncSettings="@asyncSettings"></ejs-uploader>
</div>
<script>
function onSelect(args) {
var liparentDiv = ej.base.createElement('div', { className: 'image-list' })
;
var liImage = ej.base.createElement('img', { className: 'image' });
liparentDiv.appendChild(liImage);
readURL(liImage, args.filesData[i]);
document.getElementById('preview').appendChild(liparentDiv);
}
args.cancel = true;
}
function readURL(liImage, file) {

var imgPreview = liImage;
var imageFile = file.rawFile;
var reader = new FileReader();
reader.addEventListener('load', () => {
imgPreview.src = reader.result;
}, false);
if (imageFile) {
reader.readAsDataURL(imageFile);
}
}
</script>
}
1478
using System;
using System.Linq;
{
{
{
return View();
}
}
}
Customize progressbar
You can customize the progress bar’s size, color, and background by overriding the styles in
uploader component. Refer to the following example.
view
progress-customize.cs
@{
}
<ejs-uploader id="UploadFiles" asyncSettings="@asyncSettings">
</ejs-uploader>
</div>
using System;
1479
using System.Linq;
{
{
{
return View();
}
}
}
Sort the selected files

You can sort the selected files in uploader component by using the selected event. Refer to the
following example.
view
sorting.cs
@{
}
<ejs-uploader id="UploadFiles" selected="onSelect" asyncSettings="@asyncSettings">
</ejs-uploader>
</div>
<script>
var initial = true
if (initial) { initial = false; return; }
1480
var oldFiles = uploadObj.getFilesData();
var filesData = args.filesData.concat(oldFiles);
var modifiedData = sortFileList(filesData);
args.modifiedFilesData = modifiedData;
}
function sortFileList(filesData) {
var files = filesData;
var fileNames = [];
for (var i = 0; i < files.length; i++) {
fileNames.push(files[i].name);
}
var sortedFileNames = fileNames.sort();
var sortedFilesData = [];
var index = 0;
for (var i = 0; i < sortedFileNames.length; i++) {
var name = sortedFileNames[i];
if (name === files[i].name) {
sortedFilesData.push(files[i]);
}
}
}
return sortedFilesData;
}
</script>
}
using System;
using System.Linq;
{
{
{
return View();
}
}
}
1481
Get the total size of selected files
You can get the total size of selected files before uploading it to the designated server. This can
be achieved by using the selected event. Refer to the following example to calculate the total file
size.
view
file-size.cs
@{
}
<ejs-uploader id="UploadFiles" selected="onSelect" asyncSettings="@asyncSettings">
</ejs-uploader>
</div>
<script>
var uploadObj = document.getElementById("UploadFiles").ej2_instances[0];
var totalSize = 0;
var file = args.filesData[i];
totalSize = totalSize + file.size;
}
var size = uploadObj.bytesToSize(totalSize);
alert("Total select file's size is " + size);
}
</script>
}
using System;
using System.Linq;
1482
{
{
{
return View();
}
}
}
Customize button with HTML element

The uploader component allows you to customize the action buttons by using buttons property.
Refer to the following example.
view
buttons.cs
@{
<ejs-uploader id="UploadFiles" autoUpload="false" asyncSettings="@asyncSettings"></ejs-
uploader>
</div>
<script>
var uploadEle = ej.base.createElement('span', { className: 'upload' });

uploadEle.innerHTML = 'Upload All';
var clearEle = ej.base.createElement('span', { className: 'remove' });
clearEle.innerHTML = 'Clear All';
window.onload = function (args) {
var uploaderObj = document.getElementById("UploadFiles").ej2_instances[0];
uploaderObj.setProperties({
1483
buttons: {
browse: 'Choose file',
clear: clearEle,
upload: uploadEle
}
})
}
</script>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
Add confirm dialog to remove the files

You can customize the uploader component using confirm dialog before removing the files. Here,
ej2 dialog is used as confirm dialog. Refer to the following example.
view
confirm-dialog.cs
index.css
@{
}
1484
<ejs-uploader id="UploadFiles" removing="onremove" asyncSettings="@asyncSettings">
</ejs-uploader>
<ejs-dialog id="dialog" target="body" visible="false" width="250px" content="Confir
m to remove the file?">
<e-dialog-buttons>
<e-dialog-dialogbutton buttonModel="ViewBag.button" click="Close"></e-dialo
g-dialogbutton>
</e-dialog-buttons>
</ejs-dialog>
</div>
<script>
var removeFile = [], dialog;
dialog = document.getElementById("dialog").ej2_instances[0];
}
function onremove(args) {
args.cancel = true;
removeFile.push(args.filesData);
dialog.show();
}
function onClick(args) {
dialog.hide();
uploadObj.remove(removeFile, false, true);
removeFile = [];
}
function Close() {
dialog.hide();
}
</script>
}
using System;
using System.Linq;
1485
{
{
{
{
content = "Ok",
isPrimary = true
};
return View();
}
}
}
.control_wrapper {
max-width: 400px;
margin: 0 auto;
}
Add additional data on upload

The uploader component allows you to add additional data on file upload, which is used to get in
the server-side. By using uploading event and its customFormData argument, you can achieve
this behavior. Refer to the following example.
view
index.css
@{
}
1486
<ejs-uploader id="fileupload" uploading ="onFileUpload" asyncSettings="@asyncSet
tings"> </ejs-uploader>
</div>
<script>
function onFileUpload(args) {
args.customFormData = [{ 'name': 'Syncfusion INC' }];
}
</script>
}
.control_wrapper {
max-width: 505px;
margin: auto;
}
Validate image/* on drop

The uploader component allows you to select all types of images using the image/ * to
allowedExtensions property. You can directly set it to accept the attribute of uploader element.
By default, it is working fine when you select a file by clicking the browse button. But, this
behavior is not supported to drag and drop the files for selection.
view
validate-image.cs
index.css
@{
}
1487
<ejs-uploader id="fileupload" autoUpload="false" allowedExtensions="image/*" sel
ected="onSelect" asyncSettings="@asyncSettings">
</ejs-uploader>
</div>
<script>
var uploadObj = document.getElementById("fileupload").ej2_instances[0];
if (event.type === 'drop') {
var allImages = ['png', 'jpg', 'jpeg', 'gif', 'tiff', 'bpg'];
var files = args.filesData;
var modifiedFiles = [];
var file = files[i];
if (allImages.indexOf(file.type) === -1) {
file.status = 'File type is not allowed';
file.statusCode = '0';
}
modifiedFiles.push(file);
}
args.modifiedFilesData = modifiedFiles.concat(uploadObj.filesData);
}
}
</script>
}
using System;
using System.Linq;
{
{
{
return View();
}
1488
}
}
.control_wrapper {
max-width: 505px;
margin: auto;
}
Determine whether uploader has file input (required

validation)
By setting required attribute to uploader input element, you can validate the file input has any
value in it. In the below sample, set required attribute to the uploader input element and
showcase the validation failure message using data-required-message attribute.
view
required.cs
@{
}
<ejs-uploader id="UploadFiles" removing="onremove" asyncSettings="@asyncSettings">
</ejs-uploader>
<ejs-dialog id="dialog" target="body" visible="false" width="250px" content="Confir
m to remove the file?">
<e-dialog-buttons>
<e-dialog-dialogbutton buttonModel="ViewBag.button" click="Close"></e-dialo
g-dialogbutton>
</e-dialog-buttons>
</ejs-dialog>
</div>
1489
<script>
var removeFile = [], dialog;
dialog = document.getElementById("dialog").ej2_instances[0];
}
function onremove(args) {
args.cancel = true;
removeFile.push(args.filesData);
dialog.show();
}
function onClick(args) {
dialog.hide();
uploadObj.remove(removeFile, false, true);
removeFile = [];
}
function Close() {
dialog.hide();
}
</script>
}
using System;
using System.Linq;
{
{
{
{
content = "Ok",
isPrimary = true
};
return View();
}
1490
}
}
Achieve file upload programmatically

You can upload a file programmatically using upload method. The selected files data, get from
getFilesData public method in uploader.
The upload method behaves differently based on its arguments.
If this method receives any files as arguments, those files only start to upload.
If it has no argument then all the selected files are will start to upload.
view
dynamic-upload.cs
index.css
@{
}

<ejs-uploader id="UploadFiles" dropArea=".control-fluid" asyncSettings="@as
yncSettings" autoUpload="false">
</ejs-uploader>
</div>
<span style=' padding-left: 40px; margin-top: 30px'>
<button id='first' class='e-btn e-control'>Upload 0th File</button>
</span>
<span style=' padding-left: 40px; margin-top: 30px'>
<button id='full' class='e-btn e-control'>Upload All Files</button>
</span>
</div>
<script>
document.getElementById('first').onclick = (args) => {
uploadObj.upload(uploadObj.getFilesData()[0]);
};
1491
document.getElementById('full').onclick = (args) => {
uploadObj.upload(uploadObj.getFilesData());
};
}
</script>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
.control_wrapper {
max-width: 500px;
margin: auto;
}
.e-upload {
width: 100%;
position: relative;
margin-top: 15px;
margin-bottom: 15px;
}
.e-upload-actions {
display: none;
}
.e-btn {
}
1492
margin: 0;
}
Check file size before uploading it

By using uploading event, you can get the file size before upload it to server. File object contains
the file size in bytes only. You can convert the size to standard formats ( KB or MB ) using
bytesToSize method.
view
check-file-size.cs
index.css
@{
}

<ejs-uploader id="UploadFiles" dropArea=".control-fluid" asyncSettings=
"@asyncSettings" autoUpload="false" uploading="onBeforeUpload">
</ejs-uploader>
</div>
</div>
<script>
function onBeforeUpload(args) {
// get the file size in bytes
var sizeInBytes = args.fileData.size;
// get the file size in standard format
alert("File size is: " + uploadObj.bytesToSize(sizeInBytes))
}
</script>
using System;
using System.Linq;
1493
{
{
{
return View();
}
}
}
.control_wrapper {
max-width: 500px;
margin: auto;
}

margin: 0;
}
Check the MIME type of file before upload it

By using uploading event, you can get the file MIME type before uploading it to server. In the
below sample, file MIME type is shown in the alert box before file start to upload.
view
mime-type.cs
index.css
@{
}

<ejs-uploader id="UploadFiles" dropArea=".control-fluid" asyncSettings=
"@asyncSettings" autoUpload="false" uploading="onBeforeUpload">
</ejs-uploader>
</div>
</div>
1494
<script>
function onBeforeUpload(args) {
// get the file MIME type
alert("File MIME type is: " + args.fileData.rawFile.type);
}
</script>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
.control_wrapper {
max-width: 500px;
margin: auto;
}

margin: 0;
}
Trigger click event of input file from external button

You can trigger the click event of input file from external button using click event of button. In
the below sample, triggered click event of input file from Essential JavaScript 2 Button .
view
external-click.cs
index.css
1495
@{
}

<div id="dropArea">
<span id="drop"> Drop image (JPG, PNG) files here or <button cl
ass='e-btn e-control' id="browse">Browse</button></span>
</div>
<ejs-uploader id="UploadFiles" dropArea="#drop" asyncSettings="@asyncSe
ttings">
</ejs-uploader>
</div>
</div>
<script>
document.getElementById('browse').onclick = () => {
document.getElementsByClassName('e-file-select-wrap')[0].querySelector(
'button').click();
};
}
</script>
using System;
using System.Linq;
{
{
{
return View();
}
}
}
1496
.control_wrapper {
max-width: 500px;
margin: auto;
}
#dropArea {
border: 1px dashed #c3c3cc;
text-align: center;
padding: 20px 0 10px;
}
display: none;
}

margin: 0;
}
Open and edit the uploaded files

The uploader component allows you to modify the file after uploading to the server, which can be
achieved using success event of the uploader.
You can retrieve the saved file path in the uploader success event and assign it to custom
attribute (data-file-name) value of the respective file list element to open the uploaded file. Click
the respective file element to create a new request along with saved file path using http header.
In the server-side, get the file path from the header and open the file using process.start
method.
view
server-side.cs
@{
}
<ejs-uploader id="UploadFiles" success="onUploadSuccess" asyncSettings="@asyncSetti
ngs">
1497
</ejs-uploader>
</div>
<script>
// fetching the generated li elements
var liElements = this.uploadWrapper.querySelectorAll('.e-upload-file-list');
for (var i = 0; i < liElements.length; i++) {
if (liElements[i].getAttribute('data-file-name') == args.file.name) {
liElements[i].addEventListener('click', () => { openFile(args, event) })
// File path have to update from server end in response status description.
liElements[i].setAttribute('file-path', args.e.target.statusText);
}
}
}
function openFile(args, e) {
if (!e.target.classList.contains('e-file-delete-btn') && !e.target.classList.contai
ns('e-file-remove-btn'))
{
var ajax = new XMLHttpRequest();
// create new request for open the selected file
ajax.open("POST", '/Home/openFile');
var liElements = document.getElementsByClassName('e-upload')[0].querySelectorAl
l('.e-upload-file-list');
for (var i = 0; i < liElements.length; i++) {
if (liElements[i].getAttribute('data-file-name') == args.file.name) {
// Added the file path in header to get it in server side.
ajax.setRequestHeader('filePath', liElements[i].getAttribute('file-path').t
oString());
}
}
ajax.send();
}
}
</script>
}
using System;
using System.Linq;
1498
{
{
{
return View();
}
public void Save() {
if (!System.IO.File.Exists(fileSavePath))
{
HttpResponse Response = System.Web.HttpContext.Current.Response;
Response.Clear();

Response.StatusDescription = fileSavePath;
Response.End();
}
}
public void openFile()
{
// Check whether the file is available in the corresponding location
if (System.IO.File.Exists(Request.Headers.GetValues("filePath").First()))
{
// This will open the selected file from server location in desktop
Process.Start(Request.Headers.GetValues("filePath").First());
}
}
}
}
1499

Ej2 Aspnetcore Docs

Uploaded by

Copyright:

Available Formats

You might also like

Ej2 Aspnetcore Docs

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ej2 Aspnetcore Docs

Uploaded by

Copyright:

Available Formats

Table of Contents

How to best read this user guide

Installing Essential JS 2 for ASP.NET Core

Install Location and Samples

(installed location)\Syncfusion\Essential Studio\16.1.0.24\

(installed location)\Syncfusion\Essential Studio\16.1.0.24\Infrastructure\Dashboard\4.0

Essential JS 2 for ASP.NET Core

Integrated Development Environment

Visual Studio 2017

Framework & SDK

.NET Core 2.0

Essential JS 2 for ASP.NET MVC

Integrated Development Environment (IDE)

Visual Studio 2015

Frameworks & SDK

.Net Framework 4.5 or above.

Visual Studio 2017

Setup ASP.NET Core application with Essential JS 2 for

Open the NuGet Package Manager.

Install the Syncfusion.EJ2 package to the application

Step 3: Open the Views/_ViewImports.cshtml to import Syncfusion.EJ2 package.

@* Syncfusion Essential JS 2 Scripts *@

Step 5: Adding Script Manager in layout page Views/Shared/_Layout.cshtml. The Script

For Example, We have added the Calendar component in Views/Home/Index.cshtml page.

Output be like the below.

Get the Syncfusion NuGet feed URL

1. Navigate to nuget.syncfusion.com , and select WEB tab.

Add the Syncfusion NuGet feed URL

2. On the Tools menu, select Options.

3. Expand the NuGet Package Manager and select Package Sources.

Location: Enter the following URL – http://nuget.syncfusion.com/nuget_aspnetcore-

5. Now, click Add Source and then click OK.

Installing NuGet Packages

Using NuGet Package Manager

Using Package Manager Console

2. Run the following NuGet installation commands:

#install specified package in default project

#install specified package in default project with specified package source

#install specified package in specified project

#install specified package in default project

#install specified package in default project with specified Package Source

#install specified package in specified project

Using Visual Studio for macOS

Managing NuGet package using NuGet CLI

Configure NuGet feed URL

nuget update -self

#Add specified package source in NuGet.config file for Windows platform

#Add specified Package Source in Nuget.config file for MAC/Linux platform

#For Windows platform

#For MAC/Linux platform

#install specific package for Windows

#install all package which mention in package.config path for Windows

#install specific package for Mac and Linux

Managing NuGet package using Dotnet CLI

#Add specified package in specified project from Package Source

dotnet add package Syncfusion.EJ2 -s “http://nuget.syncfusion.com/nuget_aspnetcor

#Restore all package which specified in project

To know more command about the dotnet CLI, refer here.