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

Inline Editing

The native Vue Grid by Kendo UI enables you to create, update, and delete data records inline.

The edit mode of the Grid rows is based on the value of the edit-Field prop.

Example
View Source
Change Theme:

In the above example the Discontinued column cell could also be defined as a local component instance in the following way:

const DropDownCell = {
    props: {
        field: String,
        dataItem: Object,
        format: String,
        className: String,
        columnIndex: Number,
        columnsCount: Number,
        rowType: String,
        level: Number,
        expanded: Boolean,
        editor: String
    },
    template: `<td v-if="!dataItem.inEdit" :class="className">{{ dataItem[field]}}</td>
               <td v-else><select class="k-textbox" @change="change">
                <option>True</option>
                <option>False</option>
               </select></td>`,
    methods: {
        change(e) {
            this.$emit('change', e, e.target.value);
        }
    }
};

In this article

Not finding the help you need?