htmlcssasp.netradiobuttonlistflowchart

Control to render a flow chart

This might be a very silly question but here goes nothing: is there any asp net control, ajax control toolkit or html/css tag to create something like a radiobuttonlist, horizontally aligned with all radiobuttons connected by a line or dotted line? I would have uploaded a picture but I lost all my reputation on a previous bounty and it seems I have to have at least 10 rep to upload an image.

Basically, I have a web form in which the user inputs some data and then that data has 4 steps: draft, completed, sent to approval, approved. I would like to have these 4 steps at the top of the page and based on the current status, check the appropriate status on that ribbon.

UPDATE:

A picture's worth a 1000 words so therefore this is what I need:

enter image description here

And also this control should be "controlled" in the code-behind.

Solution

  • You can easily make this with html/css. 

    <div class="bubble active"></div>
<div class="connector"></div>
<div class="bubble"></div>
<div class="connector"></div>
<div class="bubble"></div>
<div class="connector"></div>
<div class="bubble"></div>

    And some basic css

     .bubble
{
border-radius:50%;
height:40px;
width:40px;
background: #aaa;
display:inline-block;
margin:0 -3px;
}

.bubble.active
{
background:red;
}

.connector
{
display:inline-block;
height:3px;
width:10%;
background: #aaa;
vertical-align:middle;
margin-top:-30px;
}

    Check out this fiddle. Just add/remove the active class to the bubbles at will. And you can also add a done class or something.