Hii smile.
Please refer the below code.
HTLM
<div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=txtQuantity]").val("0");
});
$("body").on("change keyup", "[id*=txtQuantity]", function () {
//Check whether Quantity value is valid Float number.
var quantity = parseFloat($.trim($(this).val()));
if (isNaN(quantity)) {
quantity = 0;
}
//Update the Quantity TextBox.
$(this).val(quantity);
//Calculate and update Row Total.
var row = $(this).closest("tr");
$("[id*=lblTotal]", row).html(parseFloat($(".price", row).html()) * parseFloat($(this).val()));
//Calculate and update Grand Total.
var grandTotal = 0;
$("[id*=lblTotal]").each(function () {
grandTotal = grandTotal + parseFloat($(this).html());
});
//$("[id*=lblGrandTotal]").html(grandTotal.toString());
var vat = $("[id*=txtVAT]").val();
if (isNaN(vat)) {
$(vat).val('0');
}
var totalWithVat = grandTotal + (grandTotal * (vat / 100));
$('[id*=txtPay]').val(totalWithVat);
$("[id*=hdnfldTotal]").val(totalWithVat);
});
function Check_Click(objRef) {
//Get the Row based on checkbox
var row = objRef.parentNode.parentNode;
if (objRef.checked) {
//If checked change color to Aqua
row.style.backgroundColor = "aqua";
}
else {
//If not checked change back to original color
if (row.rowIndex % 2 == 0) {
//Alternating Row Color
row.style.backgroundColor = "#C2D69B";
}
else {
row.style.backgroundColor = "white";
}
}
//Get the reference of GridView
var GridView = row.parentNode;
//Get all input elements in Gridview
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
//The First element is the Header Checkbox
var headerCheckBox = inputList[0];
//Based on all or none checkboxes
//are checked check/uncheck Header Checkbox
var checked = true;
if (inputList[i].type == "checkbox" && inputList[i] != headerCheckBox) {
if (!inputList[i].checked) {
checked = false;
break;
}
}
}
headerCheckBox.checked = checked;
}
function checkAll(objRef) {
var GridView = objRef.parentNode.parentNode.parentNode;
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
//Get the Cell To find out ColumnIndex
var row = inputList[i].parentNode.parentNode;
if (inputList[i].type == "checkbox" && objRef != inputList[i]) {
if (objRef.checked) {
//If the header checkbox is checked
//check all checkboxes
//and highlight all rows
row.style.backgroundColor = "aqua";
inputList[i].checked = true;
}
else {
//If the header checkbox is checked
//uncheck all checkboxes
//and change rowcolor back to original
if (row.rowIndex % 2 == 0) {
//Alternating Row Color
row.style.backgroundColor = "#C2D69B";
}
else {
row.style.backgroundColor = "white";
}
inputList[i].checked = false;
}
}
}
}
function MouseEvents(objRef, evt) {
var checkbox = objRef.getElementsByTagName("input")[0];
if (evt.type == "mouseover") {
objRef.style.backgroundColor = "orange";
}
else {
if (checkbox.checked) {
objRef.style.backgroundColor = "aqua";
}
else if (evt.type == "mouseout") {
if (objRef.rowIndex % 2 == 0) {
//Alternating Row Color
objRef.style.backgroundColor = "#C2D69B";
}
else {
objRef.style.backgroundColor = "white";
}
}
}
}
</script>
<div class="content-wrapper">
<div class="content">
<div class="connectedSortable" style="margin-left: 10px;">
<div class="col-sm-1">
</div>
<div class="col-sm-12">
<div class="modal-content">
<div class="modal-header" style="background-color: #4682B4; color: #fff">
<strong><span class="fa fa-signal"></span> Available Services</strong>
</div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-sm-3">
<label class="control-label" style="margin-top: 10px;">
Invoice No.</label>
<asp:TextBox ID="txtInvoice" runat="server" class="form-control" BorderColor="Bisque"></asp:TextBox>
</div>
<div class="col-sm-3">
<label class="control-label" style="margin-top: 10px;">
Date</label>
<asp:TextBox ID="txtDate" runat="server" class="form-control" placeholder="Service Date" BorderColor="Bisque"></asp:TextBox><br />
</div>
<div class="col-sm-3">
<label class="control-label" style="margin-top: 10px;">
Customer Name</label>
<asp:TextBox ID="txtCName" Text="Customer" runat="server" class="form-control" BorderColor="Bisque"></asp:TextBox>
</div>
<div class="col-sm-3">
<label class="control-label" style="margin-top: 10px;">
Phone No.</label>
<asp:TextBox ID="txtPhone" Text="0507530530" runat="server" class="form-control" BorderColor="Bisque"></asp:TextBox>
<br />
</div>
<div class="col-sm-3">
<label class="control-label" style="margin-top: 10px;">
Tax VAT %</label>
<asp:TextBox ID="txtVAT" Text="0" runat="server" class="form-control" BorderColor="Bisque"></asp:TextBox>
</div>
<div class="col-sm-3">
<label class="control-label" style="margin-top: 10px;">
Total Payment</label>
<asp:TextBox ID="txtPay" Text="0" runat="server" class="form-control" BorderColor="Bisque"></asp:TextBox>
</div>
<hr style="visibility: hidden;" />
<asp:PlaceHolder ID="plBarCode" runat="server" />
</div>
</div>
<div class="row">
<div class="col-sm-4 ">
<asp:LinkButton ID="btnShow" runat="server" Class="btn btn-success">
<span aria-hidden="true" class="fa fa-print"></span> Save </asp:LinkButton>
</div>
<div class="col-sm-4 ">
<div class="container-fluid" style="background-color: #4682B4; color: #fff; height: 40px; text-align: center;">
<h4>
<label class="control-label" style="margin-top: -10px;">
Grand Total:</label>
<asp:Label ID="lblGrandTotal" runat="server" Text="0" class="control-label" Style="margin-top: 10px; color: White; font-size: large; font-weight: bolder; font-style: italic;"></asp:Label>
</h4>
<asp:HiddenField ID="hdnfldTotal" runat="server" />
</div>
</div>
<div class="col-sm-4 ">
</div>
<br />
<br />
</div>
<div class="row">
<div class="col-sm-12 ">
<br />
<div class="table-responsive">
<asp:GridView ID="GridView1" runat="server" AllowPaging="false" Class="table table-striped table-bordered table-hover"
AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="checkAll" runat="server" onclick="checkAll(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" onclick="Check_Click(this)" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Service ID" ItemStyle-Width="150">
<ItemTemplate>
<asp:Label ID="lblCode" runat="server" Text='<%# Eval("BrandID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="200px" DataField="BrandName" HeaderText="Service Name" />
<asp:BoundField ItemStyle-Width="150px" DataField="Price" HeaderText="Price" ItemStyle-CssClass="price" />
<asp:BoundField ItemStyle-Width="200px" DataField="Qty" HeaderText="Available Qty" />
<asp:TemplateField>
<HeaderTemplate>
Unit
</HeaderTemplate>
<ItemTemplate>
<asp:TextBox ID="txtQuantity" runat="server" Text="0" class="field1 form-control"
Width="100"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Total Price">
<ItemTemplate>
<asp:Label ID="lblTotal" runat="server" Text="0" Width="100"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
NameSpace
using System.Data;
Code
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindGridView();
}
}
private void BindGridView()
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[4] {
new DataColumn("BrandID"),
new DataColumn("BrandName"),
new DataColumn("Price") ,
new DataColumn("Qty") });
dt.Rows.Add(4,"surgical dressing", 225, 43);
dt.Rows.Add(3, "physiotherapy session", 440, 33);
dt.Rows.Add(2, "Docter Visit Service", 450, 40);
dt.Rows.Add(1, "Nursing Visiting Service", 350, 36);
GridView1.DataSource = dt;
GridView1.DataBind();
}
Screenshot
