Feature Request: Cancel and Apply buttons at the bottom of the dropdown

[bradhansen]

Love this multiselect and it's great documentation. I have a feature request/suggestion to add buttons (with configurable titles?) at the bottom of the select dropdown. It's a bit non-standard to some users to make their selections and click off the multiselect. A cancel (close the dropdown, return the selections to default), and an "OK" or "Apply" button to confirm the selections and close the dropdown. Thanks for your consideration!

[davidstutz]

Sounds interesing and already saw similar solutions in other plugins. Will think about how to implement this.

[aniketng876]

Hey David,
Lookin gforword for this enhancement.

[trungvose]

I am wondering If somebody has the workaround for this feature? Trying to styling bootstrap-multiselect for hours but didn't work.

Our project required like below image. which is similar to jquery.sumoselect library

[sagarch]

@trungk18 Have u found anything to do it in bootstrap multi-select? This will be really helpful when using it in mobile.

[trungvose]

@sagarch I didn't find the way with bootstrap multi-select so that I decided to use bootstrap dropdown and do my own style which includes two buttons at the bottom.

What I am using looks like.

The HTML markup I am using as below. Noted that there is some extra style needs to be done. The drawback is I also need to handle some of the events manually. E.g

• Type on search box
• Reset the list of selected checkbox If you modify but didn't click Done.
• Etc

<div class="dropdown">
  <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Select Columns
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu dropdown-menu-right" role="menu">
    <!-- Search -->
    <div class="input-group">
      <div class="form-group has-feedback">
        <input class="form-control multiselect-search" type="text" placeholder="Search">
        <i class="fa fa-search form-control-feedback"></i>
      </div>
      <span class="input-group-btn">
        <button class="btn btn-white btn-outline" type="button">
          <i class="glyphicon glyphicon-remove-circle"></i>
        </button>
      </span>
    </div>
    <!-- To render the input and label -->
    <div class="checkbox-wrapper">
      <!-- For loop -->
      <div class="checkbox" data-search="Order DateTime" >
        <label>
          <input name="selectedColumns" value="ORDERDATETIME" type="checkbox">Order DateTime
        </label>
      </div>      
    </div>
    <!-- Action button -->
    <div class="button-panel text-right">
      <button type="submit" class="btn btn-primary">Done</button>
      <button type="button" class="btn btn-white">Cancel</button>
    </div>
  </div>
</div>

Good luck

[qpajrathod09]

Any luck on this ?

[fringesurfer]

Was this resolved in the bootstrap-multiselect codeline ??? I dont want ng-select

[davidstutz]

Not the apply button yet, but an option for a reset button will be included in the next commit. The apply option is a bit more complicated because it needs to detach the underlying select from the multiselect plugin.

[khaivngo]

@davidstutz Thanks for a great plugin! Are there any updates on this? Will it be pursued?

[Adi-18]

@davidstutz Is there any news about apply button?

[aadiaconitei]

Hello,
The solution I found is:
$('#multiselect').multiselect({
onInitialized: function ($select, $container) {
let button = $('.multiselect-container');
if($('.container-filter-selected').find('button.btn-filter-selected').length === 0) {
$('

Close

').appendTo(button);

            }
        }
    })  });