Databases
StackOverflow2013
Postsdbo
POreading json with dojo to show in grid
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POreading json with dojo to show in grid
    primarykey
    data
    text
    <p>I have been struggeling all day to read a json file from server and view it via dojo datagrid. Please see the code snippets below and help me if possible :</p> <p>the html file is ::</p> <p> </p> <pre><code>&lt;head&gt; &lt;link rel="stylesheet" type="text/css" href="../../_static/js/dijit/themes/claro/claro.css" /&gt; &lt;style type="text/css"&gt; body, html { font-family:helvetica,arial,sans-serif; font-size:90%; } &lt;/style&gt; &lt;style type="text/css"&gt; @import "../../_static/js/dojox/grid/resources/Grid.css"; @import "../../_static/js/dojox/grid/resources/claroGrid.css"; .dojoxGrid table { margin: 0; } html, body { width: 100%; height: 100%; margin: 0; } &lt;/style&gt; &lt;/head&gt; &lt;body class=" claro "&gt; &lt;div id="gridContainer4" style="width: 100%; height: 100%;"&gt; &lt;/div&gt; &lt;/body&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: true"&gt; &lt;/script&gt; &lt;script type="text/javascript"&gt; dojo.require("dojo.data.ItemFileReadStore"); dojo.require("dijit.form.ComboBox"); dojo.require("dijit.form.Button"); dojo.require("dojox.grid.DataGrid"); dojo.require("dojox.data.CsvStore"); dojo.addOnLoad(function() { // our test data store for this example: var store4 = new dojo.data.ItemFileReadStore({ url: "http://localhost/test1.json"}); // set the layout structure: var layout4 = [{ field: 'abbr', name: 'Title of Movie', width: '200px' }, { field: 'name', name: 'Year', width: '50px' }, { field: 'capital', name: 'Producer', width: 'auto' }]; // create a new grid: var grid4 = new dojox.grid.DataGrid({ query: { abbr: '*' }, store: store4, clientSort: true, rowSelector: '20px', structure: layout4 }, document.createElement('div')); // append the new grid to the div "gridContainer4": dojo.byId("gridContainer4").appendChild(grid4.domNode); // Call startup, in order to render the grid: grid4.startup(); }); &lt;/script&gt; &lt;!-- NOTE: the following script tag is not intended for usage in real world!! it is part of the CodeGlass and you should just remove it when you use the code --&gt; &lt;script type="text/javascript"&gt; dojo.addOnLoad(function() { if (document.pub) { document.pub(); } }); &lt;/script&gt; </code></pre> <p></p> <p> </p> <p>The json is ::</p> <pre><code>{ identifier: 'abbr', label: 'name', items: [ { abbr:'ec', name:'Ecuador', capital:'Quito' }, { abbr:'eg', name:'Egypt', capital:'Cairo' }, { abbr:'sv', name:'El Salvador', capital:'San Salvador' }, { abbr:'gq', name:'Equatorial Guinea', capital:'Malabo' }, { abbr:'er', name:'Eritrea', capital:'Asmara' }, { abbr:'ee', name:'Estonia', capital:'Tallinn' }, { abbr:'et', name:'Ethiopia', capital:'Addis Ababa' } ]} </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USOleg
    1. USAnubis05
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COSo what exactly isn't working here? It seems to work fine for me if I throw it into a jsfiddle (only difference is I threw the data into the store directly rather than via separate URL): http://jsfiddle.net/LRnhu/1/ - if you're having a problem specifically pulling in the JSON externally, make sure the URL is correct and that it's referencing the same domain (since it uses XHR which isn't permitted across domains). Also as Oleg mentioned, having it in valid JSON format is a good idea.
      singulars
      1. POreading json with dojo to show in grid
      1. USKen Franqueiro
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload