<!DOCTYPE html>
<html>
<head>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
  
  <link href="http://mottie.github.io/Keyboard/css/keyboard.css" rel="stylesheet">
	<script src="http://mottie.github.io/Keyboard/js/jquery.keyboard.js"></script>
  
  	<script src="http://mottie.github.io/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
	<script src="http://mottie.github.io/Keyboard/js/jquery.keyboard.extension-autocomplete.js"></script>
	<script src="http://mottie.github.io/Keyboard/js/jquery.keyboard.extension-caret.js"></script>
  
  <meta charset="utf-8">
  <title>TableVirtualKeyboard</title>
		
        <!-- XML-based view definition -->
        <script id="tableView" type="sapui5/xmlview">
<mvc:View
  controllerName="DynamicControls.Main"
  xmlns:l="sap.ui.layout"
  xmlns:core="sap.ui.core"
  xmlns:u="sap.ui.unified"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  class="viewPadding">
  <App>
  <pages>
<Page
    title="Products Page"
    class="marginBoxContent" >
    <content>
<VBox id="oVBox">
 <Table id="idProductsTable"
	 growing="true"
	 growingThreshold="5"
     items="{/modelData/productsData}">
    <columns>
      <Column>
        <Label text="Product" />
      </Column>
      <Column>
        <Label text="Weight" />
      </Column>
	  <Column>
        <Label text="Product Input" />
      </Column>
    </columns>
    <items>
      <ColumnListItem>
        <cells>
	<Text  text="{Product}" />
	 <Text text="{Weight}" />
	  <Input />
        </cells>
      </ColumnListItem>
    </items>
  </Table>
  </VBox>
    </content>
  </Page>
  </pages>
  </App>
  </mvc:View>
        </script>

        <script>
	 jQuery.sap.require("sap.m.MessageToast");
            // Controller definition
sap.ui.controller("DynamicControls.Main", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf table_v01.Main
*/

	onInit: function() {
	
	var dataObject = [
				{Product: "Power Projector 4713", Weight: "1467"},
				{Product: "Gladiator MX", Weight: "321"},
				{Product: "Hurricane GX", Weight: "588"},
				{Product: "Webcam", Weight: "700"},
				{Product: "Monitor Locking Cable", Weight: "40"},
				{Product: "Laptop Case", Weight: "1289"},
				{Product: "Power Projector 4713", Weight: "1467"},
				{Product: "Gladiator MX", Weight: "321"},
				{Product: "Hurricane GX", Weight: "588"},
				{Product: "Webcam", Weight: "700"},
				{Product: "Monitor Locking Cable", Weight: "40"},
				{Product: "Laptop Case", Weight: "1289"}];			
	
	var model = new sap.ui.model.json.JSONModel();
		model.setData({modelData: {productsData : []}});
		sap.ui.getCore().setModel(model);
		sap.ui.getCore().getModel().setProperty("/modelData/productsData", dataObject);
	},
	
	onAfterRendering : function() {
	var oInputs = $('#__xmlview0--idProductsTable').find('.sapMInputBaseInner');
	for(var i=0;i<oInputs.length;i++){
		var oInputID = "#"+oInputs[i].id;
                $(oInputID).keyboard({ layout: 'qwerty' });
		}
		
	var oTriggerID = $('#__xmlview0--idProductsTable-trigger')[0].id;
	var oGrowButtonID = sap.ui.getCore().byId(oTriggerID);
	oGrowButtonID.attachPress(function(oEvent){
	var oInputs = $('#__xmlview0--idProductsTable').find('.sapMInputBaseInner');
		for(var i=0;i<oInputs.length;i++){
				var oInputID = "#"+oInputs[i].id;
                $(oInputID).keyboard({ layout: 'qwerty' });
		}
	});
          
    }

});

            
            // Instantiate the View, assign a model
            // and display
            var oView = sap.ui.xmlview({
                viewContent: jQuery('#tableView').html()
            });
            
            oView.placeAt('content');
        </script>
    </head>
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>
// Code goes here

/* Styles go here */