FAQ: GridView Calculation with JavaScript - Formatting and Validation

Posted by Vincent Maverick Durano on Geeks with Blogs See other posts from Geeks with Blogs or by Vincent Maverick Durano
Published on Thu, 09 Dec 2010 09:17:12 GMT Indexed on 2010/12/09 22:14 UTC
Read the original article Hit count: 725

Filed under:

In my previous post here we've talked about how to calculate the sub-totals and grand total in GridView using JavaScript. In this post I'm going take more step further and will demonstrate how are we going to format the totals into a currency and how to validate the input that would only allow you to enter a whole number in the quantity TextBox.

Here are the code blocks below:

ASPX Source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script type="text/javascript">
      
        function CalculateTotals() {
            var gv = document.getElementById("<%= GridView1.ClientID %>");
            var tb = gv.getElementsByTagName("input");
            var lb = gv.getElementsByTagName("span");

            var sub = 0;
            var total = 0;
            var indexQ = 1;
            var indexP = 0;
            var price = 0;

            for (var i = 0; i < tb.length; i++) {
                if (tb[i].type == "text") {
                    ValidateNumber(tb[i]);

                    price = lb[indexP].innerHTML.replace("$", "").replace(",", "");
                    sub = parseFloat(price) * parseFloat(tb[i].value);
                    if (isNaN(sub)) {
                        lb[i + indexQ].innerHTML = "0.00";
                        sub = 0;
                    }
                    else {
                        lb[i + indexQ].innerHTML = FormatToMoney(sub, "$", ",", "."); ;
                    }
                   
                    indexQ++;
                    indexP = indexP + 2;

                    total += parseFloat(sub);
                }
            }

            lb[lb.length - 1].innerHTML = FormatToMoney(total, "$", ",", ".");
        }

        function ValidateNumber(o) {
            if (o.value.length > 0) {
                o.value = o.value.replace(/[^\d]+/g, ''); //Allow only whole numbers
            }
        }
        function isThousands(position) {
            if (Math.floor(position / 3) * 3 == position) return true;
            return false;
        };

        function FormatToMoney(theNumber, theCurrency, theThousands, theDecimal) {
            var theDecimalDigits = Math.round((theNumber * 100) - (Math.floor(theNumber) * 100));
            theDecimalDigits = "" + (theDecimalDigits + "0").substring(0, 2);
            theNumber = "" + Math.floor(theNumber);
            var theOutput = theCurrency;
            for (x = 0; x < theNumber.length; x++) {
                theOutput += theNumber.substring(x, x + 1);
                if (isThousands(theNumber.length - x - 1) && (theNumber.length - x - 1 != 0)) {
                    theOutput += theThousands;
                };
            };
            theOutput += theDecimal + theDecimalDigits;
            return theOutput;
        } 
    </script>
</head>
<body>
    <form id="form1" runat="server">
     <asp:gridview ID="GridView1"  runat="server"  ShowFooter="true" AutoGenerateColumns="false">
        <Columns>
        <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
        <asp:BoundField DataField="Description" HeaderText="Item Description" />
        <asp:TemplateField HeaderText="Item Price">
            <ItemTemplate>
                <asp:Label ID="LBLPrice" runat="server" Text='<%# Eval("Price","{0:C}") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Quantity">
            <ItemTemplate>
                <asp:TextBox ID="TXTQty" runat="server" onkeyup="CalculateTotals();"></asp:TextBox>
            </ItemTemplate>
            <FooterTemplate>
                <b>Total Amount:</b>
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Sub-Total">
            <ItemTemplate>
                <asp:Label ID="LBLSubTotal" runat="server" ForeColor="Green" Text="0.00"></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="LBLTotal" runat="server" ForeColor="Green" Font-Bold="true" Text="0.00"></asp:Label>
            </FooterTemplate>
        </asp:TemplateField>
        </Columns>
    </asp:gridview>
    </form>
</body>
</html>

Code Behind Source:

public partial class GridCalculation : System.Web.UI.Page
{
        private void BindDummyDataToGrid() {

            DataTable dt = new DataTable();
            DataRow dr = null;

            dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
            dt.Columns.Add(new DataColumn("Description", typeof(string)));
            dt.Columns.Add(new DataColumn("Price", typeof(decimal)));

            dr = dt.NewRow();
            dr["RowNumber"] = 1;
            dr["Description"] = "Nike";
            dr["Price"] = "1000";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["RowNumber"] = 2;
            dr["Description"] = "Converse";
            dr["Price"] = "800";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["RowNumber"] = 3;
            dr["Description"] = "Adidas";
            dr["Price"] = "500";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["RowNumber"] = 4;
            dr["Description"] = "Reebok";
            dr["Price"] = "750";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["RowNumber"] = 5;
            dr["Description"] = "Vans";
            dr["Price"] = "1100";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["RowNumber"] = 6;
            dr["Description"] = "Fila";
            dr["Price"] = "200";
            dt.Rows.Add(dr);


            //Bind the Gridview
            GridView1.DataSource = dt;
            GridView1.DataBind();

        }

        protected void Page_Load(object sender, EventArgs e) {
            if (!IsPostBack) {
                BindDummyDataToGrid();
            }
        }
 }

Running the code above will display something like this:

On initial load

After entering the quantity in the TextBox

That's it! I hope someone find this post useful!

Technorati Tags: ASP.NET,C#,ADO.NET,JavaScript,GridView

Developer IT

FAQ: GridView Calculation with JavaScript - Formatting and Validation - Developer IT

FAQ: GridView Calculation with JavaScript - Formatting and Validation

Categories cloud