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

Edit the Grid's Header on Double-Click

Environment

Product Version3.3.2
ProductProgress® Kendo UI for Vue Native

Description

The below example implements a logic that allows you to edit the column headers of the Native Grid when double-clicking on each of them.

KB sections

Solution description

To edit the Grid's headers on the fly, we have to use the headerCell property of the Native Grid's columns and define a custom header for each column. The below example uses the following template that is passed to the headerCell prop of all column.

<template v-slot:headerTemplate="{ props }">
    <span
    v-if="!getColumnItem(props).headerInEdit"
    @dblclick="(e) => customHandler(e, props)"
    >{{ props.title }}</span
    >
    <span v-else
    ><k-input
        @blur="onBlur(props)"
        @input="(e) => onInput(e, props)"
        type="text"
        :value="props.title"
    /></span>
</template>

With the above, the default behavior of the header will be to show the current value of its title(defined in the columns array). Then if we double-click on a random header, it will enter in edit mode by which you can change the title value.

Runnable example

Example
View Source
Change Theme:

In this article

Not finding the help you need?