Hi micah,
Check this example. Now please take its reference and correct your code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
var total = $('[id*=getdailytotal2]').find('[id*=lblLiter]').html();
var remaining = $('[id*=getdailytotal2]').find('[id*=hfRemaining]').val();
var percentage = parseInt(100) - ((parseInt(remaining) / parseInt(total)) * parseInt(100));
$('[id*=getdailytotal2]').find('.progress-bar').attr('style', 'width: ' + Math.round(percentage * 100) / 100 + '%');
$('[id*=getdailytotal2]').find('.progress-description').html(Math.round(percentage * 100) / 100 + '% has been sold');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="col-md-3 col-sm-6 col-xs-12">
<asp:FormView runat="server" ID="getdailytotal2" CssClass="" Width="100%" AllowPaging="true"
OnPageIndexChanging="PageIndexChanging">
<ItemTemplate>
<div class="info-box bg-aqua">
<span class="info-box-icon"><i class="glyphicon glyphicon-scale"></i></span>
<div class="info-box-content">
<span class="info-box-text">
<%# Eval("productcategory")%>
Sold</span> <span class="info-box-number">
<asp:HiddenField ID="hfRemaining" Value='<%# Bind("Remaining") %>' runat="server" />
<asp:Label ID="lblLiter" runat="server" Text='<%# Bind("Liters") %>'></asp:Label>
<asp:Label ID="Label1" runat="server" Text="LT"></asp:Label>
</span>
<div class="progress">
<div class="progress-bar">
</div>
</div>
<span class="progress-description"></span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</ItemTemplate>
</asp:FormView>
</div>
</form>
</body>
</html>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
BindFormView();
}
}
private void BindFormView()
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[4] { new DataColumn("Id", typeof(int)),
new DataColumn("productcategory", typeof(string)),
new DataColumn("Liters",typeof(int)),
new DataColumn("Remaining",typeof(int)) });
dt.Rows.Add(1, "Gas", 5000, 4000);
dt.Rows.Add(2, "Oil", 25000, 20000);
dt.Rows.Add(3, "Fuel", 15000, 13000);
getdailytotal2.DataSource = dt;
getdailytotal2.DataBind();
}
protected void PageIndexChanging(object sender, FormViewPageEventArgs e)
{
getdailytotal2.PageIndex = e.NewPageIndex;
BindFormView();
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
BindFormView()
End If
End Sub
Private Sub BindFormView()
Dim dt As DataTable = New DataTable()
dt.Columns.AddRange(New DataColumn(3) {New DataColumn("Id", GetType(Integer)), New DataColumn("productcategory", GetType(String)), New DataColumn("Liters", GetType(Integer)), New DataColumn("Remaining", GetType(Integer))})
dt.Rows.Add(1, "Gas", 5000, 4000)
dt.Rows.Add(2, "Oil", 25000, 20000)
dt.Rows.Add(3, "Fuel", 15000, 13000)
getdailytotal2.DataSource = dt
getdailytotal2.DataBind()
End Sub
Protected Sub PageIndexChanging(ByVal sender As Object, ByVal e As FormViewPageEventArgs)
getdailytotal2.PageIndex = e.NewPageIndex
BindFormView()
End Sub
Screenshot
Note: You need to bind the FormView from database.
