Kendo UI Grid - Vue - заголовок столбца, когда он не определен - PullRequest
Новая
       48

Kendo UI Grid - Vue - заголовок столбца, когда он не определен

0 голосов
/ 18 октября 2018

При использовании сетки на основе kendo ui vue и при группировке у меня не получается, чтобы сетка показывала значение группировки.Я предполагаю, что в этом случае следует указать ALFKI для первой строки, но он показывает неопределенный (см. Рисунок под кодом). 

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

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

...