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

Environment

Description

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
• Runnable example

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:

Copy Code<template v-slot:myLockedCell="{ props }">
  <td
    :colspan="props.colspan"
    :class="props.class"
    :role="props.role"
    :data-grid-col-index="props['data-grid-col-index']"
    :aria-selected="props['aria-selected']"
  >
    <b>{{ props.dataItem[props.field] }}</b>
  </td>
</template>

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:

Copy Codecolumns: [
  {
    field: 'ProductID',
    title: 'ID',
    width: '45px',
    cell: 'myLockedCell',
    locked: true,
  },
  .........

Runnable example