Grid Cells Editing

The next version of jQWidgets will include a new jqxGrid Cell Editing feature which much resembles the data entering in an Excel Spreadsheet – once you select a grid cell, you can enter data in it when the user starts typing text.

Possible Edit actions which will be included in the upcoming version:

Mouse actions

Single mouse click: Marks the clicked cell as selected and shows the editor. The editor’s value is equal to the cell’s value. Single mouse click on a selected cell: Marks the cell as selected and shows the editor. Double mouse click on a cell: Marks the cell as selected and shows the editor. The editor’s value is equal to the cell’s value.

jquery-grid-cell-editors

The developer can choose any of the above mouse actions by changing a single property. By default, a Grid cell enters into edit mode when the user clicks on a selected cell.

Keyboard navigation

If the user starts typing text, the cell’s content is replaced with the text entered from the user.

“Left Arrow” key is pressed:
- Selects the left cell, when there’s no opened editor.
“Right Arrow” key is pressed:
- Selects the right cell, when there’s no opened editor.
“Up Arrow” key is pressed:
- Selects the cell above, when there’s no opened editor.
“Down Arrow” key is pressed:
- Selects the cell below, when there’s no opened editor.
“Page Up/Down” key is pressed:
- Navigates one page up or down.
“Home/End” key is pressed:
- Navigates to the first or last Grid row.
“Enter” key is pressed:
Shows the selected cell’s editor. If the cell is in edit mode, hides the cell’s editor and saves the new value. The editor’s value is equal to the cell’s value.
“Esc” key is pressed:
Hides the cell’s editor and cancels the changes.
“Tab” key is pressed:
Selects the right cell. If the cell is in edit mode, selects the right cell and enters into edit mode.
“Shift + Tab” keys combination:
Selects the left cell. If the cell is in edit mode, selects the left cell and enters into edit mode.
“F2″ key is pressed:
Shows the selected cell’s editor.
“Space” key is pressed:
Toggles the checkbox editor’s check state when the selected cell’s column is a checkbox column.


Programmatic Editing

The Grid will have new APIs for showing and hiding the cell editors and also to validate, cancel or confirm the changes.

Validation

The Grid will display a validation popup message when the new cell’s value is not correct. The developers will be able to set a custom validation logic and error messages for each grid column. The Grid will stay in edit mode until a correct value is entered or the user presses the “Esc” key.

grid-cells-validation

Editor Types

The editors which will be included are: checkbox, textbox, number input(edits currency, percentange and any type of numeric information), date and time input(edits date and time values), dropdown list(selects a single value from a list).
This entry was posted in JavaScript, JavaScript Plugins, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxGrid and tagged , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply