Hi,
I have one 2 fields on parent row. again in child row i have 5 fields
TaxId- not edidatble
TaxName- not editable
IsChecked- Editable(could you please change format to type=checkbox)
TaxValue- Not editable
TaxTotal- rate *(Taxvalue/100);
How to display Tax total value based upon parent row and Child rows values and also total tax total i will get based upon total sum of TaxTotal.
@{
Layout = null;
}
<div class="container">
<div class="details">
<table class="table table-responsive">
<tr>
<td>Rate</td>
<td>Orders</td>
<td>TotalTaxTotal</td>
<td> </td>
</tr>
<tr class="mycontainer" id="mainrow">
<td>
<input type="text" id="rate" class="rate form-control" />
</td>
<td>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
</td>
<td>
<input type="text" id="total" class="total form-control" />
</td>
<td>
<input type="button" id="add" value="add" class="btn btn-success" />
</td>
</tr>
</table>
<div id="orderItems">
<table class="table table-responsive" id="orderdetailsItems"></table>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<table id="tblDetails" class="table simpleHomeSummary-grid">
<thead>
<tr>
<th>TaxId</th>
<th>TaxName</th>
<th>IsPercentage</th>
<th>TaxValue</th>
<th>TaxTotal</th>
</tr>
</thead>
<tbody></tbody>
</table>
TotalTax Total:
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
//Add button click event
$('#add').click(function () {
//validation and add order items
var isAllValid = true;
if (isAllValid) {
var $newRow = $('#mainrow').clone().removeAttr('id');
//remove id attribute from new clone row
$('#Total,#rate,#add', $newRow).removeAttr('id');
$('span.error', $newRow).remove();
//append clone row
$('#orderdetailsItems').append($newRow);
$('#rate,#Total').val('');
$('#orderItemError').empty();
}
})
});
$(function () {
LoadData();
})
function LoadData() {
$.ajax({
type: "GET",
url: "/invoice/getvalues",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert(response);
debugger;
var dataSet = response;
$('#tblDetails tbody').empty();
var rows = '';
$.each(dataSet, function () {
rows += "<tr><td>" + $(this)[0].taxId + "</td><td>"
+ $(this)[0].TaxName + "</td><td>"
+ $(this)[0].IsChecked + "</td><td>"
+ $(this)[0].TaxPercentage + "</td></tr>";
});
$('#tblDetails tbody').append(rows);
},
});
}
</script>
public JsonResult getvalues()
{
var result = Products().ToList();
return Json(result, JsonRequestBehavior.AllowGet);
}
private static List<Tax> Products()
{
List<Tax> products = new List<Tax>();
products.Add(new Tax { taxId = 1, TaxName = "A", IsChecked = true, TaxPercentage = 12 });
products.Add(new Tax { taxId = 2, TaxName = "B", IsChecked = true,TaxPercentage=10 });
return products;
}
public int taxId { get; set; }
public string TaxName { get; set; }
public int TaxPercentage { get; set; }
public bool IsChecked { get; set; }
