Bootstrap-multiselect: onSelectAll not fires event when option "Select all" clicked

Created on 2 Jun 2016  路  6Comments  路  Source: davidstutz/bootstrap-multiselect

onSelectAll not fires event when option "Select all" clicked. Only when last option in list is selected event fired. Event not fired when i unselect last option in list.

I am newbie with Javascript, so it may be my mistake, but i check that use last version of and i try use simple function like here (https://www.bountysource.com/issues/29165923-why-does-onselectall-function-is-triggered-when-nothing-is-selected).

When i select\unselect "Select All" options in list changed but event not fired.
When all option selected and i unselect one and select it back - event fired. I got message box with text "onSelectAll triggered: deselected all!" ("checked" value is wrong)
When all option unselected and i unselect last one - event not fired.

When i test example here (http://davidstutz.github.io/bootstrap-multiselect/#configuration-options-onSelectAll), i got same effect - "Select All" not fire trigger. And when i unselect and select back one option i got message box with text "onSelectAll triggered: deselected all!", not with "onSelectAll triggered."

It may be bug with my browser (Chrome 50.0.2661.102 m) but i also test with MS Edge 25.10586.0.0 and got same effect.

This is my code:

    // get SELECT item
var t_select = $('#tbl-columnList');

    // populate select with options - collumns of table in document
$('#report_userActionsLog_table th').each( function(d){    
            th_el = $(this);
            el_text = (th_el.text()? th_el.text(): th_el.children("img").attr("alt"));
            t_select.append( '<option value="'+d+'">'+el_text+'</option>' );     });    

    // init multiselect
t_select.multiselect({ 
    enableFiltering: false,
    maxHeight: 700,
    nonSelectedText: '袣芯谢芯薪泻懈',
    includeSelectAllOption: true,
   // this event not work as expected
    onSelectAll: function(checked) {
                alert('onSelectAll triggered: ' + (checked ? 'selected all' : 'deselected all') + '!');
    },
    buttonWidth: 158,
    templates: {
        button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span> <b class="caret"></b></button>',
        ul: '<ul class="multiselect-container dropdown-menu" style="width: 200px"></ul>',
        filter: '<li class="multiselect-item multiselect-filter"><div class="input-group"><input class="form-control multiselect-search" type="text" style="width: 100px"></div></li>',
        filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button></span>',
        li: '<li><a tabindex="0"><label></label></a></li>',
        divider: '<li class="multiselect-item divider"></li>',
        liGroup: '<li class="multiselect-item multiselect-group"><label></label></li>'
    },
   // this event work fine
    onChange: function(element, checked) {
                $('#report_userActionsLog_table').DataTable().column($(element).val()).visible( checked );
    }

});

    // select all by default
t_select.multiselect('selectAll', false);
t_select.multiselect('updateButtonText');
bug

Most helpful comment

I've made a pull request to solve this issue: #764

All 6 comments

I just ran into this myself, and the same for the onDeselectAll function that is not documented but in the javascript file. I know a previous version worked. I found this when I updated to the latest version and both of my functions were not working. Here's the code I am using. I will edit the previous version of code that I have to create the onDeselectAll function to work, but would be nice to have these features working when the user clicks on that checkbox.

$('.multiselect').multiselect({
                enableFiltering: true,
                enableCaseInsensitiveFiltering: true,
                includeSelectAllOption: true,
                includeSelectAllDivider: true,
                maxHeight: 400,
                onSelectAll: function () {
                    console.log("select-all-nonreq");
                },
                onDeselectAll: function () {
                    console.log("deselect-all-nonreq");
                }
            });

+1

As a temporary fix, just override the triggerOnSelectAll parameter for selectAll/deselectAll in the source

selectAll: function (justVisible, triggerOnSelectAll) {

            triggerOnSelectAll = true; //patch, broken
            var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
...

I've made a pull request to solve this issue: #764

Will have a look at the pull request.

It doesn't work for me
see #787

Any help?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

drmcclelland picture drmcclelland  路  9Comments

sourav-prescriber-360 picture sourav-prescriber-360  路  8Comments

mittal-sam picture mittal-sam  路  16Comments

smart--petea picture smart--petea  路  18Comments

zmeulDev picture zmeulDev  路  15Comments