Skip to content

Instantly share code, notes, and snippets.

@rnjailamba

rnjailamba/agGrid.txt

Last active April 25, 2016 12:05
Show Gist options
  • Save rnjailamba/6851affa0020c88b1a7fe72309b42d22 to your computer and use it in GitHub Desktop.
Save rnjailamba/6851affa0020c88b1a7fe72309b42d22 to your computer and use it in GitHub Desktop.
Download ZIP
Aggrid Sample
Raw
agGrid.txt
<!--<a href="./FreightCost/upload"><h3>UPLOAD FILE<h3>-->
<head>
<?php echo $this->Html->css('ag-grid.min'); ?>
<?php echo $this->Html->css('ag-grid-theme-blue.min'); ?>
<?php echo $this->Html->css('odometer-theme-car'); ?>
<style>
/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript,
if it's not present, don't show loader */
.no-js #loader {
display: none;
}
.js #loader {
display: block;
position: absolute;
left: 100px;
top: 0;
}
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url("<?php echo $this->webroot; ?>img/Preloader_3.gif") center no-repeat #fff;
}
</style>
</head>
<?php echo $this->Html->script('ag-grid.min'); ?>
<?php echo $this->Html->script('odometer'); ?>
<script>
<?php echo "var list = ".json_encode($returns); ?>;
<?php $headers=array('Confirm Delivery Status','SNo','Unique item id','Operation id','Order Id','Suborder Id','Product Id','Vendor Id','Brand Name','Product Name','Size','Color','Quantity','RTO/Customer Return','Return Reason','Return Date','Return Time','Transporter'); ?>
// console.log(list);/
$(document).on("keydown","#awbs",function(e){
var code= e.keyCode ? e.keyCode : e.which;
if(code==13){
var awb=$(this).val().trim().split(",");
de
bugger;
$.ajax({
url:'<?php echo Router::Url(array('controller' => 'FreightCost','admin' => FALSE, 'action' => 'searchByAWB'), TRUE); ?>',
cache:false,
type:"POST",
data:{data: awb},
async:false,
success:function(res){
alert(res);
},
error:function(res){
alert(res);
}
});
}
})
// $("#awbs").keypress(function() {
// alert("I found Hogwarts.");
// });
</script>
<body>
<div class="se-pre-con"></div>
<br>
<br>
<br>
<br>
<br>
<h2><?php echo __('RTO Customer Return'); ?></h2>
<h4>
As per our records, you have received the following RTO/Customer return products during the last 30 days. Please confirm Delivery status for the products mentioned below and click the submit button. If we do not receive a response from you in the next 5 days then we will consider the product to be received by you in sellable condition and will adjust the payment accordingly.</h4>
<br>
<h3>Search</h3>
<table>
<tr>
<td>
<input type="text" id="quickFilterInput" placeholder="Type text to filter..."/>
</td>
<td>
<input id="recived_good" type="button" class="btn btn-success" value="Recieved in Good Condition" onclick="approve();"/>
</td>
<td>
<input id="recived_issue" type="button" class="btn btn-warning" value="Recieved With Issues" onclick="approve();"/>
</td>
<td>
<input id="recieved_not" type="button" class="btn btn-warning" value="Not Recieved" onclick="approve();"/>
</td>
<!-- <td>
<input id="exportBtn" type="button" class="btn btn-success" value="Export" onclick="onBtExport();"/>
</td> -->
<td>
<b>Rows:
<div id="odometer" class="odometer">0</div>
</b>
</td>
</tr>
</table>
<form action="#">
<p><label><input type="checkbox" id="checkAll"/> Check all</label></p>
</form>
<div style="width: 138%; height: 575px;"
id="myGrid"
class="ag-blue ag-basic">
</div>
<script>
var columnDefs = [
{
headerName: 'SNo',
field: "SNo",
width: 45,
checkboxSelection: true,
suppressSorting: false,
suppressMenu: true
},
{headerName: "Unique_item_id", field: "Unique_item_id", headerGroup:"RTO Customer Returns Acceptance",width: 150, editable:false},
{headerName: "Operation_id", field: "Operation_id", headerGroup:"RTO Customer Returns Acceptance",width: 150, editable:false},
{headerName: "Order_Id", field: "Order_Id", headerGroup:"RTO Customer Returns Acceptance",width: 150, editable:false},
{headerName: "Product_Id", field: "Product_Id", headerGroup:"RTO Customer Returns Acceptance",width: 150, editable:false},
{headerName: "Brand_Name", field: "Brand_Name", headerGroup:"RTO Customer Returns Acceptance",width: 150, editable:false},
{headerName: "Product_Name", field: "Product_Name", headerGroup:"RTO Customer Returns Acceptance",width: 150, editable:false},
{headerName: "Size", field: "Size", headerGroup:"RTO Customer Returns Acceptance",width: 150, editable:false},
{headerName: "Color", field: "Color", headerGroup:"RTO Customer Returns Acceptance",width: 150, editable:false},
{headerName: "Quantity", field: "Quantity", headerGroup:"RTO Customer Returns Acceptance",width: 150, editable:false},
{headerName: "RTO_Customer_Return", field: "RTO_Customer_Return", headerGroup:"RTO Customer Returns Acceptance",width: 150, editable:false},
{headerName: "Return_Reason", field: "Return_Reason", headerGroup:"RTO Customer Returns Acceptance",width: 150, editable:false},
{headerName: "Return_Date", field: "Return_Date", headerGroup:"RTO Customer Returns Acceptance",width: 150, editable:false},
{headerName: "Return_Time", field: "Return_Time", headerGroup:"RTO Customer Returns Acceptance",width: 150, editable:false},
{headerName: "Transporter", field: "Transporter", headerGroup:"RTO Customer Returns Acceptance",width: 150, editable:false}
];
var gridOptions = {
columnDefs: columnDefs,
rowData: createRowData(),
rowSelection: 'multiple',
enableColResize: true,
enableSorting: true,
enableFilter: true,
groupHeaders: true,
rowHeight: 22,
//pinnedColumnCount: 3,
onModelUpdated: modelUpdatedHandler,
debug: false,
showToolPanel: true
};
// wait for the document to be loaded, otherwise
// Angular Grid will not find the div in the document.
document.addEventListener("DOMContentLoaded", function () {
addQuickFilterListener();
window.agGridGlobalFunc('#myGrid', gridOptions);//Render grid
gridOptions.columnApi.hideColumn('Unique_item_id', true);
gridOptions.columnApi.hideColumn('Operation_id', true);
});
function selectAll() {
var i = 0;
gridOptions.api.forEachNode( function (node) {
if(i >= 50) return;
gridOptions.api.selectIndex(i++, true); // This works!
});
}
function deSelectAll() {
var i = 0;
gridOptions.api.forEachNode( function (node) {
gridOptions.api.deselectIndex(i++, true); // This works!
});
}
function createRowData() {
var rowData = [];
for (var i = 0; i < list.length; i++) {
// console.log(list[i]);
var Confirm_Delivery_Status = list[i]["Confirm_Delivery_Status"];
var Order_Id = list[i]["order_id"];
var Unique_item_id = list[i]["unique_item_id"];
var Operation_id = list[i]["operation_id"];
if( (list[i]["suborder_id"]) != 'null')
Order_Id = list[i]["order_id"]+"S"+list[i]["suborder_id"];
var Product_Id = list[i]["product_id"];
var Brand_Name = list[i]["brand_name"];
var Product_Name = list[i]["product_name"];
var Size = list[i]["size"];
var Color = list[i]["color"];
var Quantity = list[i]["units"];
var RTO_Customer_Return = list[i]["return_method"];
var Return_Reason = list[i]["return_reason"];
var Return_Date = list[i]["return_date"];
var Return_Time = list[i]["return_time"];
var Transporter = list[i]["transporter_name"];
rowData.push({
SNo: i + 1,
Order_Id:Order_Id,
Unique_item_id:Unique_item_id,
Operation_id:Operation_id,
Product_Id:Product_Id,
Brand_Name:Brand_Name,
Product_Name:Product_Name,
Size:Size,
Color:Color,
Quantity:Quantity,
RTO_Customer_Return:RTO_Customer_Return,
Return_Reason:Return_Reason,
Return_Date:Return_Date,
Return_Time:Return_Time,
Transporter:Transporter
});
}
return rowData;
}
function addQuickFilterListener() {
var eInput = document.querySelector('#quickFilterInput');
eInput.addEventListener("input", function () {
var text = eInput.value;
gridOptions.api.setQuickFilter(text);
});
}
function modelUpdatedHandler() {
var model = gridOptions.api.getModel();
var processedRows = model.getVirtualRowCount();
setTimeout(function () {
odometer.innerHTML = processedRows;
}, 100);
}
function approve() {
var buttonType=this.id;
var toUpdateStatus=null;
if(buttonType==="recived_good"){
toUpdateStatus="RECEIVED_IN_GOOD_CONDITION";
}
else if (buttonType==="recived_issue"){
toUpdateStatus="RECEIVED_WITH_ISSUE";
}
else if (buttonType==="recieved_not"){
toUpdateStatus="NOT_RECEIVED";
}
console.log(JSON.stringify(gridOptions.api.getSelectedNodes()));
$.ajax({
url: "<?php echo Router::Url(array('controller' => 'Vendorportal','admin' => FALSE, 'action' => 'saveRTOCustomerReturnStatus'), TRUE); ?>",
cache: false,
type: 'POST',
data: { json:gridOptions.api.getSelectedNodes(),status:toUpdateStatus} ,
async: false,
success: function (response) {
console.log("success");
location.reload();
},
error: function (error) {
console.log("failed",error);
location.reload();
}
});
};
function onBtExport() {
var params = {
skipHeader: false,
skipFooters: false,
skipGroups: true,
fileName: 'invoice_failed.csv'
};
var csvData = gridOptions.api.getDataAsCsv(params);
var blobObject = new Blob([csvData], {
type: "text/csv;charset=utf-8;"
});
// Chrome
var downloadLink = document.createElement("a");
downloadLink.href = window.URL.createObjectURL(blobObject);
downloadLink.download = "RTO_Customer_Return.csv";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
};
// document.getElementById("exportBtn").onclick = onBtExport;
document.getElementById("recived_good").onclick = approve;
document.getElementById("recived_issue").onclick = approve;
document.getElementById("recieved_not").onclick = approve;
</script>
<script>
//paste this code under head tag or in a seperate js file.
// Wait for window load
var x = 1;
$(window).load(function () {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");
$("#checkAll").change(function () {
if(x == 1)
{
selectAll();
x = 0;
}
else{
deSelectAll();
x = 1;
}
});
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment