What's New in 2017 Volume 2

This topic presents the controls and the new and enhanced features for the Ignite UI™ 2017 Volume 2 release.

Overview

The following table summarizes what’s new in 2017 Volume 2 and additional details follow.

Spreadsheet

Editors

igDateEditor/igDatePicker

igValidator

igShapeChart

igDataChart

igGrid

igScheduler

General

New bundled files

New bundled files for excel, spreadsheet and scheduler have been included in 17.2 release. You can use them instead of defining individual required resources, or instead of using the igLoader. In order to run excel, spreadsheet or scheduler, it is needed to define the following bundled resources:

igGrid excel exporting using igExcel

<script type="text/javascript" src="igniteui/js/infragistics.core.js"></script>
<script type="text/javascript" src="igniteui/js/infragistics.lob.js"></script>
<script type="text/javascript" src="igniteui/js/infragistics.excel-bundled.js"></script>
<script type="text/javascript" src="igniteui/js/modules/infragistics.gridexcelexporter.js"></script>

igSpreadsheet

<script src="igniteui/js/infragistics.core.js"></script>
<script src="igniteui/js/infragistics.lob.js"></script>
<script src="igniteui/js/infragistics.excel-bundled.js"></script>
<script src="igniteui/js/infragistics.spreadsheet-bundled.js"></script>

igScheduler

<script src="igniteui/js/infragistics.core.js"></script>
<script src="igniteui/js/infragistics.lob.js"></script>
<script src="igniteui/js/infragistics.scheduler-bundled.js"></script>

New Localization and Globalization settings

The following new options and methods have been introduced in order to allow setting and/or changing at runtime the current language/regional for all localizable components on the page or per control.

Global settings and APIs

settings

APIs

Control specific settings

Spreadsheet

Editing of the spreadsheet content

Version 17.2 of the product adds support for editing of the spreadsheet's cells, extending the inaugural features of the Spreadsheet control. There are several new API events, methods and options that can be used when manipulating spreadsheet content.

New events:

• editModeEntering - Invoked when the Spreadsheet is about to start in-place editing of the activeCell.
• editModeEntered - Invoked when the Spreadsheet has started in-place editing of the activeCell.
• editModeExiting - Invoked when the Spreadsheet is about to end the in-place editing of the activeCell.
• editModeExited - Invoked when the Spreadsheet has ended the in-place editing of the activeCell.
• editModeValidationError - Invoked when the Spreadsheet is exiting edit mode and the new value for the activeCell is not valid based on the criteria of that cell's ig.excel.DataValidationRule.

New methods:

• getIsInEditMode() - Indicates if the control is currently editing the value of the activeCell.
• getCellEditMode() - Returns an enumeration used to indicate the current edit mode state.

New options:

• isFixedDecimalEnabled - Indicates whether a fixed decimal place is automatically added when a whole number is entered while in edit mode.
• fixedDecimalPlaceCount - Number of decimal places by which a whole number typed in during edit mode should be adjusted.

Related Topics

• igSpreadsheet Overview
• Editing API (igSpreadsheet)

Related Samples

• Overview
• View Configuration
• Import Data From Excel File

Editors

Suppress Keyboard

The suppressKeyboard option prevents the onscreen keyboard (if available on device) to be shown when the dropdown button is clicked/tapped. This option prevents initial focus or removes it when the drop button is clicked/tapped.

igDateEditor/igDatePicker

Spin Delta as Object

The spinDelta option can be configured as an object, which defines specific values for each time period. Accepted values for client-side widget's deltas are positive integer numbers, and the fractional portion of floating point numbers is ignored. Accepted values for MVC wrapper's deltas are integer numbers.

The option can accept the following format:

$("#editor").igDateEditor({
    value: new Date(2017, 11, 8, 1, 1, 1),
    dateInputFormat: "dateTime",
    spinDelta: {
        year: 4,
        month: 3,
        day: 10,
        hours: 12,
        minutes: 15,
        seconds: 10,
        milliseconds: 100
    }
});

In MVC:

@(Html.Infragistics()
    .DateEditor()
    .Value(new DateTime(2017, 11, 8, 1, 1, 1))
    .DateInputFormat("dateTime")
    .SpinDelta(deltas =>
    {
        deltas.Year(4);
        deltas.Month(3);
        deltas.Day(10);
        deltas.Hours(12);
        deltas.Minutes(15);
        deltas.Seconds(10);
        deltas.Milliseconds(100);
    })
    .Render())

igValidator

Execute all rules

The igValidator now supports a new executeAllRules option that allows multiple rules to run even if one has already failed and thus produce and display multiple error messages.

Error related events like error and validated now also provide ui.rules and ui.messages array arguments, listing in order each rule that did not pass and its message.

With this execution process change, rules also specify if they should run for empty values and the custom rule is now allowed to run without one. This allows for scenarios where validation based on external factors can be applied on the empty value independently of the required option.

Related Topics

• Validation Rules

igShapeChart

The igShapeChart is a lightweight, highly performant chart. This chart can be easily configured to display scatter X/Y points, shape files or any custom shape that you can define using an array of arrays of X/Y points. The igShapeChart control is using a smart data adapter in order to analyze bound data and select an appropriate visualization to render. However, it is possible to specify which chart type the igShapeChart will use by setting the chartType property to one of the following values: Area,Bubble,Contour,HighDensity,Point,Line, Spline, Polygon, or Polyline.

In addition, this chart can render break-even data as long as at least one data item has FixedCost, VariableCost, SalesRevenue, and SalesUnits data columns.

Related Topics

• igShapeChart Overview
• Getting Started with Shapechart

igDataChart

TimeXAxis

A new axis, time x-axis, is added to the igDataChart this release. By default, this axis will automatically apply label formats which dynamically change as the user zooms into data. In addition, axis breaks may be configured to omit dates within a range. For example, weekends can be skipped, or any range of dates considered insignificant can be skipped. The axis can also be configured to override the default label-formatting scheme for custom configuration of labels at varying visible date ranges.

Related Topics

• Configuring TimeXAxis (igDataChart)

New Series Types

The following series types can be used with the igDataChart control:

• Scatter Area Series
• scatter Contour Series
• scatter Polyline Series
• scatter Polygon Series

igScheduler

Week View

This view is visualizing the activities by rendering them in a vertical list with time slots. It is possible to show all seven week days or only the working days by using weekViewDiplayMode property. Configuration to show all 24 hours or only the working hours is also possible.

Day View

Visualizing the activities by rendering them in a vertical list with time slots. Each activity occupies only the time slots between its start and end time. This view has the ability to show up to 7 days. You can configure the day view to display all 24 hours or only the working hours.

Recurrent Activity

The activity recurrence is used when you need to have repetitions of an activity following a specific recurrence pattern (for example each day at a specific hour or each month at a specific date).

igGrid

igGrid Physical Cell Merging

The igGrid Cell Merging feature now supports physical cell merging. The merging mode is specified via the mergeType option.

Enabling physical merging

$("#grid").igGrid({
 features: [
     {
            name: "Sorting"
    },
     {
        name: "CellMerging",
        mergeType: "physical"
    }
 ]
});

With this mode the cell DOM elements are physically merged into one cell with a corresponding rowSpan attribute as opposed to the "visual" merge mode where the DOM cells retain their DOM structure and are visually merged via css.

The following additional options have been added in order to allow further customization of the merging behavior:

Related Topics

• Cell Merging Overview (igGrid): This topic explains the igGrid control’s Cells Merging feature and its functionality. It contains code examples demonstrating how to enable and configure cell merging in the igGrid.