Quick Start

1 Link JS and CSS

Before you can use EntryGrid JS you need to link all JS and CSS needed to run.

<link rel="stylesheet" href="<your domain>/entry-grid-js-v1/jquery-ui-1.12.1.custom/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="<your domain>/entry-grid-js-v1/eternicode/css/datepicker.css">
<link rel="stylesheet" href="<your domain>/entry-grid-js-v1/entry_grid.css">

<script src="<your domain>/js/jquery-3.3.1.min.js"></script>
<script src="<your domain>/entry-grid-js-v1/entry_grid.js"></script>
<script src="<your domain>/entry-grid-js-v1/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="<your domain>/entry-grid-js-v1/eternicode/js/bootstrap-datepicker.js"></script>
<script src="<your domain>/entry-grid-js-v1/sorter.js"></script>
2 Create a div element

You need create a div element to host EntryGrid JS in that particular container with specified width and height, also need to put class and id of the div element.

<div id="div_grid" style="top:50px;position: relative; width:100%;height: 300px;" class="entry-grid-js"></div>
3 Initialize It

After the DOM is loaded, you need to initiliaze the grid with default look up values via arrays and set appropriate cell types, callbacks on selection, readonly cells etc.

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

		},

 	});

});
4 Save Entry

Final step is of course to save whatever entry you have in the grid. Saving entry is just by calling the get_data() function of EntryGrid JS. It will give an array of objects per line entry and sorted according to the current display of the grid. You can then use JSON.stringify() before submitting it to your server.

$(".btnSave").click(function(){
	var data = eg_grid.get_data();
});

See the complete examples on how to fully use this plugin. Go to Examples

Did I help you somehow?

Do you like EntryGrid JS? I like you too! Would you buy me a cup of coffee? It's better to give than to receive, but I also like to receive.

It's easier to give now!

Giving coffee to anyone you like in the world is just a click of a button. The more you give, the more you receive.

Yes, I give you!

EntryGrid JS

Drop us an email at [email protected]
2018 - 2019 EntryGrid JS.

Share