why not show title in grid?

[sun]

<template>
  <grid :style="{ height: '280px' }" :data-items="items" :columns="columns">
  </grid>
  <button @click="onClick">clicked</button>
</template>

<script setup lang="ts">
import '@progress/kendo-theme-default/dist/all.css'
import { Grid } from '@progress/kendo-vue-grid'
import { ref } from 'vue'

const columns = ref([
  { field: 'ProductID', title: 'ID', headerCell: 'myTemplate', hidden: false },
  { field: 'ProductName', title: 'Product Name', headerCell: 'myTemplate', hidden: false },
  { field: 'UnitPrice', title: 'Unit Price', headerCell: 'myTemplate', hidden: false }
])

const items = [{
  ProductID: 1,
  ProductName: 'Chai',
  UnitPrice: 18.0000
},
{
  ProductID: 2,
  ProductName: 'Chang',
  UnitPrice: 19.0000
},
{
  ProductID: 3,
  ProductName: 'Aniseed Syrup',
  UnitPrice: 10.0000
},
{
  ProductID: 4,
  ProductName: "Chef Anton's Cajun Seasoning",
  UnitPrice: 22.0000
}]

const onClick = () => {
  columns.value.map((item) => {
    console.log(item)
    if (item.field === 'ProductID') { item.hidden = true }
    // item.hidden = true
  })
}
</script>

I can not saw title in grid. Thanks.

[Plamen]

Hi,

It seems like you have defined some headerCell: 'myTemplate' that is not defined and that is why nothing is rendered. If you want a custom header you can check this demo .Otherwise if you just want the title you can remove the headerCell from the declaration so that it is displayed correctly. 

Regards,
Plamen
Progress Telerik