Kendo UI + Vue - stable sorting groups in Chrome

1
votes

I am using the Vue wrapper for Kendo UI and can't get sorting to work in Chrome. I am trying to group my data into sites and order the rows by categories in those sites. My first column in Vue is a hidden one with the category index to sort them:

<kendo-grid-column field="___categorySortingIndex" :hidden="true"></kendo-grid-column>

If I do not enable grouping on my dataSource then it orders all the categories as expected after the index number.

The issue I am dealing with only occurs when grouping the items:

group: {
    field: "___siteSortingIndex",
    dir: "asc"
}

There is a tutorial on it using Kendo jQuery but the functionality does not seem to work for the vue components since vue uses template syntax instead of an array of objects like the jQuery example does.

The jQuery tutorial solution:

...
columns: [{
      field: "Name"
    }, {
      field: "Address",
      sortable: {
        compare: function(a, b, descending) {
          if(a.Address !== b.Address)
          {
            return a.Address - b.Address;
          }

          if (descending) {
            return b._position - a._position;
          } else {
            return a._position - b._position;
          }
        }
      }
    }]
...

Trying to do it in Vue:

<kendo-grid-colum :sortable="sortableObject" ...> 

...
sortableObject = {
    compare: ( a, b, descending ) => {
        ...
    }
};
...

Setting the sortable prop to an object gives the following warning:

[Vue warn]: Invalid prop: type check failed for prop "sortable". Expected Boolean, got Object.

Is there a way to stable sort for chrome using the vue wrapper to kendo ui?

2
vue.jskendo-ui

2 Answers

1
votes

The :sortable property in the grid column only takes a Boolean type.

However, there is a :sortableCompare property that takes a Functionthat should return an object with sortable.comparein a similar way to the jQuery example you posted.

1
votes

I solved this by listening to the @databinding event:

<kendo-grid ... @databinding="onDataBinding" ...>

This event runs before the template is rendered and it is possible to then sort the data before it is used in the kendo vue template:

onDataBinding( e ) {
    forEach( e.items, item => {
        item.items.sort( ( a, b ) => a.___categorySortingIndex - b.___categorySortingIndex );
    } );
}

Whether or not this is considered bad I can't say, but it did work for what I needed it to do.