Essential Studio for Blazor Release Notes (Beta)

v17.1.32

March 13, 2019

Accordion

Accordion is a vertically collapsible content panel which is displaying panels, one or multiple at a time within the available space.

Rendering - Supports to render based on the items collection and HTML elements.
Expand Mode - Supports to define single or multiple expand mode for Accordion panels.
Animation - Supports animation effects for expanding/collapsing the panels.
Accessibility - Provided with built-in accessibility support which helps to access all the Accordion component features through the keyboard, screen readers, or other assistive technology devices.

Accumulation Chart

A pie chart is a circular graphics, which can be divided into multiple segments to illustrate the numerical proportions. All elements are rendered using the Scalable Vector Graphics (SVG).

Supports local binding and remote data source.
Supports arranging the labels smartly without overlapping.
Supports interactive features such as tooltip, explode, and selection.
Supports club points to group the values of particular category.

AutoComplete

AutoComplete component provides the matched suggestion list when type into the input, from which the user can select one. The available key features are

Data binding - Allows binding and accessing the list of items from local or server-side data source.
Grouping - Supports grouping of logically related items under a single or specific category.
Sorting - Supports sorting of list items in an alphabetical order (either ascending or descending).
Highlight search - Supports highlighting the typed text in the suggestion list.
Templates - Allows customizing the list item, header, footer, category group header, no records and action failure content.
Accessibility - Provided with built-in accessibility support that helps to access all the AutoComplete component features through keyboard, on-screen readers, or other assistive technology devices.

Avatar

Avatars are icons or figures representing a particular person, used in popular media formats like images, SVG, font icons, and letters.

Types - Provided 2 types of Avatar.
Sizes - Supports different sizes to adapt the various application scenario.

Badges

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’.

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.

Button

Button is a graphical user interface element that triggers an event on its click action.

Types - Provided with different types of Button.
Predefined Styles - Provided with predefined styles of Button.
Sizes - Provided with different sizes of Button.
Icons - Supports text and icon on the Button.

Button Group

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.

Calendar

Calendar interface for selecting dates with options for disabling dates, restricting selection and showing custom events.

Range Restriction - Allows to select a date within a specified date range.
Start and Depth View - Allows to change the initial view and navigation depth of the Calendar.
Customization - Allows to customize the each day cell of the calendar.
Accessibility - Provided with built-in accessibility support which helps to access all the Calendar component features through the keyboard, screen readers, or other assistive technology devices.

Card

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.

Header: Header supports to include title, subtitle along with image.
Images and Title: Support to include images with customizable caption positions in it.
Action Buttons: Supports to add buttons within the card either in vertical or horizontal alignment.
Horizontal Card: Allows to align card elements horizontally and also allows to stack the content vertically within horizontal alignment.

Chart

Chart component is used to visualize the data with user interactivity and provides customization
options to configure the data visually. All chart elements are rendered by using Scalable Vector
Graphics (SVG).

Series - Chart can plot over 28 chart types that are ranging from line charts to specialized financial charts
Data Binding - Binds the data with local and remote data source.
Data Labels and Markers - Supports data label and marker to annotate and enhance a data.
Error Bar - Supports error bar to plot possible errors in data points.
Axis Types - Supports four different types of axes, namely Numerical, Categorical, Datetime, and Logarithmic.
Axis Feature - Supports multiple axes, inverted axis, multiple panes, opposed position,stripline, and smart labels.
Legend - Supports legend to provide additional information about a series with paging and customization options.
Technical Indicators - Support for RSI, Momentum, Bollinger band, accumulation distribution,EMA, SMA, stochastic, ATR, MACD, and TMA indicators.
Trendlines - Supports linear, exponential, logarithmic, power, polynomial, and moving average trendlines.
Animation - Chart series will be animated when rendering and refreshing the chart widget.
User Interaction - Supports interactive features that are zooming, panning, crosshair, trackball, tooltip, and data point selection.
Annotation - Supports annotation to mark a specific area in chart.
Export - Supports to print the chart directly from the browser and exports the chart in both JPEG and PNG format.

CheckBox

CheckBox is a graphical user interface element that allows to select one or more options from the choices.

States - Provided with different states of CheckBox.
Label - Supports label and its positioning.
Sizes - Provided with different sizes of CheckBox.

Chips

The chip is a small block of essential information that triggers an event on click action. It contains the text, image, or both and mostly used in contacts, mails, or filter tags.

CircularGauge

Circular Gauge component is ideal to visualize numeric values over a circular scale. The elements
of the gauge that are pointer, pointer cap, axis, ticks, labels, and annotation can be easily
customized.

Ranges - Supports for highlighting the range values in the gauge scale.
Axis - Supports to render multiple axis in the gauge.
Pointers - Supports to add multiple pointers to the gauge (RangeBar, Needle, Marker, and Image).
Annotation - Supports to add custom elements to the gauge by using annotation.
Animation - Supports animation for the pointer.
Custom Label - Supports the addition of custom label text in the required location of the gauge.
User Interaction - Supports interactive features like tooltip and pointer drag and drop.

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.

ComboBox

ComboBox component allows the user to type a value or choose an option from the list of predefined options. When an arrow icon accompanied with this component is pressed, the dropdown displays a list of values, from which the user can select one. The available key features are

Data binding - Allows binding and accessing the list of items from local or server-side data source.
Custom values - Allows setting user-defined values that is not in the popup list.
Grouping - Supports grouping of logically related items under a single or specific category.
Sorting - Supports sorting of list items in an alphabetical order (either ascending or descending).
Filtering - Allows filtering of list items based on a character typed in the component.
Templates - Allows customizing the list items, selected value, header, footer, category group header, and no records content.
Accessibility - Provided with built-in accessibility support that helps to access all the ComboBox component features through the keyboard, screen readers, or other assistive technology devices.

ContextMenu

ContextMenu is a graphical user interface that appears on the user right click/touch hold action.

Separator - Supports menu items grouping by using the Separator.
Icons and Navigations - Supports items to have Icons and Navigation URL’s.
Template and Multilevel Nesting - Supports template and multilevel nesting in ContextMenu.
Accessibility - Provided with built-in accessibility support that helps to access all the ContextMenu component features through the keyboard, screen readers, or other assistive technology devices.

DataGrid

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.

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.
Localization: Provides an inherent support to localize the UI.

DataManager

DataManager communicates with data source and returns the desired result based on the Query provided.

Query – DataManager have APIs for generating JavaScript data query with ease.
CRUD in individual requests and Batch – CRUD operations are fully supported.
The options are enabled to commit the data as a single or multiple requests.
Adaptors – Adaptors are specific dataSource type interfaces that are used by
DataManager to communicate with DataSource.
DataManager have three in-built adaptors. They are, ODataAdaptor, JsonAdaptor and UrlAdaptor.
Calculates and maintains aggregates, sorting order and paging.

DatePicker

DatePicker component for selecting or entering a date with options for disabling dates,
restricting selection and showing custom events.

Range Restriction - Allows to select a date within a specified date range.
Format - Formatting the value displayed in a textbox.
Start and Depth View - Allows to change the initial view and navigation depth of the Calendar.
Customization - Allows to customize the each day cell of the calendar.
StrictMode - Allows to entering the only valid date in a textbox.
Accessibility - Provided with built-in accessibility support which helps to access all the DatePicker component features through the keyboard, screen readers, or other assistive technology devices.

DateRangePicker

DateRangePicker component that allows user to select the date range from the calendar
or entering the range through the input element.

Presets - Allows to define the customized predefined set of ranges.
Day Span - Select the data span between the ranges to avoid excess or less date selection.
Range Restriction - Control the date range selection within a specified range.
Format - Formatting the value displayed in a textbox.
Customization - Allows to customize the each day cell of the calendar.
StrictMode - Allows to entering the only valid date in a textbox.
Accessibility - Provided with built-in accessibility support which helps to access all the DateRangePicker component features through the keyboard, screen readers, or other assistive technology devices.

DateTimePicker

The DateTimePicker is a graphical user interface component that allows to select a date and time value.

Getting Started
Globalization
Strict Mode
DateTime Range
Customization
Accessibility

Diagram

The Diagram control creates rich Visio like applications. Its Framework comprises of many Elements that helps you to create an application easily. The rich feature set of the Diagram control includes Snapping, Guidelines, Grid lines, Serialization and Zooming. All diagram elements are rendered using Scalable Vector Graphics (SVG).

Node, Connector, Group, Port, Label: Element used to compose diagram.
Symbol Palette: It holds a list of symbols that is dropped over diagram.
Clipboard Commands: Performs Cut, Copy and Paste operations.
Undo/Redo: Performs correction in recent change.
Serialization: Save current state of Diagram, and load them back when needed.
Snapping: Snap the diagram elements towards the nearest elements.
Gridlines: Visual horizontal/vertical lines that helps to align elements on diagram.

Dialog

Dialog is a window that displays information to the user, and used to get the user input. The available key features are

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.
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.
Resizable – Allow to resize a dialog based on target container.

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.
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.
Added Syncfusion.EJ2.DocumentEditor NuGet package that contains helper library for converting Word documents to Syncfusion Document Text (*.sfdt). It supports .NET Standard 2.0 Framework.

DropdownButton

DropDownButton component is used to toggle contextual overlays for displaying list of action items.

Sizes - Provided with different sizes of DropDownButton.
Icons and Navigations - Supports text and icon on the DropDownButton and Popup items. URL can be given to Popup items that creates the anchor link to navigate to the URL provided.
Separator - Supports Popup items grouping by using the Separator.
Accessibility - Provided with built-in accessibility support that helps to access all the DropDownButton component features through the keyboard, screen readers, or other assistive technology devices.

DropdownList

DropDownList component contains a list of predefined values from which a single value can be chosen. The functionality of DropDownList resembles the SELECT form element of HTML. When an arrow icon accompanied with this component is pressed, the dropdown displays a list of values from which you can select one. The available key features are

Data binding - Allows to bind and access the list of items from the local or server-side data source.
Grouping - Supports grouping the logically related items under single or specific category.
Sorting - Supports sorting of list items in an alphabetical order (either ascending or descending).
Filtering - Allow filtering the list items based on a character typed onto the search box.
Templates - Allows customizing the list items, selected value, header, footer, category group header, and no records content.
Accessibility - Provided with built-in accessibility support which helps to access all the DropDownList component features through the keyboard, screen readers, or other assistive technology devices.

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.

In-place Editor

The In-place Editor control is used to edit and update the input value dynamically to the server. It supports integrating many control types such as “DropDownList”, ”DatePicker”, ”AutoComplete”, etc.

Render mode: Provides two types of rendering modes when editing the input, namely “Inline” and “Popup”.
Control integration: Support to integrate controls such as “DropDownList”, “DatePicker”, ” AutoComplete”, etc., to the In-place Editor.
Data binding: Bind the In-place Editor control with an array of JSON objects or DataManager to save the edited data to the server.
Customization: Offers UI customization such as popup, buttons, and also denotes an editable content state.
Template: Templates can be used to integrate custom controls to the In-place Editor.
Globalization: Provides right-to-left and localization support.

LinearGauge

Linear Gauge component is used to visualize the numerical values of an axis in linear manner. All linear gauge elements are rendered by using Scalable Vector Graphics (SVG).

Pointers - Supports to add multiple pointers to the gauge (Marker and Bar).
Ranges - Supports to highlight desired range values in the gauge axis.
Annotation - Supports to add custom elements in the desired location of the gauge.
User Interaction - Supports interactive features like tooltip and pointer drag and drop.
Animation - Supports animation for the pointer.

ListView

ListView component represent data in interactive hierarchical structure interface across different layouts or views, which also has features of data-binding, template and grouping.

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.
Accessibility - Provides built-in accessibility support which helps to access all the ListView component features through the keyboard, on-screen readers, or other assistive technology devices.

Maps

The Map control is used to visualize the geographical data. It is used to represent the statistical data of a particular geographical area on Earth, with user interactivity and provides various customizing options. All the map elements are rendered using Scalable Vector Graphics (SVG).

Supports any number of layers and sublayers.
Supports GeoJSON data, which allows you to plot your own shapes in the maps.
Supports map providers such as Bing and OpenStreetMap that can be added to any layers.
Supports 6 types of map projections.
Support legend, data label, marker, bubble, navigation lines and annotations for visualizing additional information on the map.
Supports interactive features like zooming, panning, tooltip, highlight, selection and interactive legend.

MaskedTextBox

MaskedTextBox allows the user to enter the valid input only based on the provided mask. The available key features are

Custom Characters - allows you to use your own characters as the mask elements.
Regular Expression - can be used as a mask element for each character of the MaskedTextBox.
Accessibility - provides built-in accessibility support which helps to access all the MaskedTextBox component features through keyboard, on-screen readers, or other assistive technology devices.

Menu is a graphical user interface that serves as navigation header for your application or site. Menu can be populated from a data source such as an array of JavaScript objects that can be either structured as hierarchical or self-referential data. The following key features are available in Menu component.

Rendering - Supports to render based on the items collection (array of JavaScript objects) and HTML elements.
Separator - Supports menu items grouping by using the Separator.
Icons and Navigations - Supports items to have Icons and Navigation URL’s.
Template and Multilevel Nesting - Supports template and multilevel nesting in Menu.
Accessibility - Provided with built-in accessibility support that helps to access all the Menu component features through the keyboard, screen readers, or other assistive technology devices.

MultiSelect

MultiSelect component contains a list of predefined values from which a multiple value can be chosen. The functionality of MultiSelect resembles the SELECT form element of HTML. The available key features are

Data binding - Allows to bind and access the list of items from the local or server-side data source.
Grouping - Supports grouping the logically related items under single or specific category.
Templates - Allows customizing the list items, selected value, header, footer, category group header, and no records content.
Sorting - Supports sorting of list items in an alphabetical order (either ascending or descending).
Filtering - Allow filtering the list items based on a character typed in component.
Custom Value - Allows user to select a new custom value.
Accessibility - Provided with built-in accessibility support which helps to access all the MultiSelect component features through the keyboard, screen readers, or other assistive technology devices.

NumericTextBox

NumericTextBox is used to get the number inputs from the user. The input values can be incremented or decremented by a predefined step value. The available key features are

Range Validation - allows to set the minimum and maximum range of values in the NumericTextBox.
Number Formats - supports the number display formatting with MSDN standard and custom number formats.
Precision Of Numbers - allows to restrict the number precision when enters the value.
Keyboard Interaction - allows users to interact with the NumericTextBox using the keyboard.
Accessibility - provides built-in accessibility support which helps to access all the NumericTextBox component features through keyboard, on-screen readers or other assistive technology devices.
Internationalization - library provides support for formatting and parsing number using the official Unicode CLDR JSON data.
Localization - Supports to localize spin up and down buttons title for the tooltip to different cultures.

The Pager component allows you to navigate between records which are sectioned into pages. The navigation between pages which is key functionality of Pager is done using built-in numeric and navigation buttons and provides easy user interaction.

Trendy Look: Rich Appearance with Theme Support.
RTL: Supports for Right to Left alignment.
Responsive Support: Pager component will be responsive respective to the layout.
Localization: Supports localization to different cultures.

PDF Viewer

The PDF Viewer component enables you to view and print the PDF files.

Both normal and PDF files protected with AES and RC4 encryption can be opened and displayed.
Core interactions are included: scrolling, zooming, panning, and page navigation.
Built-in toolbar.
Text can be selected and copied from PDF files.
Text can be easily searched for across the PDF document.
Easy navigation with the help of bookmarks, thumbnails, hyperlinks, and a table of contents.
Two view modes are included: fit-to-page and fit-to-width.
An entire document or a specific page can be printed directly from the browser.

Pivot View

The pivot grid is a multi-dimensional data visualization component built on top of the relational data sources. The pivot report can be managed dynamically at runtime along with other capabilities like aggregation, filtering and sorting (field and value based).

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.

Progress Button

The progress button visualizes the progression of an operation to indicate the user that a process is happening in the background. The progress can be shown with graphics accompanied by a textual representation.

Types, Sizes, and Styles - Provided with different types, sizes and predefined styles of progress button.
Icons and Spinner - Supports icon, spinner and its positioning.
Animation - Provided with predefined animation and progress indicator.
Events - Supports event triggering at specified interval.
Accessibility - Provided with built-in accessibility support that helps to access all the ProgressButton component features through the keyboard, screen readers, or other assistive technology devices.

Query Builder

The Query Builder component is a graphical user interface that allows users to create and edit filters. It outputs a structured JSON of filters which that can be easily parsed to create SQL. It is integrated with Data Manager to communicates with data sources and returns the desired result based on the provided filter. It supports data binding, templates, validation, and horizontal and vertical orientation.

Data binding: It auto populates the data source and maps the data to the appropriate fields.
Template: Supports templates and it is applicable for all input components.
Queries: Queries supports JSON/SQL rules.

RadioButton

RadioButton is a graphical user interface element that allows to select one option from the choices.

States - Provided with different states of RadioButton.
Label - Supports label and its positioning.
Sizes - Provided with different sizes of RadioButton.

Range Navigator

RangeNavigator is a data visualization control. It allows you to scroll and navigate through the data. This control easily combines with other controls such as Chart, Data Grid, etc., to create rich and powerful dashboards.

Supports local binding and remote data source.
Supports interactive features such as tooltip and animation.
Supports light-weight Range navigator.
Supports period selector to select the data over the period.
Supports multiple axis and series types to plot the data.

Rich Text Editor

The rich text editor component is WYSIWYG (“what you see is what you get”) editor; it is 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.

Mode: Provides <IFRAME> and <DIV> mode.
Markdown: Handles markdown editing.
Module: Contains a modular library to load the necessary functionality on demand.
Toolbar: Provides a fully customizable toolbar.
Editing: HTML view to edit the source directly for developers.
Third-party Integration: Supports to integrate third-party library.
Preview: Preview the modified content before saving it.
Tools: Handles images, hyperlinks, video, hyperlinks, uploads, and more.
Undo and Redo: Contains undo/redo manager.
Lists: Creates bulleted and numbered lists.
Tables: Allows to creates table layout with customized column and rows.

Schedule

The Scheduler component is an event calendar which facilitates user with the common Outlook and Google calendar features, thus allowing the users to plan and manage their events or appointments and its time in an efficient way.

Views - Scheduler is now available with 10 different view modes – day, week, work week, month, timeline day, timeline week, timeline work week, timeline 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 options - Allows the user to repeat a set of events on a daily, weekly, monthly, or yearly basis.
Drag and Drop - Events can be easily rescheduled by simply dragging and dropping them onto a new desired location.
Resizing - Allows to change the event timing by resizing them to the desired time interval using its handlers.
Custom editor template - Template option is available for event editor, thus allowing the users to add their own custom modal design and also provides option to add additional fields onto the default event editor.
Adaptive rendering - Adapts with optimal user interface on mobile and desktop, thus helping the user’s application to scale elegantly across all the form-factors without any additional effort.
Multiple resources - Allows the Scheduler to be shared by multiple resources and the events of each resource are displayed relevantly either in expandable groups (Timeline views) or vertical hierarchy one after the other (Calendar views).
Virtual scrolling - Allows to load a large set of resources and events on Scheduler instantly as you scroll, to experience better performance.
Time zone - Regardless of whatever time zone your system follows, Scheduler 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.
Block time intervals - The specific range of date and time on Scheduler can be blocked, thus preventing it from user interactions.
Template - The key elements like events, date header, resource header, time cells, 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.
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. There is also an option to set different working hours for each resource.
Localization - All the static text and date content on Scheduler can be localized to any desired language. Also, it can be displayed with appropriate time mode and date-format as per the locale culture.
Keyboard interaction - All the common actions such as traversing through the events, multiple cell selection, add/edit/delete the appointments, navigate to other views or dates and much more can be performed through keyboard inputs.
RTL - Supports to display the Scheduler component in the direction from right to left.

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.

Target: Sidebar can be initialized in any HTML element other than the body element.
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.
Auto close: Allows to set the Sidebar in an expanded or collapsed state only in certain resolutions.
Dock: By default, supports display of short notifications about the content on docked mode.

Slider

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.

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.

Smithchart

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.

Supports any number of series and points.
Supports Impedance and Admittance series render type.
Supports Tooltip user interaction feature in mouse and touch actions.
Supports Marker and DataLabel to get more info about series points.
Supports Legend feature with clicking series visibility toggle action.

Sparkline

The sparkline is a very small chart; it is drawn without axes or coordinates. This presents a common shape of data in a simple and highly condensed way. The sparklines are easy to interpret, and convey more information to users by visualizing data in a small amount of space.

Consumes less amount of space for visualizing data.
Supports integration with grids.
Supports five types of sparklines: line, column, area, win-loss, and pie.
Supports range bands to highlight the selected start and end value regions.
Supports markers for high, low, start, end, and negative points.
Supports trackball to get current mouse point to display tooltip.

Spinner

Spinner is a load indicator which is occur whenever the application processing/waiting for an operation. While the Spinner is loading, you can’t interact with target, until the process is completed.

Split Button

SplitButton component has primary and secondary button. Primary button is used to select default action and secondary button is used to toggle contextual overlays for displaying list of action items.

Sizes - Provided with different sizes of SplitButton.
Icons and Navigations - Supports text and icon on the SplitButton and Popup items. URL can be given to Popup items that creates the anchor link to navigate to the URL provided.
Separator - Supports Popup items grouping by using the Separator.
Accessibility - Provided with built-in accessibility support that helps to access all the SplitButton component features through the keyboard, screen readers, or other assistive technology devices.

Splitter

The Splitter control is a container control which used to create different layouts in the web application. The control supports the following key features.

Different orientation
Resizable panes
Expand/Collapse panes
Nested panes
Integrate other component as a content

Stock Chart

To provide interface for Stock Charts which are used to illustrate the movements in the price of a financial instrument over time. It can bind data from datasource such as array of JSON objects , OData web services or DataManager. All Stock Chart elements are rendered using Scalable Vector Graphics (SVG).

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.

Tab

Tab is a content panel to show multiple contents in specific space one at a time.

Rendering - Supports to render based on the items collection and HTML elements.
Adaptive - Supports responsive rendering with scrollable Tabs and popup menu.
Animation - Supports animation effects for moving previous/next contents of the Tab.
Customization - Provides customization support for header with icons and orientation.
Accessibility - Provided with built-in accessibility support which helps to access all the Tab component features through the keyboard, screen readers, or other assistive technology devices.

TextBox

TextBox is an input element that allows to get input from the user. It allows the user to edit or display the text value.

Groups - Supports to group the icon element with the input
Floating Label - Added option to float label always, float label on focus, and disable floating support in the input element.
Clear Button - Provided option to show/hide clear button to reset the value in input element.
Validation States - Provided option to indicate success, error, and warning states.

TimePicker

TimePicker component is the pre-filled dropdown list with the time values 12/24 hours format, that allows to select a time from the list.

Range Restriction - Allows to select a time within a specified time range.
Format - Formatting the value displayed in a textbox.
Step - Provides the option to increment/decrement time value in a popup list.
StrictMode - Allows to entering the only valid time in a textbox.
Accessibility - Provided with built-in accessibility support which helps to access all the TimePicker component features through the keyboard, screen readers, or other assistive technology devices.

Toast

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.

Displays a group of command buttons arranged horizontally.

Rendering - Supports to render based on the items collection and HTML elements.
Customization - Supports to add buttons , separator & input components.
Adaptive - Supports responsive rendering with scrollable Toolbar and popup menu.
Accessibility- Provided with built-in accessibility support which helps to access all the Toolbar component features through the keyboard, screen readers, or other assistive technology devices.

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.

Content - Tooltip content can be assigned with static text, template or loaded dynamically via AJAX.
Position - Tooltip can be displayed in 12 different positions.
Open Mode - Supports 4 opening modes, hover, click, focus, and custom.
Animation - Supports animation effects while showing/hiding the Tooltip.
Smart Positioning - Tooltip can be moved along with the mouse pointer using the mouse trailing option.

Tree Grid

The# Essential Studio for JavaScript TreeGrid is a feature-rich control used to visualize self-referential hierarchical data effectively in a tabular format. It can pull data from data sources such as an array of JSON, RESTful services, OData services, WCF services or DataManager, and binding data fields to columns. It also expands or collapses child data using the tree column.

The most important features available in the TreeGrid component are paging, sorting, filtering, searching.

Data sources: Binds the TreeGrid component with an array of JavaScript objects or DataManager.
Sorting: Supports n levels of sorting.
Filtering: Supports filtering records with filter bar and menu filtering modes.
Paging: Allows easy switching between pages using the pager bar.
Editing: Offers cell and row editing modes for updating the records.
Columns: The column definitions are used as the datasource schema in the TreeGrid. This plays a vital role in rendering column values in the required tree structure.
Reordering: Allows dragging and dropping of any column anywhere in the treegrid’s column header row, thus allowing repositioning of columns.
Resizing: Resizing allows changing column width on the fly by simply dragging the right corner of the column header.
Cell Styling: TreeGrid cell styles can be customized either by using CSS or programmatically.
Selection: Rows or cells can be selected in the treegrid. 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 treegrid.
Aggregation: Provides the option to easily visualize the aggregates for column values. Displays aggregates for child data.
Context menu: The context menu provides a list of actions to be performed in the treegrid. It appears when a cell, header, or the pager is right-clicked.
Export: Provides the options to export the treegrid data to Excel, PDF, and CSV formats.
RTL support: Provides right-to-left mode that aligns the treegrid content from right to left.
Localization: Provides an inherent support to localize the UI.

TreeMap

The TreeMap control is used to visualize hierarchical data in the form of nested rectangles. Area of each item is calculated based on its corresponding numeric value. All the TreeMap elements are rendered using Scalable Vector Graphics(SVG).

Supports any number of levels and items.
Supports four types of layouts: square, horizontal, vertical, and auto.
Supports drill-down option to render data clearly in the lower level of a hierarchy.
Supports legends and data labels for visualizing additional information on the TreeMap.
Supports three types of color mapping: range, equal, and desaturation.
Supports interactive features such as selection, highlight, tooltips, and interactive legends.

TreeView

TreeView component is used to represent hierarchical data in a tree like structure with advanced functions to edit, drag and drop, select with CheckBox and more. TreeView can be populated from a data source such as an array of JavaScript objects or from DataManager. The following key features are available in TreeView component.

Data Binding - Binds the TreeView component with an array of JavaScript objects or DataManager.
CheckBox - Allows you to select more than one node in TreeView without affecting the UI appearance.
Drag and Drop - Allows you to drag and drop any node in TreeView.
Multi Selection - Allows you to select more than one node in TreeView.
Node Editing - Allows you to change the text of a node in TreeView.
Sorting - Allows display of the TreeView nodes in an ascending or a descending order.
Template - Allows you to customize the nodes in TreeView.
Accessibility - Provides built-in accessibility support that helps to access all the TreeView component features through the keyboard, on-screen readers, or other assistive technology devices.

Uploader

The uploader component is useful to upload images, documents, and other files to server. The 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.

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.
Directory upload - Allows you to upload all files of folders to server.
Paste upload - Allows you to upload any images which currently copied in the clipboard.
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.