Edit the Grid's Header on Double-Click

Updated on Sep 9, 2026

Environment

Product Version	3.3.2
Product	Progress® Kendo UI for Vue

Description

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

KB sections

• Solution description
• Runnable example

Solution description

To edit the Grid's headers on the fly, we have to use the headerCell property of the 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.

js

<template #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

Loading ...