Essential Studio for Vue Release Notes

v16.2.41
June 25, 2018

Common

Breaking Changes

  • The splitbuttons package is used by ColorPicker component, so the splitbuttons package is a dependency for the inputs package.

AccumulationChart

Features

  • Support has been provided to group the pie slice based on count.

Breaking Changes

  • Newly Added Range Navigator component in charts package requires Navigations and Calendars dependency, so its mandatory to include the ej2-navigations.umd.min.js and ej2-calendars.umd.min.js in system.js configuration if you are using system.js module loader.
  • SVG tooltip has been moved as a separate package, so the charts require SVG-base dependency to show the tooltip. so its mandatory to include the ej2-svg-base.umd.min.js in system.js configuration if you are using system.js module loader.

AutoComplete

Bug Fixes

  • Html elements are shown during filtering when highlight property is set to true.

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.

Badge

Badge 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

Breaking Changes

  • Default color changed for the flat 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.

ButtonGroup

ButtonGroup is a graphical user interface that groups series of buttons horizontally or vertically.

  • Types, Sizes, and Styles - Provided with different types, sizes and predefined styles of button.
  • Selection - Supports single and multiple selection behaviors.
  • Orientation - Supports horizontal and vertical orientations.
  • Nesting - Supports nesting with drop-down and split button components.
  • Accessibility - Built-in accessibility features to access all the button group using the keyboard, screen readers, or other assistive technology devices.

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.

Calendars

Features

  • Event arguments for all Calendar components has been streamlined.

Breaking Changes

  • Newly added ColorPicker component in input package requires SplitButton dependency, So now it’s mandatory to include the ej2-splitbuttons.umd.min.js in system.js configuration if your using system.js module loader.
  • Update the system.js configuration while going with this version and above.
  • Today button will act as a primary button in high contrast, bootstrap and fabric themes.

Card

The Card is a small container in which user can show defined content in specific structure and it is a flexible and extensible. Card is a pure CSS component built with markup and style.

The available key features are

  • 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

Bug Fixes

  • Now, tooltip is working properly when the container for chart is initialized without ID.
  • The performance issue with loading 800 series in chart has been fixed.
  • Loaded event is now triggering after legend click.

Features

  • Histogram series type has been added to chart.
  • Scrollbar feature has been added to zoom and pan the chart.

Breaking Changes

  • Newly Added Range Navigator component in charts package requires Navigations and Calendars dependency, so its mandatory to include the ej2-navigations.umd.min.js and ej2-calendars.umd.min.js in system.js configuration if you are using system.js module loader.
  • SVG tooltip has been moved as a separate package, so the charts require SVG-base dependency to show the tooltip. so its mandatory to include the ej2-svg-base.umd.min.js in system.js configuration if you are using system.js module loader.

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.

CircularGauge

Bug Fixes

  • Provided one way binding support for Axes properties in Angular platform.

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

Bug Fixes

  • Popup items is not same as initially after filtering in 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.

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

Breaking Changes

  • Value parameter obtained in change event argument has been changed from string type to array of date object and the string value from the input element can be obtained from the text parameter of the argument.

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

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

  • Range Restriction – Allows to select a date and time within a specified range.
  • Format – Formatting the value displayed in a textbox.
  • Customization – Allows to customize each day and time cell of the Calendar and time popup list.
  • Strict Mode - Allows to enter the only valid date and time in a textbox.
  • Accessibility - Provided with built-in accessibility support which helps to access all the DateTimePicker component features through the keyboard, screen readers, or other assistive technology devices.

Diagram

The diagram component visually represents information. It is also used to create diagrams like flow charts, organizational charts, mind maps, and BPMN either through code or a visual interface.

  • Nodes - Nodes are used to host graphical objects (path or controls) that can be arranged and manipulated on a diagram page. Many predefined standard shapes are included. Custom shapes can also be created and added easily.
  • Connectors - The relationship between two nodes is represented using a connector.
  • Labels - Labels are used to annotate nodes and connectors.
  • Interactive Features - Interactive features are used to improve the run time editing experience of a diagram.
  • Data Binding - Generates diagram with nodes and connectors based on the information provided from an external data source.
  • Commands - Supports a set of predefined commands that helps edit the diagram using keyboard. It is also possible to configure new commands and key combinations.
  • Automatic Layout - Automatic layouts are used to arrange nodes automatically based on a predefined layout logic. There is built-in support for organizational chart layout, hierarchical tree layout, symmetric layout, radial tree layout, and mind map layout.
  • Overview Panel - The overview panel is used to improve navigation experience when exploring large diagrams.
  • SymbolPalettes - The symbol palette is a gallery of reusable symbols and nodes that can be dragged and dropped on the surface of a diagram.
  • Rulers - The ruler provides horizontal and vertical guides for measuring diagram objects in diagram control.
  • Serialization - When saved in JSON format a diagram’s state persists, and then it can be loaded back using serialization.
  • Exporting and Printing - Diagrams can be exported as .png, .jpeg, .bmp, and .svg image files, and can also be printed as documents.
  • Gridlines - Gridlines are the pattern of lines drawn behind diagram elements. It provides a visual guidance while dragging or arranging the objects on a diagram surface.
  • Page Layout - The drawing surface can be configured to page-like appearance using page size, orientation, and margins.
  • Context Menu - Frequently used commands can easily be mapped to the context menu.

Dialog

Bug Fixes

  • Issue with click event on primary button has been fixed.
  • The multiple Dialog with positioning issue resolved in Dialog components.
  • Dialog’s header and content can be updated dynamically without using dataBind method.

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.

DocumentEditor

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

Bug Fixes

  • Provided support for before open event.

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.

ExcelExport

Bug Fixes

  • Currency number format issue is fixed.

Form-validator

Features

  • Provided option to validate the hidden element by using validateHidden attribute.

FormValidator

Features

  • Provided option to validate the hidden element by using validateHidden attribute.

Grid

Bug Fixes

  • Group footer template shows incorrect value while using disablePageWiseAggregate issue fixed.
  • Unable to sort when set dynamic sort settings in descending order resolved.
  • Footer aggregate row is not aligned properly when using child grid resolved.
  • In batch editing, script error occurs when focusing on grid after clicking add and cancel button fixed.
  • Filter icon misalignment with text wrap enabled resolved.
  • Selection retained after unchecking the check all checkbox with remote data source fixed.
  • actionComplete event is not triggered for batch cancel resolved.
  • Frozen content got hidden while adding new row with auto height is resolved.
  • Unable to use auto complete inside filter bar template resolved.
  • Aggregates row get misaligned while horizontal scrolling if vertical scrollbar presents resolved.
  • Excel filter dialog is not updated when properties updated through setProperties issue resolved.
  • Indent column disappeared when resizing the hierarchy column in Grid issue fixed.

The Grid component is used to display and manipulate tabular data with configuration options to control the way the data is presented and manipulated. It will pull data from a data source, such as array of JSON objects, OData web services, or DataManager binding data fields to columns. Also displaying a column header to identify the field with support for grouped records.

  • Data sources - Bind the Grid component with an array of JSON objects or DataManager.
  • Sorting and grouping - Supports n levels of sorting and grouping.
  • Filtering - Offers filter UI such as filter bar, menu, excel and checkbox at each column to filter data.
  • Paging - Provides the option to easily switch 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 you to drag any column and drop it at any position in the Grid’s column header row, allowing columns to be repositioned.
  • 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 a full-fledged right-to-left mode which aligns content in the Grid control from right to left.
  • Localization - Provides inherent support to localize the UI.

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.

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

Features

  • UI-Virtualization implemented to render only viewable list items in a view port on loading large number of data.

Breaking Changes

  • The following API namings are renamed.
Existing API Name New API Name
unCheckAllItem uncheckAllItems
unCheckItem uncheckItem
checkAllItem checkAllItems

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

Features

  • Support has been added for animating the shapes on zooming.
  • Support has been added to trim the maps title, when it exceeds the available width.
  • Support had been provided for printing and exporting the maps.
  • Support has been provided for printing.

The Maps 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).

  • Layers - Map is maintained through layers and it can accommodate one or more layers.
  • GeoJSON Data Input - Supports GeoJSON data, which allows you to plot your own shapes in the maps.
  • Map Providers - Supports map providers such as Bing and OpenStreetMap that can be added to any layers.
  • Projection - Supports 6 types of map projections.
  • Marker - Supports 10 types of marker shapes and also takes custom HTML element.
  • Bubbles - Supports 2 types of bubbles such as Circle and Square.
  • Legend - Supports legend which is useful in providing additional information about shapes, bubbles and markers with paging and customization options.
  • Data Labels - Supports data label to provide additional information about the shapes.
  • Navigation Lines - Lines can be rendered between various points in map.
  • Annotations - Supports placing any HTML element on desired location in the map.
  • User interaction - Supports interactive features like zooming, panning, tooltip, highlight, selection and interactive legend.

MaskedTextBox

Features

  • Provided option to show/hide clear button to reset the value in 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.

MultiSelect

Bug Fixes

  • Data is not repopulated when selecting and removing all items from Multiselect.
  • Multiselect is not focused when tab key is pressed if it already focused in the filterbar.

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

  • Provided option to show/hide clear button to reset the value in NumericTextBox.
  • Prevented to type unwanted text and symbols in 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.

PdfExport

Features

  • Added true type font support.

PivotGrid

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.

RadioButton

Bug Fixes

  • Wrapped text of a RadioButton label overlaps with next RadioButton label issue fixed.

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.

RangeNavigator

The range navigator provides an intuitive interface for selecting a smaller range from a larger collection. It is commonly used in financial dashboards to filter a date range for which the data needs to be visualized. This control easily combines with other controls such as Chart, Data Grid, etc., to create rich and powerful dashboards.

  • Data Binding - Binds the data with local and remote data source.
  • Chart - To represent the data in RangeNavigator and its supports line, step line and area type series.
  • Slider - To handle the selected data in RangeNavigator.
  • Data Types - Supports three different types of data, namely Numerical, Datetime, and Logarithmic.
  • Animation - Chart series and slider will be animated when rendering and changing the selected data.
  • Period Selector - Supports period selector to select data based on predefined periods.
  • Light Weight - Supports light weight RN to navigate through the data based on range.
  • Tooltip - Supports tooltip for the selected data.
  • Export - Supports to print the range navigator directly from the browser and exports the range navigator in both JPEG and PNG format.

RichTextEditor

The rich text editor component is WYSIWYG (“what you see is what you get”) editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.

  • Provides IFRAME and DIV mode.
  • Handles markdown editing.
  • Contains a modular library to load the necessary functionality on demand.
  • Provides a fully customizable toolbar.
  • HTML view to edit the source directly for developers.
  • Supports to integrate third-party library.
  • Preview the modified content before saving it.
  • Handles images, hyperlinks, video,hyperlinks, uploads, and more.
  • Contains undo/redo manager.
  • Creates bulleted and numbered lists.

Schedule

Bug Fixes

  • An issue with time format not displaying according to the given culture issue has been fixed.
  • A script error occurring while enabling or disabling the time indicator option in Agenda view issue has been fixed.
  • An issue with event not displayed in day and week views, when set with same start and end time has been fixed.
  • An issue with displaying yearly recurrence event has been fixed.

Breaking Changes

  • Type of id property within the eventSettings.field has been changed from object type to string.
  • Appearance enhancement has been done on quick popup that opens, when single clicked on cells and events. Also, the same popup opens on single tap of events on mobile mode.

Features

  • Distinct time interval option with customizable major and minor slots has been introduced to view the appointments clearly and accurately.
  • An enhancement has been made to extend the default view range with customized intervals, to display ‘n’ number of days, weeks and months.
  • Validation support on recurrence appointment(s) has been added.
  • Multiple resources support has been added with the following options.
  • Group By Child - To group the same child resource(s) under different parent resource(s).
  • Group By Date - To group the resource(s) on day basis.
  • Group Editing - To edit all resource events simultaneously.
  • Custom Work Days - To display the custom work days for each resource.
  • Provided public methods to add or remove the resources dynamically.

Schedule is an event calendar which facilitates user with the common Outlook-calendar features, thus allowing the users to plan and manage their appointments and its time in an efficient way.

  • Views - Schedule is now availed with 6 different view modes – day, week, work week, month, agenda and month agenda. It is possible to configure view-based settings on each view mode. The Week view is set as active view by default.
  • Data binding - Seamless data binding with various client-side and remote data sources thus allowing the data to load on demand by default to reduce the data transfer and loading time.
  • Multiple resources - Supports planning and management of events for multiple resources and allows to group them under appropriate resources. Also, supports date-wise grouping, linked appointments and other group related customizations.
  • Recurrence - Allows the user to repeat a set of events on a daily, weekly, monthly, or yearly basis.
  • Template - The key elements like events, date header, work cells and event tooltip comes with the default template support which allows the flexible end-user customization to embed any kind of text, images, or styles to it.
  • Time zone - Regardless of whatever time zone your system follows, Schedule supports setting your own required time zone value to it as well as to each event – thus allowing the events to display on its exact local time.
  • Timescale - Allows to display customized time duration, with clear and accurate depiction of appointments across the appropriate time slots.
  • Customizable working days and hours - Users can set specific work hour range which is visually differentiated with active colour. Also, the working days collection can be customized with specific days, so that the remaining days will be considered as weekend.
  • Custom editor template - Template option is availed for event editor, thus allowing the users to add their own custom editor design and also provides option to add additional fields onto the default event editor.
  • Adaptive rendering - Adapts with optimal user interfaces for mobile and desktop form-factors, thus helping the user’s application to scale elegantly across all the form-factors without any additional effort.
  • Keyboard interaction - All the common actions such as traversing through the appointments, multiple cell selection, add/edit/delete the appointments, navigate to other views, dates and much more can be performed through keyboard inputs.
  • Localization - All the static text and date content can be localized to any desired language. Also, it can be displayed with appropriate time mode and date-format as per the localized language.
  • RTL - Supports displaying the component to display in the direction from right to left.

Features

  • Support for setting the open/close state of the Sidebar has been provided with isOpen property.

Breaking Changes

  • Target property supports both the id and class selectors to locate the target element.
  • isOpen() method is now removed and know about the Sidebar is whether open or close state by using isOpen property.

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.

  • Target - The Sidebar can be initialized in any HTML element other than the body element.
  • Types – Supports Push, Over, Slide and Auto to expand or collapse the Sidebar.
  • Position – Allows to position the Sidebar in 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.
  • Backdrop – Specifies the whether to apply overlay options to main content when the Sidebar is in open state.

Slider

Features

  • Limits implemented to limit movement interval of min and max values to certain range.
  • Drag interval implemented to interact with the range slider by dragging the range.
  • Provided to support custom value arrays.
  • Bootstrap theme tooltip appearance improved by enabling tooltip pointer.

Breaking Changes

  • The following API namings are renamed.
Existing API Name New API Name
readOnly readonly

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.

  • Types - Smithchart had two type of rendering. Impedance and Admittance.
  • Marker - Smithchart supports the marker feature. It used to identify point position.
  • Datalabel - Smithchart supports the datalabel feature. It used to identify point values.
  • Legend - Smithchart supports the legend feature. It used to denote each series names.
  • Tooltip - Smithchart supports the tooltip feature. It used to get point values on user interaction like mouse and touch actions.
  • Print and Export - Smithchart supports printing and exporting as different file types.

Sparkline

Sparklines are easy to interpret and also it conveys much more information to the user by visualizing the data in a small amount of space.

  • Types - Sparklines had five type of series. Line, Area, Column and WinLoss and Pie.
  • Marker - Sparklines support the marker feature.
  • DataLabel - Sparklines support the datalabel feature. It uses to identify the x and y value for the current point.
  • Range Band - Sparklines support the rangeband feature. It used to denote the certain range sparkline points.
  • Tooltip - Sparklines support the tooltip feature. It used to interact with points to get more about current point.

Spinner

Bug Fixes

  • Spinner memory leak problem has been fixed.

SplitButton

Breaking Changes

  • UI changes based on design guidelines

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.

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

Bug Fixes

  • Content initiated twice when using ng-template in Tab item has been fixed.
  • Solved issues on removeItem public method.

TextBox

Bug Fixes

  • Theme compatibility issue resolved for CSS Input component.

Features

  • The clear button can be enabled/disabled dynamically through setClearButton method.

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

Breaking Changes

  • In change event, the parameter e has been changed to event.

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.

Toolbar

Features

  • Provided support for MultiRow options on toolbar items.
  • Inline alignment of toolbar items support is provided.

Tooltip

Bug Fixes

  • Tooltip positioning issue fixed while target placed right of the page.

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.

TreeMap

The TreeMap is used to displayed the hierarchical or multi-level data to visualize the nested rectangles.

  • Layout Mode - TreeMap supports different type of layouts like Squarified, SliceAndDiceHorizontal, SliceAndDiceVertical and SliceAndDiceAuto.
  • Legend - TreeMap supports legend feature with different mode. Default and Interactive.
  • LabelTemplate - Leaf item labels can be customized by the label template.
  • ColorMapping - TreeMap supports the color mapping feature. It used to customize the leaf item fill colors based on range or values.
  • User-Interactions - TreeMap supports the Drilldown, Tooltip, Highlight and Selection user interaction features.
  • Print and Export - TreeMap supports printing and exporting as different file types.

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

Bug Fixes

  • Provided option to customize request header on trigger uploading and removing events.
  • Provided option to add additional data in removing event.
  • The issue with rendering Uploader component in internet explorer browser has been fixed.
  • The issue with submitting single file upload’s value has been fixed.

Features

  • Added chunked upload support to upload large files asynchronously with pause and resume options.
  • Support has been provided to resume automatically on failed chunk up to maximum retry options.
  • Included option to handle retry upload through UI (User Interface).
  • Support to cancel the request while uploading a file is added.

The Uploader component is useful to upload images, documents, and other files to server.
The component is extended version of HTML5 upload with multiple file selection, auto upload,
drag and drop, progress bar, preload files, and validation.

The available key features are

  • Asynchronous Upload - Allows you to upload the files with asynchronous way.
  • Chunk Upload - Allows you to upload large files as chunks to the server with pause and resume options.
  • Drag and Drop - The files can be dragged from file explorer, and dropping into the drop area.
  • Form Supports - The selected or dropped files are received as a collection in a form action when the form is submitted.
  • File Validation - Validate the files based on file’s size and type.
  • Template - Allows you to customize the default appearance of Uploader.
  • Accessibility - provides built-in accessibility support which helps to access all the Uploader features through keyboard, on-screen readers, or other assistive technology devices.