Saroj
Saroj

Reputation: 526

Optgroup in DropDownlistFor MVC 4?

I need to group elements within DropDownListFor in MVC 4.

I have couple of dropdowns as teams and projects. Based on team I am getting the projects for which I have a table as project which contains a column called as entitytype. There are 3 entitytypes as client,assignment and project.

I have written a query to get the projects based on the team. Now I want to group the projects based on the entitytype.

For example, for Team1, there are 5 projects as 2 clients, 2 assignments and 1 project. So, it should be displayed as:

In the first dropdown:

In the second dropdown:



I searched regarding this a lot but totally got confused as I got a lot of results as most of them were like framework doesn't support any extension for this so custom one should be written.

My requirement is simple: I need to just group my query result into three categories as Clients,below that Assignments and next to that Projects. The one having entitytype Client should come under that and others accordingly.

Following is my code for getting the project based on the team:

 public List<Project> GetAllProjectForTeam(int teamId)
        {
            List<Project> project = new List<Project>();
            var query = (from p in db.Projects.AsEnumerable()
                             join pt in db.ProjectTeams.AsEnumerable() on p.ProjectId equals pt.ProjectId
                             join tm in db.Teams.AsEnumerable() on pt.TeamId equals tm.TeamId
                             where pt.TeamId == teamId
                             select p
                             ).ToList();

            project = query.Distinct().ToList<Project>();
            return project.ToList();
        }

and following is my razor code for dropdown:

<div class="editor-label">
         @Html.LabelFor(model => model.TeamId,"Team")
         </div>
            <div class="cssclass">
                 @Html.DropDownListFor(model => model.TeamId, new SelectList(Model.ddlTeam, "Value", "Text"), "Select Team", new { id = "TeamID", onchange = "GetProjects()", @class = "form-control", UpdateTargetId = "atag" })
              @Html.ValidationMessageFor(model => model.TeamId)
          </div>

              <div class="editor-label">
                  @Html.LabelFor(model => model.ProjectId, "Project")
               </div>
               <div class="cssclass">
                     @Html.DropDownListFor(model => model.ProjectId, new SelectList(Model.ddlProject, "Value", "Text"), "Select Project", new { id = "ProjectID", onchange = "ShowDocsList()", @class = "form-control" })
                       @Html.ValidationMessageFor(model => model.ProjectId)
                      </div>

So,this is what my problem is.Any help would be appreciated.I have already spent a lot of time in this but could not lead to any result. Thanks in advance.

Upvotes: 5

Views: 6208

Answers (2)

Pranav Kulshrestha
Pranav Kulshrestha

Reputation: 147

There is no such option add DataGroupField till MVC 4

Though from MVC 5 and even in Asp.net Core, we have option for dataGroupField which you can easily use for your implementation

FYI For MVC Core App, you can find following SeleclLiat variant as follows

public SelectList(IEnumerable items, string dataValueField, string dataTextField, object selectedValue, string dataGroupField);

Another suggestion would be to generate the select element using traditional coding and then use Multiselect jquery plugin as per your requirement

Check this out:- https://forums.asp.net/t/1743600.aspx?How+to+create+optGroup+from+multiselect+selectList+

Upvotes: 0

Josh
Josh

Reputation: 557

As @EdSF alluded to, there isn't an Html helper that will allow an option group for dropDownList, yet. Details: http://www.kashyapas.com/2014/06/09/html-ldquooptgrouprdquo-support-in-dropdownlist-asp-net-mvc-5-2/.

If you don't want to download an RC, you can always create your own custom helper to add support for grouped drop down lists. Example: http://weblogs.asp.net/raduenuca/asp-net-mvc-extending-the-dropdownlist-to-show-the-items-grouped-by-a-category

It may seem daunting, at first, to extend or create your own helpers but it's WELL WORTH the time and effort. It can save you loads of headache and code for more complicated projects if you can do this type of customization.

Upvotes: 3

Related Questions