Edit the Grid's Header on Double-Click
Environment
Product Version | 3.3.2 |
Product | Progress® 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.