Ignite UI for React Changelog
All notable changes for each version of Ignite UI for React are documented on this page.
18.7.0 (September 2024)
igniteui-react-charts (Charts)
New Data Pie Chart - The
IgrDataPieChart
is a new component that renders a pie chart. This component works similarly to theIgrCategoryChart
, in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component.New Proportional Category Angle Axis - New axes for the Radial Pie Series in the
IgrDataChart
, to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.-
New ToolActionCheckboxList A new CheckboxList ToolAction that displays a collection of items with checkboxes for selecting. A grid inside ToolAction CheckboxList grows in height up to 5 items, then a scrollbar is displayed. Requires IgrCheckboxListModule to be registered.
New Filtering Support
Axis Field Changes New default IconMenu in Toolbar when targeting CategoryChart. Label fields are mapped to the X-axis and Value fields are mapped to the Y-axis. Target chart reacts in realtime to changes made. IconMenu is hidden when chart has no ItemsSource set.
igniteui-react
- New Banner component.
- New DatePicker component.
- New
IgrDivider
component. - Added support for native events to all components.
IgrIcon
- Added
setIconRef
method. This allows to register and replace icons by SVG files. - All components now use icons by reference internally so that it's easy to replace them without explicitly providing custom templates.
- Added
IgrCombo
,DatePicker
,IgrDialog
,IgrDropdown
,ExpansionPanel
,IgrNavDrawer
,IgrToast
,IgrSnackbar
, IgrSelectComponent- Toggle methods
show
,hide
,toggle
methods return true now on success, otherwise false.
- Toggle methods
- IgrButtonComponent,
IgrIconButton
,IgrCheckbox
,IgrSwitch
,IgrCombo
,IgrDateTimeInput
,IgrInput
,IgrMaskInput
,IgrRadio
, IgrSelectComponent,IgrTextarea
- Deprecated custom
focus
andblur
events. Use the nativeonFocus
andonBlur
events instead
- Deprecated custom
IgrRadioGroup
BREAKING CHANGES:
- Renamed old IgrDatePicker to IgrXDatePicker.
- Removed
Form
component. Use native form instead. - Removed
size
property in favor of the--ig-size
CSS custom property for the following components:IgrAvatar
, IgrButtonComponent,IgrIconButton
,IgrCalendar
,IgrChip
,IgrDropdown
,IgrIcon
,IgrInput
,IgrList
,IgrRating
,IgrSnackbar
,IgrTabs
,IgrTree
IgrBadge
,IgrChip
,IgrLinearProgress
,IgrCircularProgress
- Renamed
Variant
property type toStyleVariant
.
- Renamed
IgrCalendar
- Renamed
WeekStart
property type toWeekDays
.
- Renamed
IgrCheckbox
,IgrSwitch
- Changed
change
event argument type fromIgrComponentBoolValueChangedEventArgs
toIgrCheckboxChangeEventArgs
.
- Changed
IgrCombo
, IgrSelectComponent- Removed
positionStrategy
,flip
,sameWidth
properties.
- Removed
IgrDateTimeInput
- Removed
maxValue
andminValue
properties. Usemax
andmin
instead.
- Removed
IgrDropdown
- Removed
positionStrategy
property.
- Removed
IgrInput
- Removed old named
maxlength
andminlength
properties. UsemaxLength
andminLength
. - Removed old named
readonly
andinputmode
properties. UsereadOnly
andinputMode
. - Changed
inputMode
type also tostring
.
- Removed old named
IgrRadio
- Changed
change
event argument type fromIgrComponentBoolValueChangedEventArgs
toIgrRadioChangeEventArgs
.
- Changed
IgrRangeSlider
- Removed
ariaThumbLower
andariaThumbUpper
properties. UsethumbLabelLower
andthumbLabelUpper
instead.
- Removed
IgrRating
- Renamed
readonly
property toreadOnly
.
- Renamed
igniteui-react-grids
- All Grids
- Added new
RowClick
event.
- Added new
IgrPivotGrid
- Added
sortable
property for aIgrPivotDimension
. - Added horizontal layout. Can be enabled inside the new
pivotUI
property asrowLayout
horizontal
. - Added row dimension summaries for horizontal layout only. Can be enabled for each
IgrPivotDimension
by settinghorizontalSummary
to true. - Added
horizontalSummariesPosition
property to thepivotUI
, configuring horizontal summaries position. - Added row headers for the row dimensions. Can be enabled inside the new
pivotUI
property asshowHeaders
true. - Keyboard navigation now can move in to row headers back and forth from any row dimension headers or column headers.
- Added keyboard interactions for row dimension collapse using Alt + ↑ ↓ ← → arrows and row headers sorting using Ctrl + ↑ ↓ arrows.
- Added
BREAKING CHANGES:
- All Grids
IgrRowIsland
- Removed
displayDensity
deprecated property. - Renamed
actualColumns
,contentColumns
properties toactualColumnList
andcontentColumnList
. Usecolumns
orcolumnList
property to get all columns now. - Renamed
rowDelete
androwAdd
event argument type toIgrRowDataCancelableEventArgs
. - Renamed
contextMenu
event argument type toIgrGridContextMenuEventArgs
. - Removed
IgrGridEditEventArgs
,IgrGridEditDoneEventArgs
,IgrPinRowEventArgs
eventsrowID
andprimaryKey
properties. UserowKey
instead.
IgrPivotGrid
- removed
showPivotConfigurationUI
property. UsepivotUI
and set inside it the newshowConfiguration
option.
- removed
IgrColumn
- Removed
movable
property. Use Grid'smoving
property now. - Removed
columnChildren
property. UsechildColumns
instead.
- Removed
columnGroup
- Removed
children
property. UsechildColumns
instead.
- Removed
IgrPaginator
- Removed
isFirstPageDisabled
andisLastPageDisabled
properties. UseisFirstPage
andisLastPage
instead.
- Removed
18.6.1 (June 2024)
igniteui-react
IgrInput
,IgrTextarea
- exposedvalidateOnly
to enable validation rules being enforced without restricting user input.IgrDropdown
-IgrPositionStrategy
property is deprecated. The dropdown now uses thePopover
API to render its container in the top layer of the browser viewport, making the property obsolete.IgrDockManager
-IgrSplitPane
isMaximized
is deprecated. Having isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized. Use theisMaximized
property ofIgrTabGroupPane
and/orIgrContentPane
instead.
igniteui-react-grids
DisplayDensity
deprecated in favor of the--ig-size
CSS custom property. Check out the Grid Size topic for more.IgrPivotGrid
- Configuration of the component can now be applied correctly.
igniteui-react-charts (Charts)
- Data Legend Grouping & Data Tooltip Grouping - New grouping feature added. The property
GroupRowVisible
toggles grouping with each series opting in can assign group text via thedataLegendGroup
property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users.
Chart Selection - New series selection styling. This is adopted broadly across all category, financial and radial series for
IgrCategoryChart
andIgrDataChart
. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular dataitem. AlsoSelectedSeriesItemsChanged
event andselectedSeriesItems
are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.Proportional Category Angle Axis - New axes for the Radial Pie Series in the
IgrDataChart
, to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart.Treemap Highlighting - Now exposes a
highlightingMode
property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options:Brighten
where the highlight will apply to the item that you hover the mouse over only, andFadeOthers
where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using thehighlightingTransitionDuration
property.Treemap Percent-based Highlighting - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new
highlightedDataSource
. Can be toggled viahighlightedValuesDisplayMode
and styled viaFillBrushes
.IgrToolbar
- NewIsHighlighted
option for ToolAction for outlining a border around specific tools of choice.
igniteui-react-gauges (Gauges)
IgrRadialGauge
- New label for the highlight needle.
highlightLabelText
andhighlightLabelSnapsToNeedlePivot
and many other styling related properties for the HighlightLabel were added.
- New label for the highlight needle.
18.6.0 (March 2024)
igniteui-react-charts
New Data Filtering via the
initialFilter
property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data.XamRadialChart
- New Label Mode
The
IgrCategoryAngleAxis
for the now exposes alabelMode
property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting theCenter
enum, or use the new mode,ClosestPoint
, which will bring the labels closer to the circular plot area.
- New Label Mode
The
igniteui-react-grids
- New [
IgrHierarchicalGrid
](grids/hierarchical-grid/overview.md) component
igniteui-react-gauges
IgrRadialGauge
- New title/subtitle properties.
titleText
,subtitleText
will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such asTitleFontSize
,TitleFontFamily
,TitleFontStyle
,TitleFontWeight
andtitleExtent
. Finally, the newtitleDisplaysValue
will allow the value to correspond with the needle's position. - New
opticalScalingEnabled
andopticalScalingSize
properties for theIgrRadialGauge
. This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature here - New highlight needle was added.
highlightValue
andhighlightValueDisplayMode
when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
- New title/subtitle properties.
IgrLinearGauge
- New highlight needle was added.
highlightValue
andhighlightValueDisplayMode
when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
- New highlight needle was added.
IgrBulletGraph
- The Performance bar will now reflect a difference between the value and new
highlightValue
when thehighlightValueDisplayMode
is applied to the 'Overlay' setting. The highlight value will show a filtered/subset completed measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time.
- The Performance bar will now reflect a difference between the value and new
igniteui-react
- New
IgrTextarea
component - New
IgrButtonGroup
component IgrDockManager
- New
proximityDock
property. If enabled, docking indicators are not visible and the end user can dock the dragged pane by dragging it close to the target pane edges. - New
containedInBoundaries
property. Determines whether the floating panes are kept inside the Dock Manager boundaries. Defaults tofalse
. - New
showPaneHeaders
property. Determines whether pane headers are only shown on hover or always visible. Defaults toalways
.
- New
IgrInput
,IgrMaskInput
,IgrDateTimeInput
,IgrRating
Readonly
has been renamed toreadOnly
IgrInput
IgrTree
- Added
toggleNodeOnClick
property that determines whether clicking over a node will change its expanded state or not. Defaults tofalse
.
- Added
IgrRating
allowReset
added. When enabled selecting the same value will reset the component. Behavioral change - In previous releases this was the default behavior of the rating component. Make sure to setallowReset
if you need to keep this behavior in your application.
select
,IgrDropdown
- exposed
selectedItem
,items
andgroups
getters
- exposed
Deprecations
- The
Form
component has been deprecated. Please, use the native form element instead. - The
size
property and attribute have been deprecated for all components. Use the--ig-size
CSS custom property instead. The following example sets the size of the avatar component to small:.avatar { --ig-size: var(--ig-size-small); }
IgrDateTimeInput
IgrRangeSlider
AriaLabelLower
andAriaLabelUpper
properties have been deprecated. Please, usethumbLabelLower
andthumbLabelUpper
instead.
Removed
- Removed our own
dir
attribute which shadowed the default one. This is a non-breaking change. IgrSlider
-ariaLabel
shadowed property. This is a non-breaking change.IgrCheckbox
-ariaLabelledBy
shadowed attribute. This is a non-breaking change.IgrSwitch
-ariaLabelledBy
shadowed attribute. This is a non-breaking change.IgrRadio
-ariaLabelledBy
shadowed attribute. This is a non-breaking change.
18.5.0 (January 2024)
igniteui-react-charts (Charts)
- Chart Highlight Filter - The
IgrCategoryChart
andIgrDataChart
now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line.
18.4.0 (December 2023)
igniteui-react-grids (Grid)
- Added New Features - State Persistence
18.3.0 (October 2023)
igniteui-react-grids (Toolbar - Beta)
Save tool action has been added to save the chart to an image via the clipboard.
Vertical orientation has been added via the toolbar's
orientation
property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully.Custom SVG icons support was added via the toolbar's
renderImageFromText
method, further enhancing custom tool creation.Grid - This is a new fully functional cross-platform grid and includes features like filtering, sorting, templates, row selection, row grouping, row pinning and movable columns.
Deprecated Components
18.2.0 (June 2023)
New Components
- Toolbar - Beta. This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our
IgrDataChart
orIgrCategoryChart
components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.
igniteui-react-charts (Charts)
ValueLayer - A new series type named the
IgrValueLayer
is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to theIgrCategoryChart
andIgrFinancialChart
by adding to the newvalueLines
collection.It is now possible to apply a dash array to the different parts of the series of the
IgrDataChart
. You can apply this to the series plotted in the chart, the gridlines of the chart, and the trendlines of the series plotted in the chart.
18.1.0 (November 2022)
Added significant improvements to default behaviors, and refined the Category Chart API to make it easier to use. These new chart improvements include:
- Responsive layouts for horizontal label rotation based on browser / screen size.
- Enhanced rendering for rounded labels on all platforms.
- Added marker properties to StackedFragmentSeries.
- Added
shouldPanOnMaximumZoom
property. - New Category Axis Properties:
- ZoomMaximumCategoryRange
- ZoomMaximumItemSpan
- ZoomToCategoryRange
- ZoomToItemSpan
- New Chart Aggregation API for Grouping, Sorting and Summarizing Category string and numeric values, eliminating the need to pre-aggregate or calculate chart data:
- InitialSortDescriptions
- InitialSorts
- SortDescriptions
- InitialGroups
- InitialGroupDescriptions
- GroupDescriptions
- InitialSummaries
- InitialSummaryDescriptions
- SummaryDescriptions
- InitialGroupSortDescriptions
- GroupSorts
- GroupSortDescriptions
[!Note] Chart Aggregation will not work when using
includedProperties
|excludedProperties
. These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
igniteui-react-grids (Data Grid)
- Changed IgrColumn to
IgrDataGridColumn
- Changed GridCellEventArgs to
IgrDataGridCellEventArgs
- Changed GridSelectionMode to
DataGridSelectionMode
- Changed SummaryOperand to
DataSourceSummaryOperand
16.16.0 (June 2022)
igniteui-react-charts (Charts)
- Added the highly-configurable DataLegend component, which works much like the
IgrLegend
, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. - Added the highly-configurable DataToolTip which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types.
- Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the
isTransitionInEnabled
property to true. From there, you can set thetransitionInDuration
property to determine how long your animation should take to complete and thetransitionInMode
to determine the type of animation that takes place. - Added
AssigningCategoryStyle
event, is now available to all series inIgrDataChart
. This event is handled when you want to conditionally configure aspects of the series items such asFill
background-color and highlighting. - New
allowedPositions
enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for exampleTopLeft
,TopRight
,BottomLeft
orBottomRight
. - New corner radius properties added for Annotation Layers; used to round-out the corners of each of the callouts. Note, a corner radius has now been added by default.
calloutCornerRadius
for CalloutLayeraxisAnnotationBackgroundCornerRadius
for FinalValueLayerxAxisAnnotationBackgroundCornerRadius
andyAxisAnnotationBackgroundCornerRadius
for CrosshairLayer
- New
horizontalViewScrollbarMode
andverticalViewScrollbarMode
enumeration to enable scrollbars in various ways. When paired withisVerticalZoomEnabled
orisHorizontalZoomEnabled
, you'll be able to persist or fade-in and out the scrollbars along the axes to navigate the chart. - New
FavorLabellingScaleEnd
, determines whether the axis should favor emitting a label at the end of the scale. Only compatible with numeric axes (e.g.IgrNumericXAxis
,IgrNumericYAxis
,PercentChangeAxis
). - New
isSplineShapePartOfRange
determines whether to include the spline shape in the axis range requested of the axis. - New
xAxisMaximumGap
, determines the maximum allowed value for the plotted series when usingxAxisGap
. The gap determines the amount of space between columns or bars of plotted series. - New
xAxisMinimumGapSize
, determines the minimum allowed pixel-based value for the plotted series when usingxAxisGap
to ensure there is always some spacing between each category.
igniteui-react-grids (Data Grid)
Added New Feature - Row Paging which 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.
16.15.1 (December 2021)
igniteui-react-grids (Data Grid)
Data Grid
- Added
ValueMultiField
, of type string[], in theIgrComboBoxColumn
to be used when your items in the drop down contain a key that consists of multiple fields.
[!Note] The following breaking changes were introduced
- Changed
valueField
property from type string[] to string.
igniteui-react-inputs (Inputs)
Date Picker
- Changed ValueChanged event to
SelectedValueChanged
.
Multi-Column ComboBox
- Changed
TextChanged
event toTextValueChanged
. - Changed
ValueChanged
event toSelectedValueChanged
.
16.15.0 (November 2021)
[!Note] Please ensure package "lit-html": "^2.0.0" or newer is added to your project for optimal compatibility.
igniteui-react-charts (Charts)
This release introduces a few improvements and simplifications to visual design and configuration options for the geographic map and all chart components.
- Changed
yAxisLabelLocation
property's type to YAxisLabelLocation from AxisLabelLocation inIgrFinancialChart
andIgrCategoryChart
- Changed
xAxisLabelLocation
property's type to XAxisLabelLocation from AxisLabelLocation inIgrFinancialChart
- Added
xAxisLabelLocation
property toIgrCategoryChart
- Added support for representing geographic series of
IgrGeographicMap
in a legend - Added crosshair lines by default in
IgrFinancialChart
andIgrCategoryChart
- Added crosshair annotations by default in
IgrFinancialChart
andIgrCategoryChart
- Added final value annotation by default in
IgrFinancialChart
- Added new properties in Category Chart and Financial Chart:
crosshairsLineThickness
and other properties for customizing crosshairs linescrosshairsAnnotationXAxisBackground
and other properties for customizing crosshairs annotationsfinalValueAnnotationsBackground
and other properties for customizing final value annotationsareaFillOpacity
that allow changing opacity of series fill (e.g. Area chart)markerThickness
that allows changing thickness of markers
- Added new properties in Category Chart, Financial Chart, Data Chart, and Geographic Map:
markerAutomaticBehavior
that allows which marker type is assigned to multiple series in the same chartlegendItemBadgeShape
for setting badge shape of all series represented in a legendlegendItemBadgeMode
for setting badge complexity on all series in a legend
- Added new properties in Series in Data Chart and Geographic Map:
legendItemBadgeShape
for setting badge shape on specific series represented in a legendlegendItemBadgeMode
for setting badge complexity on specific series in a legend
- Changed default vertical crosshair line stroke from #000000 to #BBBBBB in category chart and series
- Changed shape of markers to circle for all series plotted in the same chart. This can be reverted by setting chart's
markerAutomaticBehavior
property toSmartIndexed
enum value - Simplified shapes of series in chart's legend to display only circle, line, or square. This can be reverted by setting chart's
legendItemBadgeMode
property toMatchSeries
enum value - Changed color palette of series and markers displayed in all charts to improve accessibility
Old brushes/outlines | New outline/brushes |
---|---|
#8BDC5C #8B5BB1 #6DB1FF #F8A15F #EE5879 #735656 #F7D262 #8CE7D9 #E051A9 #A8A8B7 |
#8BDC5C #8961A9 #6DB1FF #82E9D9 #EA3C63 #735656 #F8CE4F #A8A8B7 #E051A9 #FF903B |
igniteui-react-grids (Data Grid)
- New Features Added:
- New API:
- Added
SelectionChanged
event. Used to detect changes on selection interactions e.g. Multiple row selection.
- Added
- Breaking Changes:
- Changed grid's SummaryScope property's type to SummaryScope from
DataSourceSummaryScope
- Changed GroupHeaderDisplayMode property's type to GroupHeaderDisplayMode from
DataSourceSectionHeaderDisplayMode
- Changed grid's SummaryScope property's type to SummaryScope from
16.14.0 (April 2021)
igniteui-react-charts (Charts)
This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. IgrDataChart
, IgrCategoryChart
, and IgrFinancialChart
.
- Changed Bar/Column/Waterfall series to have square corners instead of rounded corners
- Changed Scatter High Density series’ colors for heat min property from #8a5bb1 to #000000
- Changed Scatter High Density series’ colors for heat max property from #ee5879 to #ee5879
- Changed Financial/Waterfall series’
NegativeBrush
andNegativeOutline
properties from #C62828 to #ee5879 - Changed marker's thickness to 2px from 1px
- Changed marker's fill to match the marker's outline for
IgrPointSeries
,IgrBubbleSeries
,IgrScatterSeries
,IgrPolarScatterSeries
. You can use setmarkerFillMode
property to Normal to undo this change - Compressed labelling for the
IgrTimeXAxis
andIgrOrdinalTimeXAxis
- New Marker Properties:
- series.
markerFillMode
- Can be set toMatchMarkerOutline
so the marker depends on the outline - series.
markerFillOpacity
- Can be set to a value 0 to 1 - series.
markerOutlineMode
- Can be set toMatchMarkerBrush
so the marker's outline depends on the fill brush color
- series.
- New Series Property:
- series.
outlineMode
- Can be set to toggle the series outline visibility. Note, for Data Chart, the property is on the series
- series.
- New chart properties that define bleed over area introduced into the viewport when the chart is at the default zoom level. A common use case is to provide space between the axes and first/last data points. Note, the
computedPlotAreaMarginMode
, listed below, will automatically set the margin when markers are enabled. The others are designed to specify aDouble
to represent the thickness, where PlotAreaMarginLeft etc. adjusts the space to all four sides of the chart:- chart.
plotAreaMarginLeft
- chart.
plotAreaMarginTop
- chart.
plotAreaMarginRight
- chart.
plotAreaMarginBottom
- chart.
computedPlotAreaMarginMode
- chart.
- New Highlighting Properties
- chart.
highlightingMode
- Sets whether hovered or non-hovered series to fade, brighten - chart.
highlightingBehavior
- Sets whether the series highlights depending on mouse position e.g. directly over or nearest item - Note, in previous releases the highlighting was limited to fade on hover.
- chart.
- Added Highlighting Stacked, Scatter, Polar, Radial, and Shape series:
- Added Annotation layers to Stacked, Scatter, Polar, Radial, and Shape series:
- Added support for overriding the data source of individual stack fragments within a stacked series
- Added custom style events to Stacked, Scatter, Range, Polar, Radial, and Shape series
- Added support to automatically sync the vertical zoom to the series content
- Added support to automatically expanding the horizontal margins of the chart based on the initial labels displayed
- Redesigned color palette of series and markers:
Old brushes/outlines | New outline/brushes |
---|---|
#7446B9 #9FB328 #F96232 #2E9CA6 #DC3F76 #FF9800 #3F51B5 #439C47 #795548 #9A9A9A |
#8bdc5c #8b5bb1 #6db1ff #f8a15f #ee5879 #735656 #f7d262 #8ce7d9 #e051a9 #a8a8b7 |
for example:
Chart Legend
- Added horizontal
orientation
property to ItemLegend that can be used with Bubble, Donut, and Pie Chart - Added
legendHighlightingMode
property - Enables series highlighting when hovering over legend items
igniteui-react-maps (GeoMap)
[!Note] These features are CTP
- Added support for wrap around display of the map (scroll infinitely horizontally)
- Added support for shifting display of some map series while wrapping around the coordinate origin
- Added support for highlighting of the shape series
- Added support for some annotation layers for the shape series
igniteui-react-grids (Data Grid)
- Added
EditOnKeyPress
aka Excel-style Editing, instantly begin editing when typing. - Added
EditModeClickAction
property - By default double-clicking is required to enter edit mode. This can be set toSingleClick
to allow for edit mode to occur when selecting a new cell. - Added
EnterKeyBehaviors
property - aka Excel-style Navigation (Enter Behavior) – controls the behavior of the enter key, e.g. Options are (none, edit, move up, down, left, right) - Added
EnterKeyBehaviorAfterEdit
property - While in edit-mode, this property controls when enter is pressed, e.g. Options are (moves to the cell below, above, right, left) - Added
SelectAllRows
- method. - Added Row Range Selection - With
GridSelectionMode
property set to MultipleRow the following new functionality is now included:- Click and drag to select rows
- Shift and click to select multiple rows.
- Shift and press the up/down arrow keys to select multiple rows.
- Pressing space bar toggles selection of active row via
GridSelectionMode
property set to MultipleRow or SingleRow - Added Column Summaries to Column Options Dialog.
igniteui-react-inputs (Inputs)
Date Picker
ShowTodayButton
- Toggles Today button visibilitylabel
- Adds a label above the date valueplaceholder
property - adds custom text when no value is selectedFormatString
- Customize input date string e.g. (yyyy-MM-dd
)DateFormat
- Specifies whether to display selected dates as LongDate or ShortDateFirstDayOfWeek
- Specifies first day of weekFirstWeekOfYear
- Specifies when to display first week of the year, e.g. (First Full Week, First Four day Week)ShowWeekNumbers
- Toggles Week number visibilityMinDate
&MaxDate
- Date limits, specifying a range of available selectable dates.- Added Accessibility
16.12.3 (November 2020)
igniteui-react-grids (Data Grid)
[!Note] These breaking changes were introduce in the grid package.
- Changed name of PropertyPath
The data grid component property propertyPath
has been renamed to field
. This applies to all Column types, GroupDescription, SortDescription & SummaryDescription.
<IgrTextColumn field="Name"/>
import { IgrColumnSummaryDescription, IgrColumnSortDescription, IgrColumnGroupDescription } from 'igniteui-react-grids'
const productCount = new IgrColumnSummaryDescription();
productCount.field = "ProductName";
const colSortDesc = new IgrColumnSortDescription();
colSortDesc.field = "UnitsInStock";
const income = new IgrColumnGroupDescription();
income.field = "Income";
16.12.2 (April 2020)
igniteui-react-grids (Data Grid)
- Changed Name of Live Grid
The data grid component and it's corresponding module's names have changed from "LiveGrid" to "DataGrid".
[!Note] These breaking changes were introduce in these packages and components only:
The new code for importing the grid and it's corresponding module is:
import { IgrDataGrid } from "igniteui-react-grids";
import { IgrDataGridModule } from 'igniteui-react-grids';
- Required Peer Dependency for Data Grid
The data grid component requires the "inputs" package.
**npm install --save igniteui-react-inputs**
16.11.7
- Changed Import Statements
Import statements have been simplified to use just package names instead of full paths to API classes and enums.
[!Note] These breaking changes were introduce in these packages and components only:
Affected Packages | Affected Components |
---|---|
igniteui-react-excel | Excel Library |
igniteui-react-spreadsheet | Spreadsheet |
igniteui-react-maps | Geo Map, Treemap |
igniteui-react-gauges | Bullet Graph, Linear Gauge, Radial Gauge |
igniteui-react-charts | Category Chart, Data Chart, Donut Chart, Financial Chart], Pie Chart, Zoom Slider |
igniteui-react-core | all classes and enums |
igniteui-react-grids | Data Grid |
- Code After Changes
Now, you need to use just package names instead of full paths to API classes and enums.
Please also note that the name of the Data Grid component and its corresponding modules have also changed.
// gauges:
import { IgrLinearGauge } from "igniteui-react-gauges";
import { IgrLinearGaugeModule } from "igniteui-react-gauges";
import { IgrLinearGraphRange } from "igniteui-react-gauges";
import { IgrRadialGauge } from 'igniteui-react-gauges';
import { IgrRadialGaugeModule } from 'igniteui-react-gauges';
import { IgrRadialGaugeRange } from 'igniteui-react-gauges';
import { SweepDirection } from 'igniteui-react-core';
// charts:
import { IgrFinancialChart } from 'igniteui-react-charts';
import { IgrFinancialChartModule } from 'igniteui-react-charts';
import { IgrDataChart } from 'igniteui-react-charts';
import { IgrDataChartCoreModule } from 'igniteui-react-charts';
// maps:
import { IgrGeographicMap } from "igniteui-react-maps";
import { IgrGeographicMapModule } from "igniteui-react-maps";
// grids:
import { IgrLiveGrid } from "igniteui-react-grids";
import { IgrLiveGridModule } from 'igniteui-react-grids';
- Code Before Changes
Before, you had to import using full paths to API classes and enums:
// gauges:
import { IgrLinearGauge } from "igniteui-react-gauges/ES5/igr-linear-gauge";
import { IgrLinearGaugeModule } from "igniteui-react-gauges/ES5/igr-linear-gauge-module";
import { IgrLinearGraphRange } from "igniteui-react-gauges/ES5/igr-linear-graph-range";
import { IgrRadialGauge } from "igniteui-react-gauges/ES5/igr-radial-gauge";
import { IgrRadialGaugeModule } from "igniteui-react-gauges/ES5/igr-radial-gauge-module";
import { IgrRadialGaugeRange } from "igniteui-react-gauges/ES5/igr-radial-gauge-range";
import { SweepDirection } from "igniteui-react-core/ES5/SweepDirection";
// charts:
import { IgrFinancialChart } from "igniteui-react-charts/ES5/igr-financial-chart";
import { IgrFinancialChartModule } from "igniteui-react-charts/ES5/igr-financial-chart-module";
import { IgrDataChart } from "igniteui-react-charts/ES5/igr-data-chart";
import { IgrDataChartCoreModule } from "igniteui-react-charts/ES5/igr-data-chart-core-module";
// maps:
import { IgrGeographicMap } from "igniteui-react-maps/ES5/igr-geographic-map";
import { IgrGeographicMapModule } from "igniteui-react-maps/ES5/igr-geographic-map-module";
// grids:
import { IgrLiveGrid } from "igniteui-react-grids/ES5/igr-live-grid";
import { IgrLiveGridModule } from 'igniteui-react-grids/ES5/igr-live-grid-module';