CODEWITHSUNDEEP
asp.net-mvcrazor
Whistler
Whistler

Reputation: 1977

MVC ListBoxFor multiselection without ctrl button

I have a listboxfor in my application which works greats. But to make multiple selection I need to press ctrl and click on the item. How can I change this behavior, so every time I click on the item in the list it selects it and when press again it deselects but only one of the selected items.

My listbox:

@Html.ListBoxFor(m => m.selectedCharts, new SelectList(@Model.Graphs.ToList() )
                                                    , new { @class = "select_change" }
                )

Or maybe I should use different control for this purpose?

Many thanks

Upvotes: 3

Views: 11160

Answers (2)

Whistler
Whistler

Reputation: 1977

I have managed to complete a nice looking listbox where user don't need to press ctrl button to select multiple elements. I want to share with you my work. I have used suggested by MartinHN an amazing extension CheckBoxListFor. You can find it on this website MvcCheckBoxList.

My View Code 

    @{
  var htmlListInfo = new HtmlListInfo(HtmlTag.vertical_columns, 0 , new { @class="styled_list" });
                        @Html.CheckBoxListFor(model => model.ReportSettings.Ids,
                                              model => model.AvailableGraphs,
                                              graph => graph.Id,
                                              graph => graph.Name,
                                              model => model.SelectedGraphs,
                                              new { @class="styled_checkbox" },
                                              htmlListInfo, 
                                              null, 
                                              x => x.Name)
        }

My CSS:

input.styled_checkbox, input[type="checkbox"] 
  {
     visibility: hidden;
     width: 0px;
  }
.styled_list 
{
    background: #aeeefb;
    border-radius:5px;
    padding: 10px 10px 10px 0;
    color: White;
    font-weight: bold;   
}  
.styled_checkbox 
{
    background: #69D2E7;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    margin: 3px 0 3px 0;
    padding: 5px;
    position: relative;
    width: 250px;
    border-radius:5px;
}
.styled_checkbox:hover
{
    opacity: 0.7;
}
.styled_checkbox:checked+label
{
     background: #1a9eed;  
}

The check boxes are hidden and labels indicates that element is selected or not. I can't insert pictures but it looks good, but you can off course edit style to your own needs.

Hope that helps anyone

Upvotes: 1

MartinHN
MartinHN

Reputation: 19802

I've used Bootstrap Multiselect before, with great success.

If it cannot be a drop down, use this Checkbox list instead.

Upvotes: 5

Related Questions