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

HTML

<div>
    <asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
        runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
            <asp:BoundField DataField="Percentage" HeaderText="Percentage" ItemStyle-Width="150" />
            <asp:TemplateField ItemStyle-Width="300">
                <ItemTemplate>
                    <div class='progress'>
                        <div class="progress-label">
                            <%# Eval("Percentage") %></div>
                    </div>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>
<style type="text/css">
    .ui-progressbar
    {
        position: relative;
    }
    .progress-label
    {
        position: absolute;
        left: 50%;
        top: 4px;
        font-weight: bold;
        text-shadow: 1px 1px 0 #fff;
    }
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
</style>
<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 () {
            $(this).progressbar({
                value: parseInt($(this).find('.progress-label').text())
            });
        });
    });
</script>

Namespaces

using System.Data;

Code

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;
        GridView1.DataBind();
    }
}

Image