diff --git a/Entities/Buttons/Model.fs b/Entities/Buttons/Model.fs
index 5680079..354c7ff 100644
--- a/Entities/Buttons/Model.fs
+++ b/Entities/Buttons/Model.fs
@@ -7,12 +7,11 @@ let attr = Giraffe.ViewEngine.HtmlElements.attr
 
 let getItemActionAttributes (itemCode: string) =
     let item = Entity.GetFirstByColumn<item> "code" (StringTrim itemCode)
-    [(attr "data-item") <| jsonEncode item]
+    [item |> jsonEncode |> attr "data-item"]
 
 let getGridActionAttributes (gridId: int) = [(attr "data-grid") <| jsonEncode gridId]
 
 let getActionAttributes (action: string) (actionValue: string) =
-
     match action with
         | "item" -> getItemActionAttributes actionValue
         | "grid" -> actionValue |> int |> getGridActionAttributes
diff --git a/OrderScreen/View.fs b/OrderScreen/View.fs
index af9afc7..a95903e 100644
--- a/OrderScreen/View.fs
+++ b/OrderScreen/View.fs
@@ -116,6 +116,9 @@ let itemButtonImage (button: button) =
         _style $"background-image:url(\"/images/items/{button.image}\");"
     ] []
 
+let _data_primary_action = attr "data-primary-action"
+let _data_secondary_action = attr "data-secondary-action"
+
 let itemButton (button: button) =
     let extraClasses =
         if button.image.Length > 0 then button.extra_classes + " hasImage"
@@ -128,8 +131,8 @@ let itemButton (button: button) =
         yield! primaryAttributes
         yield! secondaryAttributes
         _style button.extra_styles
-        (attr "data-primary-action") button.primary_action
-        (attr "data-secondary-action") button.secondary_action
+        _data_primary_action button.primary_action
+        _data_secondary_action button.secondary_action
     ] [
         if button.image.Length > 0 then itemButtonImage button
         span [_class "text "] [str button.text]
diff --git a/typescript/dredgepos.orderScreen.ts b/typescript/dredgepos.orderScreen.ts
index 93fcb6b..9f749e8 100644
--- a/typescript/dredgepos.orderScreen.ts
+++ b/typescript/dredgepos.orderScreen.ts
@@ -69,8 +69,8 @@ const setupOrderScreen = (data: OrderScreenData) => {
     doc.on('click', '.nextButton', goToNextPage)
     doc.on('click', '.prevButton', goToPrevPage)
     doc.on('click', '.loadPageGroup', loadPageGroup)
-    doc.on('click', '[data-primary-action=item]', itemButtonClicked)
-    doc.on('click', '[data-primary-action=grid],[data-secondary-action=grid]', gridButtonClicked)
+    doc.on('click', getElementsByAction('item'), itemButtonClicked)
+    doc.on('click', getElementsByAction('grid'), gridButtonClicked)
     doc.on('click', '.closeGrid', hideGrids)
     doc.on('click', '.freetextButton', freetext)
     doc.on('click', '.openItemButton', customItem)
@@ -98,6 +98,8 @@ const setupOrderScreen = (data: OrderScreenData) => {
 
 }
 
+const getElementsByAction = (action: string) => `[data-primary-action=${action}], [data-secondary-action=${action}]`
+
 /**
  * @param direction 1 for forward, -1 for backwards.
  * @param button
@@ -325,7 +327,7 @@ const gridHtmlGenerated = (gridData: {gridHtml:string, grid: grid}) => {
         .html(gridHtml)
         .show()
         .parent()
-        .height(cellDimensions.width * grid.rows)
+        .height(cellDimensions.height * grid.rows)
         .closest('.gridContainer')
         .find('.pageNavigation')
         .toggle(gridContainer.find('.gridPage').length >  1)
diff --git a/typescript/keyboards.ts b/typescript/keyboards.ts
index 37ee35b..d8c05da 100644
--- a/typescript/keyboards.ts
+++ b/typescript/keyboards.ts
@@ -25,9 +25,9 @@ let showVirtualNumpad = (heading: string, maxlength = 4, isPassword: boolean, al
         inputBox.text('');
 
         numpad.data('maxlength', maxlength)
-        numpad.data('submitfunction', submitFunction)
+        numpad.data('submit-function', submitFunction)
         numpad.data('password', isPassword);
-        numpad.data('allowdecimals', allowDecimals);
+        numpad.data('allow-decimals', allowDecimals);
 
         $(document).off('keyup');
         $(document).on('keyup', e => {
@@ -64,9 +64,9 @@ let showVirtualNumpad = (heading: string, maxlength = 4, isPassword: boolean, al
      let virtualNumpadInput = (input: string) => {
         let inputBox = $('#virtualNumpadInput')
         let numpad = $('#virtualNumpad')
-        let maxlength = numpad.data('maxlength')
-        let allowDecimals = numpad.data('allowdecimals')
-        let submitFunction = numpad.data('submitfunction')
+        let maxlength : number = numpad.data('maxlength')
+        let allowDecimals: boolean = numpad.data('allow-decimals')
+        let submitFunction : Function = numpad.data('submit-function')
         let allowedValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'submit', 'clear']
         let currentValue = numpad.data('value').toString()
 
@@ -144,7 +144,7 @@ let showVirtualNumpad = (heading: string, maxlength = 4, isPassword: boolean, al
         inputBox.val('')
         keyboard.data('maxlength', maxlength)
         keyboard.data('password', isPassword)
-        keyboard.data('submitfunction', submitFunction)
+        keyboard.data('submit-function', submitFunction)
         inputBox.attr('autofocus', 'autofocus');
         inputBox.trigger('focus')
         inputBox.trigger('click')
@@ -175,7 +175,7 @@ let showVirtualNumpad = (heading: string, maxlength = 4, isPassword: boolean, al
                 break;
             case 'submit':
                 hideVirtualKeyboard();
-                let submitFunction = keyboard.data('submitfunction')
+                let submitFunction = keyboard.data('submit-function')
                 submitFunction(inputBox.val());
                 break;
             case 'shift':