Ignite UI for Blazor Changelog
All notable changes for each version of Ignite UI for Blazor are documented on this page.
22.1.41
IgniteUI.Blazor (Charts)
- Added the highly-configurable DataLegend component, which works much like the
Legend
, 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 inDataChart
. This event is handled when you want to conditionally configure aspects of the series items such asFill
background-color and highlighting. - New
AllowedPositions
enumeration forIgbCalloutLayer
. 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.
- 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.IgbNumericXAxis
,IgbNumericYAxis
,IgbPercentChangeYAxis
). - 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.Blazor (DockManager)
- The Blazor Dock Manager is now in "Preview" state, that provides a way to manage a complex layout using different type of panes with various sizes, positions, and behaviors, and that can be docked to various locations within an app. The dock manager allows your end-users to customize it further by pinning, resizing, moving, floating, and hiding panes.
IgniteUI.Blazor (Data Grid)
- Added Row Paging
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.
New Components
21.2.52
Note
The following breaking changes were introduced
IgniteUI.Blazor (Data Grid)
- Changed
ValueField
property from type string[] to string.
IgniteUI.Blazor (Inputs)
- A new
ValueChanged
event supports 2-way binding and should only be handled if you have not bound theValue
property. In order to read the Value field from the control without databinding theValueChanged
event should be handled, otherwise if your data is not bound you should use GetCurrentValueAsync to read the controls Value.
Date Picker
- Changed
ValueChanged
event toSelectedValueChanged
.
Multi-Column ComboBox
- Changed
TextChanged
event toTextValueChanged
. - Changed
ValueChanged
event toSelectedValueChanged
.
21.2.22
Note
The Igb prefix is now required for the Ignite UI for Blazor components and nested elements within each component. This API change was necessary to avoid ambiguity between Infragistics controls and 3rd party controls.
For example, <IgbCategoryChart/>
instead of <CategoryChart/>
New Components
- Avatar
- Badge
- Button & Icon Button
- Card
- Checkbox
- Form
- Icon
- List
- Navigation Bar
- Navigation Drawer
- Radio & Radio Group
- Ripple
- Switch
Chart and Map Improvements
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 inIgbFinancialChart
andIgbCategoryChart
- Changed
XAxisLabelLocation
property's type to XAxisLabelLocation from AxisLabelLocation inIgbFinancialChart
- Added
XAxisLabelLocation
property toIgbCategoryChart
- Added support for representing geographic series of
IgbGeographicMap
in a legend - Added crosshair lines by default in
IgbFinancialChart
andIgbCategoryChart
- Added crosshair annotations by default in
IgbFinancialChart
andIgbCategoryChart
- Added final value annotation by default in
IgbFinancialChart
- 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.Blazor (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
21.1.52
New Visual Designs
Charts & Maps
This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. DataChart
, IgbCategoryChart
, and IgbFinancialChart
.
- 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
IgbPointSeries
,IgbBubbleSeries
,IgbScatterSeries
,IgbPolarScatterSeries
. You can use setMarkerFillMode
property to Normal to undo this change - Compressed labelling for the
IgbTimeXAxis
andIgbOrdinalTimeXAxis
- 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
Geographic Map
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.Blazor (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.Blazor (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