Keyboard Navigation in the Grid

[DavidSimmonsParticipant]

Is there anyway to have the Tab key select the next editable cell instead of the next cell. This would greatly help in data entry via the Grid.

Tab key is pressed – Selects the right cell. If the Grid is in edit mode, saves the edit cell’s value, closes its editor, selects the right cell and opens its editor.

[Peter StoevKeymaster]

Hi David,

That’s already supported. Open a cell in edit mode and press Tab.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ekaperintisParticipant]

this is you look documentatios navigation keyboard

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-cells-selection.htm

[DavidSimmonsParticipant]

Using your example below, which I modified LastName editable: false. When starting editing in FirstName, what I am trying to do when using the the Tab key make sure the cursor or cell selection not stop in the LastName or any field that has editable: false.

In order to enter in edit mode, ‘click’ on a Grid cell. The sample illustrates how to enable/disable the editing and the jqxGrid edit modes.

$(document).ready(function () {
var theme = getTheme();
// prepare the data
var data = generatedata(200);
var source =
{
localdata: data,
datatype: “array”,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 600,
source: dataAdapter,
editable: true,
theme: theme,
selectionmode: ‘singlecell’,
editmode: ‘click’,
columns: [
{ text: ‘First Name’, columntype: ‘textbox’, datafield: ‘firstname’, width: 90, editable: true},
{ text: ‘Last Name’, datafield: ‘lastname’, width: 90, editable: false },
{ text: ‘Product’, datafield: ‘productname’, editable: true },
{ text: ‘Quantity’, datafield: ‘quantity’, width: 70, cellsalign: ‘right’, editable: true },
{ text: ‘Available’, datafield: ‘available’, columntype: ‘checkbox’, width: 67, editable: true }
]
});
var editModes = [‘Click’, ‘Double-Click’, ‘Selected Cell Click’];
$(“#editmodes”).jqxDropDownList({ theme: theme, autoDropDownHeight: true, dropDownWidth: 150, width: 150, height: 25, selectedIndex: 0, source: editModes });
$(“#firstname”).jqxCheckBox({ theme: theme, checked: true });
$(“#lastname”).jqxCheckBox({ theme: theme, checked: true });
$(“#productname”).jqxCheckBox({ theme: theme, checked: true });
$(“#available”).jqxCheckBox({ theme: theme, checked: true });
$(“#quantity”).jqxCheckBox({ theme: theme, checked: true });
// change the Edit mode.
$(“#editmodes”).bind(‘select’, function (event) {
var index = event.args.index;
var editMode = index == 0 ? ‘click’ : index == 1 ? ‘dblclick’ : ‘selectedcell’;
$(“#jqxgrid”).jqxGrid({ editmode: editMode });
});
// change the Columns Editable state.
$(“#firstname, #lastname, #productname, #available, #quantity”).bind(‘change’, function (event) {
var datafield = event.target.id;
$(“#jqxgrid”).jqxGrid(‘setcolumnproperty’, datafield, ‘editable’, event.args.checked);
});
});

Edit Mode:

Editable Columns:

First Name

Last Name

Quantity

Product

Available

[Peter StoevKeymaster]

Hi David,

I understand you now. Thank you for the provided information. We’ll consider updating the default behavior in the future versions.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts