Telerik UI for Windows 8 HTML

To configure the editing behavior in RadGrid, use the options that belong to the editable property of RadGrid. They control which edit operations are enabled,

Editing settings

The editable property receives an object with the following options as settings for RadGrid editing:




Used to enable editing in RadGrid. By default is set to false.


Use this property to switch between the edit modes of RadGrid. Its accepted values are "cell", "cellBatch" and "row". More information on edit modes is available here: Edit Modes. The default value is "cell".


To disable insert, while update and delete are enabled, set the create property to false. This way, pressing the insert button will not result in a new row being inserted.


This property indicates whether the newly created record should be inserted at the top or at the bottom of the currently available grid data. Accepted values are "top" and "bottom". The default value is "top", meaning that when the insert button in the service column is pressed, a new item will be added at the top of the grid items.


To disable update, while insert and delete are enabled, set the update property to false. This way, double clicking an item will not put it in edit mode.


You can choose between two behaviors when deleting items - they can either be immediately deleted (destroy: true) or only marked for deletion(destroy: false). The default value of this property is true.

Here is a full code sample of RadGrid with data editing enabled. The code includes:

  • Definition of a dataSource with a defined model. Without the model the data editing feature will not behave correctly.

  • Definition of the columns for better visual layout.

  • Definition of the editable property with mode set to row, update set to true, create and destroy set to false. This means that the grid will be editable but insertion and deletion of records will be disabled.

Grid Definition Copy imageCopy
<div id="grid" data-win-control="Telerik.UI.RadGrid" data-win-options="{
        width: 800,
        dataSource: {
            data: Configuration.Data,
            schema: {
                model: {
                    id: 'RecID',
                    fields: {
                        RecID: {
                            type: 'number',
                            editable: false,
                            nullable: true
                        Name: {
                            validation: {
                                required: true
                        City: {
                            validation: {
                                required: true
                        JobTitle: {
                            validation: {
                                required: true
        columns: [
             {field: 'RecID', title: 'ID', width: 50},
             {field: 'Name', width: 200},
             {field: 'City'},
             {field: 'JobTitle', title: 'Job Title', width: 350}
        editable: {
            enabled: true,
            mode: 'cellBatch',
            create: false,
            update: true,
            destroy: false
        theme: 'light'

And here is the data array for reference:

Data Array Copy imageCopy
Data: [{
    Name: 'Kenya Bruni',
    City: 'Anchorage',
    JobTitle: 'Chief Accounting Officer',
    RecID: 1
}, {
    Name: 'Karry Evertt',
    City: 'San Antonio',
    JobTitle: 'Chief Information Technology Officer',
    RecID: 2
}, {
    Name: 'Jacklyn Emayo',
    City: 'Boston',
    JobTitle: 'Chief Development Officer',
    RecID: 3
}, {
    Name: 'Robin Crotts',
    City: 'New York',
    JobTitle: 'Chief Financial Officer',
    RecID: 4