Conditional background/font color in dropdownlist

Question

Is this possible? I have the following in my cshtml (razor) MVC 4:

@Html.DropDownListFor(v => v.Medico, ((IEnumerable<SelectListItem>)ViewBag.Medicos), new { @class="span4"})

This is on controller, how I generate the list:

List<Medico> list = null;
Medico medico = null;
if (visitador != null){
    list = new List<Medico>(visitador.Medicos.OrderBy( m => m.Nombre));

    for (int i = 0; i < list.Count(); i++)
    {
        var item = list[i];
        if (i == 0 && medico == null) medico = list[i];
        medicosList.Add(new SelectListItem { Text = item.Nombre + " " + item.Apellido, Value = item.Id.ToString()});

I need to mark somehow in the dropdownlist which "Medico" meets X condition. How can I achieve it? I have a bool method to check the condition which can be called from controller, but after googling a lot I have no idea how to "mark" these.

First question to ask yourself: how would you do it in raw HTML? — John Saunders, Oct 16 '13 at 17:20
Yes but how can I check in the controller itself this? I mean, I need to "pin" the ones I want beforehand. Right? — N8K8, Oct 16 '13 at 17:21
You didn't ask yourself that question, did you? Show me the HTML for a dropdown list with different colors. — John Saunders, Oct 16 '13 at 17:22
Well, let me reprhase then. I need to make certain items of my @Html.DropDownListFor to have a different font/bg based on a condition. For this I have a bool method in my repository that will use Medico.Id and return the bool. This is just for presentation purposes, no logic required beyond that. — N8K8, Oct 16 '13 at 17:26
Excellent. Now note the answer from @Krilovich. You'll note a similarity. — John Saunders, Oct 16 '13 at 17:59

krilovich · Accepted Answer · 2013-10-16T18:48:42.977

3

Can't think of the top of my head how you could do it using a selectitem list and Html.DropDownList but you could easily do it in a different way

In your controller instead of what you have now simply only have the list because thats all you need

List<Medico> list = new List<Medico>(visitador.Medicos.OrderBy( m => m.Nombre));
** Edit **

foreach(var m in list)
{
  //check each one against your repository here and have something inside of Medico to tell you the result
}

and in your HTML you can easily create the dropdown list by yourself (as long as the name properly is the same as the property name in your model which is Medico the binding will work)

<select id="Medico" name="Medico">
 @foreach(var medico in (List<Medico>)ViewBag.Medicos)
 {
   if(medico.something = "something")
      <option id="@medico.Apellido" value="@medico.Id" style="background-color: blue">@medico.Nombre</option>
   else if(medico.something ="something else")
      <option id="@medico.Apellido" value="@medico.Id" style="background-color: red">@medico.Nombre</option>
 }
</select>

Basically in the foreach loop you can check each of your medico variables against a condition and depending on that you can give it a different class or style as you want

edited Oct 16 '13 at 18:48

answered Oct 16 '13 at 17:39

krilovich

3,475
1
23
33

2

FYI, there's no sense in initializing to `null` if you're going to set the variable in the next statement. – John Saunders Oct 16 '13 at 17:43
Thanks for this , ill try it. However the underlying problem still remains unless im not understanding properly. I cannot call my bool method in the repository from here, and what I need to compare is not an attribute of the medico entity. – N8K8 Oct 16 '13 at 18:02
1

Add a variable to your Medico class then and set it in your controller based on your repository method - a foreach loop should work – krilovich Oct 16 '13 at 18:21
1

By the way as a better practice I suggest you look into using stongly binded views with view models instead of the ViewBag to pass variables – krilovich Oct 16 '13 at 18:33

score 1 · Answer 2 · edited May 23 '17 at 11:50

1

combining code from here remove specific items from dropdown list using jquery and here Change the background color of dropdownlist JQuery

see if this will work for you

var $list = $("#myList"),
toColor= $();

for(var i = selectedItems.length; i--;) {
   toColor= toColor.add($list.find('option[value="' + selectedItems[i] + '"]'));
}
toColor.css(TextHighlightCss);

edited May 23 '17 at 11:50

Community

1
1

answered Oct 16 '13 at 17:30

Matt Bodily

6,403
4
29
48

Conditional background/font color in dropdownlist

2 Answers2