Wednesday, 5 September 2012

Calculating GridView total using JavaScript/JQuery 

 <script src="../js/jquery-1.5.1.js" type="text/javascript"></script>
   
    <script type="text/javascript" language="javascript">

        function hideLabel(sender, e) {
            document.getElementById('<%=lblResult.ClientID%>').style.display = 'none';
        }


        $(document).ready(function () {

            $(".Calculate").each(function () {

                $(this).keyup(function () {
                    calculateSum();

                });
            });

        });
        function calculateSum() {
            var MaintenanceValue = 0;
            $(".Calculate").each(function () {

                if (!isNaN(this.value) && this.value.length != 0) {
                    MaintenanceValue += parseFloat(this.value);
                }
            });
            $("#lbl_tamount").html(MaintenanceValue.toFixed(2));
        }
    </script>

<asp:GridView ID="grd_Maintenance" Width="100px" runat="server" AutoGenerateColumns="False"
                            ShowFooter="True" GridLines="None" OnRowCommand="grd_Maintenance_RowCommand"
                            OnRowDataBound="grd_Maintenance_RowDataBound" Height="134px"
                            onselectedindexchanged="grd_Maintenance_SelectedIndexChanged">
                            <Columns>
                                <asp:TemplateField HeaderText="Maintenance Parameter" HeaderStyle-CssClass="textAlignC">
                                    <FooterTemplate>
                                        <center>
                                            <asp:Label ID="lblResult" runat="server" Text="Sum :"></asp:Label>
                                        </center>
                                    </FooterTemplate>
                                    <ItemTemplate>
                                        <div class="m_left5px">
                                            <asp:TextBox ID="txt_Parameter" Text='<%# Eval("MaintenanceParameter") %>'
                                                runat="server"></asp:TextBox><br />
                                          
                                        </div>
                                    </ItemTemplate>
                                    <HeaderStyle CssClass="textAlignC" />
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Maintenance Value" HeaderStyle-CssClass="textAlignC">
                                    <FooterTemplate>
                                        <center>
                                        <asp:Label ID="lbl_tamount1" runat="server"></asp:Label>
                                            <label id="lbl_tamount">
                                             
                                            </label>
                                        </center>
                                    </FooterTemplate>
                                    <ItemTemplate>
                                        <div class="m_left5px">
                                      
                                            <asp:TextBox ID="txt_Value" Text='<%# Eval("MaintenanceValue","{0:0}") %>' CssClass="Calculate"
                                                runat="server" onkeypress="hideLabel(this, event)"  ontextchanged="txt_Value_TextChanged"></asp:TextBox>
                                           
                                            <br />
                                          
                                        </div>
                                    </ItemTemplate>
                                    <HeaderStyle CssClass="textAlignC" />
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Delete" HeaderStyle-CssClass="textAlignC">
                                    <FooterTemplate>
                                        <center>
                                            <asp:Button ID="btnAddMoreFamily" OnClick="Add_New_Row_Family" runat="server" Text="Add New Row" /></center>
                                    </FooterTemplate>
                                    <ItemTemplate>
                                        <div>
                                            <center>
                                                <asp:ImageButton ID="imggridmaintenance" AlternateText="Delete" runat="server" ImageUrl='<%$ appSettings:Delete %>'
                                                    CommandName="DeleteRow" />
                                            </center>
                                            <br />
                                            <asp:Button ID="btnDelete" CommandName="DeleteRow" runat="server" Text="Delete" Visible="false" />
                                            <br />
                                        </div>
                                    </ItemTemplate>
                                    <HeaderStyle CssClass="textAlignC" />
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>

No comments:

Post a Comment