Angular Spreadsheet の構成

Angular Spreadsheet コンポネントは、セルの編集、グリッド線とヘッダーの表示、保護、ズームレベル、および Excel ワークシートに関連するその他のさまざまなプロパティなど、コントロールのさまざまな側面を設定できます。

Angular Spreadsheet の構成の例

セル編集の構成

ユーザーがセルの値を編集して新しい入力を確認すると、スプレッドシートの構成に応じて、IgxSpreadsheetComponent コントロールに Enter キーを押すと現在アクティブなセルに隣接するセルに移動できます。

この Enter キーナビゲーションを有効にするために、isEnterKeyNavigationEnabled プロパティを true に設定できます。false に設定すると、Enter キーを押してもアクティブセルは変わりません。

Enter キーを押したときに移動する隣接セルの方向は、enterKeyNavigationDirection プロパティを Down、Up、Left、Right に設定して構成することもできます。

以下のコードスニペットは上記のデモです。

<igx-spreadsheet isEnterKeyNavigationEnabled=true
    enterKeyNavigationDirection="Left">
</igx-spreadsheet>

this.spreadsheet.isEnterKeyNavigationEnabled = true;
this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left;

数式バーの構成

Angular IgxSpreadsheetComponent は、コントロールの isFormulaBarVisible プロパティを設定して数式バーの表示/非表示を設定できます。

以下のコードスニペットは上記のデモです。

<igx-spreadsheet isFormulaBarVisible=true></igx-spreadsheet>

this.spreadsheet.isFormulaBarVisible = true;

ガイドラインの設定

IgxSpreadsheetComponent は、コントロールの areGridlinesVisible プロパティを設定して数式バーの表示/非表示を設定できます。

以下のコードスニペットは上記のデモです。

<igx-spreadsheet areGridlinesVisible=true></igx-spreadsheet>

this.spreadsheet.areGridlinesVisible = true;

ヘッダーの構成

IgxSpreadsheetComponent は、areHeadersVisible プロパティを設定してへッダーの可視性を設定できます。

以下のコードスニペットは上記のデモです。

<igx-spreadsheet areHeadersVisible=false></igx-spreadsheet>

this.spreadsheet.areHeadersVisible = false;

ナビゲーションの構成

IgxSpreadsheetComponent コントロールは、コントロールが「終了モード」にあるかどうかを構成することによって、ワークシートのセル間のナビゲーションを構成できます。終了モードは、矢印キーを押すと、アクティブなセルが、押された矢印キーの方向に応じて、現在のセルからデータが隣接するセルの行または列の末尾に移動する機能です。この機能は、大規模なデータブロックの最後まですばやく移動する際に役立ちます。

たとえば、終了モードになっているときに、100x100 の大きなデータブロックをクリックして右矢印キーを押すと、現在の行の右端に移動し、データのある一番右の列に移動します。この操作の後、IgxSpreadsheetComponent は終了モードから飛び出します。

ユーザーが End キーを押すと、実行時に終了モードが有効になりますが、スプレッドシートコントロールの isInEndMode プロパティを設定することでプログラムで設定できます。

以下のコードスニペットは、IgxSpreadsheetComponent を終了モードで開始させる方法を示しています。

<igx-spreadsheet isInEndMode=true></igx-spreadsheet>

this.spreadsheet.isInEndMode = true;

保護の設定

IgxSpreadsheetComponent は、ワークシートごとにブックを保護します。ワークシートの保護の設定は、ワークシートの Protect() メソッドを呼び出して保護し、Unprotect() メソッドを呼び出して保護解除することで設定できます。

以下のコードは、IgxSpreadsheetComponent コントロールの現在アクティブなワークシートの保護を有効または無効にすることができます。

this.spreadsheet.activeWorksheet.protect();
this.spreadsheet.activeWorksheet.unprotect();

選択の設定

IgxSpreadsheetComponent コントロールは、コントロールで許可されている選択の種類を設定できます。その後、ユーザーが修飾キー (Shift または Ctrl) を押します。これは、スプレッドシートの selectionMode プロパティを次のいずれかの値に設定することによって行われます。

AddToSelection: マウスでドラッグするときに Ctrl キーを押す必要はありません。新しいセル範囲が SpreadsheetSelection オブジェクトの cellRanges コレクションに追加され、モードに入った後に最初の矢印キーナビゲーションで範囲が追加されます。シフト+F8 を押すとモードに入ります。
ExtendSelection: SpreadsheetSelection オブジェクトの cellRanges コレクション内の選択範囲は、マウスを使用してセルを選択するかキーボードで移動すると更新されます。
Normal: セルまたはセルの範囲を選択するためにマウスをドラッグすると選択が置き換えられます。同様に、キーボードで移動すると新しい選択範囲が作成されます。Ctrl キーを押したままマウスを使用することで新しい範囲を追加できます。また、Shift キーを押したままマウスでクリックする、あるいはキーボードで移動することでアクティブセルを含む選択範囲を変更できます。

上記の説明で述べた SpreadsheetSelection オブジェクトは、IgxSpreadsheetComponent コントロールの activeSelection プロパティを使用して取得できます。

次のコードスニペットは、選択モードの設定を示しています。

<igx-spreadsheet selectionMode="ExtendSelection"></igx-spreadsheet>

this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;

IgxSpreadsheetComponent コントロールの選択は、プログラムで設定または取得することもできます。単一選択の場合は、activeCell プロパティを設定できます。複数選択は、IgxSpreadsheetComponent コントロールの activeSelection プロパティによって返される SpreadsheetSelection オブジェクトを介して行われます。

SpreadsheetSelection オブジェクトには、新しい SpreadsheetCellRange オブジェクトの形式でスプレッドシートの選択範囲にプログラムでセルの範囲を追加できる AddCellRange() メソッドがあります。

次のコードスニペットは、スプレッドシートの選択範囲にセル範囲を追加する方法を示しています。

this.spreadsheet.activeSelection.addCellRange(new SpreadsheetCellRange(2, 2, 5, 5));

タブバー領域の構成

IgxSpreadsheetComponent コントロールは、TabBarWidth プロパティと TabBarVisibility プロパティを介して、現在アクティブな workbook の WindowOptions からタブバー領域の表示設定と幅の設定を使用します。

タブバー領域は、ワークシート名をコントロール内のタブとして可視化する領域です。

次のコードスニペットを使用して、タブバーの表示と幅を設定できます。

this.spreadsheet.workbook.windowOptions.tabBarVisible = false;

this.spreadsheet.workbook.windowOptions.tabBarWidth = 200;

ズームレベルの設定

Angular Spreadsheet コンポーネントは、zoomLevel プロパティを設定してズームインとズームアウト機能を追加できます。ズームレベルは最大 400%、最小 10% です。

このプロパティを数値に設定すると、整数としてのパーセンテージが表されるため、zoomLevel を 100 に設定することは、100% に設定することと同じです。

次のコードスニペットは、スプレッドシートのズームレベルを設定する方法を示しています。

<igx-spreadsheet zoomLevel=200></igx-spreadsheet>

this.spreadsheet.zoomLevel = 200;

Angular Spreadsheet の構成