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

Customize the template/content of a locked Native Grid column using a cell template.


Product Version3.6.3
ProductProgress® Kendo UI for Vue Native


This Knowledge base(KB) article demonstrates how we can customize the template of a specific locked Native Grid column by defining a custom cell template.

KB sections

Solution description

The current example demonstrates how we can bold the content of the ProductID and Discontinued columns in the Kendo UI for Vue Native Grid. Both the ProductID and Discontinued columns are defined as locked and to be able to customize their content, we need to use a template as follows:

<template v-slot:myLockedCell="{ props }">
    <b>{{ props.dataItem[props.field] }}</b>

Once we have the above template defined, what we need to do is to pass its name(myLockedCell) to the cell column property. To do this, we are using the following definition:

columns: [
    field: 'ProductID',
    title: 'ID',
    width: '45px',
    cell: 'myLockedCell',
    locked: true,

Runnable example

View Source
Change Theme:

In this article

Not finding the help you need?