Adding initalSortBy to the options when using remote mode breaks sorting.

[haydenthrash]

Issue Type

• [x] Bug

Specs

What version are you using? 2.18.0

What browser? Google Chrome 77.0.3865.90

Expected Behavior

What did you expect to happen?. I expected when using a remote VGT, that I could add in the initalSortBy sort option and it would show that column as the default sorted column on mount of the VGT.

Actual Behavior

What actually happened? When adding in the initialSortBy option, the VGT starts an infinite loop of hitting my onSortChange function, hitting my server over and over again with the sort options set in the initialSortBy. It will not allow me to change the sort, and never stops calling the onSortChange function.

Steps to Reproduce the Problem

1. Setup remote VGT instance
2. Add in sortOptions with initialSortBy set to `{ field: 'name', type: 'asc' }
3. Add debugger to onSortChange function passed into VGT
4. Load page, the debugger in the onSortChange function should get hit over and over again.

jsfiddle

I did the best I could on this fiddle... not easy to do without the server ajax call working! https://jsfiddle.net/7942aqvy/

This might be related to or a copy of Issue #364, definitely seems similar to the comment @bogatyrjov1 made.

I could be implementing wrong, but thanks in advance for any help!

[kai-yu]

Same here. sorting works like a charm before I put initialSortBy. When apply initialSortBy in sortOptions, VGT cause infinite loop on onSortChange.

I suppose it has something to do with I make remote call in onSortChange, and that stuff up reactivity within VGT.

[eric-naguras]

Somewhere the sorting options changed from an object to an array to support multi-column sorting. Author forgot to update the documentation. The docs still show an object for the initial sort, change this into an array and everything works fine.

serverParams: { columnFilters: {}, sort: [ { field: 'showTitle', type: 'asc' } ], page: 1, perPage: 25 },

[cstriuli]

Same here, we've the same issue. Has anyone found a workaround?

[eric-naguras]

Same here, we've the same issue. Has anyone found a workaround?

In my comment I show a work-around.

The docs still show an object for the initial sort, change this into an array and everything works fine.

serverParams: { columnFilters: {}, sort: [ { field: 'showTitle', type: 'asc' } ], page: 1, perPage: 25 },

[cstriuli]

@eric-naguras Thanks, but I've tried to use the array/object format for sort property but doesn't works.

[eric-naguras]

@cstriuli I'm sorry to hear it doesn't work for you. Maybe there is another problem with your approach. I suggest you ask Stackoverflow for help.

[LucianoVandi]

I'm having the same issue. It not seems related to the format of sort property as suggested by @eric-naguras

Each time you set initialSort VGT call initializeSort, that in turn call setInitialSort. In this method it's emitted on-sort-change. I think that it should be:

if(this.mode !== 'remote'){
   this.$emit('on-sort-change', this.sorts);
}

Otherwise with remote mode it will keep hitting onSortChange endlessly. Since on the initial render you get results already sorted, you could omit initialSort, but this will also disable the "visual" indication of sorting coloumn/direction.