This topic presents the controls and the new and enhanced features for the Ignite UI™ 2017 Volume 1 release.
The following summarizes what’s new in 2017 Volume 1. Additional details follow.
| Feature | Description |
|---|---|
| New control igSpreadsheet | The igSpreadsheet is a jQuery widget that visualize excel documents in all modern browsers. |
| Feature | Description |
|---|---|
| New control igScheduler | The igScheduler is a jQuery widget that provides a common scheduling solution for presenting and managing time periods and the associated activities. |
| Feature | Description |
|---|---|
| Filter By Text | The igDataSource component provides a way to search for a specific words or phrases in all of its fields. |
| Feature | Description |
|---|---|
| Date Handling | The igGrid provides a way to control the display and edit of date values for clients in different time zones. |
| More Flexible Caption | igGrid's new caption is designed to be more flexible and customizable. |
| GroupBy Summaries | The GroupBy feature now allows a summary row to be displayed below and/or above each group data island. |
| Feature | Description |
|---|---|
| Knockout Disable Handler | Knockout Disable binding handler has been implemented for the combo. |
| Feature | Description |
|---|---|
| Knockout Disable Handler | Knockout Disable binding handler has been implemented for the editors. |
| Feature | Description |
|---|---|
| Round Decimals | The numeric editor introduces new option roundDecimals that allows to round values with decimal point. |
| Feature | Description |
|---|---|
| Date Handling | New editors' settings are needed when handling date transfers. |
| Feature | Description |
|---|---|
| Date Picker Options MVC wrapper | When using DatePicker MVC wrapper, now additional wrapper for the date picker options is available. |
| Feature | Description |
|---|---|
| Zoom Enabling Options | New options called isHorizontalZoomEnabled and isVerticalZoomEnabled have been added which control whether zooming is allowed on either the horizontal or vertical axis. |
| Feature | Description |
|---|---|
| OpenStreet Tile Path | The option called tilePath has been added to the backgroundContent option for the OpenStreet tile source. |
| Feature | Description |
|---|---|
| Design Changes | The visuals for the gauges have been updated. |
In version 2017.1 we introduce the igSpreadsheet control. It is a jQuery widget that visualize excel documents in all modern browsers. For MVP version, the control has the following areas and features available:
Configurable component areas
Control manipulations
Data manipulations
Visual configurations
The igScheduler™ control provides a common scheduling solution for presenting and managing time periods and the associated activities.
The igDataSource component provides a way to search for a specific words or phrases in all of its fields via the filterByText method.
The enableUTCDates now have new function. It affects only the dates serialization. Dates are now serialized as UTC ISO 8061 string instead of using the local time and zone values.
In order to handle the displaying of the dates a new option dateDisplayType is introduced in the grid column's definition and it works only for columns of type date.
The igGrid's caption now provides the ability to render HTML elements in it in order to give the user more customizability and flexibility. It also comes with useful events for full control of its initialization.
The GroupBy Summaries feature allows an additional summary row to be displayed below and/or above each group data island that displays summary information for the data columns in that island. The summary row is visible only when the related group is expanded.
If a developer wants to apply the Knockout disabled binding handler to the combo control, it will not work and will not automatically enables/disables it. This is because combo has a special logic that handles enabling/disabling of the control. For that purpose additional igComboDisable binding handler is created, which implements the behavior, expected, when using the Knockout disabled handler.
If a developer wants to apply the Knockout disabled binding handler to the editors, it will not work and will not automatically enables/disables them. This is because editors have a special logic that handles enabling/disabling of the control. For that purpose additional igEditorDisable binding handler is created, which implements the behavior, expected, when using the Knockout disabled handler.
In previous versions of the product, if user sets or enters a value in a numeric editor that has more decimal places than the one defined in the maxDecimals option, then the value was truncated. E.g. If an editor with defined 'maxDecimals' to 3, receives a value 123.4567, then it will be truncated to 123.456. With version 17.1 of the product, a new option roundDecimals is introduced, which is enabled by default and rounds the numeric values, using the JavaScript Math.round() function. This means that the value of 123.4567 will be rounded and displayed in the editor as 123.457. If the roundDecimals is disabled, then it will truncate the value and will show it as 123.456, like in the old versions.
When the dates in the editors are transferred from the client to the server аnd vice versa, the options enableUTCDates and displayTimeOffset can be used to configure the editоrs and to properly handle date transfer.
The DatePicker MVC wrapper is extended to allow the definition of the date picker options, using additional MVC wrapper. The new wrapper contains all the jQuery UI datepicker options that can be applied to our igDatePicker. Here is an example of how it can be configured in MVC:
@(Html.Infragistics()
.DatePicker()
.DropDownAnimationDuration(1000)
.DatePickerOptions(options => {
options.DefaultDate("+8");
options.MinDate("-5d");
options.MaxDate("+10d");
options.FirstDay(FirstWeekDay.Monday);
options.ShowWeek(true);
options.ShowOtherMonths(true);
options.SelectOtherMonths(true);
options.ChangeMonth(true);
options.ChangeYear(true);
options.AddClientEvent("onChangeMonthYear", "onChangeMonthYearHandler");
options.ShowButtonPanel(true);
options.GoToCurrent(true);
options.ShowAnim(AnimationEffect.Show);
options.AddClientEvent("onSelect", "onSelectHandler");
options.AddClientEvent("onClose", "onCloseHandler");
})
.Render())
New options called isHorizontalZoomEnabled and isVerticalZoomEnabled were added, deprecating the existing horizontalZoomable and verticalZoomable options respectively. The older options are being left as-is in this release for backwards compatibility with existing applications.
Open Street Map can now accept custom tile source by re-purposing the tilePath option off of the backgroundContent object.
In JavaScript
$(function () {
$("#map").igMap({
width: "700px",
height: "500px",
windowRect: { left: 0.1, top: 0.1, height: 0.7, width: 0.7 },
// specifies imagery tiles from OpenStreetMap
backgroundContent: {
type: "openStreet",
tilePath: "tile.openstreetmap.org/{Z}/{X}/{Y}.png"
}
});
});
Before this change tilePath was only relevant to the Bing Map. After the change it is applicable to the Open Street Map as well.
Omitting the protocol specifier (http: or https:) in the URL allows for the control to detect and use the protocol of the hosting web site. It is also possible to force the control into desired protocol by explicitely setting it in the tilePath option:
In JavaScript
tilePath: "https://tile.openstreetmap.org/{Z}/{X}/{Y}.png"
{Z}, {X}, and {Y} tokens are replaced during tile rendering by Zoom, Horizontal location, and Vertical location of each tile respectively.
The igRadialGauge, igLinearGauge and igBulletGraph have new styling provided when you include infragistics.theme.css. The new styling looks as follows:
View on GitHub