views:

3876

answers:

2

In the following sample data is only shown in the grid if the json data contains a name column -> the first grid shows data, the second not.

Why is this the case?

index.html: dojo grid

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/resources/dojo.css" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojox/grid/_grid/tundraGrid.css"&gt;
    <script type="text/javascript" 
      src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js" 
      djConfig="parseOnLoad: true, isDebug: true">
    </script>

    <script type="text/javascript">
      dojo.require("dojo.parser");
      dojo.require("dojox.grid.Grid");
      dojo.require("dojo.data.ItemFileReadStore");
    </script>

  </head>
  <body class="tundra">
   <span dojoType="dojo.data.ItemFileReadStore" 
      jsId="withNameStore" 
      url="WithNameColumn.json"
      clearOnClose="true">
    </span>
    <table id="withNameGrid"
        dojoType="dojox.grid.Grid" 
        store="withNameStore"
        clientSort="true"
        style="width: 20em; height: 20em;">
     <thead>
        <tr>
        <th field="ID" >ID</th>
        <th field="test">Test</th>
        </tr>
     </thead>
    </table>
    <span dojoType="dojo.data.ItemFileReadStore" 
       jsId="withoutNameStore" 
       url="WithoutNameColumn.json"
       clearOnClose="true">
    </span>
    <table id="withoutNameGrid" 
        dojoType="dojox.grid.Grid" 
        store="withoutNameStore"
        clientSort="true"
        style="width: 20em; height: 20em;">
     <thead>
        <tr>
        <th field="ID" >ID</th>
        <th field="test">Test</th>
        </tr>
     </thead>
    </table>
  </body>
</html>

WithNameColumn.json:

{
  "identifier":"ID",
  "label":"test",
  "items":
    [{"ID":2,"name":"name1","test":"dog"},
     {"ID":3,"name":"name2","test":"cat"},
     {"ID":4,"name":"name3","test":"mouse"}]
}

WithoutNameColumn.json:

{
  "identifier":"ID",
  "label":"test",
  "items":
    [{"ID":2,"test":"dog"},
     {"ID":3,"test":"cat"},
     {"ID":4,"test":"mouse"}]
}
A: 

Name column is not needed you do need however a map between property in the Data store and column name in the grid. This is done when defining the grid 'Layout' the 'field' property in the 'Layout' is the name of the column in the Data store (the name of the property to be exact) and the 'name' property in the 'Layout' is the column name in the grid.

 gridLayout = [{
  defaultCell: { width: 8, editable: true, type: dojox.grid.cells._Widget, styles: 'text-align: right;'  },
  rows: [
   { name: 'Id', field: 'id', editable: false /* Can't edit ID's of dojo.data items */ },
   { name: 'Date', field: 'col8', width: 10,
    type: dojox.grid.cells.DateTextBox,
    formatter: formatDate, 
    constraint: {formatLength: 'long', selector: "date"}},
   { name: 'Priority', styles: 'text-align: center;', field: 'col1', 
    type: dojox.grid.cells.ComboBox, 
    options: ["normal", "note", "important"], width: 10},
   { name: 'Mark', field: 'col2', width: 3, styles: 'text-align: center;', 
    type: dojox.grid.cells.CheckBox},
   statusCell,
   { name: 'Message', field: 'col4', styles: '', width: 10, 
    type: dojox.grid.cells.Editor, editorToolbar: true },
   { name: 'Amount', field: 'col5', formatter: formatCurrency, constraint: {currency: 'EUR'}, 
    widgetClass: dijit.form.CurrencyTextBox },
   { name: 'Amount', field: 'col5', formatter: formatCurrency, constraint: {currency: 'EUR'}, 
    widgetClass: dijit.form.HorizontalSlider, width: 10}
  ]
 }];
+1  A: 

Just add a query attribute to your element. Like this:

<table query="{ID:'*'}" ...>

This is because that will perform a query when requesting data from data store

liujinmarshall
I why this solves the problem, but it does.Thank's.
simon