[{"id":"ca257e3e-9292-470e-9d7a-096b7c93a20e","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"86f1e123-ff2a-4ea0-a255-1c563fd53a4c","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"48d62b40-1243-44d3-bb0c-20b1335e100e","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"a479940a-f4be-4b31-a8fe-21d04270b6b3","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"dc5879f1-1f4e-415e-9d68-234f475c6ffb","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"e0f082cd-9797-4731-a08b-29ba133811cc","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"62fc4bd3-ab67-44d6-986f-2fe4c9558bdb","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"140ce507-8f59-4038-9016-33c5efc6837c","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"996f6920-d668-4adf-808a-356cee2027d0","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"fae22100-16a8-4d38-9b42-377af58552f4","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"14c6b426-94eb-4b0f-8803-3dae265130bd","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"29ea6a57-be42-4ee1-9ea1-4556452433e2","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"133b00a6-e011-4383-8723-46ac57dd361c","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"95e6d892-7bcd-4f6a-a152-504dec37c741","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"ff2fda3b-2365-49e2-ac9d-552284e45c73","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"3a7fa7b2-f252-436c-a1d1-5dd3c39a51ca","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"612ac80c-894b-4ae5-9ddc-5ff5cc2d0e8d","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"8f38e4df-4e2a-4a3a-ad58-6455d17b2506","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"a5da5dfc-4538-4c30-bb2b-654ffab99ffc","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"56963b79-20a3-4e91-9154-6bb0620b8ef7","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"6a9a4310-c4ee-49e1-9d51-6e2ebf757af4","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"b9d50243-49fa-405e-8804-7952197967b8","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"fa6afaf7-2038-42b0-8d43-86dfe46042cd","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"119624ed-fc48-46e9-aa43-89d7e2642cae","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"a6083f9e-9f9f-4a8e-96de-a043142d0282","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"5fdbcfd3-89c6-4a0c-83f0-a42fe72ba1f2","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"091efdad-d40d-4a8f-80de-a4332c0d6cfa","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"1dfbf182-8b10-492f-af29-a693d3db1ba5","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"6c0fdf26-682b-4deb-a278-ab57684d2cdc","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"46ac94dc-0e36-4cf5-a4b6-ad12b290f7b0","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"bd521645-2c83-4f3d-82ff-b17fa70faacd","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"36dc7e35-c17b-401d-b90f-b2141363afd0","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"fb1e533a-d61d-423a-ac26-beea6046ac5c","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"07e7a0bb-cca2-4bf8-84f8-caea8571c631","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"a250185e-b09b-4a0f-8c42-dade416924a4","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"6ea790e0-5d8e-4666-bba8-e344abbca974","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"165ce06c-c29a-458e-9ea9-e362afa3407d","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"f9c5b950-f2ab-4fc6-b584-e3f2f9150fae","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"038db070-9dd8-4837-9c23-e8289b588bae","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"21eb86b7-ba90-4b53-8576-fd57998f80bd","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]}]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

Custom Sorting

There can be several scenarios where sorting alone in simple ascending or descending order is not enough. For example, to sort a list of clothes according to different sizes like XXS, XS, S, M, L, XL, XXL, etc. you may need to first compare the items and then sort them.


To implement this type of sorting, also known as customized sorting, SpreadJS provides Events.RangeSorting and compareFunction in the event info.


The following gif depicts customized sorting performed on clothing sizes.




The following code sample sorts a list of men's clothing according to sizes.

// initializing Spread
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// get the activeSheet
var activeSheet = spread.getActiveSheet();
// Set Data
activeSheet.setArray(1, 1, [
    ["Men's clothing sizes"], [],
    ["XXS", "166–170"],
    ["XS", "168–173"],
    ["S", "171–176"],
    ["M", "174–179"],
    ["L", "177–182"],
    ["XL", "180–184"],
    ["XXL", "182–186"],
    ["3XL", "184–188"],
    ["4XL", "187–190"]]);
// Here we are sorting size of clothes from XXS size to 7XL size.
// function to compare items and sort them
function compareList(obj1, obj2) {
    var list = ["XXS", "XS", "S", "M", "L", "XL", "XXL", "3XL", "4XL", "5XL", "6XL", "7XL"];
    var index1 = list.indexOf(obj1), index2 = list.indexOf(obj2);
    if (index1 > index2) {
        return 1;
    } else if (index1 < index2) {
        return -1;
    } else {
        return 0;
    }
}
activeSheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(3, 1, 9, 2)));
activeSheet.bind(GC.Spread.Sheets.Events.RangeSorting, function (e, info) {
    info.compareFunction = compareList;
});

Note: In custom UI sorting, sorting for color (Style) is not supported.