Adding "Select All Button" to Multiple Selection Dropdown

[eric...@gmail.com]

Hi there,

Thank you very much for this great library.

I am looking into extending the multiple selection dropdown to add a select all button to select all the options at the bottom of the dropdown container (note: the drop down is infinite scrolling that pulls remote data using ajax).

The solution recommended by kevin-brown was to override the dropdownAdaptor and decorate the render method as described here:
https://github.com/select2/select2/issues/195#issuecomment-73608590

I have read Kevin's discussion in another post re: using adapters/decorators (https://groups.google.com/forum/#!topic/select2/s4hAHyBrYqc), but my understanding is still not there to implement a working solution.

Could you guide me on how I might add a select-all button to the bottom of the dropdown container?

My current code so far is as follows but I run into the following error
TypeError: this.dropdown.bind is not a function select2.js:5009:4 (select2 version 4.0.0)

$.fn.select2.amd.require([
'select2/utils',
'select2/dropdown'
], function (Utils, Dropdown) {
function SelectAll() { }

SelectAll.prototype.render = function (decorated) {
var $rendered = decorated.call(this);

var $selectAll = $(
'<span>Select All Button Placeholder</span>'
);

$rendered.prepend($selectAll);

return $rendered;
};

$("#select").select2({
theme: "bootstrap",
placeholder: "Select Option(s)...",
dropdownAdapter: Utils.Decorate(Dropdown, SelectAll),
ajax: {
url: resolveRelativeUrl("~/get-options"),
dataType: 'json',
delay: 250,
data: function (params) {
return {
// the following params are sent as query strings to the web service url above. The exact property names are used as below in the query string.
searchTerms: params.term, // search term (this is the input user types into the dropdown search bar)
page: params.page || 1 // Select2 determines which page needs to be loaded
};
},
processResults: function (data, params) {
// data should be in JSON format like so:
// data = {total_count: (number of total results), results: [{id:(id), text:(text)}, ...]}

params.page = params.page || 1; // Select2 should be calculating the params.page

return {
results: data.results,
pagination: {
// this line determines if Select2 should continue making ajax calls to retrieve the next page of results
more: (params.page * 100) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) {
return markup;
}, // let our custom formatter work
minimumInputLength: 0 // Setting to "0" enables scrolling of all dropdown options
});
});

Thank you for your help,
Eric

[Kevin Brown]

The dropdown.bind error is actually a known bug that will be fixed in the upcoming release of Select2 4.0.1. You can get the patch for it at https://github.com/select2/select2/commit/89858c418d511dc3a141c9e62039861431b495d0.

As far as your code goes, I've put it in a jsbin for testing at http://jsbin.com/vekudabeso/2/edit?html,js,output.

I've dropped a bunch of code which was related to remote data sources (not needed in a jsbin) and added the AttachBody decorator which fixes the dropdown.bind issue and solves the alignment issue you would have seen.

And here is a copy with a working "Select all" button: http://jsbin.com/seqonozasu/1/edit?html,js,output I've also cross-posted it to the original GitHub ticket.

--
You received this message because you are subscribed to the Google Groups "select2" group.
To unsubscribe from this group and stop receiving emails from it, send an email to select2+u...@googlegroups.com.
To post to this group, send email to sel...@googlegroups.com.
Visit this group at http://groups.google.com/group/select2.
For more options, visit https://groups.google.com/d/optout.

[Eric Lee]

Thank you so much for your support Kevin :)