Grid Cells Editing

jqxGrid Cell Editing feature much resembles the data entering experience in an Excel Spreadsheet – once you select a grid cell, you can enter data when you start typing text.
The Grid's 'editable' property specifies whether the editing is enabled or not.

Mouse Edit Actions

Keyboard Edit Actions and Navigation

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

The Grid have APIs for showing and hiding the cell editors.
The 'begincelledit' method allows you to put a specific cell into edit mode.

The 'endcelledit' method ends the edit operation and confirms or cancels the changes.
The following code cancels the changes:

The following code cancels the changes:

To set a new value to a Grid cell, you can use the 'setcellvalue' method:

To get the value of a Grid cell, you can use the 'getcellvalue' method:

The 'cellbeginedit' and 'cellendedit' events are raised when the edit operation begins or ends.


Editor Types

jqxGrid supports the following types of editors: To specify the column's editor, you should set the column's 'columntype' property to 'textbox', 'dropdownlist', 'numberinput', 'checkbox' or 'datetimeinput'. To disable the editing of a specific grid column, you can set the column's editable property to false. The 'initeditor' function is called when the editor's widget is initialized. It allows you to use the properties of the widget and make it best fit your application's scenario.


The Grid will display a validation popup message when the new cell's value is not valid. The developers are 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.

In following code, the "Ship Date", "Quantity" and "Price" columns define custom validation functions. Each function has 2 parameters - the edit cell and its value. Depending on your logic, you can validate the value and return true if the value is correct or false, if the value is not correct. You can also return an object with 2 members - result and message. The message member represents the message that your users will see, if the validation fails.