New to Kendo UI for jQuery? Start a free 30-day trial

Editable

configuration

If set to true the user would be able to edit the data to which the grid is bound. By default editing is disabled.

Can be set to a string ("inline", "incell" or "popup") to specify the editing mode. The default editing mode is "incell".

Can be set to a JavaScript object which represents the editing configuration.

The "inline" and "popup" editing modes are triggered by the "edit" column command. Thus it is required to have a column with an "edit" command.

The "incell" editing mode combined with DataSource autoSync: true setting is not supported when using server-side grouping in the Grid. To be able to save edited values on each change, you can disable server-side grouping or trigger a DataSource sync() manually inside the cellClose event.

editable

Boolean|Object|String

Default: false

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    toolbar: ["save"],
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    dataSource: {
     data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
     ],
     schema:{
      model: {
       id: "id",
       fields: {
         age: { type: "number"}
       }
      }
     }
    },
    editable: true
  });
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: {
   data: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  },
  editable: "popup"
});
</script>

Check Batch editing, Inline editing and Popup editing for live demos.

editable.cancelDelete

String

If confirmation is enabled the grid will display a confirmation dialog when the user clicks the "destroy" command button. If the grid is in mobile mode this text will be used for the cancel button.

Default: "Cancel"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "name" },
     { field: "age" },
     { command: "destroy" }
   ],
   dataSource: {
    data: [
     { id: 1, name: "Jane Doe", age: 30 },
     { id: 2, name: "John Doe", age: 33 }
    ],
    schema:{
     model: {
      id: "id",
      fields: {
        age: { type: "number"}
      }
     }
    }
   },
   height: 550,
   mobile: "phone",
   editable: {
     confirmation: true,
     cancelDelete: "No"
   }
});
</script>

editable.confirmDelete

String

If confirmation is enabled the grid will display a confirmation dialog when the user clicks the "destroy" command button. If the grid is in mobile mode this text will be used for the confirm button.

Default: "Delete"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "name" },
     { field: "age" },
     { command: "destroy" }
   ],
   dataSource: {
    data: [
     { id: 1, name: "Jane Doe", age: 30 },
     { id: 2, name: "John Doe", age: 33 }
    ],
    schema:{
     model: {
      id: "id",
      fields: {
        age: { type: "number"}
      }
     }
    }
   },
   mobile: "phone",
   height: 550,
   editable: {
     confirmation: true,
     confirmDelete: "Yes"
   }
});
</script>

editable.confirmation

Boolean|String|Function

If set to true the grid will display a confirmation dialog when the user clicks the "destroy" command button.

Can be set to a string which will be used as the confirmation text.

Can be set to a function which will be called, passing the model instance, to return the confirmation text.

This and all Grid configuration properties can be set (enabled/disabled) after the grid has been initialized with the setOptions method.

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "name" },
     { field: "age" },
     { command: "destroy" }
   ],
   dataSource: {
    data: [
     { id: 1, name: "Jane Doe", age: 30 },
     { id: 2, name: "John Doe", age: 33 }
    ],
    schema:{
     model: {
      id: "id",
      fields: {
        age: { type: "number"}
      }
     }
    }
   },
   editable: {
     confirmation: false
   }
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "name" },
     { field: "age" },
     { command: "destroy" }
   ],
   dataSource: {
    data: [
     { id: 1, name: "Jane Doe", age: 30 },
     { id: 2, name: "John Doe", age: 33 }
    ],
    schema:{
     model: {
      id: "id",
      fields: {
        age: { type: "number"}
      }
     }
    }
   },
   editable: {
     confirmation: "Are you sure that you want to delete this record?"
   }
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "name" },
     { field: "age" },
     { command: "destroy" }
   ],
   dataSource: {
    data: [
     { id: 1, name: "Jane Doe", age: 30 },
     { id: 2, name: "John Doe", age: 33 }
    ],
    schema:{
     model: {
      id: "id",
      fields: {
        age: { type: "number"}
      }
     }
    }
   },
   editable: {
     confirmation: function(e) {
         return  "Are you sure that you want to delete record for " + e.name + "?";
     }
   }
});
</script>

editable.createAt

String

The position at which new data items are inserted in the grid. Must be set to either "top" or "bottom". By default new data items are inserted at the top.

Default: "top"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
   data: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  },
  editable: {
    createAt: "bottom"
  },
  toolbar: ["create"]
});
</script>

editable.destroy

Boolean

If set to true the user can delete data items from the grid by clicking the "destroy" command button. Deleting is enabled by default.

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "destroy" }
  ],
  dataSource: {
   data: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  },
  editable: {
    destroy: false
  },
  toolbar: ["create"]
});
</script>

editable.mode

String

The editing mode to use. The supported editing modes are "incell", "inline" and "popup".

The "inline" and "popup" editing modes are triggered by the "edit" column command. Thus it is required to have a column with an "edit" command.

As of Kendo UI version R3 2023, the incell editing of cells on mobile devices is activated on double tap of a Grid cell.

Default: "incell"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: {
   data: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  },
  editable: {
    mode: "inline"
  }
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: {
   data: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  },
  editable: {
    mode: "popup"
  }
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  toolbar: ["save"],
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
   data: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  },
  editable: {
    mode: "incell"
  }
});
</script>

If set to true the Grid will be initialized in read only mode. Users won't be able to add, remove or update records. Clicking on the edit, delete or add buttons will have no effect. In incell mode, clicking on the cell will not open it for editing.

API methods are not affected by this configuration. Calling editRow and editCell will still put the cell/row in edit mode. Calling addRow and removeRow will add/remove the row.

This property is useful in combination with the enableEditing and disableEditing methods. You can initialize the Grid as read only and enable editing later on.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "destroy" }
  ],
  dataSource: {
   data: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  },
  editable: {
    mode: "incell",
    readonly: true
  }
});
</script>

editable.template

String|Function

The template which renders popup editor.

The template should contain elements whose name HTML attributes are set as the editable fields. This is how the grid will know which field to update. The other option is to use MVVM bindings in order to bind HTML elements to data item fields.

Use the role data attribute to initialize Kendo UI widgets in the template. Check data attribute initialization for more info. The validation that is set in schema.model is not mapped automatically. As a result, when you use the editable.template option, you have to add the validation for every element manually.

To change the size of the popup editor you can follow the approach outlined in this article.

<script id="popup-editor" type="text/x-kendo-template">
  <h3>Edit Person</h3>
  <p>
    <label>Name:<input id="nameInput" name="name" /></label>
  </p>
  <p>
    <label>Age: <input data-role="numerictextbox" name="age" /></label>
  </p>
</script>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: {
   data: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  },
  editable: {
    mode: "popup",
    template: kendo.template($("#popup-editor").html())
  },
  edit: function (e) {
      //initialize Kendo UI TextBox for the name input
      $("#nameInput").kendoTextBox();
    }
});
</script>

<script id="popup-editor" type="text/x-kendo-template">
  <h3>Edit Person</h3>
  <p>
    <label>Name:<input data-bind="value:name" /></label>
  </p>
  <p>
    <label>Age:<input data-role="numerictextbox" data-bind="value:age" /></label>
  </p>
</script>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: {
   data: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  },
  editable: {
    mode: "popup",
    template: kendo.template($("#popup-editor").html())
  }
});
</script>

editable.update

Boolean

If set to true the user can edit data items when editing is enabled.

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "destroy" }
  ],
  dataSource: {
   data: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  },
  editable: {
    mode: "incell",
    update: false
  }
});
</script>

editable.window

Object

Configures the Kendo UI Window instance, which is used when the Grid edit mode is "popup". The configuration is optional.

For more information, please refer to the Window configuration API.

<div id="grid"></div>
<script>

  function myOpenEventHandler(e) {
    var confirm =   window.confirm('Do you want to edit this record?');
    if(!confirm){
      e.preventDefault()
    }
  }

  var dataSource = new kendo.data.DataSource({
   data: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  });

  $("#grid").kendoGrid({
    columns:['name','age', {command:'edit'}],
    dataSource:dataSource,
    editable: {
      mode: "popup",
      window: {
        title: "My Custom Title",
        animation: false,
        open: myOpenEventHandler
      }
    }
  });
</script>