Adding a Progress bar in a html table cell in a Razor view

Question

I have a HTML table and I am trying to add a progress bar: something like a chunk progress bar here http://www.telerik.com/aspnet-mvc/progressbar I am getting data from the stored proc stored as a number currently, need to show it as a progress bar instead.

Can someone point me in the right direction. I have been stuck on this task for quite some time. Here's my code so far.

Code:

<script>
    $(document).ready(function () {

        var pb = $("#profileCompleteness").kendoProgressBar({
            type: "chunk",
            chunkCount: 36,
            min: 0,
            max: 36,
            value: 4
        })
            $(function() {
            var pb = $("#profileCompleteness").data("kendoProgressBar");
            $(this).find(".progress").kendoProgressBar({value: item.percentage})

        });
    })
</script>

Inside the HTML table:

@foreach (var item in Model)
        {
            <td align="center">
                    <div id="profileCompleteness"></div>

                 @Html.DisplayFor(modelItem => item.Percentage)
                 @Html.DisplayFor(modelItem => item.ProfileCompleteness)

                </td>
}

I want to get the output percentage equivalent from the database, currently I have hard coded the percentage value to 4 above. I really appreciate the help in advance.

Thanks

What code do you have so far? What was wrong with what you've tried? Please provide the code you've got so far. — Luke, Dec 13 '16 at 21:02
I have added added div tag,

and added a css class something like this: .progress{ background: #333; border-radius: 13px; height: 20px; width: 300px; padding: 3px; } .progress after { content: ''; display: block; background: orange; width: 50%; height: 100%; border-radius: 9px; } I cannot see the progress bar yet. I can see only the number. Thanks — Hari, Dec 13 '16 at 21:54

score 1 · Answer 1 · answered Dec 14 '16 at 04:58

1

setInterval(function() {
  var randomWidth = 200*Math.random() + "px";
  document.getElementById("progress").style.width = randomWidth;}, 1000);

#progress-bar {
  width: 200px;
  height: 10px;
  background-color: black;
  position: absolute;
  
  top: 0px;
  left: 0px;
  z-index -1;
  }

#progress {
  width: 40px;
  height: 10px;
  background-color: red;
  position: absolute;
  top:0px;
  left:0px;
  z-index:7;
 }

<div>
  <div id="progress-bar"> </div>
  <div id="progress"> </div>
</div>

answered Dec 14 '16 at 04:58

murtuza

1,129
8
7

Thanks Murtuza for your reply. – Hari Dec 14 '16 at 20:33
Small change in the requirement, I was asked to implement the progress bar using Kendo controls. I am able to render the kendo progress bar, I am able to hard code the value to get the progress bar output, but I need to render the progress bar in real time based on the values coming from the database. Can some one please guide me. Thanks I will place the code above along with my original post. – Hari Dec 16 '16 at 15:52

Adding a Progress bar in a html table cell in a Razor view

1 Answers1