2017 Volume 2 の新機能

このトピックでは、Ignite UI™ 2017 Volume 2 リリースのコントロールと新機能および拡張機能を紹介します。

概要

以下の表に 2017 Volume 2 の新機能の概要を示します。追加の詳細は以下のとおりです。

スプレッドシート

エディター

igDateEditor/igDatePicker

igValidator

igShapeChart

igDataChart

igGrid

igScheduler

全般

新規のバンドル ファイル

17.2 リリースには、Excel、スプレッドシート、およびスケジューラの新規のバンドル ファイルが含まれています。各必須リソースを読み込むか、igLoader を使用する代わりにバンドル ファイルを使用できます。Excel、スプレッドシート、またはスケジューラを実行するには、以下のバンドル リソースを読み込む必要があります。

igExcel を使用した igGrid の Excel エクスポート

<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>

新しいローカライズおよびグローバリゼーション設定

ページですべてのローカライズ可能なコンポーネントまたはコントロールごとに現在の言語/地域設定をランタイムに変更するために以下の新しいオプションおよびメソッドを追加しました。

グローバル設定および API

設定

API

コントロール固有の設定

スプレッドシート

スプレッドシート コンテンツの編集

製品の 17.2 バージョンはスプレッドシートのセルに編集のサポートを追加します。スプレッドシート コンテンツの編集で使用可能な新しい API イベント、メソッド、およびオプションがあります。

新しいイベント:

• editModeEntering - Spreadsheet が activeCell のインプレース編集を開始しようとするときに呼び出されます。
• editModeEntered - Spreadsheet が activeCell のインプレース編集を開始したときに呼び出されます。
• editModeExiting - Spreadsheet が activeCell のインプレース編集を終了しようとするときに呼び出されます。
• editModeExited - Spreadsheet が activeCell のインプレース編集を終了したときに呼び出されます。
• editModeValidationError - Spreadsheet が編集モードを終了し、activeCell の新しい値がセルの ig.excel.DataValidationRule の条件に基づいて有効ではない場合に発生されます。

新しいメソッド:

• getIsInEditMode() - コントロールが現在 activeCell の値を編集しているかどうかを示します。
• getCellEditMode() - 現在の編集モード状態を示すために使用する列挙体を返します。

新しいオプション:

• isFixedDecimalEnabled - 編集モードで整数が入力されたときに固定小数位が自動的に追加されるかどうかを示します。
• fixedDecimalPlaceCount - 編集モードで入力された整数に使用される小数位。

関連トピック

• igSpreadsheet の概要
• 編集 API (igSpreadsheet)

関連サンプル

• 概要
• 表示の構成
• エクセル ファイルからデータをインポート

エディター

キーボードの制御

suppressKeyboard オプションは、ドロップダウン ボタンがクリックまたはタップされたとき、デバイスで利用可能な場合に画面にキーボードの表示を回避します。このオプションは最初のフォーカスを回避するか、ドロップダウン ボタンがクリックまたはタップされたときにフォーカスを解除します。

igDateEditor/igDatePicker

スピン デルタをオブジェクトとして構成

spinDelta オプションを各時間間隔の指定値を定義するオブジェクトとして構成できます。 クライアント側ウィジェットのデルタに有効な値は正の整数で、浮動小数点数の分数が無視されます。 MVC ラッパーのデルタの有効な値は整数です。

このオプションは以下の形式が有効です。

$("#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
    }
});

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

すべてのルールの実行

igValidator は、ルールが失敗した場合も複数のルールを実行し、複数のエラー メッセージを表示する新しい executeAllRules オプションをサポートします。

error または validated などのエラーに関連するイベントは ui.rules および ui.messages 配列引数を提供します。これは失敗したルールおよびそのメッセージを示します。

この実行処理の変更で、ルールが空値の場合も実行するかどうかを指定し、custom ルールも値なしで実行できます。 required オプションに関係なく外部の要件に基づく検証が空の値に適用できます。

関連トピック

• 入力規則

igShapeChart

igShapeChart は軽量で高パフォーマンスなチャートです。このチャートは散布 X/Y ポイント、シェープ ファイルまたは X/Y ポイントの配列の配列を使用して定義されるカスタム図形のデータを表示するために構成できます。igShapeChart コントロールはスマートなデータ アダプターを使用してバインドされるデータを解析して描画する適切なビジュアライゼーションを選択します。ただし、以下の値に chartType プロパティを設定すると、igShapeChart が使用するチャート タイプを指定できます: Area、Bubble、Contour、HighDensity、Point、Line、Spline、Polygon、または Polyline。

また、このチャートは、FixedCost、VariableCost、SalesRevenue、および SalesUnits データ列を持つデータ項目が 1 つあれば損益分岐点データを描画できます。

関連トピック

• igShapeChart の概要
• ShapeChart を使用した作業の開始

igDataChart

TimeXAxis

このリリースでは、時間 X 軸を igDataChart に追加しました。この軸はデフォルトで、ユーザーのズームによって動的に変更されるラベル書式設定を自動的にデータに適用します。また、軸ブレークを構成すると、特定の範囲内の日付を除外できます。たとえば、週末、またはその他の必須ではない日付の範囲を非表示できます。軸は、デフォルトのラベル書式設定スキーマをオーバーライドして表示される日付範囲でラベルの構成をカスタマイズできます。

関連トピック

• TimeXAxis の構成 (igDataChart)

新しいシリーズ タイプ

以下のシリーズ タイプを igDataChart コントロールで使用できます。

• 散布エリア シリーズ
• 散布等高線シリーズ
• 散布ポリライン シリーズ
• 散布多角形シリーズ

igScheduler

週表示

このビューは時間帯の垂直リストで描画してアクティビティを可視化します。weekViewDiplayMode プロパティを使用してすべての 7 曜日を表示するか、稼動日のみを表示できます。 24 時間または稼働時間のみの表示も構成できます。

日表示

時間帯の垂直リストで描画してアクティビティを可視化します。各アクティビティは、開始時刻と終了時刻の間の時間帯のみ使用します。 このビューには 7 日まで表示できます。日表示は、24 時間すべてまたは稼働時間のみの表示が構成できます。

定期的な予定

アクティビティの定期的な予定は特定の定期的なパターンでアクティビティを繰り返す場合に使用します。

igGrid

igGrid の物理セル結合

igGrid のセル結合機能は物理セル結合をサポートします。結合モードは mergeType オプションで指定されます。

物理セル結合を有効にする

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

このモードで、セルの DOM 要素が相対する rowSpan 属性を持つ 1 つのセルに物理的に結合されます。「ビジュアル」結合モードで、DOM セルは DOM 構造を変更せずに CSS を使用して可視化的に結合されます。

以下のオプションが結合動作の詳細なカスタマイズ化を可能にするために追加されました。

関連トピック

• セル結合の概要 (igGrid): このトピックは、igGrid コントロールのセル結合機能とその機能性について説明します。igGrid においてセル結合を有効にし構成する方法のコード例が含まれます。