Using dojo DataGrid as a DOM object
Dojo DataGrid (dojo 1.3) Using DOM Object
Since I started using the dojo DataGrid I realized that there are some basic methods that are missing or hidden from the API. It is not so obvious how to achieve functionalities like setItems or getFilteredItems.
Prepare the web page:
Assuming the dojo library resides in the same directory as your web page, I will reference the necessary items inside theheader tag of the web page.
Import CSS stylesheets (in web page header)
<style>
@import"dojo-release-1.3.1/dijit/themes/tundra/tundra.css";
@import"dojo-release-1.3.1/dojo/resources/dojo.css";
@import"dojo-release-1.3.1/dojox/grid/resources/Grid.css";
@import"dojo-release-1.3.1/dojox/grid/resources/tundraGrid.css";
</style>
Include dojo.js (in web page header)
<script type="text/javascript"src="dojo-release-1.3.1/dojo/dojo.js"djConfig="parseOnLoad:true, isDebug:true"></script>
Include data grid files (in web page header)
<scripttype="text/javascript">
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileWriteStore");
</style>
Creating the DataGrid
Inside the body tag I will create a container to host my DataGrid widget:
<divid="container"></div>
, and than the DataGrid in few steps:
- Create items
- Create a grid data object with the items
- Create a store containing the grid data
- Create a layout for the grid
- Create a configuration object for the DataGrid
- Create the DataGrid object
- Invoke the startup() function.
<script type="text/javascript">
var items = [
{partNumber: "A1JFHT",serialNumber:"T3 LLB",description:"T3 LLB for lab"},
{partNumber: "A2JFHT",serialNumber:"T3 ASD",description:"T3 ASD for lab"},
{partNumber: "A3JFHT",serialNumber:"T23 LLB",description:"T23 LLB for lab"}
];
var gridData = {
identifier: "partNumber",
label: "partNumber",items: items
};
By setting the identifier to be partNumber, the datagrid will treat it as a unique ID and we must not have duplicates of ID's, otherwise the data will not show up in the grid.
var fileWriteStore = new dojo.data.ItemFileWriteStore({data: gridData}); //^^
var layout = [{cells:[[
{field: "partNumber", name: "Part Number", width: "100px"},
{field: "serialNumber", name: "Serial Number", width: "100px"},
{field: "serialNumber", name: "Description", width: "230px"}
]]}];
var cfg = {
id: "mytable",
jsId: "mytable",
widgetId: "mytable",
store: fileWriteStore,
clientSort: true,
rowsPerPage: 20,
rowSelector: '20px',
structure: layout,
style: "width: 500px; height: 200px; font-size: 14px;"
};
var widget =new dojox.grid.DataGrid(cfg, "container");
widget.startup();
</script/span>>
Get All Items
To get all items in the DataGrid it is not enough just to get the array of items from the store.
e.g.
function getAllItems(){
return widget.store._arrayOfTopLevelItems;
}
The problem with this method might be visible when you have a large amount of rows in the DataGrid, then you will receive only the rows that are visible on the browser or a little bit more (loaded items only), the rest will be null references in the array. The DataGrid is smart enough to fetch onto the cash only the data that is visible to the user which sometimes can be a problem, but if you scroll slowly all the way down to the bottom, all rows will be cashed in the memory such that a call to getAllItems() will return all rows. Filtering the grid rows using the setQuery method or the filter method will cause the same problem when trying the get all items after applying a filter.
To handle this problem I explicitly fetched all rows prior to returning all items. After stumbling upon the dojo library I managed to extract the following code to load data grid items:
function loadItems(){
widget.store.fetch({
start: 0,
count: widget.rowCount,
query: widget.query,
sort: widget.getSortProps(),
queryOptions: widget.queryOptions,
isRender: widget.isRender,
onBegin: dojo.hitch(_widget, "_onFetchBegin"),
onComplete: dojo.hitch(_widget,"_onFetchComplete"),
onError: dojo.hitch(_widget, "_onFetchError")
});
}
By setting the count to be the number of records in the DataGrid I'm forcing the widget to fetch all records.
The function below shows how to get all items ignoring filters.
function getItems(){
var items = [];
var count = _widget.rowCount;
loadItems();
for(var i = 0 ; i < count ; i++){
var item = widget.getItem(i);
items.push(item);
}
return items;
}
The method getDisplayedItems will return only the rows that are presented in the browser.
function getDisplayedItems(){
var items = [];
var count = _widget.rowCount;
for(var i = 0 ; i < count ; i++){
var item = widget.getItem(i);
if(item !=null){
items.push(item);
}
}
return items;
}
Get Selected Items
function getSelectedItems(){
return widget.selection.getSelected();
}
Filter Rows
This example shows how to filter the rows in the DataGrid using the setQuery method:
function filter(query){//query example: {fieldName: 'regularExpression' }
widget.setQuery(query,{ignoreCase:true});
}
Connecting Dojo Events
The argument f is a function to be invoked on an event.
function connectOnMouseDown(f){
return dojo.connect(widget, "onMouseDown", f);
}
function connectOnHeaderCellClick(f){
return dojo.connect(widget, "onHeaderCellClick", f);
}
function connetcOnStyleRow(f){
return dojo.connect(widget, "onStyleRow", f);
}
function connectOnRowSelected(f){
return dojo.connect(widget, "onRowClick", f);
}
Set Data
To set the data I'm creating a new Store and invoke the setStore method
function setData(arr){
var gridData = {label: "partNumber",items: arr};
var fileWriteStore = new dojo.data.ItemFileWriteStore({data: gridData});
widget.setStore(fileWriteStore);
}
Replace Items
In order to replace an Item I am removing the obsolete item and create a new one, this method might cause ordering problem, the previous row would not reside at the same index as the new one. Hence, a good alternative is to update each one of the row fields usingwidget.store.setValue(item,fieldName,newValue);
Remember the "partNumber" is the identifier of the grid
function replaceItem(item,newItem){
widget.store.deleteItem(item);
widget.store.save();
newItem["partNumber"] = item["partNumber"];
widget.store.newItem(newItem);
widget.store.save();
}
Update Items
Here I am iterating over one's item fields and update each with the corresponding newItem's value
function updateItem(item,newItem){
for(var k in newItem){
if(k != "partNumber"){
if(newItem[k].constructor == Object){
//ignore object types
}
elseif(newItem[k].constructor == Array){
//ignore array types
}
else{
widget.store.setValue(item,k,newItem[k]);
}
}
}
}