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. 

this.myGrid.begincelledit(0, 'firstname');

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

this.myGrid.endcelledit(0, 'firstname', true);

The following code cancels the changes: 

this.myGrid.endcelledit(0, 'firstname', false);

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

// the first parameter is the row's index.
// the second parameter is the column's datafield.
// the third parameter is the new cell's value.
this.myGrid.setcellvalue(0, 'lastname', 'My Value');

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

// the first parameter is the row's index.
// the second parameter is the column's datafield.
let value = this.myGrid.getcellvalue(0, 'lastname');

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

<jqxGrid (onCellbeginedit)="onCellBeginEdit($event)" (onCellendedit)="onCellEndEdit($event)"
         [width]="width" [source]="dataAdapter" [columns]="columns"
         [editable]="true">
</jqxGrid>

... 
onCellBeginEdit(event: any): void {
    let args = event.args;
    let columnDataField = args.datafield;
    let rowIndex = args.rowindex;
    let cellValue = args.value;
},
onCellEndEdit(event: any): void {
    let args = event.args;
    let columnDataField = args.datafield;
    let rowIndex = args.rowindex;
    let cellValue = args.value;
    let oldValue = args.oldvalue;
}

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. 

columns: any[] = [
        { text: 'First Name', columntype: 'textbox', datafield: 'firstname' },
        { text: 'Last Name', datafield: 'lastname', columntype: 'textbox' },
        { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195 },
        { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
        { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'd' },
        {
            text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right', columntype: 'numberinput',
            initeditor: (row, cellvalue, editor) => {
                editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
            }
        },
        {
            text: 'Price', datafield: 'price', align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
            createeditor: (row, cellvalue, editor) => {
                editor.jqxNumberInput({ digits: 3 });
            }
        }
    ];

Validation

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. 

columns: any[] = [
        { text: 'First Name', columntype: 'textbox', datafield: 'firstname' },
        { text: 'Last Name', datafield: 'lastname', columntype: 'textbox' },
        { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195 },
        { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
        {
            text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, cellsalign: 'right', cellsformat: 'd',
            validation: function (cell, value) {
                var year = value.getFullYear();
                if (year >= 2013) {
                    return { result: false, message: "Ship Date should be before 1/1/2013" };
                }
                return true;
            }
        },
        {
            text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
            validation: function (cell, value) {
                if (value < 0 || value > 100) {
                    return { result: false, message: "Quantity should be in the 0-100 interval" };
                }
                return true;
            },
            initeditor: function (row, cellvalue, editor) {
                editor.jqxNumberInput({ decimalDigits: 0 });
            }
        },
        {
            text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
            validation: function (cell, value) {
                if (value < 0 || value > 15) {
                    return { result: false, message: "Price should be in the 0-15 interval" };
                }
                return true;
            },
            initeditor: function (row, cellvalue, editor) {
                editor.jqxNumberInput({ digits: 3 });
            }
        }
    ];