Essential Studio for Angular Release Notes

v15.4.17
November 13, 2017

Common

Features

Base library has the following list of libraries which are commonly used by all Essential JS 2 components

  • Internationalization
  • Localization
  • Animation
  • Drag and Drop
  • Touch
  • Keyboard
  • Ripple Effect
  • State Persistence

Accordion

Features

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.

AutoComplete

Features

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.

Button

Features

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.

Calendar

Features

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.

Chart

Features

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

Features

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.

CircularGauge

Features

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.

ComboBox

Features

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.

Compression

Features

Compression has the following list of libraries which are commonly used by Essential JS 2 export libraries.

  • Compressed stream writer
  • Zip Archive

ContextMenu

Features

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.

DataManager

Features

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

Features

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

Features

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.

Dialog

Features

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.

Features

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.

Excel Export

Features

Excel export module exports an Essential JS2 grid to Microsoft Excel file-format.

File

Features

File has the following list of libraries which are commonly used by Essential JS 2 export libraries.

  • Stream writer
  • UTF8, Unicode and ANSI encoding

Grid

Features

Grid component is used to display and manipulate tabular data with configuration options to control the way the data is presented and manipulated.

  • Data sources - Bind the Grid component with an array of JavaScript objects or DataManager.
  • Sorting and grouping - Supports n levels of sorting and grouping.
  • Selection - Provides the option to select the grid rows single or multiple.
  • Filtering - Offers filter bar or menu , or checkbox at each column to filter data.
  • Editing - Provides the options to dynamically insert, delete and update records.
  • Virtualization - Provides the options to load large amount of data without performance degradation.
  • Aggregates - Provides built in types are sum , average, min, max, count.
  • Paging - Provides the option to easily switch between pages using the pager bar.
  • Reordering - Allows you to drag any column and drop it at any position in the Grid’s column header row, allowing columns to be repositioned.
  • Resize - Allow you to resize the grid column width dynamically.
  • Frozen Rows And Columns - Provides the options to freeze certain rows or columns to scroll remaining movable content.
  • Clipboard - Provides an option to copy selected rows or cells data into clipboard.
  • Column Spanning - Provides an option to allows to span the multiple adjacent cells.
  • Stacked Header - It can be stacked or grouped in order to show multiple level of column headers.
  • Hierarchy Grid - It is used to display table data in hierarchical structure which can show or hide by clicking on expand or collapse button.
  • Print and Exporting - Provides the option to print and exporting grid records.
  • RTL - Provides a full-fledged right-to-left mode which aligns content in the Grid component from right to left.
  • Localization - Provides inherent support to localize the UI.

LinearGauge

Features

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

Features

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.

MaskedTextBox

Features

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.

MultiSelect

Features

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

Features

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.

Pdf Export

Features

PDF is a modern JavaScript library used to create PDF documents. It is written in TypeScript and has no external dependencies.

RadioButton

Features

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.

Tab

Features

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

Features

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

Features

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.

Toolbar

Features

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

Features

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.

TreeView

Features

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.