Hi nauna,
Check this example. Now please take its reference and correct your code.
HTML
<asp:ListView ID="ListView1" runat="server" OnItemDataBound="OnItemDataBound">
<ItemTemplate>
<div class="col-md-3 padding15">
<div class="camp">
<div class="padding15">
<h5 class="no-margin upp">
<%#Eval("PackageName") %>
</h5>
<p class="h-50 small">
<%#Eval("description") %>
</p>
<p class=" large l-bold line30">
<small class="grey-c small">Donation Amount </small>
<br />
<span class="btn w-100 radius theme-bg no-padding" style="height: 3px;"></span>
<strong>
<asp:Label ID="Label1" runat="server" Text='<%#Eval("received") %>'></asp:Label>
raised </strong>
<asp:Label ID="Label2" runat="server" Text='<%#Eval("donationamount") %>'></asp:Label>
<a class="pull-right btn theme-bg white-c medium m-bold margintb-15" href="detail?ID=<%#Eval("donationmasterguid") %>">Donate Now</a>
</p>
<p>
<div class="progress progress-striped">
<div id='dvProgress' runat="server">
</div>
</div>
</p>
</div>
</div>
</div>
</ItemTemplate>
</asp:ListView>
<style type="text/css">
.bar-success {
background-color: #5cb85c;
}
.bar-info {
background-color: #5bc0de;
}
.bar-warning {
background-color: #f0ad4e;
}
.bar-danger {
background-color: #d9534f;
}
</style>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
function ShowProgressBar(percent, ele) {
$(ele).removeClass().addClass('progress-bar');
if (percent > 80) {
$(ele).addClass('progress-bar-success');
}
else if (percent > 50 && percent <= 80) {
$(ele).addClass('progress-bar-info');
}
else if (percent > 30 && percent <= 50) {
$(ele).addClass('progress-bar-warning');
}
else {
$(ele).addClass('progress-bar-danger');
}
$(ele).width(percent + '%');
$(ele).text(percent + '%');
}
</script>
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
System.Data.DataTable dt = new System.Data.DataTable();
dt.Columns.Add("PackageName");
dt.Columns.Add("description");
dt.Columns.Add("received");
dt.Columns.Add("donationamount");
dt.Columns.Add("donationmasterguid");
dt.Columns.Add("Percentage");
dt.Rows.Add("Package 1", "Covid-19", "500", "1000", "1", "50");
dt.Rows.Add("Package 2", "Covid-19", "800", "1000", "2", "80");
dt.Rows.Add("Package 3", "Covid-19", "250", "1000", "3", "25");
ListView1.DataSource = dt;
ListView1.DataBind();
}
}
protected void OnItemDataBound(object sender, ListViewItemEventArgs e)
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
string percentage = DataBinder.Eval(e.Item.DataItem, "Percentage").ToString();
string id = ("dvProgress_" + e.Item.DataItemIndex);
ClientScript.RegisterStartupScript(this.GetType(), "alert" + e.Item.DataItemIndex, "ShowProgressBar('" + percentage + "','[id*=" + id + "]');", true);
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As Data.DataTable = New Data.DataTable()
dt.Columns.Add("PackageName")
dt.Columns.Add("description")
dt.Columns.Add("received")
dt.Columns.Add("donationamount")
dt.Columns.Add("donationmasterguid")
dt.Columns.Add("Percentage")
dt.Rows.Add("Package 1", "Covid-19", "500", "1000", "1", "50")
dt.Rows.Add("Package 2", "Covid-19", "800", "1000", "2", "80")
dt.Rows.Add("Package 3", "Covid-19", "250", "1000", "3", "25")
ListView1.DataSource = dt
ListView1.DataBind()
End If
End Sub
Protected Sub OnItemDataBound(ByVal sender As Object, ByVal e As ListViewItemEventArgs)
If e.Item.ItemType = ListViewItemType.DataItem Then
Dim percentage As String = DataBinder.Eval(e.Item.DataItem, "Percentage").ToString()
Dim id As String = ("dvProgress_" & e.Item.DataItemIndex)
ClientScript.RegisterStartupScript(Me.GetType(), "alert" & e.Item.DataItemIndex, "ShowProgressBar('" & percentage & "','[id*=" & id & "]');", True)
End If
End Sub
Screenshot