diff -r 400aae9fb0c8 -r b825c675987d www/js/inv_mash_profiles.js
--- a/www/js/inv_mash_profiles.js	Tue Aug 28 11:30:42 2018 +0200
+++ b/www/js/inv_mash_profiles.js	Tue Aug 28 20:54:53 2018 +0200
@@ -44,6 +44,10 @@
 
 $(document).ready(function () {
 	var url = "includes/db_inventory_mash_profiles.php";
+	// tooltips
+	$("#name").jqxTooltip({ content: 'De naam voor dit maisch profiel.' });
+	$("#notes").jqxTooltip({ content: 'De uitgebreide opmerkingen over dit maich profiel.' });
+	$("#grid").jqxTooltip({ content: 'De maisch stappen in dit profiel.'});
 	// prepare the data
 	var source = {
 		datatype: "json",
@@ -53,12 +57,6 @@
 			{ name: 'name', type: 'string' },
 			{ name: 'notes', type: 'string' },
 			{ name: 'steps', type: 'array' }
-	//		{ name: 'step_name', type: 'string', map: 'steps>step_name' },
-	//		{ name: 'step_type', type: 'string', map: 'steps>step_type' },
-	//		{ name: 'step_temp', type: 'float', map: 'steps>step_temp' },
-	//		{ name: 'step_time', type: 'float', map: 'steps>step_time' },
-	//		{ name: 'tamp_time', type: 'float', map: 'steps>ramp_time' },
-	//		{ name: 'end_temp', type: 'float', map: 'steps>end_temp' }
 		],
 		id: 'record',
 		url: url,
@@ -112,7 +110,7 @@
 		}
 	};
 	var dataAdapter = new $.jqx.dataAdapter(source);
-
+	// Inline steps editor
 	var editsteps = function (data) {
 		var generaterow = function () {
 			var row = {};
@@ -136,22 +134,9 @@
 				{ name: 'end_temp', type: 'float' }
 			],
 			addrow: function (rowid, rowdata, position, commit) {
-				// synchronize with the server - send insert command
-				// call commit with parameter true if the synchronization with the server is successful 
-				//and with parameter false if the synchronization failed.
-				// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
 				commit(true);
 			},
 			deleterow: function (rowid, commit) {
-				// synchronize with the server - send delete command
-				// call commit with parameter true if the synchronization with the server is successful 
-				//and with parameter false if the synchronization failed.
-				commit(true);
-			},
-			updaterow: function (rowid, newdata, commit) {
-				// synchronize with the server - send update command
-				// call commit with parameter true if the synchronization with the server is successful 
-				// and with parameter false if the synchronization failed.
 				commit(true);
 			}
 		};
@@ -161,28 +146,18 @@
 			height: 330,
 			source: stepAdapter,
 			theme: theme,
+			selectionmode: 'singlerow',
+			editmode: 'selectedrow',
+			editable: true,
 			showtoolbar: true,
 			rendertoolbar: function (toolbar) {
 				var me = this;
 				var container = $("<div style='margin: 5px;'></div>");
 				toolbar.append(container);
-				container.append('<input id="addrowbutton" type="button" value="Add New Row" />');
-				container.append('<input style="margin-left: 5px;" id="deleterowbutton" type="button" value="Delete Selected Row" />');
-				container.append('<input style="margin-left: 5px;" id="updaterowbutton" type="button" value="Update Selected Row" />');
-				$("#addrowbutton").jqxButton({ theme: theme });
-				$("#deleterowbutton").jqxButton({ theme: theme });
-				$("#updaterowbutton").jqxButton({ theme: theme });
-				// update row.
-				$("#updaterowbutton").on('click', function () {
-					var datarow = generaterow();
-					var selectedrowindex = $("#grid").jqxGrid('getselectedrowindex');
-					var rowscount = $("#grid").jqxGrid('getdatainformation').rowscount;
-					if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
-						var id = $("#grid").jqxGrid('getrowid', selectedrowindex);
-						var commit = $("#grid").jqxGrid('updaterow', id, datarow);
-						$("#grid").jqxGrid('ensurerowvisible', selectedrowindex);
-					}
-				});
+				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 });
+				$("#deleterowbutton").jqxButton({ theme: theme, width: 150 });
 				// create new row.
 				$("#addrowbutton").on('click', function () {
 					var datarow = generaterow();
@@ -200,13 +175,49 @@
 			},
 			columns: [
 				{ text: 'Stap naam', datafield: 'step_name' },
-				{ text: 'Stap type', datafield: 'step_type', width: 100 },
-				{ text: 'Temperatuur', datafield: 'step_temp', width: 70, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
-				{ text: 'Eind', datafield: 'end_temp', width: 70, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
-				{ text: 'Tijd', datafield: 'step_time', width: 70, align: 'right', cellsalign: 'right' },
-				{ text: 'Stap', datafield: 'ramp_time', width: 70, align: 'right', cellsalign: 'right' }
+				{ text: 'Stap type', datafield: 'step_type', width: 100, columntype: 'dropdownlist',
+				  createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
+				  	var dataSource = [ "Infusion", "Temperature", "Decoction" ];
+					editor.jqxDropDownList({ source: dataSource, dropDownHeight: 95 });
+				  }
+				},
+				{ text: 'Temperatuur', datafield: 'step_temp', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1',
+				  validation: function (cell, value) {
+					if (value < 35 || value > 80) {
+						return { result: false, message: "De temperatuur moet tussen 35 en 80 zijn." };
+					}
+					return true;
+				  }
+			       	},
+				{ text: 'Eind', datafield: 'end_temp', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1',
+				  validation: function (cell, value) {
+					if (value < 35 || value > 80) {
+						return { result: false, message: "De temperatuur moet tussen 35 en 80 zijn." };
+					}
+					return true;
+				  }
+				},
+				{ text: 'Tijd', datafield: 'step_time', width: 70, align: 'right', cellsalign: 'right',
+				  validation: function (cell, value) {
+				  	if (value < 1 || value > 360) {
+						return { result: false, message: "De tijd moet tussen 1 en 360 zijn." };
+					}
+					return true;
+				  }
+			       	},
+				{ text: 'Stap', datafield: 'ramp_time', width: 70, align: 'right', cellsalign: 'right',
+				  validation: function (cell, value) {
+					if (value < 1 || value > 60) {
+						return { result: false, message: "De tijd moet tussen 1 en 60 zijn." };
+					}
+					return true;
+				  }
+			       	}
 			]
 		});
+		$("#grid").on('cellendedit', function (event) {
+			$('#grid').jqxGrid('sortby', 'step_temp', 'asc');
+		});
 	};
 
 	// initialize the input fields.
@@ -289,15 +300,14 @@
 	$("#Save").jqxButton({ theme: theme });
 	// update the edited row when the user clicks the 'Save' button.
 	$("#Save").click(function () {
+		var steprows = $('#grid').jqxGrid('getrows');
 		if (editrow >= 0) {
 			var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
-			var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
-//	                                    $("#name").val(dataRecord.name);
 			var row = {
 				record: rowID,
 				name: $("#name").val(),
 				notes: $("#notes").val(),
-				steps: dataRecord.steps
+				steps: steprows
 			};
 			$('#jqxgrid').jqxGrid('updaterow', rowID, row);
 			$("#popupWindow").jqxWindow('hide');
@@ -306,7 +316,8 @@
 			var newrow = {
 				record: -1,
 				name: $("#name").val(),
-				notes: $("#notes").val()
+				notes: $("#notes").val(),
+				steps: steprows
 			};
 			$('#jqxgrid').jqxGrid('addrow', null, newrow);
 			$("#popupWindow").jqxWindow('hide');