FlexGridは、キーボードイベントに応答するように簡単にカスタマイズできます。エンドユーザーが使いやすいように、Gridコントロールを使用するMVCアプリケーションでキーボードをサポートしたい場合があります。FlexGridには、キーボードを使用して機能を管理したりデータを編集または更新することができる柔軟性があります。
このセクションでは、キーボードを使用して操作できるようにFlexGridコントロールをカスタマイズするシナリオをいくつか紹介します。
FlexGridへのホットキーの割り当て
コードを使用して、MVCアプリケーションに適切なホットキーを割り当てることができます。これにより、多くの手動による作業が容易になり、時間を節約できます。たとえば、10列500行にもなる大量のデータを表示するグリッドでデータを編集する際は、ホットキーを使用できると便利なことがあります。次の例では、［Ctrl］+［Q］キーをホットキーとして使用して、アクティブな行内の列間でセルデータをコピーします。
以下のコードは、「クイックスタート」トピックで作成したアプリケーションを拡張しています。
| HTML |
コードのコピー
|
|---|---|
<script type=text/JavaScript>
var grid;
c1.mvc.Utils.documentReady(function () {
grid = wijmo.Control.getControl('#gsFlexGrid');
gridCV = grid.collectionView;
if (grid) {
var host = grid.hostElement;
//keydownイベントを処理
host.addEventListener('keydown', function (e) {
if (e.key == "q" && e.ctrlKey)
{
grid.setCellData(grid.selection.row,4,
grid.getCellData(grid.selection.row, 3));
console.log("現在の行のセルデータは、金額列から割引列にコピーしました");
}
});
}
});
</script>
<div><c1-flex-grid id="gsFlexGrid" auto-generate-columns="false"height="700px" width="800px"><c1-items-source source-collection="@Model"></c1-items-source><c1-flex-grid-column binding="ID" header="ID"></c1-flex-grid-column><c1-flex-grid-column binding="開始日" header="開始日"></c1-flex-grid-column><c1-flex-grid-column binding="製品名" header="製品名"></c1-flex-grid-column><c1-flex-grid-column binding="金額" format="c"></c1-flex-grid-column><c1-flex-grid-column binding="割引" header="割引" format="p0"></c1-flex-grid-column><c1-flex-grid-column binding="アクティブ"></c1-flex-grid-column></c1-flex-grid></div>
|
|
ここでは、hostElementプロパティを使用して、FlexGridコントロールをホストするDOM要素を取得しました。コードは、FlexGridのkeydownイベントを処理し、［Ctrl］+［Q］キーをホットキーとしてキャプチャします。
クリップボードショートカットの使用によるFlexGridデータの編集クリップボードショートカットの使用に慣れているなら、FlexGridコントロールでデータを編集する際に、簡単にクリップボードショートカットを利用できます。それには、次に示すように、FlexGridのAutoClipboardプロパティをtrueに設定します。
以下のコードは、「クイックスタート」トピックで作成したアプリケーションを拡張しています。
| HTML |
コードのコピー
|
|---|---|
<div class="container"> <div> <c1-flex-grid auto-generate-columns="false" auto-clipboard="true" height="700px" width="800px"> <c1-items-source source-collection="@Model"></c1-items-source> <c1-flex-grid-column binding="ID" header="ID"></c1-flex-grid-column> <c1-flex-grid-column binding="開始日" header="開始日"></c1-flex-grid-column> <c1-flex-grid-column binding="製品名" header="製品名"></c1-flex-grid-column> <c1-flex-grid-column binding="金額" format="c"></c1-flex-grid-column> <c1-flex-grid-column binding="割引" header="割引" format="p0"></c1-flex-grid-column> <c1-flex-grid-column binding="アクティブ"></c1-flex-grid-column> </c1-flex-grid> </div> </div> |
|
ComponentOne FlexGridでは、次のクリップボードコマンドがサポートされています。
読み取り専用のセルに貼り付け操作は効きません。さらに、クリップボード操作は、グリッドの表示されている行および列でのみサポートされます。
FlexGridでデータを編集中に、特定の行をロックして、行内のエントリが編集されないようにしたい場合があります。たとえば、人事担当者がGridコントロールを使用して会社の賃金データを管理しているとします。このとき、グリッド内の1行または2行をロックして、グリッドに表示されている従業員データに対して編集操作を実行しても、特定の従業員の詳細情報には影響しないようにすることができます。
それには、次に示すように、FlexGridのOnClientBeginningEditイベントを処理します。
以下のコードは、「クイックスタート」トピックで作成したアプリケーションを拡張しています。
| HTML |
コードのコピー
|
|---|---|
<script>
function onClientBeginningEdit(e, args) {
if (args.row == 1) {
args.cancel = true;
}
}
</script>
<div class="container">
<div>
<c1-flex-grid auto-generate-columns="false" allow-sorting="true" height="700px" width="800px"
is-read-only="false" selection-mode="@C1.Web.Mvc.Grid.SelectionMode.Cell" beginning-edit="onClientBeginningEdit">
<c1-items-source source-collection="@Model"></c1-items-source>
<c1-flex-grid-column binding="ID" header="ID"></c1-flex-grid-column>
<c1-flex-grid-column binding="開始日" header="開始日"></c1-flex-grid-column>
<c1-flex-grid-column binding="製品名" header="製品名"></c1-flex-grid-column>
<c1-flex-grid-column binding="金額" format="c"></c1-flex-grid-column>
<c1-flex-grid-column binding="割引" header="割引" format="p0"></c1-flex-grid-column>
<c1-flex-grid-column binding="アクティブ"></c1-flex-grid-column>
</c1-flex-grid>
</div>
</div>
|
|
ここでは、指定された行（この例では、最初の行）が編集モードに入るとたびに、そのイベントがイベントハンドラによってキャンセルされます。