Display jQuery ProgressBar in ASP.Net GridView

Last Reply on Apr 15, 2014 02:24 AM By Mudassar

Posted on Apr 15, 2014 02:23 AM

There are numbers from 1 to 100 saved in DB Table 1.

There is a Gridview, which is bind from from DB table 1. Which shows all the numbers that are there in DB Table 1 inside Gridview.

Requirement is that I have to show numbers in Gridview along with progress bar.

i.e., if number in Gridview is 1, it should show progress 1% using progress bar
      if number in Gridview is is 60, it should show progress 60% using progress bar
      if number in Gridview is is 37, it should show progress 37% using progress bar

and so on inside Gridview.

I searched the artilces but I am not getting any solution based on my requirement.

Please reply how to do it.

Posted on Apr 15, 2014 02:24 AM

This way


    <asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
        runat="server" AutoGenerateColumns="false">
            <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
            <asp:BoundField DataField="Percentage" HeaderText="Percentage" ItemStyle-Width="150" />
            <asp:TemplateField ItemStyle-Width="300">
                    <div class='progress'>
                        <div class="progress-label">
                            <%# Eval("Percentage") %></div>
<style type="text/css">
        position: relative;
        position: absolute;
        left: 50%;
        top: 4px;
        font-weight: bold;
        text-shadow: 1px 1px 0 #fff;
        font-family: Arial;
        font-size: 10pt;
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/start/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
    $(function () {
        $(".progress").each(function () {
                value: parseInt($(this).find('.progress-label').text())


using System.Data;


protected void Page_Load(object sender, EventArgs e)
    if (!this.IsPostBack)
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                        new DataColumn("Name", typeof(string)),
                        new DataColumn("Percentage",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", 45);
        dt.Rows.Add(2, "Mudassar Khan", 37);
        dt.Rows.Add(3, "Suzanne Mathews", 67);
        dt.Rows.Add(4, "Robert Schidner", 12);
        GridView1.DataSource = dt;