Editing Basics

Editing is a basic functionality of the Kendo UI Grid which allows you to manipulate the way its data is presented.

The Grid provides the following edit modes:

Getting Started

To enable editing:

  1. Configure the data source of the Grid
  2. Define the fields through the schema configuration
  3. Set the editable option

Configuring the Data Source

The following example demonstrates how to configure the DataSource for CRUD (Create, Read, Update, Destroy) data operations.

Example
var dataSource = new kendo.data.DataSource({
   transport: {
     read:   "/Products",
     update: {
        url: "/Products/Update",
        type: "POST"
     },
     destroy: {
         url: "/Products/Destroy",
         type: "POST"
      },
      create: {
          url: "/Products/Create",
          type: "POST"
       }
     },
     // determines if changes will be send to the server individually or as batch
     batch: true
     //...
});

Defining Fields through schema

The following example demonstrates how to declare the fields definitions through the DataSource schema.model.

  • Define the id field of the data items in schema.model.id. This ensures the correct adding, editing, and deleting of items.
  • Define the datatype of the fields to take advantage of the built-in editors, filterable UI and correct sorting, filtering and grouping.

The following table lists the available data types.

Data Type Column Template or Format Editor Parser
string Displayed as text. <input type="text" class="k-input k-textbox" name="fieldName" data-bind="value:fieldName"> Internal method. String conversion.
number columns.format can be used to format the number as currency "{0:c2}", percentage "{0:p0}", exponential "{0:e4}" or a custom format "{0:0.00}". See all Number Formatting kendo.ui.NumericTextBox kendo.parseFloat()
date columns.format can be used to format the date as a short "{0:d}", long "{0:D}", full date/time "{0:F}" and many more standard and custom date patterns. See all Date Formatting kendo.ui.DatePicker kendo.parseDate()
boolean Displayed as lowercase text true or false <input type="checkbox" name="fieldName" data-type="boolean" data-bind="checked:fieldName"> Internal method. Boolean conversion.
object Arrays and Objects without templates are rendered as [object Object]. <input type="text" class="k-input k-textbox" name="fieldName" data-bind="value:fieldName"> Not processed. The value is passed as is.
Example
var dataSource = new kendo.data.DataSource({
    schema: {
        model: {
             id: "id",
             fields: {
                id: {
                    editable: false,
                    // a defaultValue will not be assigned (default value is false)
                    nullable: true
                },
                name: {
                    type: "string",
                    validation: { required: true }
                },
                price: {
                     // A NumericTextBox editor will be initialized in edit mode
                     type: "number",
                     // when a new model is created, this default will be used
                     defaultValue: 42
                },
                discontinued:{
                    // a checkbox editor will be initialized in edit mode
                    type: "boolean"
                },
                created: {
                    // a date picker editor will be initialized in edit mode
                    type: "date"
                },
                supplier: {
                    type: "object" ,
                    defaultValue: { companyName: "Progress", companyId: 1 }
                }
            }
        }
    }
});

Setting the editable Option

By default, the Grid is not editable. To enable the editing functionality, add the desired type of editing. The Kendo UI jQuery Grid supports the in-cell, inline, and popup edit modes. In orde for the edit functionality to be fully functional, add a toolbar with a Create button and a command column for the update and destroy operations.

The following example demonstrates how to configure a basic Grid in the incell edit mode for CRUD operations.

Example
// Incell editing
$("#grid").kendoGrid({
    // to enable the insertion of new records, save or cancel changes
    toolbar: [ "create", "save", "cancel" ],
    columns: [ "name",
      // to trigger the incell destroy operation
      { command: [ "destroy" ] }
    ],
    dataSource: dataSource,
    editable: true
});

The following example demonstrates how to configure a basic Grid in the inline or popup edit mode for CRUD operations.

Example
// Inline OR Popup editing
$("#grid").kendoGrid({
    // to enable the insertion of new records
    toolbar: [ "create" ],
    columns: [ "name",
      // to trigger the inline or popup edit and destroy operations
      { command: [ "edit", "destroy" ] }
    ],
    dataSource: dataSource,
    editable: "inline" // OR editable: { mode : "popup" }
});

See Also

In this article
Not finding the help you need? Improve this article