Post
Ask Question

Progress Bar In GridView

To make Progress Bar in GridView.
 
Html Code:
  1. <div>  
  2.     <asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"  
  3.         runat="server" AutoGenerateColumns="false">  
  4.         <Columns>  
  5.             <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />  
  6.             <asp:BoundField DataField="Percentage" HeaderText="Percentage" ItemStyle-Width="150" />  
  7.             <asp:TemplateField ItemStyle-Width="300">  
  8.                 <ItemTemplate>  
  9.                     <div class='progress'>  
  10.                         <div class="progress-label">  
  11.                             <%# Eval("Percentage") %></div>  
  12.                     </div>  
  13.                 </ItemTemplate>  
  14.             </asp:TemplateField>  
  15.         </Columns>  
  16.     </asp:GridView>  
  17. </div>  
  18. <style type="text/css">  
  19.     .ui-progressbar  
  20.     {  
  21.         position: relative;  
  22.     }  
  23.     .progress-label  
  24.     {  
  25.         position: absolute;  
  26.         left: 50%;  
  27.         top: 4px;  
  28.         font-weight: bold;  
  29.         text-shadow: 1px 1px 0 #fff;  
  30.     }  
  31.     body  
  32.     {  
  33.         font-family: Arial;  
  34.         font-size: 10pt;  
  35.     }  
  36. </style>  
  37. <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/start/jquery-ui.css">  
  38. <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>  
  39. <script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  40. <script type="text/javascript">  
  41.     $(function () {  
  42.         $(".progress").each(function () {  
  43.             $(this).progressbar({  
  44.                 value: parseInt($(this).find('.progress-label').text())  
  45.             });  
  46.         });  
  47.     });  
  48. </script>  
Namespaces code: 
  1. using System.Data;  
Code: 
  1. protected void Page_Load(object sender, EventArgs e)  
  2. {  
  3.     if (!this.IsPostBack)  
  4.     {  
  5.         DataTable dt = new DataTable();  
  6.         dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),  
  7.                         new DataColumn("Name", typeof(string)),  
  8.                         new DataColumn("Percentage",typeof(string)) });  
  9.         dt.Rows.Add(1, "John Hammond", 45);  
  10.         dt.Rows.Add(2, "Mudassar Khan", 37);  
  11.         dt.Rows.Add(3, "Suzanne Mathews", 67);  
  12.         dt.Rows.Add(4, "Robert Schidner", 12);  
  13.         GridView1.DataSource = dt;  
  14.         GridView1.DataBind();  
  15.     }  
  16. }