All Components

Editing Basics

Editing is a basic functionality of the Grid and allows you to manipulate the way the Grid renders its data.

To configure the dataSource for CRUD (Create, Read, Update, Destroy) data operations, use the built-in CRUD support for the Kendo UI Data Source component:

  1. Create a dataSource object instance and configure the CRUD operations and the model for it by using :transport-read-url, :transport-update-url, :transport-destroy-url, :transport-create-url, the type, and so on.
  2. Set the editable properties of the Grid and reference the dataSource instance.

For more information on editing, refer to the documentation of the Kendo UI Grid for jQuery.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource1"
                        :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Products'"
                        :transport-read-data-type="'jsonp'"
                        :transport-update-url="'https://demos.telerik.com/kendo-ui/service/Products/Update'"
                        :transport-update-data-type="'jsonp'"
                        :transport-destroy-url="'https://demos.telerik.com/kendo-ui/service/Products/Destroy'"
                        :transport-destroy-data-type="'jsonp'"
                        :transport-create-url="'https://demos.telerik.com/kendo-ui/service/Products/Create'"
                        :transport-create-data-type="'jsonp'"
                        :transport-parameter-map="parameterMap"
                        :schema-model-id="'ProductID'"
                        :schema-model-fields="schemaModelFields"
                        :batch='true'
                        :page-size='20'>
    </kendo-datasource>

    <kendo-grid :height="600"
                :data-source-ref="'datasource1'"
                :editable="'inline'">
        <kendo-grid-column field="ProductName"></kendo-grid-column>
        <kendo-grid-column field="UnitPrice" title="Unit Price" :width="120" :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column field="UnitsInStock" title="Units In Stock" :width="120"></kendo-grid-column>
        <kendo-grid-column field="Discontinued" :width="120" :editor="customBoolEditor"></kendo-grid-column>
        <kendo-grid-column :command="['edit', 'destroy']" title="&nbsp;" width="250px"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            schemaModelFields: {
                ProductID: { editable: false, nullable: true },
                ProductName: { validation: { required: true } },
                UnitPrice: { type: 'number', validation: { required: true, min: 1 } },
                Discontinued: { type: 'boolean' },
                UnitsInStock: { type: 'number', validation: { min: 0, required: true } }
            }
        }
    },
    methods: {
         customBoolEditor: function(container, options) {
                var guid = kendo.guid();
                kendo.jQuery('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container)
                kendo.jQuery('<label class="k-checkbox-label" for="' + guid + '">&#8203;</label>').appendTo(container);
            },
            parameterMap: function(options, operation) {
                if (operation !== 'read' && options.models) {
                    return { models: kendo.stringify(options.models) }
                }
            }
        }
})
In this article