Select a single list item in bootstrap-multiselect dropdown using List<SelectListItem>

842 Views Asked by At

I am using a twitter bootstrap-multiselect dropdown in my MVC4 Razor view

 @Html.DropDownListFor(m => m.States, Model.States, new { @class = "form-control", id = "ddlState", placeholder = "Select State" })

I am using it as a single select drop down i.e. without 'multiple' property

$('#ddlState').multiselect({
            enableFiltering: true,
            nonSelectedText: 'Select State',
            enableCaseInsensitiveFiltering: true,
            maxHeight: 200
  });

I am populating the above drop down using a SelectListItem in the following way.

public List<SelectListItem> BindStates()
        {
            DataSet ds = new DataSet();
            ds = (DataSet)Session["SDMVTMasterDropDownData"];
            List<SelectListItem> states = new List<SelectListItem>();
            states = (from DataRow dr in ds.Tables[0].Rows
                      select new SelectListItem()
                   {
                       Text = (dr["StateName"]).ToString(),
                       Value = dr["StateId"].ToString(),
                       Selected = (bool)dr["SelectedStatus"],
                   }).ToList();
            return states;
        }

This is my dataset for the above list

StateId      StateName      SelectedStatus
  1        ANDHRA PRADESH        1
  2        BIHAR                 0
  3        CHANDIGARH            0

But the problem is that even though i set the Selected property to true, the dropdown doesnt make the respective list item selected.

Instead the first item in the list is selected by default.

While going through the internet i have observed that using the property selected='selected' can be used to set the selected option.

Like this,

<script type="text/javascript">
    $('#example-single-selected').multiselect();
</script>

<select id="example-single-selected">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3" selected="selected">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
</select>

But this is the static way , how do achieve this while populating the list from controller?

Here is the link for the reference doc for this bootstrap-multiselect dropdown http://davidstutz.github.io/bootstrap-multiselect/#configuration-options-multiple

0

There are 0 best solutions below