diff -r 89b7449d1fd9 -r 3ce3df681be0 www/js/profile_styles.js
--- a/www/js/profile_styles.js	Thu Jun 11 19:59:30 2020 +0200
+++ b/www/js/profile_styles.js	Sat Jun 13 12:14:26 2020 +0200
@@ -1,9 +1,9 @@
 /*****************************************************************************
- * Copyright (C) 2014-2019
+ * Copyright (C) 2014-2020
  *
  * Michiel Broek <mbroek at mbse dot eu>
  *
- * This file is part of BrewCloud
+ * This file is part of Brewery Management System
  *
  * This is free software; you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the
@@ -89,9 +89,7 @@
      commit(true);
      location.reload(true);
     },
-    error: function(jqXHR, textStatus, errorThrown) {
-     commit(false);
-    }
+    error: function(jqXHR, textStatus, errorThrown) { commit(false); }
    });
   },
   addrow: function(rowid, rowdata, position, commit) {
@@ -106,9 +104,7 @@
      commit(true);
      location.reload(true);
     },
-    error: function(jqXHR, textStatus, errorThrown) {
-     commit(false);
-    }
+    error: function(jqXHR, textStatus, errorThrown) { commit(false); }
    });
   },
   updaterow: function(rowid, rowdata, commit) {
@@ -123,14 +119,12 @@
      commit(true);
      location.reload(true);
     },
-    error: function(jqXHR, textStatus, errorThrown) {
-     commit(false);
-    }
+    error: function(jqXHR, textStatus, errorThrown) { commit(false); }
    });
   }
  },
  dataAdapter = new $.jqx.dataAdapter(source),
-        editrow = -1;
+ editrow = -1;
 
  // initialize the input fields.
  $('#name').jqxInput({ theme: theme, width: 320, height: 23 });
@@ -172,6 +166,9 @@
  $('#ingredients').jqxInput({ theme: theme, width: 800, height: 23 });
  $('#examples').jqxInput({ theme: theme, width: 800, height: 48 });
 
+ var  localizationobj = {};
+ localizationobj.filterchoosestring= "Keuze:";
+
  // initialize jqxGrid
  $('#jqxgrid').jqxGrid({
   width: 1280,
@@ -183,18 +180,18 @@
    var container, addButton, impButton;
    container = $('<div style="overflow: hidden; position: relative; margin: 5px;"></div>');
    addButton = $('<div style="float: right; margin-right: 15px;"><img style="position: relative; margin-top: 2px;" ' +
-       'src="images/add.png"/><span style="margin-left: 4px; position: relative; top: -3px;">Nieuw</span></div>');
+       'src="images/add.png"/><span style="margin-left: 4px; position: relative; top: -4px;">Nieuw</span></div>');
    impButton = $('<div style="float: right; margin-right: 50px;"><img style="position: relative; margin-top: 2px;" ' +
-       'src="images/add.png"/><span style="margin-left: 4px; position: relative; top: -3px;">Import</span></div>');
+       'src="images/add.png"/><span style="margin-left: 4px; position: relative; top: -4px;">Import</span></div>');
    expButton = $('<div style="float: right; margin-right: 50px;"><img style="position: relative; margin-top: 2px;" ' +
-     'src="images/database.png"/><span style="margin-left: 4px; position: relative; top: -3px;">Export</span></div>');
+     'src="images/database.png"/><span style="margin-left: 4px; position: relative; top: -10px;">Export</span></div>');
    container.append(addButton);
    container.append(impButton);
    container.append(expButton);
    statusbar.append(container);
-   addButton.jqxButton({ theme: theme, width: 90, height: 20 });
-   impButton.jqxButton({ theme: theme, width: 90, height: 20 });
-   expButton.jqxButton({ theme: theme, width: 90, height: 20 });
+   addButton.jqxButton({ theme: theme, width: 90, height: 17 });
+   impButton.jqxButton({ theme: theme, width: 90, height: 17 });
+   expButton.jqxButton({ theme: theme, width: 90, height: 17 });
    // add new row.
    addButton.click(function(event) {
     editrow = -1;
@@ -229,25 +226,28 @@
     window.open('export_styles.php');
    });
   },
+  ready: function () {
+   $("#jqxgrid").jqxGrid('localizestrings', localizationobj);
+  },
   filterable: true,
-  filtermode: 'excel',
+  showfilterrow: true,
   columns: [
-   { text: 'Gids', datafield: 'style_guide', width: 100 },
-   { text: 'Groep', datafield: 'style_letter', width: 30 },
-   { text: 'Style Name', menu: false, datafield: 'name' },
-   { text: 'OG', menu: false, datafield: 'og_min', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f3' },
-   { text: 'OG', menu: false, datafield: 'og_max', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f3' },
-   { text: 'FG', menu: false, datafield: 'fg_min', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f3' },
-   { text: 'FG', menu: false, datafield: 'fg_max', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f3' },
-   { text: 'IBU', menu: false, datafield: 'ibu_min', width: 50, align: 'right', cellsalign: 'right', cellsformat: 'f0' },
-   { text: 'IBU', menu: false, datafield: 'ibu_max', width: 50, align: 'right', cellsalign: 'right', cellsformat: 'f0' },
-   { text: 'EBC', menu: false, datafield: 'color_min', width: 50, align: 'right', cellsalign: 'right', cellsformat: 'f0' },
-   { text: 'EBC', menu: false, datafield: 'color_max', width: 50, align: 'right', cellsalign: 'right', cellsformat: 'f0' },
-   { text: 'Co2', menu: false, datafield: 'carb_min', width: 50, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
-   { text: 'Co2', menu: false, datafield: 'carb_max', width: 50, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
-   { text: 'ABV', menu: false, datafield: 'abv_min', width: 50, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
-   { text: 'ABV', menu: false, datafield: 'abv_max', width: 50, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
-   { text: '', menu: false, datafield: 'Edit', width: 100, align: 'center', columntype: 'button', cellsrenderer: function() {
+   { text: 'Gids', datafield: 'style_guide', width: 100, filtertype: 'list' },
+   { text: 'Groep', datafield: 'style_letter', width: 30, filtertype: 'list' },
+   { text: 'Style Name', menu: false, datafield: 'name', filtertype: 'textbox' },
+   { text: 'OG', menu: false, datafield: 'og_min', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f3', filterable: false },
+   { text: 'OG', menu: false, datafield: 'og_max', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f3', filterable: false },
+   { text: 'FG', menu: false, datafield: 'fg_min', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f3', filterable: false },
+   { text: 'FG', menu: false, datafield: 'fg_max', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f3', filterable: false },
+   { text: 'IBU', menu: false, datafield: 'ibu_min', width: 50, align: 'right', cellsalign: 'right', cellsformat: 'f0', filterable: false },
+   { text: 'IBU', menu: false, datafield: 'ibu_max', width: 50, align: 'right', cellsalign: 'right', cellsformat: 'f0', filterable: false },
+   { text: 'EBC', menu: false, datafield: 'color_min', width: 50, align: 'right', cellsalign: 'right', cellsformat: 'f0', filterable: false },
+   { text: 'EBC', menu: false, datafield: 'color_max', width: 50, align: 'right', cellsalign: 'right', cellsformat: 'f0', filterable: false },
+   { text: 'Co2', menu: false, datafield: 'carb_min', width: 50, align: 'right', cellsalign: 'right', cellsformat: 'f1', filterable: false },
+   { text: 'Co2', menu: false, datafield: 'carb_max', width: 50, align: 'right', cellsalign: 'right', cellsformat: 'f1', filterable: false },
+   { text: 'ABV', menu: false, datafield: 'abv_min', width: 50, align: 'right', cellsalign: 'right', cellsformat: 'f1', filterable: false },
+   { text: 'ABV', menu: false, datafield: 'abv_max', width: 50, align: 'right', cellsalign: 'right', cellsformat: 'f1', filterable: false },
+   { text: '', menu: false, datafield: 'Edit', width: 100, align: 'center', columntype: 'button', filterable: false, cellsrenderer: function() {
     return 'Wijzig';
     }, buttonclick: function(row) {
      // open the popup window when the user clicks a button.