Блог

У меня есть следующий шаблон, который я хотел бы использовать для отображения содержимого ячейки оболочки сетки Кендо:

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

<script>

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

Я могу сделать это, используя элементы кендо-сетки-столбца следующим образом:

 <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>
 

Вместо этого я хотел бы использовать атрибут столбцов кендо-сетки следующим образом:

 <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>
 

Однако во втором случае что-то не так с кодом. Вместо рендеринга ячеек с использованием шаблона я получаю [объект Object] в качестве содержимого ячейки. Что я должен сделать, чтобы исправить это?

Использование свойства столбцы при использовании пользовательских шаблонов визуализации не поддерживается оболочкой сетки Vue. Однако что-то подобное можно сделать с собственной сеткой.

Источник: https://www.telerik.com/forums/custom-kendo-grid-wrapper-column-template-using-kendo-grid-columns-attribute