[SOLVED] OJET Grid not displaying

OJET Grid not displaying

I am trying out OJET for the first time. Its a gradle project. I have a button (which redirects to a servlet) and a oj-data-grid. On running gradlew appRun everything works but the grid is not being displayed. Here is my code:

index.html

<!DOCTYPE>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
<form method="post" action="dataServlet">
    <input type="submit" value="Click"/>
</form>
<div id="oj-grid-example">
    ABCD <br/>
    <oj-data-grid id="datagrid"
                  style="width:100%;max-width:234px;height:130px"
                  aria-label="Data Grid Cell Based Grid Demo"
                  data="[[dataSource]]">
    </oj-data-grid>
    <br/>EFGH
</div>
</body>
</html>

main.js

requirejs.config({
  paths: {
    'knockout': 'libs/knockout/knockout-3.4.0',
    'jquery': 'libs/jquery/jquery-3.1.1.min',
    'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.12.0.min',
    'ojs': 'libs/oj/v4.0.0/min',
    'ojL10n': 'libs/oj/v4.0.0/ojL10n',
    'ojtranslations': 'libs/oj/v4.0.0/resources',
    'text': 'libs/require/text',
    'promise': 'libs/es6-promise/es6-promise.min',
    'hammerjs': 'libs/hammer/hammer-2.0.8.min',
    'signals': 'libs/js-signals/signals.min',
    'ojdnd': 'libs/dnd-polyfill/dnd-polyfill-1.0.0.min',
    'css': 'libs/require-css/css.min',
    'customElements': 'libs/webcomponents/custom-elements.min',
    'proj4': 'libs/proj4js/dist/proj4'
  },
  shim: {
    'jquery': {
      exports: ['jQuery', '$']
    }
  },

  config: {
    ojL10n: {
      merge: {
        //'ojtranslations/nls/ojtranslations': 'resources/nls/myTranslations'
      }
    },
    text: {
      useXhr: function (url, protocol, hostname, port) {
        return true;
      }
    }
  }
});


require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'promise',
'ojs/ojdatagrid', 'ojs/ojarraydatagriddatasource'],
function(oj, ko, $)
{
    function viewModel()
    {
        var self = this;
        var dataArray = [
            ['1', '2', '3'],
            ['4', '5', '6'],
            ['7', '8', '9']
        ];
        self.dataSource = new oj.ArrayDataGridDataSource(dataArray);
    }

    $(
        function()
        {
            ko.applyBindings(new viewModel(), document.getElementById('datagrid'));
        }
    );
});

build.gradle

plugins {
    id 'java'
    id 'war'
    id 'org.akhikhl.gretty' version '1.4.2'
}

sourceCompatibility = 1.8

repositories {
    mavenCentral()
}

dependencies {
    providedCompile 'javax.servlet:javax.servlet-api:3.1.0'
    testCompile group: 'junit', name: 'junit', version: '4.12'
}

The output

Click [Imagine this as a clickable button. This part of the code works]
ABCD 

EFGH

As shown in the output, the data-grid is not being displayed.

Are special configurations required in gradle.build ?

Solution

Did you add the script tags to initialize? Try this:-

<link href="css/libs/oj/v4.0.0/alta/oj-alta-min.css"
          rel="stylesheet"
          type="text/css"/>
<script data-main="js/main"
            src="js/libs/require/require.js">
</script>