We use cookies to ensure you get the best experience on our website
Please wait...
Complete Data Entry Examples
Runs on all major browsers. Best use in Firefox.
New Data Entry
Play around with the EntryGrid below.
Here's what you can do:
- Click on the any cells to enter data and click on the new* cell to create new row.
- Click on the "..." menu on the top-left corner to sort column, delete rows, hide columns.
- Click on the cell number to toggle row selections.
- Click and drag the column header to reposition it.
- Click and drag the right edge of the column header to resize it.
var eg_grid = "";
var uom = [{id:"PC",name: "Piece"},{id:"EA",name: "Each"},{id:"PKT",name: "Packet"},{id:"BOX",name: "Box"},{id:"CTN",name: "Carton"}];
var discount_type = [{id:"percent", name:"Percentage"}, {id:"amount", name:"Amount"}];
var search_list = [{id:"PROD001",name: "Milo Instant Chocolate Malt Drink - Gao Siew Dai+Collectible",packing: "15 x 33g", price: 6.90, uom:[{uom:"PC", packsize:12},{uom:"CTN", packsize:1}]},{id:"PROD002",name: "Narcissus Can Food - Whole Mushrooms",packing: "425g", price:2312.90, uom:[{uom:"EA", packsize:6},{uom:"BOX", packsize:1}]},{id:"PROD003",name: "Adams 100% Natural Peanut Butter - Crunchy (Unsalted)",packing: "6x2KG", price: 232.09, uom:[{uom:"PC", packsize:3},{uom:"CTN", packsize:1}]},{id:"PROD004",name: "Dove Shampoo - Volume Nourishment",packing: "2x1.2KG",price:300.38,uom:[{uom:"PC", packsize:1}]},{id:"PROD005",name: "Zespri New Zealand Kiwifruit - Green",packing: "5x1KG",price:903.90,uom:[{uom:"PKT", packsize:12},{uom:"CTN", packsize:1}]}
];
$(document).ready(function(){
eg_grid = $("#div_grid").entry_grid({
editable: true,
wrapper_css: {color: "#333"},
headers: [{name: "Product ID", type: "search", width: 160, align:"center", list: search_list},{name: "Product Name", type: "text", width: 300, readonly: true, align:"center"},{name: "QTY", type: "numeric", width: 100, align:"center"},{name: "UOM", type: "dropdown", width: 150, align:"center", list: uom},{name: "Unit Price", type: "numeric", width: 150, readonly: true, align:"center"},{name: "Discount Type", type: "dropdown", width: 150, align:"center", list: discount_type},{name: "Discount", type: "numeric", width: 150, align:"center"},{name: "Discount Amount", type: "numeric", width: 150, align:"center", readonly: true},{name: "Amount", type: "numeric", width: 160, align:"center", readonly: true},{name: "Expiry Date", type: "datepicker",dateformat: "dd/mm/yyyy", width: 160, align:"center"},{name: "Exclude GST", type: "checkbox", width: 160, align:"center"}],
rows: [
[{value: "",placeholder:"Type Product ID or Name"},{value: "",placeholder:"Product Name"},{value: "0",placeholder:"QTY"},{value: "",placeholder:"UOM"},{value: "0.00",placeholder:"Unit Price"},{value: "",placeholder:"Discount Type"},{value: "0.00",placeholder:"Discount"},{value: "0.00",placeholder:"Discount Amount"},{value: "0.00",placeholder:"Amount"},{value: "",placeholder:"Expiry Date"},{value: "1", placeholder:""}],
],
on_search_select: function($selected_id,$colno,$rowno){
//====================================================================
//do you own logic here when the user select from the search list
//====================================================================
var product_name = "";
var unit_price = 0;
var amount = 0;
var discount = 0;
$(search_list).each(function(i,v){
if(v.id==$selected_id){
product_name = v.name;
unit_price = v.price;
var discount_type = eg_grid.get_value($rowno,6).toLowerCase();
var qty = Number(eg_grid.get_value($rowno,3));
discount = Number(eg_grid.get_value($rowno,7));
if(discount_type=="percentage"){
if(discount<=0){
discount = 0;
}else{
discount = qty * (v.price*(discount/100));
}
}
amount = (Number(v.price) * Number(qty)) - discount;
return false; //break
}
});
eg_grid.update_value($rowno,2,product_name);
eg_grid.update_value($rowno,5,unit_price);
eg_grid.update_value($rowno,8,discount);
eg_grid.update_value($rowno,9,amount);
},
on_change: function(){
//====================================================================
//do your own computation on this current row that has been changed values
//====================================================================
var $rowno = eg_grid.current_rowno();
var $colno = eg_grid.current_colno();
var unit_price = Number(eg_grid.get_value($rowno,5));
var amount = 0;
var discount_type = eg_grid.get_value($rowno,6).toLowerCase();
var discount = Number(eg_grid.get_value($rowno,7));
var qty = Number(eg_grid.get_value($rowno,3));
if(discount_type=="percentage"){
if(discount<=0){
discount = 0;
}else{
discount = unit_price*(discount/100);
}
}
if(discount_type==""){
discount = 0;
}
amount = (unit_price * qty) - (discount*qty);
eg_grid.update_value($rowno,5,unit_price);
eg_grid.update_value($rowno,8,discount);
eg_grid.update_value($rowno,9,amount);
},
});
});