Multiselect grouping programmatically - MVC

Question

I have a table in this format:

table format

And i try to get this result programmatically:

desired result

I'm using asp.net mvc with razor. I know there is an example here but i couldnt adapt in my situation :( May you give an example please?

ADDED my work:

I think i must get the records via json, am i wrong? and im not good at in json

<script type="text/javascript">
      $('#ddl_Hours').multiselect();
</script>

<select id="ddl_Hours" multiple>
           @foreach (myModel item in ((MultiSelectList)ViewBag.MyList).Items)
           {
              int dayID = 0;

              if (dayID != item.DayID )
              {
                 <optgroup label="@item.DayID ">
                     <option value="@item.HourID">@item.Name</option>
                 </optgroup>
              }

              dayID = item.DayID;
            }
</select> 

Controller:

var list = (from p in db.T_MYTABLE
            select new MyModel { HourID = p.HourID ,
                                 DayID = p.DayID,
                                 Name = p.Name 
                                }).ToList();

ViewBag.MyList= new MultiSelectList(list, !string.IsNullOrEmpty(selectedValue) ? selectedValue.Split(',').ToArray() : null);

Answer 1

For generating such a grouped multi select using the jQuery plugin, first you need to render the HTML markup for grouped options like below

<select id="ddl_Hours">
    <optgroup label="4">
        <option value="1">00.00</option>
        <option value="2">01.00</option>
        <option value="3">02.00</option>
        <option value="4">03.00</option>
    </optgroup>
    <optgroup label="2">
        <option value="5">04.00</option>
        <option value="6">05.00</option>
        <option value="7">06.0</option>
    </optgroup>
    <optgroup label="3">
        <option value="8">07.00</option>
        <option value="9">08.00</option>
    </optgroup>
</select>

To generate the above markup in your view, you can create a list of item's in your action method with the Group property.

var list = db.T_MYTABLE.ToList();

//Create a list of Groups
var groups = list.Select(x => x.DayId)
            .Select(f => new SelectListGroup() { Name = "Day " + f.ToString() }).ToList();

var groupedOptions = list.Select(x => new SelectListItem
{
    Value = x.HourId.ToString(),
    Text = x.Name,
    Group = groups.FirstOrDefault(a => a.Name == "Day " + x.DayId.ToString())
}).ToList();

ViewBag.MyList = groupedOptions;

return View();

Assuming Name property of your entity is string type. If it is numeric type, use the ToString() method when setting the Text property value in the projection part of the above linq query (Text=x.Name.ToString())

Now in your razor view, you can use the Html.DropDownList helper method to render the SELECT element.

@Html.DropDownList("ddl_Hours", ViewBag.MyList as List<SelectListItem>)

or for the multi select

@Html.ListBox("ddl_Hours", ViewBag.MyList as List<SelectListItem>)

Now you can call your jQuery plugin to make it fancy. I would call it inside the document's ready event

$(function () {

    $('#ddl_Hours').multiselect();

})

and Voila!