2017 Volume 1 の新機能

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

新機能の概要

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

igSpreadsheet

igScheduler

igDataSource

igGrid

igCombo

Editors

igNumericEditor

igDateEditor/igDatePicker

igDatePicker

igDataChart

igMap

igRadialGauge, igLinearGauge, igBulletGraph

igSpreadsheet

2017.1 バージョンで igSpreadsheet コントロールを追加しました。最新のあらゆるブラウザーで Excel ドキュメントを視覚化する jQuery ウィジェットです。MVC バージョンでは、コントロールの以下の領域と機能が使用できます。

• 構成可能なコンポーネント領域

  • 数式バー
  • コンテキスト メニュー
  • タブ バー領域
  • ヘッダー

• コントロールの変更

  • 選択
  • サイズ変更
  • 非表示
  • ペインのフリーズ
  • ペインの分割
  • ズーム

• データの変更

  • セル、列、行の挿入と削除
  • 元に戻す / やり直し
  • コピー / 貼り付け
  • データ検証
  • ワークシート
  • ハイパーリンク

• 外観の構成

  • グリッド線
  • セルの配置
  • セルの境界線
  • フォント スタイル

関連トピック

• igSpreadsheet の概要
• igSpreadsheet の追加
• igSpreadsheet の構成

関連サンプル

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

igScheduler

新しいコントロール

igScheduler™ コントロールは、時間範囲および関連アクティビティを表示し、管理するスケジュール ソリューションを提供します。

サポートされる機能

• 予定の作成、編集、削除
  • 月表示で構成可能な予定表示モード (インジケーターまたはイベントの件名)
  • 予定を色付きリソースへの割り当て
• 別のビューの使用 (月表示および予定一覧ビュー)
  • 月表示および予定一覧ビューの間の切り替え
  • 月表示での予定一覧ビュー
  • 構成可能な予定一覧ビューの日の表示範囲
• 終日イベントのサポート
• デスクトップ、タブレット、および携帯レイアウト
• レスポンシブ デザイン
  • デスクトップ環境に最適化された UI
• リソースの色スキーマ サポート
• キーボード ナビゲーション サポート
• ローカライズのサポート

関連トピック

• igScheduler の概要
• igScheduler の構成
• igScheduler の追加
• igScheduler の構成
• igScheduler のスタイル設定
• アクセシビリティの遵守 (igScheduler)
• 既知の問題と制限 (igScheduler)

関連サンプル

• igScheduler 予定一覧ビュー
• igScheduler 予定インジケーター

igDataSource

テキストでフィルタリング

igDataSource コンポーネントは、filterByText メソッドによってすべてのフィールドで特定の単語または句を検索する方法を提供します。

関連トピック

• igDataSource の概要

間連サンプル

• 簡易なフィルタリング

igGrid

データ処理

enableUTCDates オプションが変更しました。日付のシリアル化のみに影響します。 日付はローカル時間およびゾーン値の代わりにクライアント側の日付を UTC ISO 8061 文字列としてのシリアル化されます。

日付の表示を処理するには、新しい dateDisplayType オプションはグリッドの列定義に設定できます。date 型の列のみに影響します。

関連トピック

• 17.1 の enableUTCDates オプションの移行

グリッドのキャプション

カスタマイズするために igGrid のキャプションで HTML 要素を描画できます。初期化を制御するイベントも追加しました。

GroupBy 集計

GroupBy 集計機能は、そのアイランドにあるデータ列の集計情報を表示するグループ データ アイランドの上下に追加の集計行を表示します。集計行は、関連するグループが展開された場合のみ表示されます。

関連トピック

• GroupBy 集計の機能概要 (igGrid)

関連サンプル

• 集計とグループ化

igCombo

Knockout の Disable ハンドラー

開発者がコンボ コントロールに Knockout の disabled バインディング ハンドラーを適用したい場合、ハンドラーは動作せず、自動的に有効/無効にしません。コンボにコントロールの有効化/無効化を処理する特別なロジックがあります。そのため、Knockout disabled ハンドラーを使用時に予期される動作を実装する追加の igComboDisable バインディング ハンドラーが作成されます。

関連トピック

• Knockout サポートの構成 (igCombo)

エディター

Knockout の Disable ハンドラー

開発者がエディターに Knockout の disabled バインディング ハンドラーを適用したい場合、ハンドラーは動作せず、自動的に有効/無効にしません。エディターにコントロールの有効化/無効化を処理する特別なロジックがあります。そのため、Knockout disabled ハンドラーを使用時の予期される動作を実装する追加の igEditorDisable バインディング ハンドラーが作成されます。

関連トピック

• Knockout サポートの構成 (エディター)

igNumericEditor

10 進数の丸み

製品の以前バージョンで、ユーザーが maxDecimals オプションで定義される数より大きい小数位がある値を数値エディターに入力すると、値が切り捨てられます。つまり、maxDecimals が 3 に設定されるエディターが 123.4567 の値を受けると、123.456 に切り捨てられます。製品の 17.1 バージョンで新しい roundDecimals オプションを追加しました。デフォルトで有効で、JavaScript の Math.round() 関数を使用して数値を丸めます。123.4567 の値は丸めて、エディターで 123.457 として表示されます。roundDecimals オプションが無効な場合、値を切り捨て、以前のバージョンと同じように 123.456 を表示します。

igDateEditor/igDatePicker

データ処理

エディターの日付をクライアントからサーバーへ、またはサーバーからクライアントへ転送する場合、オプション enableUTCDates および displayTimeOffset を使用してエディターを構成し、適切に日付を転送します。

関連トピック

• 17.1 の enableUTCDate オプションの移行
• Ignite UI コントロールを異なるタイム ゾーンで使用

igDatePicker

日付の選択オプション MVC ラッパー

追加の MVC ラッパーを使用して DatePicker MVC ラッパーが日付の選択オプションの定義を許可するよう拡張されます。新しいラッパーは、すべての jQuery UI 日付の選択オプションを含み、igDatePicker に適用することができます。以下は、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())

igDataChart

ズームを有効にするオプション

isHorizontalZoomEnabled および isVerticalZoomEnabled と呼ばれる新いオプションが追加されました。既存の horizontalZoomable および verticalZoomable オプションは非推奨になりました。 非推奨のオプションは後方互換性のために残されています。

igMap

OpenStreet のタイル パス

Open Street Map は、backgroundContent オブジェクトの tilePath オプションを使用してカスタム タイル ソースを使用できます。

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

この変更の前は tilePath は Bing Maps のみに適用可能でした。変更後は Open Street Maps でも使用可能となります。

プロトコル指定子 (http: または https:) を URL から解除すると、コントロールがホストの web サイトのプロトコルを検出、使用できます。tilePath オプションで明示的に設定してコントロールのプロトコルを設定できます。

JavaScript の場合

tilePath: "https://tile.openstreetmap.org/{Z}/{X}/{Y}.png"

{Z}、{X}、および {Y} トークンは、タイル描画で各タイルのズーム、水平位置、および垂直位置で置き換えられます。

igRadialGauge, igLinearGauge, igBulletGraph

デザインの更新

infragistics.theme.css を含む場合、igRadialGauge、 igLinearGauge および igBulletGraph に新しいスタイル設定があります。新しいスタイル設定は以下のようです:

igRadialGauge:

igLinearGauge:

igBulletGraph: