native grid grouping not working

[vinson]

Hi,

I have the native grid set up in my vue application with Vuex and having issue getting the grouping feature to work.

I am not getting a response whenever I drag a column to the column header. The dragged column just not stay in the column header, it disappears afterward.

It seems my grid isn't emitting the onDataStateChange method. Not sure what I have done wrong.

Other gird features are working fine. 

 

<template>
  <v-card shaped>
    <v-card-title>
      <h3>
        Product
      </h3>
    </v-card-title>
    <v-card-text>
      <Grid
        :style="{height: '800px'}"
        :data-items="gridDataResult"
        :filterable="true"
        :filter="filter"
        :groupable="true"
        :group="group"
        :pageable="pageable"
        :reorderable="true"
        :resizable="true"
        :sortable="true"
        :sort="sort"
        :skip="skip"
        :take="take"
        :total="total"
        :expand-field="'expanded'"
        :columns="columns"
        :column-menu="columnMenu"
        @pagechange="pageChangeHandler"
        @filterchange="filterChange"
        @sortchange="sortChangeHandler"
        @dataStateChange="dataStateChange"
        @expandchange="expandChange"
        @columnreorder="columnReorder"
      >
        <!-- <grid-toolbar>
          <button
            title="Add new"
            class="k-button k-primary"
            @click="insert"
          >
            Add new
          </button>
          <button
            v-if="hasItemsInEdit"
            title="Cancel current changes"
            class="k-button"
            @click="cancelChanges"
          >
            Cancel current changes
          </button>
        </grid-toolbar> -->

        <grid-no-records>
          <div class="k-loading-mask customPosition">
            <span class="k-loading-text" />
            <div class="k-loading-image" />
            <div class="k-loading-color" />
          </div>
        </grid-no-records>
      </Grid>
    </v-card-text>
  </v-card>
</template>

<script>

import { process } from '@progress/kendo-data-query';
// import { mapGetters } from 'vuex';
// import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'Product',
  components: {},
  data() {
    return {
      columnMenu: false,
      expandedItems: [],
      gridPageable: { pageSizes: true },
      skip: 0,
      take: 10,
      pageSize: 10,
      pageable: {
        buttonCount: 10,
        info: true,
        type: 'numeric',
        pageSizes: true,
        previousNext: true,
      },
      filter: {
        logic: '',
        filters: [
          // { field: 'UnitPrice', operator: 'neq', value: 18 },
          // { field: 'calendarMonth', operator: 'gte', value: new Date('1996-10-10') },
        ],
      },
      group: [],
      sort: [{ field: 'id', dir: 'asc' }],
      // sort: [
      //   { field: 'id', dir: 'asc' },
      // ],
      columns: [
        {
          field: 'id',
          title: 'ID',
          // width: '70px',
        },
        {
          field: 'currency',
          title: 'Currency',
          // width: '100px',
        },
        {
          field: 'salesOrigin',
          title: 'Sales Origin',
          // width: '100px',
          // filter: 'numeric',
          // groupable: true,
        },
        {
          field: 'plant',
          title: 'Plant',
          // width: '100px',
          // filter: 'numeric',
          // groupable: true,
        },
        {
          field: 'sku',
          title: 'SKU',
          // width: '100px',
          // groupable: true,
        },
        {
          field: 'materialGroupDescription',
          title: 'Material Group Description',
          // width: '100px',
        },
        {
          field: 'materialDescription',
          title: 'Material Description',
          // width: '100px',
        },
        {
          field: 'swatchDisplayColourDescription',
          title: 'Colour',
          // width: '100px',
        },
        {
          field: 'calendarMonth',
          filter: 'date',
          title: 'Calendar Month',
          // width: '100px',
          // groupable: true,
        },
        {
          field: 'discontinued',
          title: 'Discontinued',
          // filter: 'boolean',

          // groupable: true,
        },
        // {
        //   command: [
        //     {
        //       name: 'edit',
        //       text: ' ',
        //       width: 10,
        //     },
        //     {
        //       name: 'destroy',
        //       text: ' ',
        //       width: 10,
        //     },
        //   ],
        //   title: 'Actions',
        //   // width: '150px',
        // },
      ],
    };
  },
  computed: {
    gridDataResult: {
      get() {
        // const data = process(this.$store.getters.aggregatedBoDataList,
        //   {
        //     sort: this.sort,
        //     take: this.take,
        //     skip: this.skip,
        //     filter: this.filter,
        //     group: this.group,
        //   });
        // console.log(data);

        return process(this.$store.getters.aggregatedBoDataList,
          {
            take: this.take,
            skip: this.skip,
            sort: this.sort,
            filter: this.filter,
            group: this.group,
          });
      },
      set(data) {
        return process(data,
          {
            take: this.take,
            skip: this.skip,
            sort: this.sort,
            filter: this.filter,
            group: this.group,
          });
      },
    },
    total() {
      return this.$store.getters.aggregatedBoDataList
        ? this.$store.getters.aggregatedBoDataList.length : 0;
    },
  },
  created() {
    this.$store.dispatch({
      type: 'fetchAggregatedBoData',
      count: 200,
    });
  },
  methods: {
    createAppState(dataState) {
      console.log(`dataState ${dataState}`);
      this.group = dataState.group;
      this.take = dataState.take;
      this.skip = dataState.skip;
      this.girdDataResult(dataState.data);
      // this.getData();
    },
    groupChange(event) {
      console.log(event);
    },
    dataStateChange(event) {
      console.log(`data state ${event}`);
      this.createAppState(event.data);
    },
    expandChange(event) {
      console.log(`expand state ${event.target.$props.expandField}`);
      this.$set(event.dataItem, event.target.$props.expandField, event.value);
    },
    pageChangeHandler(event) {
      this.skip = event.page.skip;
      this.take = event.page.take;
    },
    sortChangeHandler(e) {
      this.sort = e.sort;
    },
    filterChange(ev) {
      this.filter = ev.filter;
    },
    columnReorder(options) {
      this.columns = options.columns;
    },
  },
};
</script>

<style>
.customPosition { margin-top:100px}
</style>

[Ianko]

Hello,

I created an example that mimics (to some extent) the code shown in your ticket and I am not experiencing any issues with grouping https://stackblitz.com/edit/vspufa?file=index.js. Can you check it out and see if I am missing anything? 

Regards,
Ianko
Progress Telerik

[vinson]

Hi Ianko,

I found out why it is not working in my vue spa app (created using vue cli). It suppose to use '@datastatechange' all in small cap. However, in the web demon it is '@dataStateChange' the 'S' and 'C' is in large cap. That is the difference!

I am facing another issue with emitting '@expandchange'. The function gets emitted but it will not refresh the ui to collapse or expand the row.

<template>
  <v-card shaped>
    <v-card-title>
      <h3>
        Product
      </h3>
    </v-card-title>
    <v-card-text>
      <Grid
        ref="grid"
        :style="{height: '800px'}"
        :data-items="gridDataResult"
        :filterable="true"
        :filter="filter"
        :groupable="true"
        :group="group"
        :pageable="pageable"
        :reorderable="true"
        :resizable="true"
        :sortable="true"
        :sort="sort"
        :skip="skip"
        :take="take"
        :total="total"
        :expand-field="'expanded'"
        :columns="columns"
        :column-menu="columnMenu"
        @datastatechange="dataStateChange"
        @expandchange="expandChange"
      >
        <!--

          <grid-toolbar>
          <button
            title="Add new"
            class="k-button k-primary"
            @click="insert"
          >
            Add new
          </button>
          <button
            v-if="hasItemsInEdit"
            title="Cancel current changes"
            class="k-button"
            @click="cancelChanges"
          >
            Cancel current changes
          </button>
        </grid-toolbar> -->

        <grid-no-records>
          <div class="k-loading-mask customPosition">
            <span class="k-loading-text" />
            <div class="k-loading-image" />
            <div class="k-loading-color" />
          </div>
        </grid-no-records>
      </Grid>
    </v-card-text>
  </v-card>
</template>

<script>

import { process } from '@progress/kendo-data-query';
import Vue from 'vue';
// import { mapGetters } from 'vuex';
// import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'Product',
  components: {},
  data() {
    return {
      columnMenu: false,
      expandedItems: [],
      skip: 0,
      take: 10,
      pageSize: 10,
      pageable: { pageSizes: true },
      filter: null,
      sort: null,
      group: null, // { field: 'sku' }
      columns: [
        {
          field: 'id',
          title: 'ID',
          // width: '70px',
        },
        {
          field: 'currency',
          title: 'Currency',
          // width: '100px',
        },
        {
          field: 'salesOrigin',
          title: 'Sales Origin',
          // width: '100px',
          // filter: 'numeric',
          // groupable: true,
        },
        {
          field: 'plant',
          title: 'Plant',
          // width: '100px',
          // filter: 'numeric',
          // groupable: true,
        },
        {
          field: 'sku',
          title: 'SKU',
          // width: '100px',
          // groupable: true,
        },
        {
          field: 'materialGroupDescription',
          title: 'Material Group Description',
          // width: '100px',
        },
        {
          field: 'materialDescription',
          title: 'Material Description',
          // width: '100px',
        },
        {
          field: 'swatchDisplayColourDescription',
          title: 'Colour',
          // width: '100px',
        },
        {
          field: 'calendarMonth',
          filter: 'date',
          title: 'Calendar Month',
          // width: '100px',
          // groupable: true,
        },
        {
          field: 'discontinued',
          title: 'Discontinued',
          // filter: 'boolean',

          // groupable: true,
        },
        // {
        //   command: [
        //     {
        //       name: 'edit',
        //       text: ' ',
        //       width: 10,
        //     },
        //     {
        //       name: 'destroy',
        //       text: ' ',
        //       width: 10,
        //     },
        //   ],
        //   title: 'Actions',
        //   // width: '150px',
        // },
      ],
    };
  },
  computed: {
    gridDataResult: {
      get() {
        return process(this.$store.getters.aggregatedBoDataList,
          {
            take: this.take,
            skip: this.skip,
            sort: this.sort,
            group: this.group,
            filter: this.filter,
          });
      },
      set(data) {
        return process(data,
          {
            take: this.take,
            skip: this.skip,
            sort: this.sort,
            group: this.group,
            filter: this.filter,
          });
      },
    },
    total() {
      return this.$store.getters.aggregatedBoDataList
        ? this.$store.getters.aggregatedBoDataList.length : 0;
    },
  },
  created() {
    this.$store.dispatch({
      type: 'fetchAggregatedBoData',
      count: 200,
    });
  },
  methods: {
    createAppState(dataState) {
      this.group = dataState.group;
      this.take = dataState.take;
      this.skip = dataState.skip;
      this.filter = dataState.filter;
      this.sort = dataState.sort;
      this.girdDataResult = dataState.data;
    },
    dataStateChange(event) {
      this.createAppState(event.data);
    },
    expandChange(event) {
      console.log(event);
      console.log(event.dataItem);
      console.log(event.target.$props);
      console.log(event.value);
      // Vue.set(event, 'value', true);
      // const d = Vue.set(event.dataItem, event.target.$props.expandField, true);
      Vue.set(event.dataItem, event.target.$props.expandField, event.value);
      // console.log(d);
    },
    pageChangeHandler(event) {
      this.skip = event.page.skip;
      this.take = event.page.take;
    },
    sortChangeHandler(e) {
      this.sort = e.sort;
    },
    filterChange(ev) {
      this.filter = ev.filter;
    },
  },
};
</script>

<style>
.customPosition { margin-top:100px}
</style>

[vinson]

Hi Ianko,

The '@expandchange' isn't working in your example too.

[Ianko]

Hi,

I am afraid, the problem is with the computed property. Any changes to that property will not dispatch UI changes. You will need to use a simple property to bind the data. https://stackblitz.com/edit/vspufa?file=index.js

Maybe you can consider using watchers or some other mechanism to get and set data using Vuex. 

Regards,
Ianko
Progress Telerik

[vinson]

Hi Ianko,

Thank you, no wonder why I am not getting update on the UI.

Can you provide me some insight how could I use watchers with the grid and Vuex?

I am new to Vue. 

[Ianko]

Hi,

Here you are an article showing various ways to watch state changes in Vuex: https://dev.to/viniciuskneves/watch-for-vuex-state-changes-2mgj.

Regards,
Ianko
Progress Telerik