Custom Kendo Grid Wrapper Column Template Using kendo-grid columns Attribute

[Alex]

I have the following template that I would like to use to render the contents of a Kendo grid wrapper cell:

<template>
   <span>
      Template Rendered: {{ templateArgs.name }}
  </span>
</template>

<script>

export default {
  name: 'template1',
  data () {
    return {
      templateArgs: {}
    }
  }
}
</script>

I am able to do this using kendo-grid-column elements as follows:

<template>
  <div>
    <kendo-grid :data-source="datasource">
          <kendo-grid-column field="name" title="Name" :template="itemTemplate"></kendo-grid-column>
    </kendo-grid>
  </div>
</template>

<script>
import Vue from 'vue'
import { Grid, GridColumn } from '@progress/kendo-grid-vue-wrapper'
import Template from './Template.vue'

var itemTemplate = Vue.component(Template.name, Template)

export default {
  name: 'HelloWorld',
   components: {
       'kendo-grid': Grid,
       'kendo-grid-column': GridColumn
   },
   methods: {
        itemTemplate: function (e) {
          return {
            template: itemTemplate,
            templateArgs: e
          }
        }
    },
  data () {
    return {
        datasource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
    }
  }
}
</script>

I would like to use the kendo-grid columns attribute instead, as follows:

<template>
  <div>
    <kendo-grid :data-source="datasource" :columns="columns">
    </kendo-grid>
  </div>
</template>

<script>
import Vue from 'vue'
import { Grid, GridColumn } from '@progress/kendo-grid-vue-wrapper'
import Template from './Template.vue'

var itemTemplate = Vue.component(Template.name, Template)

export default {
  name: 'HelloWorld',
   components: {
       'kendo-grid': Grid,
       'kendo-grid-column': GridColumn
   },
   methods: {
        itemTemplate: function (e) {
          return {
            template: itemTemplate,
            templateArgs: e
          }
        }
    },
  data () {
    return {
        columns: [{ field: "name", title: "Name", template: this.itemTemplate }],
        datasource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
    }
  }
}
</script>

Something is wrong with the code in the second case, though. Instead of rendering the cells using the template, I am getting [object Object] as the cell contents. What should I do in order to fix this?

[Alex]

I found a way that works if you don't mind creating an additional component. In my case, I am creating a custom grid component anyway. You can create a component that wraps the grid and creates a list of <kendo-grid-column> elements from the columns attribute.

Template:

<template>
   <span>
      Template Rendered: {{ templateArgs.name }}
  </span>
</template>

<script>

export default {
  name: 'template1',
  data () {
    return {
      templateArgs: {}
    }
  }
}
</script>

 

Wrapper component:

<template>
    <div>
        <kendo-grid v-bind="$attrs">
            <kendo-grid-column v-for="(column, index) in columns" :key="index" v-bind="column"/>
        </kendo-grid>
    </div>
</template>

<script>
import { Grid, GridColumn } from '@progress/kendo-grid-vue-wrapper'

export default {
    name: 'CustomGrid',
    components: {
       'kendo-grid': Grid,
       'kendo-grid-column': GridColumn
    },
    data () {
        return {
            columns: this.$attrs.columns
        }
    },
    created () {
        if (this.$attrs.columns) {
            delete this.$attrs.columns
        }
    }
}
</script>

Parent component:

<template>
  <div>
    <custom-grid :data-source="dataSource" :columns="columns"/>
  </div>
</template>

<script>
import Vue from 'vue'
import Template from './Template.vue'
import CustomGrid from './CustomGrid.vue'

var itemTemplate = Vue.component(Template.name, Template)

export default {
  name: 'HelloWorld',
  components: {
        CustomGrid
   },
   methods: {
        itemTemplate: function (e) {
          return {
            template: itemTemplate,
            templateArgs: e
          }
        }
    },
  data () {
    return {
        dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ],
        columns: [{ field: "name", title: "Name", template: this.itemTemplate }]
    }
  }
}
</script>

[Petar]

Hi Alex,

Thank you for sharing your solution with the community! It will surely help someone who wants to achieve the same as the demonstrated functionality.

[Petar]

Hi Alex,

The targeted scenario with the template column property when defining the columns with an array is not supported in the Kendo UI for Vue Wrapper component.

What I can suggest is to try the Native Grid component in which the columns are defined the way you want. If you want to use the Wrapper Grid, then you will have to use the approach in which each column is defined with a GridColumn component.

Regards,
Petar
Progress Telerik