Problem dropdown with checkbox by bootstrap multiselect

Abhilash J A

9y14.5k.NET

I am working on MVC 5, there is have

@Html.DropDownListFor(model => model.ShowAdConfigIDs, ViewData["Services"] as List<SelectListItem>, "Select", new { @id = "DDLServiceCate", @class = "form-control " })

I want to do bootstrap multiselect dropdown with checkbox. For, I have tried:

"~/Scripts/bootstrap-multiselect.js">
"~/css/bootstrap-multiselect.css" rel="stylesheet" />
"text/javascript">
$(function () {
$('[id*=DDLServiceCate]').multiselect({
includeSelectAllOption: true
});
});

But after implementing this, look like below image.

But actually I want look like below image showing.

How can I do this ?

Please help me...

10 Replies

Know the answer? Post it — somebody with the same question will find it here.

Rajeev Punhani9y ago
Accepted answer
Hi Abhilash,
Please add the width to multiselect button.
$('[id*=DDLServiceCate]').multiselect({
           includeSelectAllOption: true , buttonWidth: '200px'
        });
+4
Bhaskar Banerjee7y ago
Sir/ Madam,

I am using Bootstrap 3 in my project. But I am getting only Simple SelectListBox, No Checkbox and no Dropdown. What I am doing wrong ??

Please provide the link of bootstrap-multiselect.js and bootstrap-multiselect.css.

Please need help urgently.....

Regards,
0
Alexis8y ago
Hi,
I am using the same plugin. My question is how to disable / enable the mutlti-select select?
$("#ScheduleDaysIds").attr('disabled', 'disabled'); works the first time but $("#ScheduleDaysIds").removeAttr('disabled'); does not enable it back
0
Abhilash J A9y ago
Hello all,

Thanks all, Now its working well.

I have done,
"~/Scripts/bootstrap-multiselect.js">
    "~/css/bootstrap-multiselect.css" rel="stylesheet" />

"text/javascript">
  $(function () {
        $('[id*=DDLServiceCate]').multiselect({
            includeSelectAllOption: true, buttonWidth: '200px'
        });
    });

And Inside drowpdown I have added '@multiple = "multiple"'
@Html.DropDownListFor(model => model.ShowAdConfigIDs, ViewData["Services"] as List<SelectListItem>, "None selected ", new { @id = "DDLServiceCate", @class = "form-control", @multiple = "multiple" })
Now it showing checkboxes. Thank you.
0
Asma Khalid9y ago
@Abhilash

I have already posted your answer in my previous comment. You need to add following attribute i.e.
$('#DDLServiceCate').attr('data-selected-text-format', 'count');
also, since its bootsrtap design, you will not have checkbox style. But, above line will help you resolve design break issue.
+3
Abhilash J A9y ago
@Ramesh,

Not happening, the class 'listbox' from boostrap's ' bootstrap-select.css ' ?
If it is, I have already added the class.
0
Ramesh Palanivel9y ago
HI Abhilash,

add the addtional class "listbox" in @class and try again

@Html.DropDownListFor(model => model.ShowAdConfigIDs, ViewData["Services"] as List<SelectListItem>, "Select", new { @id = "DDLServiceCate", @class = "form-control listbox" @multiple="multiple" })

+2
Ramesh Palanivel9y ago
Hi Abhilash,

Try this code,

@Html.DropDownListFor(model => model.ShowAdConfigIDs, ViewData["Services"] as List<SelectListItem>, "Select", new { @id = "DDLServiceCate", @class = "form-control listbox" @multiple="multiple" })

+2
Rajeev Punhani9y ago
Hi Abhilash,
You are missing multiple attribute when select is being generated .Add html attribute in the DropDownListFor constructor. Add Multiple attribute to your code.
@Html.DropDownListFor(model => model.ShowAdConfigIDs, ViewData["Services"] as List, "Select", new { @id = "DDLServiceCate", @class = "form-control ",@multiple="multiple" })
+2
Asma Khalid9y ago
use below code in javascript for bootstrap dropdown multi-select i.e.
// Enable multiple select.
$('#DDLServiceCate').attr('multiple', true);
$('#DDLServiceCate').attr('data-selected-text-format', 'count');

$('#DDLServiceCate').selectpicker(
{
     width: '100%',
     title: '- [Dropdown Title] -',
     style: 'btn-primary',
     size: 6,
     iconBase: 'fa',
     tickIcon: 'fa-check'
});
also, add "show-tick" class in your control i.e.
@Html.DropDownListFor(model => model.ShowAdConfigIDs, ViewData["Services"] as List<SelectListItem>, "Select", new { @id = "DDLServiceCate", @class = "form-control show-tick" })
+2