Search results

Syncfusion Angular UI Components (Essential JS 2) - 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.

Accumulation 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.
NEW FEATURES
  • Support has been provided to group the pie slice based on count.

AutoComplete

BUG FIXES
  • Value typed in the autocomplete gets removed when data source is bound in the filtering event.
  • Html elements are shown during filtering when highlight property is set to true.

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.

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.

Calendars

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.
NEW FEATURES
  • Event arguments for all Calendar components has been streamlined.

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

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.
BUG FIXES
  • Now, tooltip is working properly when the container for chart is initialized without ID.
  • The performance issue with loading 800 series in chart has been fixed.
  • Mean value for Box and Whisker is now rendering properly with multiple series.
  • Loaded event is now triggering after legend click.
NEW FEATURES
  • Histogram series type has been added to chart.
  • Scrollbar feature has been added to zoom and pan the chart.

CircularGauge

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

ColorPicker

Color picker is a user interface that is used to select and adjust color values.

  • Color specification: Supports Red Green Blue, Hue Saturation Value and Hex codes.
  • Mode: Supports Picker and Palette mode.
  • Inline: Supports inline type rendering of color picker.
  • 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.

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.

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.
NEW FEATURES
  • The ng-template support provided to the dialog header, footer, and content.

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.
BUG FIXES
  • Provided support for before open event.

Excel Export

BUG FIXES
  • Currency number format issue is fixed.

Form-validator

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

Grid

BUG FIXES
  • Row elements are not available while using ngSwitch in row template.
  • Incorrect footer aggregate value calculated with async pipe is resolved.
  • 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.

Improvement

  • Added excel filter UI with async pipe support.

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.

ListView

Breaking Changes
  • The following API namings are renamed.
Existing API Name New API Name
unCheckAllItem uncheckAllItems
unCheckItem uncheckItem
checkAllItem checkAllItems
NEW FEATURES
  • UI-Virtualization implemented to render only viewable list items in a view port on loading large number of data.

Maps

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

MaskedTextBox

NEW FEATURES
  • Provided option to show/hide clear button to reset the value in MaskedTextBox

MultiSelect

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.

New Feature

BUG FIXES
  • Cleared peerDependencies warning.
  • Provided Angular 6 compatibility support

NumericTextBox

NEW FEATURES
  • Provided option to show/hide clear button to reset the value in NumericTextBox.
  • Prevented to type unwanted text and symbols in NumericTextBox.

Pdf Export

NEW FEATURES
  • Added true type font support.

Pivot Grid

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.

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

Slider

Breaking Changes
  • The following API namings are renamed.
Existing API Name New API Name
readOnly readonly
NEW FEATURES
  • Limits implemented to limit movement interval of min and max values to certain range.
  • Drag interval implemented to interact with the range slider by dragging the range.
  • Provided to support custom value arrays.
  • Bootstrap theme tooltip appearance improved by enabling tooltip pointer.

Smith Chart

Smith chart is one of the most useful data visualization tools for high frequency circuit applications. It contains two sets of circles to plot the parameters of transmission lines.

  • Types - Smithchart had two type of rendering. Impedance and Admittance.
  • Marker - Smithchart supports the marker feature. It used to identify point position.
  • 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

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.
NEW FEATURES
  • The clear button can be enabled/disabled dynamically through setClearButton method.

TimePicker

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

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

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

TreeMap

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

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

Uploader

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

common

Breaking Changes
  • The split buttons package used by the component Colour Picker, so the split buttons package is a dependency for the inputs package.
BUG FIXES
  • Cleared peerDependencies warning.
NEW FEATURES
  • Provided Angular 6 compatibility support