How to use colored circles in ASP Dropdownlist ListItems without jQuery

0 votes

Goal: I would like to have a Dropdown list that shows the color green if someones if Availability is True, and red is someones Availability is False.

NOTE: I need to do it without jQuery (I was just told we are not allowed to use jquery in our project).

Problem/Background: The only way I could get anything to show was with CSS and placing it on the Dropdown list itself, as seen in the first row of this image for Prof Smith. You'll see the next row with Prof. Jones is displaying the actual boolean value from the database in the dropdown, although I want a colored circle.

I'd like it to be within the dropdown box itself. It should also (eventually) be able to update the value in the DB if they make a change.

How can I get these circles to show inside the dropdown box?

What I want it the dropdown to look like:

Desired dropdown

What it actually looks like:

Availability image

What I've done:

  • Tried CSS on the DropdownList as well as the ListItem, and inside of the listitem.

  • I have also tried SVG but that didn't insert into the ListItem at all

  • I've tried adding CSS through the C# code but couldn't get it to work that way

CSS:

.dot {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    display: inline-block;
}

.greendot {
    background-color: #89C742;
}

.reddot {
    background-color: #fe0505;
}

aspx/html:

<asp:DropdownList runat="server" id="ddl1" class="dot greendot">
    <asp:ListItem ID="LT1"></asp:ListItem>
    <asp:ListItem ID="RT1"></asp:ListItem>              
</asp:DropdownList>

<asp:DropdownList runat="server" id="ddl2">
    <asp:ListItem ID="LT2"></asp:ListItem>
</asp:DropdownList>

C#:

LT2.Text = professorStatsList[1].Available.ToString();

Jul 27 in Web Development by gaurav
• 17,580 points
5 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
1 answer

how to use substr() function in jquery?

To get substring of a string in ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
16 views
0 votes
1 answer

How to use JQuery with ReactJS

Yes, we can use jQuery in ReactJs. ...READ MORE

answered Jun 22 in Web Development by rajatha
• 7,040 points
15 views
0 votes
1 answer

How to loop through array in jQuery?

Generic loop: var i; for (i = 0; i ...READ MORE

answered Jun 28 in Web Development by rajatha
• 7,040 points
23 views
0 votes
1 answer

How to display current element in jQuery?

<! DOCTYPE html> <html> <head> <script> $(document). ready(function(){ $("button"). click(function(){ $("p"). text("Welcome to ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
18 views
0 votes
1 answer

How to use Jquery filter?

jQuery | filter() with Examples The filter() method ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
21 views
0 votes
0 answers

How to add a link in Jquery PrettyPhoto to download the image

I am using Jquery PrettyPhoto to have ...READ MORE

Jun 29 in Web Development by gaurav
• 17,580 points
14 views
0 votes
0 answers

TypeError: $(...).DataTable is not a function

I am working on jQuery's Datatable JS ...READ MORE

Apr 29 in Git & GitHub by Kichu
• 19,040 points
667 views
0 votes
1 answer

asp.net master page css not applying to asp form pages

just try the following code: <head> ...READ MORE

answered Jun 13 in CSS by Edureka
• 9,540 points
72 views
0 votes
1 answer

Authenticate on an ASP.Net Forms Authorization website from a console app

Essentially, we need to record a regular ...READ MORE

answered Sep 20, 2018 in IoT (Internet of Things) by Annie97
• 2,160 points
262 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP