Creating a Basic Grid

Using Spread.Views, you can generate grid columns automatically by retrieving the data from JSON files. Use the following steps to create a basic grid layout.

Adding a Basic Grid

  1. Add the JavaScript for the page. The following code is a general example.
     <!DOCTYPE html>
          <title>Spread.Views test page</title>
  2. Add reference scripts. The gc.spread.common.js and gc.spread.views.dataview.js references provide the core features of Spread.Views and gc.spread.views.gridlayout.js provides a grid layout for use.
       <script src="[Your Script Path]/gc.spread.common.10.1.1.min.js" type="text/JavaScript"></script>
       <script src="[Your Script Path]/gc.spread.views.dataview.10.1.1.min.js" type="text/JavaScript"></script>
       <script src="[Your Script Path]/gc.spread.views.gridlayout.10.1.1.min.js" type="text/JavaScript"></script>
               * {
                   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  3. Add CSS files to customize the appearance. Use the gc.spread.views.dataview.10.1.1.css file for the default appearance.
       <link rel="stylesheet" href="[Your Stylesheet Path]/gc.spread.views.dataview.10.1.1.css" type="text/css">
  4. Add the product license.
     <script src="[Your Script Path]/license.js" type="text/javascript"></script>
  5. Add the column definition.
      var countries = ['US,Germany,UK,Japan,Italy,Greece'];
                  var data=[];
                   for(var i = 0; i<100; i++){
                           date: new Date(2015, i % 12, i % 28),
  6. Add the initialization code for the Spread.Views control in a DOM (Document Object Model) element with grid1 as the ID.
     var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, new GC.Spread.Views.Plugins.GridLayout());
  7. Create the target DOM element for the Spread.Views control.
     <body style="margin:0;position:absolute;top:0;bottom:0;left:0;right:0;font-size:14px;">
       <div id="grid1" style="height:100%"></div>

Note: The licensekey.js file should contain the following license string. Replace the text in quotes with your actual license key string.

GC.Spread.Views.LicenseKey = "your license key";