FlexGridは、キーボードイベントに応答するように簡単にカスタマイズできます。エンドユーザーが使いやすいように、Gridコントロールを使用するMVCアプリケーションでキーボードをサポートしたい場合があります。FlexGridには、キーボードを使用して機能を管理したりデータを編集または更新することができる柔軟性があります。
このセクションでは、キーボードを使用して操作できるようにFlexGridコントロールをカスタマイズするシナリオをいくつか紹介します。
FlexGridへのホットキーの割り当て
コードを使用して、MVCアプリケーションに適切なホットキーを割り当てることができます。これにより、多くの手動による作業が容易になり、時間を節約できます。たとえば、10列500行にもなる大量のデータを表示するグリッドでデータを編集する際は、ホットキーを使用できると便利なことがあります。次の例では、［Ctrl］+［Q］キーをホットキーとして使用して、アクティブな行内の列間でセルデータをコピーします。
以下のコードは、「クイックスタート」トピックで作成したアプリケーションを拡張しています。
| Razor |
コードのコピー
|
|---|---|
<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>
@(Html.C1().FlexGrid<Sale>()
.Id("gsFlexGrid")
.AutoGenerateColumns(true)
.AllowSorting(true)
.Bind(Model)
.Columns(bl =>
{
bl.Add(cb => cb.Binding("ID"));
bl.Add(cb => cb.Binding("Start"));
bl.Add(cb => cb.Binding("Product"));
bl.Add(cb => cb.Binding("Amount").Format("c"));
bl.Add(cb => cb.Binding("Discount").Format("p0"));
bl.Add(cb => cb.Binding("Active"));
})
</div>
|
|
ここでは、hostElementプロパティを使用して、FlexGridコントロールをホストするDOM要素を取得しました。コードは、FlexGridのkeydownイベントを処理し、［Ctrl］+［Q］キーをホットキーとしてキャプチャします。
クリップボードショートカットの使用によるFlexGridデータの編集クリップボードショートカットの使用に慣れているなら、FlexGridコントロールでデータを編集する際に、簡単にクリップボードショートカットを利用できます。それには、次に示すように、FlexGridのAutoClipboardプロパティをtrueに設定します。
以下のコードは、「クイックスタート」トピックで作成したアプリケーションを拡張しています。
| Razor |
コードのコピー
|
|---|---|
@(Html.C1().FlexGrid<Sale>().Id("cdInitMethod") .AutoGenerateColumns(false) .Bind(Model) .AutoClipboard(true) .Columns(bl => { bl.Add(cb => cb.Binding("ID").Header("ID")); bl.Add(cb => cb.Binding("Start").Header("Start").Format("MMM d yy")); bl.Add(cb => cb.Binding("Country").Header("Country")); bl.Add(cb => cb.Binding("Product").Header("Product")); bl.Add(cb => cb.Binding("Discount").Format("p0")); bl.Add(cb => cb.Binding("Active")); bl.Add(cb => cb.Binding("Amount").Format("n0").Visible(false)); }) ) |
|
ComponentOne FlexGridでは、次のクリップボードコマンドがサポートされています。
読み取り専用のセルに貼り付け操作は効きません。さらに、クリップボード操作は、グリッドの表示されている行および列でのみサポートされます。
C1FlexGridには、ユーザーが［Enter］キーを押したときに、グリッドの同じ列内の次のセルにフォーカスを移動する機能が組み込まれています。しかし、［Enter］キーが押されたときにフォーカスが同じ行内を横に移動するように動作を変更できます。たとえば、グリッドで売上データを扱っているときには、行単位で編集する方が作業しやすい場合があります。その場合は、1つのセルの編集が終了したら、同じ行内の次のセルに移動できると便利です。
それには、次に示すように、FlexGridのhostElementのkeydownイベントを処理し、選択範囲を同じ行内の次のセルに設定します。
以下のコードは、「クイックスタート」トピックで作成したアプリケーションを拡張しています。
| Razor |
コードのコピー
|
|---|---|
<script type="text/javascript"> function onClientLoadedRows(e, args) { var g = e.hostElement; $(g).keydown(function (s, args1) { if (s.which == 13) { var flex = wijmo.Control.getControl("#gFlexGrid"); var sel = flex.selection; var row = sel.row - 1; var col = sel.col; if (col < flex.columns.length - 1) { var rng = new wijmo.grid.CellRange(row, col + 1, row, col + 1); flex.select(rng, true); } else { var rng = new wijmo.grid.CellRange(row + 1, 0, row + 1, 0); flex.select(rng, true); } } }); }</script> <div> @(Html.C1().FlexGrid<Sale>() .Id("gFlexGrid") .AutoGenerateColumns(true) .AllowSorting(true) .Bind(Model) .IsReadOnly(false) .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Cell) .OnClientLoadedRows("onClientLoadedRows") .Columns(bl =>{ bl.Add(cb => cb.Binding("ID")); bl.Add(cb => cb.Binding("Start")); bl.Add(cb => cb.Binding("Product")); bl.Add(cb => cb.Binding("Amount").Format("c")); bl.Add(cb => cb.Binding("Discount").Format("p0")); bl.Add(cb => cb.Binding("Active")); }) </div> |
|
上記のコードでは、OnClientLoadedRowsイベントを処理しています。デフォルトでは、編集終了後に［Tab］キーを押すことでも、同じ動作を利用できます。
先頭に戻る
FlexGridでデータを編集中に、特定の行をロックして、行内のエントリが編集されないようにしたい場合があります。たとえば、人事担当者がGridコントロールを使用して会社の賃金データを管理しているとします。このとき、グリッド内の1行または2行をロックして、グリッドに表示されている従業員データに対して編集操作を実行しても、特定の従業員の詳細情報には影響しないようにすることができます。
それには、次に示すように、FlexGridのOnClientBeginningEditイベントを処理します。
以下のコードは、「クイックスタート」トピックで作成したアプリケーションを拡張しています。
| Razor |
コードのコピー
|
|---|---|
<script type= “text\javascript”>
function OnClientBeginningEdit(e, args) {
if (args.row == 0) {
args.cancel = true;
}
}
</script>
<div>
@(Html.C1().FlexGrid<Sale>().Id("gFlexGrid")
.AutoGenerateColumns(true)
.AllowSorting(true)
.Bind(Model)
.IsReadOnly(false)
.SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Cell)
.OnClientBeginningEdit("onClientBeginningEdit")
.Columns(bl =>
{
bl.Add(cb => cb.Binding("ID"));
bl.Add(cb => cb.Binding("Start"));
bl.Add(cb => cb.Binding("Product"));
bl.Add(cb => cb.Binding("Amount").Format("c"));
bl.Add(cb => cb.Binding("Discount").Format("p0"));
bl.Add(cb => cb.Binding("Active"));
})
</div>
|
|
ここでは、指定された行（この例では、最初の行）が編集モードに入るとたびに、そのイベントがイベントハンドラによってキャンセルされます。