使用基于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: {
}
});