Kevin Hildebrand Kevin Hildebrand - 7 months ago 179
Javascript Question

GridView calculations using javascript

so I want the UnitPrice and Quantity columns to be multiplied and displayed in the Total column. Looked at a lot of sample codes, but my lack of knowledge in Javascript and programming in general has got me stuck.

Using some found code it currently updates only when each quantity textbox change is detected. Actually I don't want the textboxes (already have a column with the number), but left them because this is the only way I manage to make the calculation happen at the moment.

Have a look at my GridView

Does not matter what is entered in the Quantity textbox it calculates the number correctly from the Quantity column. So that is fine. Now please help me get rid of the column with textboxes and make the calculations happen on load.

Oh, and also if someone has a good solution how I change all the fruit names in the column to upper case letters.

My GridView code:



<asp:gridview id="GridView1" runat="server" autogeneratecolumns="false">
<Columns>
<asp:BoundField ItemStyle-Width="200px" DataField="Date" HeaderText="Date" DataFormatString="{0:MM-dd-yyyy}" />
<asp:BoundField ItemStyle-Width="200px" DataField="Fruit" HeaderText="Fruit" />
<asp:BoundField ItemStyle-Width="200px" DataField="UnitPrice" DataFormatString="{0:N}" HeaderText="Price" ItemStyle-CssClass="price" />
<asp:BoundField ItemStyle-Width="200px" DataField="Quantity" HeaderText="Quantity" ItemStyle-CssClass="qty" />
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Total">
<ItemTemplate>
<asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:gridview>
Grand Total:
<asp:label id="lblGrandTotal" runat="server" text="0"></asp:label>





And my script:



<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">


$(function () {
$("[id*=txtQuantity]").val("0");
});
$("[id*=txtQuantity]").live("change", function () {
if (isNaN(parseInt($(this).val()))) {
$(this).val('0');
} else {
$(this).val(parseInt($(this).val()).toString());
}
});
$("[id*=txtQuantity]").live("keyup", function () {
if (!jQuery.trim($(this).val()) == '') {
if (!isNaN(parseFloat($(this).val()))) {
var row = $(this).closest("tr");
$("[id*=lblTotal]", row).html(parseFloat($(".price", row).html()) * parseFloat($(".qty", row).html()));
}
} else {
$(this).val('');
}
var grandTotal = 0;
$("[id*=lblTotal]").each(function () {
grandTotal = grandTotal + parseFloat($(this).html());
});
$("[id*=lblGrandTotal]").html(grandTotal.toString());
});
</script>




Answer

Edit: I assume you work with c#. First add uppercase css class to your stylesheet:

<style>
    .uppercase{
        text-transform:uppercase;
    }
</style>

This is a javascript that calculates total:

 <script>
    var getTotal = function () {
        var total = 0;
        $(".quantity").each(function () {
            var row = $(this).closest("tr");
            var subtotal = parseFloat($(row).find(".subtotal").val());

            var subtotal = 0;
            if (!isNaN(parseInt($(this).val()))) {
                total += parseFloat($(this).val()) * subtotal;
            }               


        });

        $("#<%= lblGrandTotal.ClientID %>").val(total);
    }
    $(document).ready(function () {
        getTotal();
        $(".quantity").change(function () {
            getTotal();
        })
    })

</script>

and finally here's a gridview:

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField ItemStyle-Width="200px" DataField="Date" HeaderText="Date" DataFormatString="{0:MM-dd-yyyy}" ItemStyle-CssClass="uppercase"/>
            <asp:BoundField ItemStyle-Width="200px" DataField="Fruit" HeaderText="Fruit" />
            <asp:BoundField ItemStyle-Width="200px" DataField="UnitPrice" DataFormatString="{0:N}" HeaderText="Price" ItemStyle-CssClass="price" />
            <%--<asp:BoundField ItemStyle-Width="200px" DataField="Quantity" HeaderText="Quantity" ItemStyle-CssClass="qty" />--%>
            <asp:TemplateField HeaderText="Quantity">
                <ItemTemplate>
                    <asp:TextBox ID="txtQuantity" CssClass="quantity" runat="server" value="0"></asp:TextBox>

                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Total">
                <ItemTemplate>
                    <asp:Label ID="lblTotal" CssClass="subtotal" runat="server" Text='<%# ((float)(Eval("UnitPrice"))*((int)Eval("Quantity")) %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    Grand Total:
    <asp:Label ID="lblGrandTotal" runat="server" Text="0"></asp:Label>
Comments