Editing Overview

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:

• Batch editing
• Inline editing
• Popup editing
• Custom editing

Getting Started

To enable editing:

1. Get familiar with the common editing concepts in Kendo UI
2. Configure the data source of the Grid
3. Define the fields through the schema configuration
4. 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.

js

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-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-textbox" name="fieldName" data-bind="value:fieldName">	Not processed. The value is passed as is.

js

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 order 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.

js

// Incell editing.
$("#grid").kendoGrid({
    // To enable the insertion of new records, save or cancel changes.
    toolbar: [ "create", "save", "cancel" ],
    columns: [ "name",
      // To trigger the in-cell 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.

js

// 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" }
});

Known Limitations

There are limitations when using editing along with other features of the component.

• If filtering is applied and serverOperation is disabled in the DataSource configuration, adding new records is not allowed.
• The component behaves differently, when it is grouped and you add a new record. If serverOperation is enabled in the DataSource configuration, the new row is added as part of a separate (duplicate) group. If serverOperation is disabled, the new row is added as part of an existing group.

KB Articles on Editing

• Customizing the Confirmation Window
• Adding Cascading DropDownList Editors
• Accessing the Editor Controls in edit Events
• Find Out More in the Knowledge Base

See Also

• JavaScript API Reference of the Grid