function fillGrid() {
if (vendor === 0) {
return;
}
var grid = document.getElementById("Grid").ej2_instances[0];
grid.query = new ej.data.Query().addParams('vendor', vendor);
grid.dataSource = new ej.data.DataManager({
url: "/Invoices/GetPurchaseOrdersForInvoice",
adaptor: new ej.data.UrlAdaptor(),
crossDomain: true
});
//grid.columns.push({ template: "#parent", headerText: "Options", width: "120" });
grid.refreshColumns();
console.log(grid);
grid.columns[2].format = { type: 'date', format: 'ddd MMM yyyy' };
grid.columns[3].format = { type: 'date', format: 'ddd MMM yyyy' };
}
function loadChild(args) {
console.log(this);
this.dataSource = new ej.data.DataManager({
url: "/Invoices/GetPurchaseOrderDeliveriesForInvoice/" + this.parentDetails.parentKeyFieldValue,
adaptor: new ej.data.WebApiAdaptor(),
crossDomain: true
});
this.childGrid = {
queryString: "PurchaseOrderDeliveryGridViewId",
load: loadSubChild,
columns: [
{ field: "Product.Name", headerText: "Product", width: "120" },
{ field: "QuantityRecieved", headerText: "Quantiy Received Total", width: "120" },
{ template: "#Amount", headerText: "Total Amount", width: "120" }
]
}
}
function created(args) {
selectAll = true;
var checkbox = document.getElementById("customCheck");
console.log(checkbox);
setTimeout(checked, 1000);
}
function checked() {
$('#customCheck').prop('checked', true);
}
function load(args) {
console.log(args);
this.columns = [
{ field: "PurchaseOrderGridViewId", isPrimaryKey: "true", headerText: "Purchase Order ID", width: "120" },
{ field: "Description", headerText: "Description", width: "120" },
{ field: "EntryDate", format: "yMd", headerText: "Entry Date", width: "120" },
{ field: "OrderDate", format: "yMd", headerText: "Order Date", width: "120" },
{ field: "OrderFullfillDate", format: "yMd", headerText: "Order Fullfill Date", width: "120" },
{ field: "TotalPrice", format: "yMd", headerText: "Total Price", width: "120" },
{ template: "#parent", valueAccessor:"${PurchaseOrderGridViewId}", headerText: "Options", width: "120" }
];
this.childGrid = {
queryString: "PurchaseOrderGridViewId",
load: loadChild,
actionComplete: created,
columns: [
{ template: "#child", headerText: "Options", width: "120" },
{ field: "PurchaseOrderDeliveryGridViewId", headerText: "Delivery ID", width: "120" },
{ field: "SumOfQtyReceived", headerText: "Quantiy Received Total", width: "120" },
{ field: "EntryDate", format: "yMd", headerText: "Entry Date", width: "120" },
{ field: "RecievingDate", format: "yMd", headerText: "Recieving Date", width: "120" }
]
};
}
function loadSubChild(args) {
this.dataSource = new ej.data.DataManager({
url: "/Invoices/GetPurchaseOrderDeliveryItemsForInvoice/" + this.parentDetails.parentKeyFieldValue,
adaptor: new ej.data.WebApiAdaptor(),
crossDomain: true
});
$('#customCheck').prop('checked', true);
}
var calculateAmount = function (QtyReceived, Rate) {
return QtyReceived * Rate;
}
function check(args) {
//console.log(args);
}
function OnChangeCheckbox(checkbox) {
if (checkbox.checked) {
poDeliveries.push(checkbox.value)
} else if (!checkbox.checked) {
var index = poDeliveries.indexOf(checkbox.value);
poDeliveries.splice(index, 1);
}
console.log(poDeliveries);
}
function OnSelect(args) {
var grid = document.getElementById("Grid").ej2_instances[0];
var row = args.closest("tr");
grid.detailRowModule.expand(row.getAttribute('aria-rowindex'));
//console.log(grid.detailRowModule);
console.log(grid.childGrid);
}
</script>
<script id="parent" type="text/x-template">
<div>
<button onclick="OnSelect(this)" class="btn btn-sm btn-outline-info">Select All</button>
</div>
</script>
<script id="child" type="text/x-template">
<div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" id="customCheck" onclick="OnChangeCheckbox (this)" type="checkbox" value="${PurchaseOrderDeliveryGridViewId}" />
<label class="custom-control-label" for="customCheck">Invoice</label>
</div>
</div>
</script>
<script id="Amount" type="text/x-template">
<div>
${calculateAmount(QuantityRecieved, PurchaseOrderItem.Rate)}
</div>
</script>
