multiselect icon indicating copy to clipboard operation
multiselect copied to clipboard

How to programmatically trigger sorting?

Open jpSimkins opened this issue 6 years ago • 1 comments

Unless I am missing something, I don't see an easy way to handle this. I have 2 multiselects on a page. I have logic setup so that when I add to right or left, I add or remove an item to the second multiselect. The issue is the append is out of order. I just want to trigger a sort to get the second mulitselect to sort the items so they are displayed in a sorted order.

I have tried a few different methods. My code below has my latest. You will see the @todo

My code:

// Apply multiselect to the associations
// @link http://crlcu.github.io/multiselect/#documentation
$('#content-groups-assoc').multiselect({
    keepRenderingSort: true,
    afterMoveToRight: function (left, right, options) {
        // When moving items to the right (associated)
        $(options).each(function () {
            _addToLayoutSelect(this);
        });
    },
    afterMoveToLeft: function (left, right, options) {
        // When moving items to the left (no association)
        $(options).each(function () {
            _removeFromLayoutSelect(this);
        });
    }
});

// Apply multiselect to the layout
$('#content-groups-layout').multiselect();

/**
 * Adds an item from the layout default select
 * @param that
 * @private
 */
function _addToLayoutSelect(that) {
    var id = $(that).val();
    // Check if it exists in either select
    if ($("#content-groups-layout option[value='" + id + "']").length === 0 || $("#content-groups-layout_to option[value='" + id + "']").length === 0) {
        // Does not exist, let's add it to the default layout
        $('#content-groups-layout').append(
            $('<option>', {value: id}).text($(that).text())
        );
        // @todo need to auto sort
        $('#content-groups-layout').multiselect('sort');
    }
}

/**
 * Removes an item from the layout selects
 * @param that
 * @private
 */
function _removeFromLayoutSelect(that) {
    var id = $(that).val();
    // Remove from both selects, no logic really needed here
    $("#content-groups-layout option[value='" + id + "']").remove();
    $("#content-groups-layout_to option[value='" + id + "']").remove();
}

jpSimkins avatar Feb 27 '18 20:02 jpSimkins

Hi @jpSimkins,

This is currently not implemented by the plugin, but I would really appreciate any suggestions / pull requests.

crlcu avatar Mar 23 '18 10:03 crlcu