Grid Tag
Submitted by criecke on Sat, 10/27/2007 - 01:57.
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. |
- Printer-friendly version
- Login or register to post comments
- Subscribe post
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:
(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):
{"field": "col1", "name": "Column1"},
{"field": "col2", "name": "Column2"},
{"field": "col3", "name": "Column3"},
{"field": "col4", "name": "Column4"}
]]
}]
The data (data.txt):
{"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": ""}
]}
<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:
grid.model.remove(inRowIndexes);
Since inRowIndexes is an array, if you want to remove just one row, you would do something like:
grid.model.remove(inRowIndexes);
or
thanks, it works! you are
thanks, it works!
you are very kind
bye