CODEWITHSUNDEEP
c#javascriptasp.nethtmlsql
Alex Gordon
Alex Gordon

Reputation: 60841

asp.net: change color of listbox items

a listbox on a webform is being populated by a datasource on a sql server 2008.

depending on the text in the list box i would liek the backgroudn color of that specific item to be a specific color

for example if these are the items in the list:

AA item 1
AA item 2
BB item 3
BB item 4
AA item 5

if the item begins with AA, then make the background green and if the item beings with BB then make it blue

how can i do this?

the solution can be client or server side, doesnt matter to me

i am currenlty doing this:

function colorproblemlist() {
        ob = document.getElementById('lstProblems');
        for (var i = 0; i < ob.options.length; i++) {
            if (ob.options[i].value.indexOf('AA')!=-1) {
                ob.options[i].style.color = "red";
            }
        }

    }

and it's working great!!

however i have the following complication.

the first column as you see below:

AA item 1
AA item 2
BB item 3
BB item 4
AA item 5

will not be visible

only the second one will be visible:

Item 1
Item 2
...

this column :

AA
AA

..

is a field in the database table from which this data is pulled and i need the color to be based on that field.

how can i do this?>

Upvotes: 1

Views: 11920

Answers (4)

L. S. S.
L. S. S.

Reputation: 1

I don't know if this is against the rule of the asp .net mvc but what I did to solve a similar problem was not to use the @Html.ListBoxFor.

I check what the @Html.ListBoxFor add to the html and did the validations manually.

I guess if I change the name of the List (in the model) I'll have to return to my code and modify it manually too (less scalable and maintainable code)

this is my case:

<label for="EventsList" style="font-size:.9em" >Evento</label>                  
<select id="EventsList" multiple="multiple" name="Eventos">
    @foreach (var evento in Model.Eventos)
    {
        string style = "";
        switch (evento.Estado)
        {
            case 0:
                style = "background-color:#ff6868";
                break;
            case 1:
                style = "background-color:#ff8355";
                break;
            case 2:
                style = "background-color:#fcfc6a";
                break;
            case 3:
                style = "background-color:#79d779";
                break;
        }
        <option value="@evento.Id" style="@style">@evento.Descripcion</option>
    }
</select>

Upvotes: 0

Plymouth223
Plymouth223

Reputation: 1925

Something like:

function colorproblemlist() {
    ob = document.getElementById('lstProblems');
    for (var i = 0; i < ob.options.length; i++) {
        var option = ob.options[i];

         switch(option.value.substr(0,2))
         {
            case "AA":
                option.style.color = "Red";
            break;
            case "BB":
                option.style.color = "Green";
            break;
         }

         option.value = option.value.slice(3); //Assumption of 'AA '
    }
}

Based on the removal of the AA, BB flags from the html, modifying the color on the client will no longer be possible.

Upvotes: 2

Felan
Felan

Reputation: 1273

Since the data that controls the color is not part of the listitem you will have to manually add the items and color them before adding them.

ASPX page:

<asp:ListBox ID="testListBox" runat="server" 
    onload="TestListBoxOnLoad">
</asp:ListBox>

Code-behind (I just used an array of strings and their length to test it out, your logic will be different):

private string[] testData = new string[] { "Alpha", "Beta", "Gamma", "Delta", "Eta", "Theta", "Zeta", "Iota" };

protected void TestListBoxOnLoad(object sender, EventArgs e)
{
    foreach (var data in testData)
    {
        ListItem item = new ListItem()
        {
            Text = data
        };

        if (data.Length < 5)
        {
            item.Attributes.Add("class", "aaStyle");
        }
        else
        {
            item.Attributes.Add("class", "bbStyle");
        }

        testListBox.Items.Add(item);
    }
}

Upvotes: 2

Icarus
Icarus

Reputation: 63962

Server-side approach:

<asp:ListBox ID="prevSubList" runat="server" Height="16px" DataTextField="Key" 
 DataValueField="Value" Width="263px" Rows="1"  
 OnDataBound="prevSubList_DataBound">
</asp:ListBox>

And the DataBound Event is handled as follows:

protected void prevSubList_DataBound(object sender, EventArgs e)
{
     foreach (ListItem item in prevSubList.Items)
     {
         if (item.Text.Contains("AA"))
            item.Attributes.Add("style","background-color:green;");
         else if(item.Text.Contains("BB"))
            item.Attributes.Add("style", "background-color:blue;");
     }
}

Upvotes: 5

Related Questions