The FlexGrid control can be easily customized to respond to keyboard events. You may need to provide keyboard support in your MVC applications using grid control, for the ease of end users. FlexGrid provides users the flexibility to manage its functionalities and edit or update data using keyboard.
This section discusses few scenarios where the FlexGrid control can be customized to be operated using keyboard.
Assigning Hot Keys in FlexGrid
You can assign appropriate Hot Keys in an MVC application, through code. This can ease many manual tasks and save time. For instance, while editing data in a grid that shows immense data in nearly 500 rows and 10 columns, you might find it appropriate to use Hot keys. In the below example, we will use Ctrl+q keys ,which will serve as Hot Keys, to copy the cell data from one column to another in the active row.
Note that the below code extends application created in Quick Start topic.
| HTML |
Copy Code
|
|---|---|
<script type=text/JavaScript>
var grid;
c1.mvc.Utils.documentReady(function () {
grid = wijmo.Control.getControl('#hkFlexGrid');
gridCV = grid.collectionView;
if (grid) {
var host = grid.hostElement;
// handle the keydown event
host.addEventListener('keydown', function (e) {
if (e.key == "q" && e.ctrlKey) {
grid.setCellData(grid.selection.row, 3,
grid.getCellData(grid.selection.row, 2));
console.log("Cell data copied from Country Column to Product Column in the current row");
}
});
}
});
</script>
<div class="container">
<div>
<c1-flex-grid auto-generate-columns="false" id="hkFlexGrid" 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="Country" header="Country"></c1-flex-grid-column>
<c1-flex-grid-column binding="Product" header="Product"></c1-flex-grid-column>
<c1-flex-grid-column binding="Discount" header="Discount" format="p0"></c1-flex-grid-column>
<c1-flex-grid-column binding="Active"></c1-flex-grid-column>
</c1-flex-grid>
</div>
</div>
|
|
Here, we used 'hostElement' property to get the DOM element that is hosting the FlexGrid control. The code handles the 'keydown' event of FlexGrid a to capture 'Ctrl+q' combination as Hot Keys.
While editing data in FlexGrid control, you can easily exploit clipboard shortcuts, if you are hands-on in using them. This can be done by setting AutoClipboard property of your FlexGrid to true, as shown below.
Note that the below code extends application created in Quick Start topic.
| HTML |
Copy Code
|
|---|---|
<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="Date" header="Date"></c1-flex-grid-column>
<c1-flex-grid-column binding="Country" header="Country"></c1-flex-grid-column>
<c1-flex-grid-column binding="Product" header="Product"></c1-flex-grid-column>
<c1-flex-grid-column binding="Discount" header="Discount" format="p0"></c1-flex-grid-column>
<c1-flex-grid-column binding="Active"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount" format="c">
</c1-flex-grid-column>
</c1-flex-grid>
</div>
</div>
|
|
The C1 FlexGrid supports following clipboard commands:
Cells that are Read-only, are not affected by paste operations. Moreover, the clipboard operations are only supported for visible rows and columns of a grid.
Making Enter Key Move Focus Across Row Instead of Down the ColumnThe C1FlexGrid has built-in capability to move focus to the next cell in the same column of the grid, when a user presses Enter key. However, a user can modify this behavior such that the focus moves across the same row when Enter key is pressed. For example, a user handling sales data in Grid might be comfortable in editing row-wise. He/she would like to switch over to the next cell in the same row once finished editing a cell.
This can be accomplished by using the KeyActionEnter property of the FlexGrid control and setting the KeyAction as CycleOut, as shown below.
Note that the below code extends application created in Quick Start topic.
| HTML |
Copy Code
|
|---|---|
<div class="container">
<div>
<c1-flex-grid auto-generate-columns="false" id="gFlexGrid"
key-action-enter="CycleOut" height="700px" width="800px" is-read-only="false">
<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="Product" header="Product"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column>
<c1-flex-grid-column binding="Discount" header="Discount" format="p0"></c1-flex-grid-column>
<c1-flex-grid-column binding="Active"></c1-flex-grid-column>
</c1-flex-grid>
</div>
</div>
|
|
Note that, same behavior is available by default if user presses Tab key once finished editing.
Back to Top
While editing data in FlexGrid, you may find it necessary to lock a particular row, to prevent editing entries in it. For instance, an HR person is managing payroll data of an organization, using a Grid control. He/she can lock a row or two in the grid, such that details related to specific employees are not affected while editing operations are being done on employee data, displayed in grid.
This can be done by handling the OnClientBeginningEdit event of FlexGrid, as shown below.
Note that the below code extends application created in Quick Start topic.
| HTML |
Copy Code
|
|---|---|
<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="Date" header="Date"></c1-flex-grid-column>
<c1-flex-grid-column binding="Product" header="Product"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column>
<c1-flex-grid-column binding="Discount" header="Discount" format="p0"></c1-flex-grid-column>
<c1-flex-grid-column binding="Active"></c1-flex-grid-column>
</c1-flex-grid>
</div>
</div>
|
|
Here, the event handler cancels the event whenever the specified row enters the edit mode, in this case the first row.
