This topic presents the controls and the new and enhanced features for the Ignite UI™ 2016 Volume 2 release.
The following summarizes what’s new in 2016 Volume 2. Additional details follow.
| Feature | Description | |
|---|---|---|
| Ignite UI for jQuery OSS | A big part of the Ignite UI for jQuery toolset is now open source. Checkout the repository on GitHub | |
| Ignite UI for jQuery directives for Angular 2 (RTM) | Ignite UI for jQuery widgets have component wrappers for Angular 2. For detailed information visit Ignite UI for jQuery Angular 2 GitHub page. | |
| Ignite UI for jQuery Components for React (CTP) | Ignite UI for jQuery widgets have component wrappers for React. For detailed information visit Ignite UI for jQuery Components for React page. | |
| ASP.NET Core 1.0 MVC Helpers | Ignite UI for jQuery MVC Helpers now support ASP.NET Core 1.0. Checkout the Using Ignite UI for jQuery controls in ASP.NET Core 1.0 topic. | |
| ASP.NET Core 1.0 MVC Tag Helpers | Ignite UI for jQuery now provides Tag Helpers for ASP.NET Core 1.0. Checkout the Using Ignite UI for jQuery Tag Helpers topic. | |
| New Javascript file breakdown | The goal is to reduce the amount of code required in order to load a specific feature. | |
| DPI Scaling | High DPI Scaling is enabled by default now which makes the components look much sharper and crisper than before. Components that have the DPI Scaling by default now are - igDataChart, igPieChart, igFunnelChart, igDoughnutChart, igRadialGauge, igLinearGauge, igBulletGraph, igSparkline, igRadialMenu. | |
| Standard moduling support | All of IgniteUI JavaScript files contain AMD module definitions. Therefore these files can be loaded using standard module loaders such as Require.JS, System.JS etc. | |
| Ignite UI for jQuery NuGet packages | New Ignite UI for jQuery NuGet packages are available, including a package for creating .NET Core applications. |
| Feature | Description | |
|---|---|---|
| New Control | With a simplified API this control can be easily configured to display category data. |
| Feature | Description | |
|---|---|---|
| New property | A new property ConsolidatedColumnVerticalPosition is added, which determines the positioning logic to use for columns which have been consolidated into a single visual element. | |
| Performance Enhancements | In the Infragistics 2016 volume 2 release, we significantly improved the performance of the igDataChart control. | |
| Design Changes | We redesigned the defaults of the igDataChart, igPieChart, igFunnelChart, igDoughnutChart, igRadialGauge, igLinearGauge, igBulletGraph, and igSparkline control. | |
| File Size Reduction | The size has been reduced for loading a category chart, and we also modularized the igDataChart control. |
| Feature | Description | |
|---|---|---|
| New grouping functionality | The igDataSource now handles grouping and persists the grouping expand and collapse state. | |
| Sorting performance optimizations | Local sorting is now up to 10x faster. |
| Feature | Description |
|---|---|
| Label Styling | You can now specify the color of the funnel chart's inner and outer labels. |
| Feature | Description | |
|---|---|---|
| Group By Improvements | Group By now features improved Virtualization support and APIs to expand/collapse rows. | |
| Sorting performance optimizations | Local sorting is now up to 10x faster. | |
| Inline editing for Multi-Row Layout | The Multi-Row Layout feature now supports inline row and cell editing. | |
| Multi-Column Headers collapsible column groups | Collapsible Column Groups is a feature that provides an option to collapse/expand a Multi-Column Header to a smaller set of data. | |
| Column setter | Column collection now can be changed at runtime. | |
| igGrid Modal Dialog extensibility | Grid features that include dialogs (Updating, Filtering, Sorting, Hiding, GroupBy, Column Moving) now add a new dialogWidget option allowing for custom dialog implementations - view sample and topic. |
|
| Binding Real-Time Data sample | A new sample is added that demonstrates binding igGrid to real-time data - view sample. | |
| Performance Options sample | A new sample is added that demonstrates the performance options provided by the igGrid - view sample. |
| Feature | Description | |
|---|---|---|
| Slice Selection | You can now select a pie slice on the igPieChart control. | |
| New Event | New event that fires when a label is clicked. | |
| Label Coloring | You can now specify the color of the pie's inner and outer labels. | |
| Data Path Options Renamed | The valueMemberPath and labelMemberPath options are renamed. |
| Feature | Description | |
|---|---|---|
| New Control | The igScroll™ control unifies scrolling experience between browsers and devices. |
| Feature | Description | |
|---|---|---|
| Integration with Custom Components | The igZoombar now exposes a pluggable integration mechanism for third-party custom components. Checkout the igZoombar Integration with Custom Components topic. |
A new control, the Category Chart, is added in this 2016 volume 2 release. This chart can be easily configured to display category data using a simple API. All you need to do is bind your data (a collection or a collection of collections).
By using a smart Data Adapter, the data is analyzed and the appropriate visualization is rendered. For example, if the chartType is set to "Auto", the control can determine that if it is provided a small data set then a column chart should be plotted, while a larger data set will draw a line chart.
However, you can also explicitly specify the chart type by setting the chartType to line, area, column, point, spline, splineArea, stepArea, stepLine, or waterfall.
Another example of the intuitive behavior of the Category Chart control is that you do not need to explicitly set the labels. The Category Chart will use the first appropriate string property that it finds and will use that for the labels.
Built to be easily configurable, it uses the igDataChart control as its engine, which means that it benefits from the high performing and powerful Data Chart features.
The igDataChart, igPieChart, igFunnelChart, igDoughnutChart, igRadialGauge, igLinearGauge, igBulletGraph and igMap controls all have breaking changes in terms of the js files required. The goal is to reduce the amount of code required in order to load a specific feature. The script combiner has been updated to help you download a combined file with only the files you need and in the correct order depending on required features. The igLoader has also been updated to load the correct files depending on the features requested.
The following lists the files required if you want to load the files manually:
igDataChart, igCategoryChart, igPieChart, igFunnelChart, igDoughnutChart, igRadialGauge, igLinearGauge, igBulletGraph and igMap you first need:
infragistics.util.js
infragistics.util.jquery.js
infragistics.ext_core.js
infragistics.ext_collections.js
infragistics.ext_ui.js
infragistics.dv_core.js
igDataChart, igCategoryChart, igPieChart, igDoughnutChart, igRadialGauge, igLinearGauge, igBulletGraph and igMap you then need:
If you want to load igRadialGauge you need:
infragistics.radialgauge.js
infragistics.ui.radialgauge.js
If you want to load igLinearGauge you need:
infragistics.lineargauge.js
infragistics.ui.lineargauge.js
If you want to load igBulletGraph you need:
infragistics.bulletgraph.js
infragistics.ui.bulletgraph.js
If you want to load igPieChart you need:
infragistics.piechart.js
infragistics.dvcommonwidget.js
infragistics.ui.piechart.js
If you want to load igDoughnutChart you need everything for pie chart and in addition:
infragistics.doughnutchart.js
infragistics.ui.doughnutchart.js
If you want to load igFunnelChart you need:
infragistics.funnelchart.js
infragistics.ui.funnelchart.js
If you want to load any igDataChart or igMap features, you need:
If you want to load igMap you need:
infragistics.ext_text.js
infragistics.ext_io.js
infragistics.ext_web.js
infragistics.dv_geo.js
infragistics.datachart_scatter.js
infragistics.dvcommonwidget.js
infragistics.geographicmap.js
infragistics.ui.geographicmap.js
If you want to load the igDataChart, after loading the appropriate chart features, you need:
infragistics.datachart.js
infragistics.ui.chart.js
If you want to load any category series (column, area, line, spline, splineArea, stepLine, stepArea, point, waterfall) into the chart you need:
infragistics.datachart_categorycore.js
infragistics.datachart_category.js
If you want to load vertical category series (bar) into the chart you need:
infragistics.datachart_categorycore.js
infragistics.datachart_category.js
infragistics.datachart_verticalcategory.js
If you want to load scatter series (scatter, scatterLine, scatterSpline, highDensityScatter, bubble) into the chart you need:
If you want to load range category series (rangeColumn, rangeArea) you need:
infragistics.datachart_categorycore.js
infragistics.datachart_rangecategory.js
If you want polar series (polarLine, polarArea, polarScatter, polarSpline, polarSplineArea) you need:
infragistics.datachart_extendedaxes.js
infragistics.datachart_polar.js
If you want radial series (radialColumn, radialLine, radialPie, radialArea) you need:
infragistics.datachart_extendedaxes.js
infragistics.datachart_radial.js
If you want stacked series you need:
infragistics.datachart_categorycore.js
infragistics.datachart_category.js
infragistics.datachart_stacked.js
If you want annotation layers (crosshairLayer, itemToolTipLayer, categoryToolTipLayer, categoryHighlightLayer) you need:
If you want to use the chart legend you need:
infragistics.legend.js
infragistics.ui.chartlegend.js
If you want to load the new igCategoryChart control you need everything you need for loading category series in the data chart and in addition:
infragistics.dv_dataseriesadapter.js
infragistics.categorychart.js
infragistics.dvcommonwidget.js
infragistics.ui.basechart.js
infragistics.ui.categorychart.js
Three new Ignite UI for jQuery NuGet packages are added in this 2016 volume 2 release. Those packages can boost your productivity allowing you to setup your application faster. They will automatically include the Ignite UI for jQuery files and references you need to your project.
With the new ASP.NET most modules are now wrapped as NuGet packages. Having this in mind our new MVC wrappers built on top of ASP.NET Core are also available as a NuGet package.
The NuGet packages are installed with the products installer and during the installation a new local feed is created, meaning that you dont need to setup your NuGet Package Manager. You will find the local NuGet feed Infragistics (Local) the next time you run your Visual Studio.
A new option, consolidatedColumnVerticalPosition, is introduced in this release in order to determine the positioning logic to use for columns which have been consolidated into a single visual element.
It accepts the following values:
Minimum - Consolidated Items should be positioned using their minimum value.
Maximum - Consolidated Items should be positioned using their maximum value.
Median - Consolidated Items should be positioned using their median value.
RelativeMinimum - Consolidated Items should be positioned using the value nearest to the reference value of the corresponding axis.
RelativeMaximum - Consolidated Items should be positioned using the value farthest from the reference value of the corresponding axis.
Performance of the igDataChart control has been significantly enhanced this release. When testing the igDataChart in a live updating scenario, with a data set of 50,000 points, where points are added to the end of the bound data set and removed from the beginning every 10ms, these differences can be observed between 16.1 and 16.2:
Chrome:
16.1: 70fps (frames per second)
16.2: 144fps
Edge:
16.1 55fps
16.2: 105fps
Internet Explorer:
16.1: 44fps
16.2: 100fps
Based on these numbers you can see that the igDataChart in 16.2 is approximately twice as fast for this raw throughput scenario than in 16.1.
In the Infragistics 2016 volume 2 release, we redesigned the defaults of the igDataChart, igPieChart, igFunnelChart, igSparkline, igRadialGauge, igLinearGauge, igBulletGraph controls.
The following screenshots are some examples comparing the new and previous defaults:
New
Previous
New
Previous
New
Previous
New
Previous
New
Previous
New
Previous
New
Previous
New
Previous
New
Previous
New
Previous
New
Previous
The size of files required for loading a category series in igDataChart (column, area, line, spline, splineArea, stepLine, stepArea, waterfall) has dropped 24% between 16.1 and 16.2.
Additionally, the features in igDataChart are broken into more individual modules than they were before, so it is possible to have finer grained control over exactly which features are loaded to reduce payload size. Chart feature modules no longer have any overlap between them, further conserving payload size when loading multiple feature sets.
You can now specify the color of the labels depending on whether they are rendered inside or outside of the funnel chart using the textColor and outerLabelTextColor options. You can also style the text of both the inner and outer labels using the textStyle and outerLabelTextStyle options.
The following screenshot demostrates how to change the text color and style of the inner and outer labels.
Related topics:
Group By has improved integration with Virtualization feature. Now it persist the grouped rows expand state between virtualization frames improving the end user experience.
Also two new API methods are added to expand and collapse group rows.
Local grouping performance is optimized and now can be up to 10x faster.
Updating feature now works in row and cell edit mode when Multi-Row Layout is configured. Use navigationIndex option to configure the tab order of the editors when in edit mode.
You can now select a pie slice on the igPieChart control. This feature is enabled by default. You can set the selectionMode option in order to support single or multiple slice selection and then check the selectedItem or selectedItems options in order to see what data items are associated with those selected slices.
We also added new selection events, some of which are cancelable, so you can stop selection of particular slices from occurring. These events are:
You can see which pie slice is selected as it has a different style. The following screenshot shows the Marketing slice selected.
The igPieChart control now has a labelClick that fires when the labels of the pie slices are clicked.
You can now specify the color of the labels depending on whether they are rendered inside or outside of a pie slice, by setting the following options:
Two new options are added to the igPieChart control, these are intended to replace the existing valueMemberPath and labelMemberPath options. The new options are dataValue and dataLabel. With the addition of these options, valueMemberPath and labelMemberPath are now deprecated.
The igScroll is a stand-alone JQueryUI widget that allows enabling custom scrollbars with fluid scrolling functionality for desktop, hybrid and mobile environments. It allows you to create a consistent scrolling experience across all scrolling containers on all devices.
Adding creditCard option and validation rule.
| Feature | Description | |
|---|---|---|
| EmailAddress | Validate text editor against a standard MVC email pattern. | |
| Compare | Use for comparison between linked editors. Often used in a password fields matching scenario. |
View on GitHub