diff -r a17c644a0510 -r 294dda7f1779 www/js/recipes.js
--- a/www/js/recipes.js	Wed Sep 05 15:38:20 2018 +0200
+++ b/www/js/recipes.js	Thu Sep 06 14:22:02 2018 +0200
@@ -154,7 +154,6 @@
 				{ name: 'w_name', type: 'string' },
 				{ name: 'w_amount', type: 'float' },
 				{ name: 'w_calcium', type: 'float' },
-				{ name: 'w_bicarbonate', type: 'float' },
 				{ name: 'w_sulfate', type: 'float' },
 				{ name: 'w_chloride', type: 'float' },
 				{ name: 'w_sodium', type: 'float' },
@@ -172,6 +171,29 @@
 			}
 		};
 		var waterAdapter = new $.jqx.dataAdapter(waterSource);
+
+		var waterUrl = "getwatersources.php";
+		var waterInvSource = {
+			datatype: "json",
+			datafields: [
+				{ name: 'record', type: 'number' },
+				{ name: 'name', type: 'string' },
+				{ name: 'unlimited_stock', type: 'bool' },
+				{ name: 'calcium', type: 'float' },
+		                { name: 'sulfate', type: 'float' },
+				{ name: 'chloride', type: 'float' },
+				{ name: 'sodium', type: 'float' },
+				{ name: 'magnesium', type: 'float' },
+				{ name: 'ph', type: 'float' },
+				{ name: 'total_alkalinity', type: 'float' },
+				{ name: 'cost', type: 'float' },
+				{ name: 'default_water', type: 'bool' }
+			],
+			url: waterUrl,
+			async: true
+		};
+		var waterlist = new $.jqx.dataAdapter(waterInvSource);
+
 		$("#waterGrid").jqxGrid({
 			width: 960,
 			height: 200,
@@ -183,13 +205,53 @@
 			showtoolbar: true,
 			rendertoolbar: function (toolbar) {
 				var me = this;
-				var container = $("<div style='margin: 5px;'></div>");
+				var container = $("<div style='margin: 5px; white-space: nowrap;'></div>");
 				toolbar.append(container);
-				container.append('<input style="margin-left: 100px;" id="addrowbutton" type="button" value="Nieuwe stap" />');
-				container.append('<input style="margin-left: 140px;" id="deleterowbutton" type="button" value="Verwijder stap" />');
-				$("#addrowbutton").jqxButton({ theme: theme, width: 150 });
+//				container.append('<input style="margin-left: 100px;" id="addrowbutton" type="button" value="Nieuwe stap" />');
+				container.append('<div  id="addrowbutton"></div>');
+				container.append('<input id="deleterowbutton" type="button" value="Verwijder water" />');
+				$("#addrowbutton").jqxDropDownList({
+					placeHolder: "Kies water:",
+					theme: theme,
+					source: waterlist,
+					displayMember: "name",
+					width: 150,
+					dropDownWidth: 300
+				});
+//				$("#addrowbutton").jqxButton({ theme: theme, width: 150 });
+//				$("#addrowbutton").on('click', function () {
+				$("#addrowbutton").on('select', function (event) {
+//					if (event.args) {
+//						var index = event.args.index;
+//						var datarecord = data[index];
+//						var row = {};
+//						row["w_name"] = datarecord.name;
+//						row["w_amount"] = 0;
+//						row["w_calcium"] = datarecord.calcium;
+//						row["w_sulfate"] = datarecord.sulfate;
+//						row["w_chloride"] = datarecord.chloride;
+
+//						var commit = $("#waterGrid").jqxGrid('addrow', null, row);
+//					}
+					var row = {};
+					row["w_name"] = "Vies water";
+					row["w_amount"] = 0;
+					row["w_calcium"] = 0;
+					row["w_sulfate"] = 0;
+					row["w_chloride"] = 0;
+					row["w_sodium"] = 0;
+					row["w_magnesium"] = 0;
+					row["w_ph"] = 7.1;
+					row["w_total_alkalinity"] = 0;
+					row["w_default_water"] = 0;
+					row["w_cost"] = 0;
+					var commit = $("#waterGrid").jqxGrid('addrow', null, row);
+				});
 				$("#deleterowbutton").jqxButton({ theme: theme, width: 150 });
 				// create new row. Dropdown uit water inventory.
+//				$("#addrowbutton").on('select', function (event) {
+//					var item = event.args.item;
+//				});
 //				$("#addrowbutton").on('click', function () {
 //					var datarow = generaterow();
 //					var commit = $("#waterGrid").jqxGrid('addrow', null, datarow);