Features

• Combo Single Selection Mode - The Web Components 'ComboBox' now supports single-selection mode and quick filtering of the list of items via the main input prompt. Users can quickly type in the item they are looking for and be presented with a list of options. Upon pressing the enter key, the first highlighted match will be selected.
• Data Grid Documentation and Samples - Updated and improved the documentation and examples for the 'igc-grid'. The new documentation provides more detailed explanations and guidance, while the updated examples show you exactly how to implement the 'igc-grid' in your projects. These improvements will save you time and help you get the most out of the 'igc-grid'.

Features

• Added new Pivot Grid Component which displays data in a pivot table and helps perform complex analysis on a data set.
  • Use the Pivot Grid to configure and display data in a multi-dimensional pivot table structure.
  • Rows and columns represent distinct data groups and the data cell values represent aggregations.
  • This allows complex data analysis based on a simple flat data set.
  • Includes easy configuration of different dimensions and values as well as additional data operations like filtering and sorting.
• Added new ComboBox component which is a lightweight editor that enables users to easily select, filter and group predefined options in a list.
  • A list of options is provided from which users can make a selection. It displays all options in a virtualized list of items, meaning the ComboBox can simultaneously show thousands of records, where one or more options can be selected.
  • Supports options for keyboard navigation plus templates to customize how items, header and footer are displayed.
  • Additionally, the component features case-sensitive filtering, grouping, complex data binding and more.
• Added new Stepper Component which provides a wizard-like workflow and is used for showing progress through numbered steps.
  • Enables developers to divide lengthy content into a sequence of logical steps, helping end-users more easily navigate the entire process.
  • The component is displayed as a vertical or a horizontal line and has multiple features like step validation, styling, orientation and keyboard navigation.

Features

Web Components Data Grid

• Added new Data Grid component which is used for displaying data in a tabular format quickly and easily. The Data Grid is a modern grid component packed with features such as data editing, selection, filtering, sorting, grouping, pinning, paging, templating, column moving, exporting and more.
• The new Data Grid has significantly more features than the previous grid shipped in Ignite UI for Web Components, a richer API, and built-in theming.
• This new Data Grid which will be replacing the existing Web Components Data Grid. This means that if you are using the previous Web Components Data Grid, you’ll need to update the old grid with this new one.

Web Components Tree Grid

• Added new Tree Grid component which is used to visualize multicolumn self-referential hierarchical data in a tabular format.
• Built on top of the existing Data Grid component, the Tree Grid inherits all the Data Grid’s features, providing a familiar API and a seamless development experience for editing, filtering, sorting, summaries, and more.

Web Components Accordion

• Added new Web Components Accordion component which is used for building a collection of components, composed as vertically stacked panels, with clickable headers that allow expanding and collapsing of the panels.
• The accordion is commonly used to reduce the need of scrolling across multiple sections of content on a single page.
• It offers keyboard navigation and an API to control the underlying panels' expansion state.

Web Components DateTime Input

• Added new Ignite UI for Web Components DateTime Input component which allows the user to set and edit the date and time in a chosen input element.
• The user can edit both date and time portions using an editable masked input.
• Additionally, one can specify a desired display and input format, as well as min and max values to utilize validation.

Web Components Dialog

• Added new Web Components Dialog component which is used to display alerts, messages, questions, confirmation decisions, or present forms to collect input from users.
• The Dialog component opens a dialog window centered on top of the application content. The Dialog component opens in two different modes: modal and non-modal.
  • Modal dialogs block interaction with the content outside the dialog and behind the dialog’s overlay.
  • Non-modal dialogs allow users to interact with content outside of the dialog and behind the dialog’s overlay which will automatically close the dialog.

Web Components Select

• Added new Web Components Select component which allows a single selection from a list of items, placed in a dropdown.
• This form control offers a quick items list navigation, including selection, based on a single or multiple characters match.
• The Select component provides the ability to define a custom header and footer, as well as group the select items.

Web Components Tabs

• Added new Web Components Tabs component which organizes content into separate views (tabs) where only one view (tab) can be visible at a time.
• Each tab has a label which is shown in the tab’s header. Changing tabs is done by clicking a tab’s header. When the number of tab headers exceeds the width of the screen, a set of horizontal scroll buttons are shown to scroll the other tab headers into view.

Chart Improvements

• Added new features to improve charts including:
  • Automatic responsive layouts for horizontal label rotation based on browser / screen size.
  • Automatic crosshair, animations and Y-Axis labels and label formatting.
  • Enhanced rendering for rounded labels on all platforms.
  • New API for Grouping, Sorting and Summarizing Category string and numeric values, eliminating the need to pre-aggregate or calculate chart data.

Features

Web Components Grid

• Added support for pagination - Pagination is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data.

Web Components Data Visualization

• Improved the chart component - Including new defaults for the look and feel of the charts and new features across all of the data visualization components. New features include:
  • Auto-Label Rotation.
  • Enhanced Margin Computation.
  • Properties for Label Gaps.
  • Positioning in Callout Layers.
  • Style Events.
  • New Highlighting Series Modes.
  • Horizontal & Vertical Scrollbars.
  • Margin Angle Modes.
• Added two brand new data visualization components:
  • Data Legend - The Data Legend is a new component that is similar to the Legend, but it focuses more on showing the values of series, the legend badges, and the series titles.
  • Data Tooltip - The Data Tooltip is a new type of tooltip layer that displays detailed information about a series including values, legend badge and series title. Essentially, this tooltip displays a Data Legend as its content. Therefore, it will have the same styling, formatting, and filtering properties as the Data Legend component.

Web Components Chip

• The Chip component is a small container of information. Chips can contain text, avatars, images, icons, and more. Chips are commonly used as tags, filters, choices, and providing input to an application. The Chip component is highly customizable and supports selection, removing, as well as adding other components as either a prefix or suffix.

Web Components Drop Down

• The Web Components Drop Down component displays a toggleable list of predefined values and allows users to easily select a single option item with a click. It can be quickly configured to act as a drop-down menu or you can simply use it to deliver more useful visual information by grouping data. With grouping you can use both flat and hierarchical data.

Web Components Expansion Panel

• The Web Components Expansion Panel is a lightweight accordion component which can be rendered in two states - collapsed or expanded. The expansion panel can be toggled using mouse click, or keyboard interactions.

Web Components Mask Input

• The Web Components Mask Input is an enhanced input component that provides an easy and reliable way to collect end-user input:
  • Masks allow you to require input characters, optionally accept input characters, and define the type of character that is expected at a specific position in the Mask Input.
  • By using a mask, you can easily distinguish between a proper and an improper user input value. This means you can validate the input provided by the user and notify the user of any errors.
  • Common masks include phone numbers, credit card numbers, social security numbers, dates, and many more.

Web Components Progress Bar - Linear and Circular

• The Web Components Linear Progress Bar component provides a visual indicator of an application’s process as it changes. This can include processes like loading data from a database, uploading a file, or making a web service call.
  • You can use the Progress Bar to visually inform your end-users about the progress of a long running task or a series of steps. This is commonly done by showing a percentage of the process that increments as it gets closer to completing.
  • Sometimes, the time to complete a long running task is unknown. To support this scenario, the Progress Bar supports an “Indeterminate” mode. Instead of reporting a specific value of completion, the Progress Bar animation will continue to loop until the process has completed.

Web Components Rating

• The Web Components Rating component allows your end-users to select a rating value from a group of visual symbols such as stars. The Rating component is often used to provide insight regarding the opinions and experiences of users for products and services they may have used or purchased.

Web Components Slider and Range Slider

• The Web Components Slider component is a type of input control that allows selecting a value by moving the thumb along a track within a given range of values. The track can be defined as continuous or stepped. The Slider components provides a set of configurable features such as labels, tick marks, tooltips, constraints, and custom styling.
• The Web Components Range Slider is almost identical to the Slider component. The only difference being that you can select a range of values instead of a single value. Selecting a range of values is done by moving two independent thumbs along a track within a range of given values. One thumb will represent the first value of the selected range, while the second thumb will represent the last value of the selected range.

Web Components Snackbar

• The Web Components Snackbar component is used to show a brief message or notification within the application which may require feedback from the end-user. A common use-case for the Snack Bar component is to inform an end-user that a record has been deleted, and then provide an option to undo the delete operation to restore the record.

Web Components Toast

• The Web Components Toast component is used to display an alert or notification on the current page. Common notifications include system messaging, push notifications, warning messages, information, and other non-interactive notifications. The Toast component is usually shown at the bottom of the screen and disappears automatically after a set period of time. It is important to note that the Toast component cannot be dismissed by the end-user.

Web Components Tree

• The Web Components Tree component allows users to represent hierarchical data in a tree-view structure, maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model. Its primary purpose is to allow end-users to visualize and navigate within hierarchical data structures. The Tree component also provides load on demand capabilities, item activation, bi-state and cascading selection of items through built-in checkboxes, built-in keyboard navigation and more.