| name | syncfusion-aspnetcore-inputs |
| description | Complete guide to implementing Syncfusion Inputs components in ASP.NET Core applications. Use this when working with file uploads, numeric input, text fields, OTP verification, range sliders, signature pads, file validation, drag-and-drop, or enterprise-grade input handling for professional web forms. |
| metadata | {"author":"Syncfusion Inc","version":"34.1.29","category":"Inputs"} |
Implementing Syncfusion ASP.NET Core Inputs
Uploader
The Uploader is an advanced file upload control that allows users to upload files asynchronously with features like chunk upload, drag-and-drop, validation, progress tracking, and previews. Supports multiple files, templates, security validation, and form integration.
Navigation Guide
Getting Started
๐ Read: references/uploader-getting-started.md
- NuGet package installation and setup
- Tag helper registration and script/style references
- Basic Uploader rendering with
<ejs-uploader>
- Auto-upload vs manual upload
- SaveUrl/RemoveUrl configuration
- Multiple file selection
Async Upload
๐ Read: references/uploader-async-upload.md
<e-uploader-asyncsettings> sub-tag with SaveUrl/RemoveUrl- Sequential vs simultaneous upload
- Progress tracking with
progress event
- Success/failure event handling
- Controller endpoint patterns
Chunk Upload
๐ Read: references/uploader-chunk-upload.md
- Enabling chunk upload with
chunkSize
- Retry logic with
retryCount and retryAfterDelay
- Pause/resume operations
- Large file handling
- Server-side chunk processing
File Validation
๐ Read: references/uploader-file-validation.md
allowedExtensions for file type restrictionsminFileSize and maxFileSize for size limits- File count restrictions
- Duplicate file detection
- Custom validation via
selected event
Drag-Drop Support
๐ Read: references/uploader-drag-drop-support.md
- Default drag-drop area
- Custom drop areas with
dropArea selector
- Paste-upload functionality
- Directory/folder upload with
directoryUpload
- Drag enter/leave events
Templates and Styling
๐ Read: references/uploader-templates-and-styling.md
- Custom file list templates
- Button customization
- Progress bar styling
- CSS classes (e-primary, e-success, etc.)
- Theme support (Fluent, Material, Bootstrap)
Advanced Patterns
๐ Read: references/uploader-advanced-patterns.md
- Form submission with uploaded files
- Directory upload
- Security considerations (path traversal, MIME validation)
- File previews (images)
- Error handling patterns
API Reference
๐ Read: references/uploader-api.md
- All properties with types, defaults, and descriptions
- All events (selected, uploading, success, failure, progress, etc.)
- AsyncSettings sub-properties
- CSS class reference table
- Complete tag helper attribute syntax
Quick Start
1. Install NuGet package:
Install-Package Syncfusion.EJ2.AspNet.Core
2. Register Tag Helper in ~/Pages/_ViewImports.cshtml:
@addTagHelper *, Syncfusion.EJ2
3. Add CSS and script in ~/Pages/Shared/_Layout.cshtml:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. Add Script Manager at end of <body>:
<ejs-scripts></ejs-scripts>
5. Render the Uploader:
<ejs-uploader id="uploader" autoUpload="true">
<e-uploader-asyncsettings saveUrl="Home/Save" removeUrl="Home/Remove">
</e-uploader-asyncsettings>
</ejs-uploader>
Common Patterns
Async Upload with SaveUrl/RemoveUrl
<ejs-uploader id="uploader" autoUpload="true" multiple="true">
<e-uploader-asyncsettings saveUrl="Home/Save" removeUrl="Home/Remove">
</e-uploader-asyncsettings>
</ejs-uploader>
Chunk Upload
<ejs-uploader id="chunkUploader" autoUpload="true">
<e-uploader-asyncsettings saveUrl="Home/SaveChunk"
removeUrl="Home/Remove"
chunkSize="1048576">
</e-uploader-asyncsettings>
</ejs-uploader>
File Validation
<ejs-uploader id="validatedUploader"
allowedExtensions=".jpg,.png,.pdf"
maxFileSize="5242880"
minFileSize="1024"
multiple="false">
<e-uploader-asyncsettings saveUrl="Home/Save" removeUrl="Home/Remove">
</e-uploader-asyncsettings>
</ejs-uploader>
Drag-Drop with Custom Area
<div id="dropArea" style="border: 2px dashed #ccc; padding: 20px;">
Drop files here
</div>
<ejs-uploader id="uploader" dropArea="#dropArea" autoUpload="true">
<e-uploader-asyncsettings saveUrl="Home/Save" removeUrl="Home/Remove">
</e-uploader-asyncsettings>
</ejs-uploader>
NumericTextBox
The NumericTextBox is a text input control that allows users to enter numeric values with support for formatting, validation, spin buttons, decimal precision, and globalization. It also provides two-way binding with ASP.NET Core models.
Navigation Guide
Getting Started
๐ Read: references/numeric-textbox-getting-started.md
- NuGet package installation and setup
- Tag helper registration and script/style references
- Basic NumericTextBox rendering with
<ejs-numerictextbox>
- Setting value, min, and max
- NumericTextBoxFor model binding
Formats and Validation
๐ Read: references/numeric-textbox-formats-and-validation.md
- Currency (
c2), percentage (p2), decimal formats
- Min/max range validation
strictMode for clamping out-of-range values- Custom format strings
validateOnType for real-time validation
Adornments and Styling
๐ Read: references/numeric-textbox-adornments-and-styling.md
- Prepend/append adornments with templates
- Currency symbols, percentage icons
- Size classes (e-small, e-bigger)
- CSS customization and themes
Spin Buttons and Step
๐ Read: references/numeric-textbox-spin-buttons-and-step.md
- Show/hide spin buttons with
showSpinButton
- Step values for increment/decrement
- Keyboard navigation (up/down arrows)
- Custom step patterns
Precision and Decimals
๐ Read: references/numeric-textbox-precision-decimals.md
- Decimal precision with
decimals property
validateDecimalOnType for real-time decimal validationstrictMode behavior- Currency and percentage precision
Two-Way Binding and Forms
๐ Read: references/numeric-textbox-two-way-binding-forms.md
NumericTextBoxFor model binding- Form submission with POST
- Server-side validation
- Tag helper integration with HTML forms
Globalization and Accessibility
๐ Read: references/numeric-textbox-globalization-accessibility.md
locale property for culture setting- CLDR data loading for non-English cultures
enableRtl for Arabic, Hebrew- WCAG 2.2 compliance and ARIA attributes
- Keyboard navigation and screen reader support
API Reference
๐ Read: references/numeric-textbox-api.md
- All properties with types, defaults, and descriptions
- All events (change, input, focus, blur, created, destroyed)
- CSS class reference table
- Enum values (FloatLabelType, etc.)
- Complete tag helper attribute syntax
Quick Start
1. Install NuGet package:
Install-Package Syncfusion.EJ2.AspNet.Core
2. Register Tag Helper in ~/Pages/_ViewImports.cshtml:
@addTagHelper *, Syncfusion.EJ2
3. Add CSS and script in ~/Pages/Shared/_Layout.cshtml:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. Add Script Manager at end of <body>:
<ejs-scripts></ejs-scripts>
5. Render the NumericTextBox:
<ejs-numerictextbox id="price" min="0" max="10000" value="100"
format="c2" placeholder="Enter price">
</ejs-numerictextbox>
Common Patterns
Currency Format
<ejs-numerictextbox id="amount" format="c2" min="0" value="100">
</ejs-numerictextbox>
Percentage with Step
<ejs-numerictextbox id="percentage" format="p2" min="0" max="100"
step="5" showSpinButton="true">
</ejs-numerictextbox>
NumericTextBoxFor (Model Binding)
@model AppModel
<ejs-numerictextboxfor id="quantity" for="@Model.Quantity">
</ejs-numerictextboxfor>
With Validation
<ejs-numerictextbox id="age" min="18" max="100" strictMode="true"
validateOnType="true" placeholder="Enter age">
</ejs-numerictextbox>
OTP Input
The OTP Input (One-Time Password) is a specialized input control for entering verification codes, OTPs, PINs, or any fixed-length alphanumeric sequence. Supports multiple input types (number, text, password), styling modes, and accessibility.
Navigation Guide
Getting Started
๐ Read: references/otp-input-getting-started.md
- NuGet package installation and setup
- Tag helper registration and script/style references
- Basic OTP rendering with
<ejs-otpinput>
- Setting length and type
- ValueChanged event for verification
Configuration
๐ Read: references/otp-input-configuration.md
- Input types: number, text, password
- Styling modes: Outlined, Filled, Underlined
- Placeholder text (single or per-field)
- Separator character between fields
- Disabled state and CSS classes
Events
๐ Read: references/otp-input-events.md
- Created, Input, ValueChanged, Focus, Blur events
- Real-time feedback patterns
- Auto-submit on completion
- Timeout handling
- Validation feedback
Accessibility
๐ Read: references/otp-input-accessibility.md
- WCAG 2.2 AA compliance
- WAI-ARIA attributes (role, aria-label, aria-required)
- Full keyboard interaction table
- Screen reader support
- RTL support for Arabic, Hebrew
API Reference
๐ Read: references/otp-input-api.md
- All properties (length, type, stylingMode, separator, etc.)
- All events with descriptions
- CSS class reference
- Complete tag helper attribute syntax
Quick Start
1. Install NuGet package:
Install-Package Syncfusion.EJ2.AspNet.Core
2. Register Tag Helper in ~/Pages/_ViewImports.cshtml:
@addTagHelper *, Syncfusion.EJ2
3. Add CSS and script in ~/Pages/Shared/_Layout.cshtml:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. Add Script Manager at end of <body>:
<ejs-scripts></ejs-scripts>
5. Render the OTP Input:
<ejs-otpinput id="otp" length="6" type="number"
placeholder="0" valueChanged="onOtpComplete">
</ejs-otpinput>
Common Patterns
6-Digit Numeric OTP
<ejs-otpinput id="otp" length="6" type="number"
placeholder="0" autoFocus="true">
</ejs-otpinput>
Alphanumeric OTP with Separator
<ejs-otpinput id="otp" length="6" type="text"
separator="-" stylingMode="filled">
</ejs-otpinput>
Password-Type OTP (Hidden)
<ejs-otpinput id="otp" length="4" type="password">
</ejs-otpinput>
TextArea
The TextArea is a multi-line text input control with support for floating labels, adornments, character limits, resize modes, validation, form integration, and accessibility. It also supports methods for programmatic value management.
Navigation Guide
Getting Started
๐ Read: references/textarea-getting-started.md
- NuGet package installation and setup
- Tag helper registration and script/style references
- Basic TextArea rendering with
<ejs-textarea>
- Setting rows, columns, value
- TextAreaFor model binding
Floating Label
๐ Read: references/textarea-floating-label.md
floatLabelType modes: Auto, Always, Never- Material-style floating label
- When to use each mode
Adornments
๐ Read: references/textarea-adornments.md
- Prepend/append template adornments
adornmentFlow for icon positioning- Currency symbols, character counters
- Interactive adornment elements
Resize
๐ Read: references/textarea-resize.md
- Resize modes: Both, Vertical, Horizontal, None
cssClass for additional styling- Disabling resize
- Auto-resize patterns
Max Length
๐ Read: references/textarea-max-length.md
maxLength property for character limits- Real-time character counter
- User feedback patterns
- Server-side validation
Rows, Columns, and Sizing
๐ Read: references/textarea-rows-columns-sizing.md
rows and cols properties- Width and height customization
- CSS-based sizing
- Responsive behavior
Form Support
๐ Read: references/textarea-form-support.md
- HTML form integration
- FormValidator for client-side validation
- Form submission with POST
- Model binding with TextAreaFor
Styling and Appearance
๐ Read: references/textarea-styling-appearance.md
- Size classes (e-small, e-bigger)
- Filled vs outlined modes
- CSS customization and themes
- Validation states (e-success, e-error, e-warning)
Value and Content
๐ Read: references/textarea-value-and-content.md
- Setting/getting values programmatically
- Data loading from server
- Default values and placeholders
- JavaScript interop
Methods
๐ Read: references/textarea-methods.md
focusIn() and focusOut() methodsgetPersistData() for state persistencereset() for clearing valueaddAttributes() and removeAttributes()
Events
๐ Read: references/textarea-events.md
- Created, Input, Change, Focus, Blur, Destroyed events
- Event arguments and usage patterns
- Real-world scenarios (character counter, auto-save, validation)
Accessibility
๐ Read: references/textarea-accessibility.md
- WCAG 2.2 AA compliance
- WAI-ARIA attributes
- Full keyboard interaction table
- Screen reader support and RTL
API Reference
๐ Read: references/textarea-api.md
- All properties with types, defaults, and descriptions
- All events (Created, Input, Change, Focus, Blur, Destroyed)
- CSS class reference table
- Enum values (FloatLabelType, ResizeMode, etc.)
- Complete tag helper attribute syntax
Quick Start
1. Install NuGet package:
Install-Package Syncfusion.EJ2.AspNet.Core
2. Register Tag Helper in ~/Pages/_ViewImports.cshtml:
@addTagHelper *, Syncfusion.EJ2
3. Add CSS and script in ~/Pages/Shared/_Layout.cshtml:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. Add Script Manager at end of <body>:
<ejs-scripts></ejs-scripts>
5. Render the TextArea:
<ejs-textarea id="comment" rows="4" cols="50"
placeholder="Enter your comment..." maxLength="500">
</ejs-textarea>
Common Patterns
Basic Multi-line Input
<ejs-textarea id="description" rows="5" cols="60"
placeholder="Enter description">
</ejs-textarea>
Floating Label
<ejs-textarea id="notes" rows="4"
floatLabelType="Auto"
placeholder="Notes">
</ejs-textarea>
With Max Length
<ejs-textarea id="feedback" rows="4" maxLength="500"
placeholder="Your feedback">
</ejs-textarea>
Resizable Both Directions
<ejs-textarea id="content" rows="6"
cssClass="e-resize-both">
</ejs-textarea>
TextBox
The TextBox is a single-line text input control that supports multiple input types (text, password, email, number, etc.), floating labels, adornments, validation states, icon buttons, clear functionality, and multiline mode. It also provides comprehensive accessibility and styling options.
Navigation Guide
Getting Started
๐ Read: references/textbox-getting-started.md
- NuGet package installation and setup
- Tag helper registration and script/style references
- Basic TextBox rendering with
<ejs-textbox>
- Input types (text, email, password, number, tel, url, search)
- TextBoxFor model binding
Styling and Sizing
๐ Read: references/textbox-styling-and-sizing.md
- Predefined size classes (e-small, e-bigger)
- Rounded corners
- CSS customization and themes
- Filled vs outlined modes
Features and Groups
๐ Read: references/textbox-features-and-groups.md
- Floating labels (Auto, Always, Never)
- Prefix and suffix icons
- Clear button with
showClearButton
- Group templates for combined inputs
- Add-on icons
Advanced Features
๐ Read: references/textbox-advanced-features.md
- Prepend/append adornments
- Interactive elements within TextBox
- HTML5 input types (date, time, color, range)
- Input event handling
Multiline and Expansion
๐ Read: references/textbox-multiline-and-expansion.md
- Creating multiline TextBox
- Auto-expansion behavior
- Floating label in multiline mode
- Resize patterns
Validation and States
๐ Read: references/textbox-validation-and-states.md
- Valid/invalid CSS classes (e-success, e-error, e-warning)
- Disabled and readonly states
- HTML5 validation integration
- FormValidator integration
Accessibility and Migration
๐ Read: references/textbox-accessibility-and-migration.md
- WCAG 2.2 AA compliance
- WAI-ARIA attributes
- Full keyboard interaction table
- Screen reader support and RTL
- Migration guide from ASP.NET Web Forms
API Reference
๐ Read: references/textbox-api.md
- All properties with types, defaults, and descriptions
- All events (input, change, focus, blur, created, destroyed)
- CSS class reference table
- Enum values (InputType, FloatLabelType)
- Complete tag helper attribute syntax
Quick Start
1. Install NuGet package:
Install-Package Syncfusion.EJ2.AspNet.Core
2. Register Tag Helper in ~/Pages/_ViewImports.cshtml:
@addTagHelper *, Syncfusion.EJ2
3. Add CSS and script in ~/Pages/Shared/_Layout.cshtml:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. Add Script Manager at end of <body>:
<ejs-scripts></ejs-scripts>
5. Render the TextBox:
<ejs-textbox id="email" placeholder="Enter email"
floatLabelType="Auto" type="email">
</ejs-textbox>
Common Patterns
Email with Floating Label
<ejs-textbox id="email" type="email"
floatLabelType="Auto"
placeholder="Email Address">
</ejs-textbox>
Password with Visibility Toggle
<ejs-textbox id="password" type="password"
showClearButton="true"
placeholder="Password">
</ejs-textbox>
With Icon Adornments
<ejs-textbox id="search" placeholder="Search..."
prefixIcon="e-search">
</ejs-textbox>
TextBoxFor (Model Binding)
@model AppModel
<ejs-textboxfor id="username" for="@Model.Username"
placeholder="Username">
</ejs-textboxfor>
Range Slider
The Range Slider (<ejs-slider>) is a versatile input control that allows users to select a single value or a range of values. It supports horizontal/vertical orientation, ticks, tooltips, formatting, custom limits, and color ranges.
Navigation Guide
Getting Started
๐ Read: references/range-slider-getting-started.md
- NuGet package installation and setup
- Tag helper registration and script/style references
- Basic Slider rendering with
<ejs-slider>
- Setting value, min, max
- Registering Syncfusion Script Manager
Types and Orientation
๐ Read: references/range-slider-types-and-orientation.md
- Slider types: Default, MinRange, Range
- Horizontal vs vertical orientation
- Single value vs range value selection
- Visual differences and use cases
Tooltips and Ticks
๐ Read: references/range-slider-tooltips-and-ticks.md
- Tooltip display and placement (Before, After)
- Custom tooltip formatting
- Tick marks with
showTicks
- Tick positioning and labels
- Small and large step ticks
Formatting and Limits
๐ Read: references/range-slider-formatting-and-limits.md
- Custom value formats (currency, percentage)
- Min/max limits
- Step values
- Dynamic range updates
Events and Methods
๐ Read: references/range-slider-events-and-methods.md
- Change, Input, slideStart, slideEnd events
- getValue, setValue, refresh methods
- Programmatic value management
- Event flow and patterns
Styling
๐ Read: references/range-slider-styling.md
- CSS customization for track and thumb
- Color ranges (e-primary, e-success, e-warning, e-danger)
- Gradient tracks
- Theme support
Accessibility
๐ Read: references/range-slider-accessibility.md
- WCAG 2.2 AA compliance
- WAI-ARIA attributes (aria-valuemin, aria-valuemax, aria-valuenow)
- Full keyboard interaction table
- Screen reader support and RTL
API Reference
๐ Read: references/range-slider-api.md
- All properties with types, defaults, and descriptions
- All events (Change, Input, SlideStart, SlideEnd, Created, Destroyed)
- All methods (getValue, setValue, refresh, destroy)
- CSS class reference table
- Complete tag helper attribute syntax
Quick Start
1. Install NuGet package:
Install-Package Syncfusion.EJ2.AspNet.Core
2. Register Tag Helper in ~/Pages/_ViewImports.cshtml:
@addTagHelper *, Syncfusion.EJ2
3. Add CSS and script in ~/Pages/Shared/_Layout.cshtml:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. Add Script Manager at end of <body>:
<ejs-scripts></ejs-scripts>
5. Render the Range Slider:
<ejs-slider id="volume" min="0" max="100" value="30" type="MinRange">
</ejs-slider>
Common Patterns
Default Single-Value Slider
<ejs-slider id="default" value="30"></ejs-slider>
MinRange Slider with Tooltip
<ejs-slider id="minrange" value="30" type="MinRange"
showButtons="true">
</ejs-slider>
Range Slider (Two Handles)
<ejs-slider id="range" value="@ViewBag.range" type="Range">
</ejs-slider>
Vertical Orientation
<div style="height: 300px;">
<ejs-slider id="vertical" value="50" orientation="Vertical">
</ejs-slider>
</div>
With Ticks and Tooltips
<ejs-slider id="tickSlider" min="0" max="100" value="40"
showTicks="true" tooltipPlacement="Before">
</ejs-slider>
Signature
The Signature is a digital signature capture control that allows users to draw signatures on a canvas using mouse, touch, or pen input. It supports stroke customization, undo/redo, clear, save (base64, blob, image), load existing signatures, disabled/read-only states, and toolbar integration.
Navigation Guide
Getting Started
๐ Read: references/signature-getting-started.md
- NuGet package installation and setup
- Tag helper registration and script/style references
- Basic Signature rendering with
<ejs-signature>
- Canvas dimensions and styling
- Capturing signature as data URL
Customization
๐ Read: references/signature-customization.md
strokeColor for line colormaxStrokeWidth and minStrokeWidth for thicknessvelocity for pressure-sensitive widthbackgroundColor and backgroundImagesaveWithBackground for including background
User Interaction
๐ Read: references/signature-user-interaction.md
- Undo and Redo operations
- Clear canvas
- Disabled and ReadOnly states
- isEmpty and canUndo/canRedo checks
- Complete button integration example
Open and Save
๐ Read: references/signature-open-save.md
getSignature() for base64 PNGsaveAsBlob() for Blob objectgetBlob() for raw datasave() for downloadingload() for restoring signatures
Toolbar Integration
๐ Read: references/signature-toolbar-integration.md
- Syncfusion Toolbar with undo/redo/clear/save
- Button state management (canUndo, canRedo, isEmpty)
- Custom toolbar layouts
- Real-time event handling
Accessibility
๐ Read: references/signature-accessibility.md
- WCAG 2.2 AA compliance
- WAI-ARIA attributes
- Keyboard shortcuts (Ctrl+Z, Ctrl+Y, Ctrl+S, Delete)
- Screen reader support and RTL
API Reference
๐ Read: references/signature-api.md
- All properties (strokeColor, maxStrokeWidth, backgroundColor, etc.)
- All methods (undo, redo, clear, save, load, getSignature, saveAsBlob)
- All events (change, created, destroyed)
- CSS class reference table
- Complete tag helper attribute syntax
Quick Start
1. Install NuGet package:
Install-Package Syncfusion.EJ2.AspNet.Core
2. Register Tag Helper in ~/Pages/_ViewImports.cshtml:
@addTagHelper *, Syncfusion.EJ2
3. Add CSS and script in ~/Pages/Shared/_Layout.cshtml:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. Add Script Manager at end of <body>:
<ejs-scripts></ejs-scripts>
5. Render the Signature:
<div class="wrap">
<ejs-signature id="signature" strokeColor="#000000"
maxStrokeWidth="2">
</ejs-signature>
</div>
<style>
.wrap { margin: 0 auto; width: 300px; text-align: center; }
#signature { border: 1px solid lightgray; height: 100%; width: 100%; }
</style>
Common Patterns
With Undo/Redo/Clear Buttons
<div class="wrap">
<ejs-button id="undoBtn" content="Undo" disabled="true"></ejs-button>
<ejs-button id="redoBtn" content="Redo" disabled="true"></ejs-button>
<ejs-button id="clearBtn" content="Clear" disabled="true"></ejs-button>
<ejs-signature id="signature" change="change"></ejs-signature>
</div>
<script>
var signature = document.getElementById("signature").ej2_instances[0];
document.getElementById("undoBtn").addEventListener('click', function () {
if (!signature.isReadOnly && !signature.disabled) signature.undo();
});
document.getElementById("redoBtn").addEventListener('click', function () {
if (!signature.isReadOnly && !signature.disabled) signature.redo();
});
document.getElementById("clearBtn").addEventListener('click', function () {
if (!signature.isReadOnly && !signature.disabled) signature.clear();
});
function change() {
document.getElementById("undoBtn").ej2_instances[0].disabled = !signature.canUndo();
document.getElementById("redoBtn").ej2_instances[0].disabled = !signature.canRedo();
document.getElementById("clearBtn").ej2_instances[0].disabled = signature.isEmpty();
}
</script>
Save as Base64
<ejs-signature id="signature"></ejs-signature>
<ejs-button id="saveBtn" content="Save"></ejs-button>
<script>
document.getElementById("saveBtn").addEventListener('click', function () {
var sig = document.getElementById("signature").ej2_instances[0];
var imageData = sig.getSignature();
console.log('Base64:', imageData);
});
</script>
Custom Stroke Settings
<ejs-signature id="signature"
strokeColor="#0066cc"
maxStrokeWidth="3"
minStrokeWidth="1"
velocity="0.5">
</ejs-signature>
