Login Register

Grid Tag

Grid Sizing

By default, the grid fits exactly in the parent DOM node provided for it. If all of the rows do not fit, a vertical scroll bar appears. Likewise, if all the columns don't fit, the horizontal scroll bar appears. Nothing surprising there.

The following properties resize the grid to fit all of the columns. In essence, setting either of these makes the appropriate scroll bar disappear.

  • autoHeight: resize the grid height to fit all of the rows.
  • autoWidth: resize the grid width to fit all the rows.

You may either set these on the Grid tag itself, or set the properties through JavaScript and call dojox.grid.Grid.update() to redraw. You can also resize the width and height of the container (dojo.contentBox is good for this) and call update().

dijit.Grid
A grid widget with virtual scrolling, cell editing, complex rows, sorting, fixed columns, sizeable columns, etc.
Attributes
autoHeight Boolean If autoHeight is true, grid height is automatically set to fit the data.
autoRender Boolean If autoRender is true, grid will render itself after initialization.
autoWidth Boolean If autoWidth is true, grid width is automatically set to fit the data.
defaultHeight string default height of the grid, measured in any valid css unit.
elasticView Integer One of the views in the grid may be "elastic", that is: expanding or contracting to fill the remaining size when all non-elastic elements are placed. By default, the middle view is elastic. Specifying this property makes the indexed grid view elastic.
fastScroll Boolean flag modifies vertical scrolling behavior. Defaults to true but set to false for slower scroll performance but more immediate scrolling feedback
keepRows Integer Number of rows to keep in the rendering cache.
model String or Object Current grid data model. Should only be used for retrieving the model. Setting should be accomplished using setModel(newModel) as outlined below.
rowCount Integer Number of rows to display
rowsPerPage Integer Number of rows to render at a time.
singleClickEdit Boolean Single-click starts editing. Default is double-click
structure Object or String View layout defintion. Can be set to a layout object, or to the (string) name of a layout object.
Methods
addRow(/* Array */ inRowData, /* Integer */ inIndex) Add row inRowData after row[inIndex] in both displayed grid and model
String get(/* Integer */ inRowIndex) Get raw data at row inRowIndex in the current cell position.
dojox.grid.Cell getCell(/* Integer */ inIndex) Get the cell object (the column definition) in column inIndex
String getCellName(/* Integer */ inIndex) Get the column name of inIndex
Boolean canSort(/* Integer */ inSortInfo) Sort information, in sortInfo is 1-based index of column on which to sort, positive for an ascending sort and negative for a descending sort returns true if grid can be sorted on the given column in the given direction
Boolean getSortAsc(/* Integer */ inSortInfo) returns true if grid is sorted in an ascending direction.
Integer getSortIndex() returns index of sorted field
refresh() re-render the grid with the new data model
removeSelectedRows() remove all selected rows in displayed grid and model
render() Render the grid, headers, and views. Edit and scrolling states are reset. To retain edit and scrolling states, see Update.
renderAtIdle() Same as render, but wait until all background processing has completed.
resize() Call after setting width or height
resizeHeight() Call after setting just the height
setCellWidth(/* Integer */ inIndex. /* String */ inUnitWidth) Set column size to a given CSS unit width
setModel(/* dojox.grid.model */ inModel) set the grid's data model
setSortIndex(/* Integer */ inIndex, /* Boolean */ inAsc) Sets a sort column and direction (true=ascending, false=descending).
setStructure(/* dojox.grid.Structure */ inStructure) Install a new structure and rebuild the grid.
scrollTo(/* Integer */ inTop) Vertically scroll the grid to a given pixel position
scrollToRow(/* Integer */ inRowIndex) Scroll the grid to a specific row.
sort() sort on current sort field
update() Update the grid, retaining edit and scrolling states.
updateRow(/* Integer */inRowIndex) Change the number of rows.
updateRowCount(/* Integer */inRowCount) Update row count property to inRowCount
updateRowStyles(/* Integer */inRowIndex) Update the styles for a row after it's state has changed.

What happened to the turbogrid "get" parameter?

In the turbogrid website's documentation (which is what dojox.grid is based on, right?), it says there is a "get" attribute where I can specify a function that the grid can call on demand to populate the data for any given cell (no model needed)... I tried it under the dojox.Grid and it does not seem to be recognized. Is the "get" parameter supported in dojox.Grid?

I believe it is covered in

I believe it is covered in the Cell Options part of the Grid documentation: Cell Options

render() and update()

While update is supposed to contrary to render() "retain edit and scrolling states", I don't think it really does:

update: function(){
		// summary:
		//	Update the grid, retaining edit and scrolling states.
		this.render();
	}

(VirtualGrid.js / Dojo Toolkit 1.0.2)

Set the grid's structure and model programmatically (simple ex.)

I just started looking at dojo a few weeks ago as an alternative to YUI. I felt like the internationalization was better in dojo (and that was a requirement) so I've started using it where I can. One downside compared to YUI is that the documentation is not as good. So to help others like me getting started with examples here is one that loads a structure from JSON. Set the structure on the grid and then continues to set different models to show different data using the same structure.
I use this to show data that has been processed differently (like RAW data, 24 hour mean et c.).

First we have a structure in json format (structure.txt):

[{"cells": [[{"field": "date", "name": "Date", "width": "10em"},
             {"field": "col1", "name": "Column1"},
             {"field": "col2", "name": "Column2"},
             {"field": "col3", "name": "Column3"},
             {"field": "col4", "name": "Column4"}
             ]]
}]

The data (data.txt):

{"items": [{"date": "2007-12-27 00:00:00", "col1": "", "col2": "", "col3": 100.0, "col4": 999.0},
           {"date": "2007-12-28 00:00:00", "col1": "", "col2": "", "col3": 50.0, "col4": 12.0},
           {"date": "2007-12-29 00:00:00", "col1": "", "col2": "", "col3": 60.0, "col4": ""},
           {"date": "2007-12-30 00:00:00", "col1": "", "col2": "", "col3": 70.0, "col4": ""},
           {"date": "2007-12-31 21:20:00", "col1": "", "col2": "", "col3": 312.0, "col4": ""},
           {"date": "2007-12-20 00:00:00", "col1": "", "col2": "", "col3": "", "col4": 10.0},
           {"date": "2008-02-11 19:44:06", "col1": 82786.0, "col2": "", "col3": "", "col4": ""},
           {"date": "2008-02-09 21:34:00", "col1": 82786.0, "col2": 10455.0, "col3": "", "col4": ""}
           ]}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0.0/dojox/grid/_grid/tundraGrid.css";
        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css";
                #grid {                       
                        width: 500px;
                        height: 500px;
                }
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js" djConfig="isDebug:false, parseOnLoad: true"></script>
</head>
<body class="tundra">
<script type="text/javascript">
    dojo.require("dojo.parser");
    dojo.require("dijit.form.Button");
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dojox.grid.Grid");
    dojo.require("dojox.grid._data.model");
</script>
<button id="type1_btn" onClick="setGridType1()">Type1</button>
<button id="type2_btn" onClick="setGridType2()">Type2</button>
<button id="type3_btn" onClick="setGridType3()">Type3</button>

<!--The grid...-->
<div dojoType="dojox.Grid" id="grid" jsId="grid"></div>
<script type="text/javascript">
        //When dojo has loaded set the structure dynamically from JSON and then set the default grid model
        dojo.addOnLoad(function(){
          dojo.xhrGet({
            url:"structure.txt",
                handleAs:"json",
                load: function(o, ioArgs){
                        console.debug(o);
                        dijit.byId("grid").setStructure(o);
                        return o;
            }     
          }
        );
        setGridType1();
        });

        function setGridType1(){/* Set stuff like heading as well to let the user know what data type is shown*/ setGridData('type1');}
        function setGridType2(){setGridData('type2');}
        function setGridType3(){setGridData('type3');}

        function setGridData(type) {
                var grid = dijit.byId("grid");
                //Using dynamic data the URL could be something like: url:'/ajax/jsonresponse/?get=dojo_grid_data&type='+type}
                //But for this example I use the same data for all models
                var store = new dojo.data.ItemFileReadStore({url:'data.txt'});               
                var model = new dojox.grid.data.DojoData(null, store, {query:{date: '*'}, clientSort:true});
                grid.setModel(model);
                grid.refresh();
        }
</script>
</body>
</html>

I hope that this is useful for someone.

Thanks,
Calle

How to remove a single row?

How do I remove a row?
Exists a method like remove(/* Integer */ inRowIndex)

I can't find it!

Try this...

Try this:

var inRowIndexes = new Array(1,5,7);
grid.model.remove(inRowIndexes);

Since inRowIndexes is an array, if you want to remove just one row, you would do something like:

var inRowIndexes = [52];
grid.model.remove(inRowIndexes);

or

grid.model.remove([52]);

thanks, it works! you are

thanks, it works!

you are very kind
bye