Kendo UI网格-Vue-分组时的列标题未定义

时间:2018-10-17 23:24:17

标签: kendo-ui kendo-ui-grid kendo-ui-vue

使用基于kendo ui vue的网格,当进行分组时,我似乎无法使网格显示分组的值。我假设在这种情况下,第一行应该显示ALFKI,但显示为undefined(请参见代码下方的图形)。

<kendo-datasource 
  ref="datasource1" 
  :transport-read-url="'/orders'" 
  :transport-read-data-type="'json'" 
  :transport-parameter-map="tpm" 
  :schema-data="'data'" 
  :schema-total="'total'" 
  :schema-groups="'data'" 
  :schema-model-fields="schemaModelFields" :server-grouping="true"
  :server-filtering="true" :server-paging="true" :server-sorting="true" 
  :batch='false' :aggregate="aggregateDefinition" 
  :schema-model-id="'id'" :page-size='10'>
</kendo-datasource>

<kendo-grid :data-source-ref="'datasource1'" :height="600" 
   :sortable="true" :filterable="true" :groupable="true" :pageable="true" 
   :pageable-page-sizes="[5, 10, 20, 100]">

  <kendo-grid-column :field="'id'" :title="'id'"></kendo-grid-column>
  <kendo-grid-column :aggregates="['count']" :footer-template="'Total Count: #=count#'" :group-footer-template="'Count: #=count#'" :group-header-column-template="'Total: #= count #'" :field="'customerId'" :title="'Customer Id'"></kendo-grid-column>
  <kendo-grid-column :field="'orderDate'" :title="'Order Date'"></kendo-grid-column>

</kendo-grid>

Vue组件:

Vue.component('grid-remote', {
    template: '#remote-demo',
    data() {
        return {
            schemaModelFields: {

                id: { editable: false, nullable: true },
                customerId: { editable: false, nullable:false },
                orderDate: {editable:false}
            },
            groupDefinition: {
                field: "customerId",
                aggregates: [

                ]
            },
            aggregateDefinition: [
                { field: "customerId", aggregate: "count" }

            ]
        }
    },
    computed: {

    },
    methods: {

        tpm: function(options, operation) {

             return KendoDataQuery.toDataSourceRequestString(options);
            if (operation !== 'read' && options.models) {
                return { models: JSON.stringify(options.models) };
            }
        }
    }
});

new Vue({
    el: '#vueapp',
    data: {

    }
});

Kendo Vue Undefined

0 个答案:

没有答案