Isotope.js dynamically changing sort data values

Question

I'm trying to dynamically change the sort data values on Isotope items, but Isotope seems to cache the initial order values and only use that on the 'reLayout' call.

I have a page of items that, when clicked, will expand to 100% of the container width. Upon resize, all the Isotope items have to be re-ordered to specific positioning. I loop through each box and update the sort value.

The following example shows two Isotope objects, the top with animation which produces the proper sort order values, but wrong positioning, and the second with what should be the correct result.

The full example: http://jsfiddle.net/eB85m/4/

Is there anyway for Isotope to retrieve the new sort data or to update the sort data values of Isotope directly?

Answer 1

You're right about Isotope caching the initial order values – from Isotope's documentation here:

The data cache is built on initialization so it can be quickly accessed when sorting.

Isotope offers the updateSortData method to … well, update the sorting data after initialization. Here's a working jsfiddle.

// Update sort data
// http://isotope.metafizzy.co/docs/methods.html#updatesortdata
$('#iso').isotope( 'updateSortData', $('#iso').children() );

to your original example and commented the 'reLayout' – updating isotope's sort options already takes care of that (ref. Isotope's sorting demo).

V2 Update:

In V2 you can use $('#iso').isotope('updateSortData').isotope();
_{^{(per comment below)}}