Display percentage from Database in Bootstrap progress bar using jQuery in ASP.Net FormView

Last Reply on Dec 08, 2017 04:10 AM By dharmendr

Posted on Dec 04, 2017 01:52 AM

i have stock of 2000 liters petrol and 600 or more sold from it, how do i present that using this below progress bar.

The idea is to have the percenage of the products sold

---------------------------------------------------

Sales table

ID    UserName     productcategory    litersSold 

1        mic33            Gas                 1000      

2          mic44          Oil                    5000

3        mik77            Fuel                 2000

-------------------------------------------------

stock table

ID         productcategory    liters   Remaining

1             Gas                 5000     4000

2           Oil                    25000    20000

3           Fuel                 15000     13000

   <div class="col-md-3 col-sm-6 col-xs-12">
        <asp:FormView  runat="server" ID="getdailytotal2" CssClass="" Width="100%">
            <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">Oil Sold</span> <span class="info-box-number">
                        <asp:Label ID="lbloil" 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" style="width: 70%">
                            </div>
                        </div>
                        <span class="progress-description">70% has been sold </span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </ItemTemplate>
        </asp:FormView>
    </div>
    <!-- /.col -->
You are viewing reply posted by: dharmendr on Dec 08, 2017 04:10 AM.
Posted on Dec 08, 2017 04:10 AM

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.