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>
<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>
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