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);
},
});
});