CODEWITHSUNDEEP
dojomigrationstoredojox.grid.datagrid
elfwyn
elfwyn

Reputation: 568

How to migrate a dojo (dojo 0.x) FilteringTable to a DataGrid in (dojo 1.6)?

Im migrating and extending an existing Web Application based on a very old Dojo Framework.

Declarative Setup of the table:

OLD

<table dojoType="FilteringTable" id="dataTable" 
valueField="f_id" multiple="false" alternateRows="true">
  <thead><tr>
    <th field="f_fname">Firstname</th>
    <th field="f_lname">Lastname</th>
  </tr></thead>
</table>

NEW

<table dojoType="dojox.grid.DataGrid" id="dataTable">
  <thead><tr>
    <th field="f_fname">Firstname</th>
    <th field="f_lname">Lastname</th>
  </tr></thead>
</table>

Initializing Table Store:

OLD

var tab = dojo.widget.byId("dataTable");
if(tab){
  tab.store.setData([]);
}

NEW

var tab = dijit.byId("dataTable");
if(tab){
  if(!tab.store){
    tab.store = new dojo.store.Memory({data:[]});
  }
  else{
    tab.store.setData([]);
  }
}

Refreshing the Data:

OLD/NEW

tab.store.setData(result.array);

The old version Table is filled with the Data, the new version table remains empty. The Data array retrieved in both cases is exactly the same.

So I wonder what differences should be adressed between the store used in the old FilteringTable and the store api used for the new dojox DataGrid.

Since I am new to using data stores in general I might be missing some crucial parts.

Visually the new Grid seems to be fully functual.

update

tab.update(); // tab = dojox.grid.DataGrid

does nothing to bring the visual part up to date. Shouldn't the DataGrid update when the store data changes, or is there some manual action necessary?

In fact the DataGrid does not seem to react to changes in the Memory-Store at all. Maybe there is some wiring missing here?

update

I have been wiring up the Grid with a Memory store declaratively:

<div dojoType="dojo.store.Memory" jsId="memStore"></div>
<table dojoType="dojox.grid.DataGrid" id="dataTable" store="memStore">
  <thead><tr>
    <th field="f_fname">Firstname</th>
    <th field="f_lname">Lastname</th>
  </tr></thead>
</table>

First thing that I get is an error in _setStore() in DataGrid.js saying:

this.store.getFeatures is not a function

. Is it possible that DataGrid is not compatible with all stores? I was of the impression that the store api was standardized in 1.6.

If so, is there an alternative Store to use with javascript array input. (as seen above)

Upvotes: 1

Views: 1261

Answers (1)

elfwyn
elfwyn

Reputation: 568

A friendly poster on an other Forum (Millennium) has provided me with an answer:

Since Dojo 1.6 there is a new Access Scheme for stores in Dojo.

Since dojox.grid.DataGrid does not support those stores directly there is a wrapper Class provided in dojo.data called dojo.data.ObjectStore.

So in order to get my Memory Store to work it would need to be initialized with:

var tab = dijit.byId("dataTable");
if(tab){
  if(!tab.store || !tab.store.objectStore){
    tab.store = new dojo.data.ObjectStore({
                    objectStore : new dojo.store.Memory({data:[]})
                });
  }
  else{
    tab.store.objectStore.setData([]);
  }
}

and updated with:

tab.store.objectStore.setData(result.array);

However there is still a little shortcoming at the moment: The Grid does not update its data autmatically, but only after sorting a column. Using tab.update() does not work.

update

When changing the data with objectStore.put() or objectStore.setData() I now use the _refresh() function of the Grid afterwards. While it is a private function I still have no better way to update the Grid.

Upvotes: 4

Related Questions