Using Dojo's DataGrid - Alayode/dojo-node GitHub Wiki

I am going to have to say that using Dojo's Grid to display data is really beneficial. Alhough there are several implementation for it . PragmaticBookShelf has a version they use but are not up to date so if you download the version 1.10 ( the latest version you will have some trouble following the book. ) I am creating a work around that merely updates the tutorial to a version that we can work with without banging our heads that we have to go searching for everything ourselves.

First, lets look at some code:

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

<script>
require(['dojo/_base/lang', 'dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/dom', 'dojo/domReady!'],
  function(lang, DataGrid, ItemFileWriteStore, dom){

  /*set up data store*/
  var data = {
    identifier: "wishId",
    items: []
  };

 var data_list = [
       { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
       { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
       { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
     ];


    var store = new ItemFileWriteStore({data: data});
var layout = [[
  {'name': 'Column 1', 'field': 'wishId', 'width': '100px'},
  {'name': 'Column 2', 'field': 'col2', 'width': '100px'},
  {'name': 'Column 3', 'field': 'col3', 'width': '200px'},
  {'name': 'Column 4', 'field': 'col4', 'width': '150px'}

]]

  /*create a new grid*/
  var grid = new DataGrid({
      id: 'grid',
      store: store,
      structure: layout,
      rowSelector: '20px'});

      /*append the new grid to the div*/
      grid.placeAt("gridDiv");

      /*Call startup() to render the grid*/
      grid.startup();
});

Now in your HTML Code....

<div id="gridDiv"></div>

This is pretty much all you need to get your code up and running, we can sit back and take a look at what is going on here first though.

⚠️ **GitHub.com Fallback** ⚠️