Using external sort is broken in 0.6.1

[mwtorkowski]

In 0.6.1, when using external data and sorting capabilities, the sort ascending / descending component never renders as the checks rely on comparing that.state.sortSettings.sortDirection to 'asc' or 'desc'.
Problem is, the sortDirection key is internal value, normally set by griddle when NOT using external sorting. There's no way to set it from the outside, hence sorting component never renders (it thinks there's no sorting applied at all).

[DmitryOlkhovoi]

Yeap i have the same issue here
#449

@ryanlanciaux

[ryanlanciaux]

Sorry your encountering this -- in regard to #449, is this only happening with External sorting?

[fechy]

+1

I did some digging:

Because of the return in here:

if (this.props.useExternal) {
    this.props.externalChangeSort(column, this.props.externalSortColumn === column ? !this.props.externalSortAscending : true);
    return;
}

This other part is never reached:

var sortDirectionCycle = columnMeta.sortDirectionCycle ? columnMeta.sortDirectionCycle : [null, 'asc', 'desc'];
 var sortDirection = null;
 // Find the current position in the cycle (or -1).
var i = sortDirectionCycle.indexOf(this.state.sortDirection && column === this.state.sortColumn ? this.state.sortDirection : null);

// Proceed to the next position in the cycle (or start at the beginning).
i = (i + 1) % sortDirectionCycle.length;

 if (sortDirectionCycle[i]) {
            sortDirection = sortDirectionCycle[i];
 } else {
            sortDirection = null;
}
 var state = {
            page: 0,
            sortColumn: column,
            sortDirection: sortDirection
};

 this.setState(state);

Therefore, sortDirection is always undefined, so this part in gridTitle.jdx fails:

if (that.props.sortSettings.sortColumn == col && that.props.sortSettings.sortDirection === 'asc') {
      columnSort = that.props.sortSettings.sortAscendingClassName;
      sortComponent = that.props.useGriddleIcons && that.props.sortSettings.sortAscendingComponent;
 } else if (that.props.sortSettings.sortColumn == col && that.props.sortSettings.sortDirection === 'desc') {
      columnSort += that.props.sortSettings.sortDescendingClassName;
      sortComponent = that.props.useGriddleIcons && that.props.sortSettings.sortDescendingComponent;
}

Hope this helps

[DmitryOlkhovoi]

@ryanlanciaux Could you pls fix it?

[albert-tse]

someone please make a pull request for this fix

[umchee]

+1

[M3lkior]

+1

[aclowes]

I worked around this with a subclass and patch hack. I'm sure there are better ways but might be useful for someone.

import Griddle from 'griddle-react';

export default class Grid extends Griddle {
  oldGetSortObject = this.getSortObject;
  getSortObject = () => {
    const sortObject = this.oldGetSortObject();
    sortObject.sortDirection = sortObject.sortAscending ? 'asc' : 'desc';
    return sortObject;
  };
}

[M3lkior]

thanks @aclowes , it works.

[twolfe2]

I got the sort icon working by using #486.

P.S. make sure you rebuild your project after switching versions

[ryanlanciaux]

Has anyone had more success with 0.7.0?

[flanamacca]

Confirming - upgrading to 7 fixed this for me

[ryanlanciaux]

Thanks for checking -- Will close this out for now then :)