New Features in Dojo Grid 1.2 October 22nd, 2008 at 11:10 am by Bryan Forbes

The last article about the Dojo Grid focused on what has changed when creating a grid using Dojo 1.2. In this article we will be covering five new features of the Dojo 1.2 Grid: Dijit interoperability, selection modes, reorderable columns, header context menus, and column hiding. The examples in this article can be downloaded in a tarball (which includes the build profile I used) so you can play along from home!

Dijit Interoperability

The new grid now works with Dijit’s layout widgets natively. This comes in handy when you’re working on a project that needs to resize with the browser window. I’ll be using dijit.layout.BorderContainer to show this off (for more information on dijit.layout.BorderContainer, check out the documentation at dojotoolkit.org or dojocampus.org):

<div dojoType="dijit.layout.BorderContainer" jsid="container"
    id="container" design="headline">
    <div dojoType="dijit.layout.ContentPane" region="top">
        <div class="headerWrapper">
            <h1>Gasket Lookup</h1>
        </div>
    </div>
</div>

dojo.addOnLoad(function(){
    grid = new dojox.grid.DataGrid({
        query: { part_num: '*' },
        store: jsonStore,
        structure: [
            { field: "part_num", name: "Part Number", width: "auto" },
            { field: "type", name: "Type", formatter: formatType,
                sortDesc: true, width: "auto" },
            { field: "thick", name: "Thickness", formatter: formatFraction,
                width: "auto" },
            { field: "inner", name: "I.D.", formatter: formatFraction,
                width: "auto" },
            { field: "outer", name: "O.D.", formatter: formatFraction,
                width: "auto" },
            { field: "min_temp", name: "Min. Temp. (F)", formatter: formatDegrees,
                width: "auto" },
            { field: "max_temp", name: "Max. Temp. (F)", formatter: formatDegrees,
                width: "auto" },
            { field: "max_pres", name: "Max. Pressure", width: "auto" }
        ],
        rowsPerPage: 20,
        region: 'center'
    });
    container.addChild(grid);
    grid.startup();
});

Or using markup:

<div id="container" dojoType="dijit.layout.BorderContainer" design="headline">
    <div dojoType="dijit.layout.ContentPane" region="top">
        <div class="headerWrapper">
            <h1>Gasket Lookup</h1>
        </div>
    </div>
    <table id="gridNode" jsid="grid" dojoType="dojox.grid.DataGrid"
        query="{ part_num: '*' }" store="jsonStore" rowsPerPage="20"
        region="center">
        <thead>
            <tr>
                <th field="part_num" width="auto">Part Number</th>
                <th field="type" formatter="formatType" width="auto">Type</th>
                <th field="thick" formatter="formatFraction"
                    width="auto">Thickness</th>
                <th field="inner" formatter="formatFraction"
                    width="auto">I.D.</th>
                <th field="outer" formatter="formatFraction"
                    width="auto">O.D.</th>
                <th field="min_temp" formatter="formatDegrees"
                    width="auto">Min. Temp. (F)</th>
                <th field="max_temp" formatter="formatDegrees"
                    width="auto">Max. Temp. (F)</th>
                <th field="max_pres" width="auto">Max. Pressure</th>
            </tr>
        </thead>
    </table>
</div>

Programmatic Example | Markup Example

You might also note that creating the grid programmatically requires an extra call to grid.startup(). This is a change to follow the way Dijit widgets allow for delaying rendering of the widget until all child widgets have been created on the page. In markup, this gets called automatically by the Dojo parser.

Selection Modes

For 1.2, we refined the way selection functions by adding some new modes: none, single, multiple, and extended. “None” does exactly what you think it would: no selections can be made. “Single” only allows one row to be selected at a time. “Multiple” allows multiple rows to be selected. There are no keyboard modifiers: to deselect a row you click on it again. “Extended” allows single rows and ranges of rows to be selected. This is the default behavior and behaves the same as the 1.1 grid. In order to use the different modes you would pass them as a property to the widget constructor:

grid = new dojox.grid.DataGrid({
    query: { part_num: '*' },
    store: jsonStore,
    structure: [
        { field: "part_num", name: "Part Number" },
        { field: "type", name: "Type", formatter: formatType, sortDesc: true },
        { field: "thick", name: "Thickness", formatter: formatFraction },
        { field: "inner", name: "I.D.", formatter: formatFraction },
        { field: "outer", name: "O.D.", formatter: formatFraction },
        { field: "min_temp", name: "Min. Temp. (F)", formatter: formatDegrees },
        { field: "max_temp", name: "Max. Temp. (F)", formatter: formatDegrees },
        { field: "max_pres", name: "Max. Pressure" }
    ],
    rowsPerPage: 20,
    selectionMode: 'single'
}, 'gridNode');
sel.startup();

Or in markup:

<table id="gridNode" jsid="grid" dojoType="dojox.grid.DataGrid"
    query="{ part_num: '*' }" store="jsonStore" rowsPerPage="20"
    selectionMode="single">
    <thead>
        <tr>
            <th field="part_num">Part Number</th>
            <th field="type" formatter="formatType">Type</th>
            <th field="thick" formatter="formatFraction">Thickness</th>
            <th field="inner" formatter="formatFraction">I.D.</th>
            <th field="outer" formatter="formatFraction">O.D.</th>
            <th field="min_temp" formatter="formatDegrees">Min. Temp. (F)</th>
            <th field="max_temp" formatter="formatDegrees">Max. Temp. (F)</th>
            <th field="max_pres">Max. Pressure</th>
        </tr>
    </thead>
</table>

Programmatic Example | Markup Example

Reorderable Columns

For simple cell layouts in a view (one row of cells), we have implemented column reordering using Dojo’s drag and drop architecture. To use it, just pass columnReordering: true to your grid constructor:

grid = new dojox.grid.DataGrid({
    query: { part_num: '*' },
    store: jsonStore,
    structure: [
        { field: "part_num", name: "Part Number" },
        { field: "type", name: "Type", formatter: formatType, sortDesc: true },
        { field: "thick", name: "Thickness", formatter: formatFraction },
        { field: "inner", name: "I.D.", formatter: formatFraction },
        { field: "outer", name: "O.D.", formatter: formatFraction },
        { field: "min_temp", name: "Min. Temp. (F)", formatter: formatDegrees },
        { field: "max_temp", name: "Max. Temp. (F)", formatter: formatDegrees },
        { field: "max_pres", name: "Max. Pressure" }
    ],
    rowsPerPage: 20,
    columnReordering: true
}, 'gridNode');
grid.startup();

Or using markup (passing columnReordering="true" to the node):

<table id="gridNode" jsid="grid" dojoType="dojox.grid.DataGrid"
    query="{ part_num: '*' }" store="jsonStore" rowsPerPage="20"
    columnReordering="true">
    <thead>
        <tr>
            <th field="part_num">Part Number</th>
            <th field="type" formatter="formatType">Type</th>
            <th field="thick" formatter="formatFraction">Thickness</th>
            <th field="inner" formatter="formatFraction">I.D.</th>
            <th field="outer" formatter="formatFraction">O.D.</th>
            <th field="min_temp" formatter="formatDegrees">Min. Temp. (F)</th>
            <th field="max_temp" formatter="formatDegrees">Max. Temp. (F)</th>
            <th field="max_pres">Max. Pressure</th>
        </tr>
    </thead>
</table>

This new parameter will allow you to drag the columns within and between views within the originating grid that support dragging. Because of a bug in the 1.2 release, column reordering won’t work in IE7. This problem is being worked on for the 1.2.1 release. I’ve recorded a screencast that demonstrates how reordering will act (markup example) which you can watch if you click below.

mp4 | theora

Header Context Menus

We’ve also made it much easier to add a header context menu to your grids. Just pass an instance of a dijit.Menu to your grid using the headerMenu property of the constructor:

<div dojoType="dijit.Menu" jsid="gridMenu" id="gridMenu" style="display: none;">
    <div dojoType="dijit.MenuItem" onClick="alert('Hello world');">
        Enabled Item
    </div>
    <div dojoType="dijit.MenuItem" disabled="true">Disabled Item</div>
    <div dojoType="dijit.MenuSeparator"></div>
    <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"
        onClick="alert('not actually cutting anything, just a test!')">Cut</div>
    <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"
        onClick="alert('not actually copying anything, just a test!')">Copy</div>
    <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"
        onClick="alert('not actually pasting anything, just a test!')">Paste</div>
</div>

grid = new dojox.grid.DataGrid({
    query: { part_num: '*' },
    store: jsonStore,
    structure: [
        { field: "part_num", name: "Part Number" },
        { field: "type", name: "Type", formatter: formatType, sortDesc: true },
        { field: "thick", name: "Thickness", formatter: formatFraction },
        { field: "inner", name: "I.D.", formatter: formatFraction },
        { field: "outer", name: "O.D.", formatter: formatFraction },
        { field: "min_temp", name: "Min. Temp. (F)", formatter: formatDegrees },
        { field: "max_temp", name: "Max. Temp. (F)", formatter: formatDegrees },
        { field: "max_pres", name: "Max. Pressure" }
    ],
    rowsPerPage: 20,
    headerMenu: gridMenu
}, 'gridNode');
grid.startup();

Or in markup:

<table id="gridNode" jsid="grid" dojoType="dojox.grid.DataGrid"
    query="{ part_num: '*' }" store="jsonStore" rowsPerPage="20"
    headerMenu="gridMenu">
    <thead>
        <tr>
            <th field="part_num">Part Number</th>
            <th field="type" formatter="formatType">Type</th>
            <th field="thick" formatter="formatFraction">Thickness</th>
            <th field="inner" formatter="formatFraction">I.D.</th>
            <th field="outer" formatter="formatFraction">O.D.</th>
            <th field="min_temp" formatter="formatDegrees">Min. Temp. (F)</th>
            <th field="max_temp" formatter="formatDegrees">Max. Temp. (F)</th>
            <th field="max_pres">Max. Pressure</th>
        </tr>
    </thead>
</table>

Programmatic Example | Markup Example

Column Hiding

One feature that was asked for in the new grid was the ability to hide columns. This can now be achieved two ways. The first is by setting the hidden attribute to a boolean in the cell definition:

grid = new dojox.grid.DataGrid({
    query: { part_num: '*' },
    store: jsonStore,
    structure: [
        { field: "part_num", name: "Part Number" },
        { field: "type", name: "Type", formatter: formatType, sortDesc: true },
        { field: "thick", name: "Thickness", formatter: formatFraction },
        { field: "inner", name: "I.D.", formatter: formatFraction },
        { field: "outer", name: "O.D.", formatter: formatFraction },
        { field: "min_temp", name: "Min. Temp. (F)", formatter: formatDegrees,
            hidden: true },
        { field: "max_temp", name: "Max. Temp. (F)", formatter: formatDegrees,
            hidden: true },
        { field: "max_pres", name: "Max. Pressure", hidden: true }
    ],
    rowsPerPage: 20
}, 'gridNode');
grid.startup();

Or in markup:

<table id="gridNode" jsid="grid" dojoType="dojox.grid.DataGrid"
    query="{ part_num: '*' }" store="jsonStore" rowsPerPage="20"
    columnReordering="true">
    <thead>
        <tr>
            <th field="part_num">Part Number</th>
            <th field="type" formatter="formatType">Type</th>
            <th field="thick" formatter="formatFraction">Thickness</th>
            <th field="inner" formatter="formatFraction">I.D.</th>
            <th field="outer" formatter="formatFraction">O.D.</th>
            <th field="min_temp" formatter="formatDegrees" hidden="true">
                Min. Temp. (F)
            </th>
            <th field="max_temp" formatter="formatDegrees" hidden="true">
                Max. Temp. (F)
            </th>
            <th field="max_pres" hidden="true">Max. Pressure</th>
        </tr>
    </thead>
</table>

There is a catch to this method if you use markup. Because of a bug in the Grid’s code (which will be fixed in 1.2.1), you must set dojo.getAttr to dojo.attr immediately after including Dojo:

<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript">
    dojo.getAttr = dojo.attr;
</script>

The other way to hide columns is to call grid.layout.setColumnVisibility with the cell’s index and a boolean:

// to hide the third column
grid.layout.setColumnVisibility(2, false);

In the example I included, I added some dijit.form.CheckBox’s to the page that correspond to each column in the layout. They are initialized with the column’s starting hidden value and clicking on them sets the column visibility:

var checkBoxes = [];
var container = dojo.byId('checkBoxContainer');
dojo.forEach(grid.layout.cells, function(cell, index){
    var cb = new dijit.form.CheckBox({
        checked: !cell.hidden
 
    });
    dojo.connect(cb, "onChange", function(newValue){
        grid.layout.setColumnVisibility(index, newValue);
    });
 
    var label = dojo.doc.createElement('label');
    label.innerHTML = cell.name;
    dojo.attr(label, 'for', cb.id);
 
    dojo.place(cb.domNode, container);
    dojo.place(label, container);
    dojo.place(dojo.doc.createElement("br"), container);
 
    checkBoxes.push(cb);
});

Programmatic Example | Markup Example

Column hiding is all well and good, but some users want those CheckBoxes in a context menu. In order to do this, create your context menu like we did before, but add a dojox.widget.PlaceholderMenuItem to the menu and set its label attribute to “GridColumns” and the grid will take care of populating your menu with CheckBoxes:

<div dojoType="dijit.Menu" jsid="gridMenu" id="gridMenu" style="display: none;">
    <div dojoType="dojox.widget.PlaceholderMenuItem" label="GridColumns"></div>
</div>

Programmatic Example | Markup Example

The Dojo Grid has become a very popular feature in Dojo. With version 1.2, we have made significant improvements towards ease of use, performance, and functionality. As you can imagine by our significant investment in making the grid better, it is widely used by SitePen’s developers. Since we can’t think of all use-cases, please continue sending us your feedback and suggestions for making the grid great. And if you’re in a bind or get stuck along the way, we’re here to help.

erick2red says:
Posted October 22nd, 2008 at 1:06 pm

Brian: Great work with the grid, now it doesn’t have anything to envy to extjs grid.
i was waiting for this post for two weeks, so even now i’m wonder how to update the grid, cause i’m using dojox.data.XmlStore and it do not have Notification feature, so i don’t know how to update my grid…
any help

thanks in advance

Mandar U Jog says:
Posted October 22nd, 2008 at 1:57 pm

I am trying to figure out how to add a widget in a grid cell.
If I override the “get” method it calls me in the cell context but expects text back, not a domNode or a widget.

I am gotten around this my sending back innerHTML and then filtering onCellClick event and sending them to the appropriate place.

What is the recommended way to add a widget to the grid cell?

Thanks

Bryan Forbes says:
Posted October 22nd, 2008 at 2:31 pm

@erick2red: I’m not sure what you’re asking. If you’re porting from 1.1 to 1.2, instructions are in the last grid article linked at the beginning of this article. If you’re asking how to update the grid once the store updates, you’ll have to call grid._refresh(true) which will re-render the grid from scratch and you’ll lose your scroll position and previously viewed pages. Your best bet would be to extend the XmlStore and add notification to it.

@Mandar U Jog: Do you want a widget editor or a persistent widget in the grid cell. The first is covered in the last grid article. The second is a bit harder since you’ll need one widget per grid cell, which will get very expensive the more rows you add to the grid. You’ll also have to keep track of those widgets and make sure their nodes aren’t destroyed when a row’s innerHTML is overwriten.

denov says:
Posted October 22nd, 2008 at 6:27 pm

what would be the best way to grab a row dom node from the grid by some value either displayed in the grid or in the store attached to the grid?

thx

Nathan says:
Posted October 22nd, 2008 at 8:32 pm

Looks great Bryan! Thanks so much. I’ll be poking around with this tommorrow first thing!

erick2red says:
Posted October 23rd, 2008 at 5:09 am

@Brian: i also realize that would be the elegant option: to extend XmlStore and add Notification API to it, but i just don’t know how, i’ve been asking for days in dojox forum how to extend XmlStore and add Notification API, but…no answer..

anyway grid._refresh(true) work for me until, thanks, too much.

Nathan says:
Posted October 23rd, 2008 at 7:13 pm

Well after messing around all day, I’m starting to get really excited about all the stuff I’m going to be able to do with grid. Thanks again for the updates, Bryan.

That being said, there’s one thing that would really help development as I’m trying to get new grids working, which is better error handling/notifications…

I’m pulling data from an Oracle Portal content management db, shoving it into a arrayList of beans that model the db, and then serializing the array list (using the nifty flexjson.JSONSerializer) into a JSON object, and then handing it back to the datastore in Dojo.

This works pretty slick, except when it doesn’t! :) And unfortunately all the dojo grid tells me is “Sorry an error ocurred.”, without any indication in firebug where in the JSON object something isn’t quite correct. Its amazing how quickly I’ve come to rely on firebug, so I get pretty grumpy when stuff isn’t working and I’m not seeing any errors. Makes me think of the dark old days of IE4 and IE5 error messages…ARGGGH!

Anyways, some type of indication when a grid is loading of what’s gone wrong would be a huge plus!

Thanks again!
Nathan

erick2red says:
Posted October 24th, 2008 at 1:17 pm

@Brian: i’m remember from grid 1.0 to get the number of rows i use:
grid.model.count, but now model is gone, so how do i get that now

thanxs…

Jeremy Zerr says:
Posted October 27th, 2008 at 3:08 pm

One issue I have with the DataGrid is that when I edit a cell by double clicking on it, then I change the value to something, it isn’t really “changed” until you click somewhere else on the grid off of the cell you just edited. [verified by inspecting store.isDirty()]

I can live with this, its just like excel and other spreadsheets.

However, when a user clicks on a Save button (which would likely call store.save() behind the scenes), I would like some way to unfocus all of the cells currently being edited, so that the cell takes the edited value [value you see but isn’t really “changed” yet]. This would guarantee that what you see is what you save when you click save, which is an essential feature for any spreadsheet.

So, my question is:
Does anybody know a way using js to unfocus the cells currently being edited in a DataGrid?

Thanks,
Jeremy Zerr

srirao says:
Posted October 30th, 2008 at 6:57 am

Hi,

I am new to dojo. I am able to use DataGrid for displaying contents of an array.
I have two tables: Items[id,name, description] and ItemGroups[id,name,attribute1,item_id].
I want to display: ItemGroup attributes in a row and the items in that group as sub rows.
How can I do that?
In the declarative way, can I use table in a table?

Thanks,

Lance Spellman says:
Posted November 1st, 2008 at 6:48 am

Seems like a stupid question, but I can’t find how you do user-driven column resizing. I’d already discovered column reordering, but is column resizing supported?

@erick2red,

With the model gone, stores are expected to provide an attribute called numRows, so grid.store.numRows should give you what you’re after.

erick2red says:
Posted November 1st, 2008 at 3:29 pm

@Lance: thanks by the tips, but it seem does not work for me…i’m using a XmlStore so maybe that’s the issue, but thanks anyway…i’m still trying to count store rows

erick2red says:
Posted November 1st, 2008 at 3:40 pm

@Lance: that doesn’t work for me, i tried and nothing. maybe cause my store is a XmlStore so could be that, but…i’m still searching for how count my store rows

thanks anyway

Pesia says:
Posted November 3rd, 2008 at 2:29 pm

Great Work !!!
Thank you for your effort.

As you wanted some suggestions about useful features:
(Please note I do not request anything, those are just examples that could be useful in my past projects - so might be also useful for sb. else…)

1. reordering rows using “drag and drop”.

2. It would be really useful to be able to attach different cell editors in the same column of the grid (for example depending on
value in a cell in different column). I have such example in my application using dojo 1.1 but it needed really ugly hacking to make it work.
to make it clear:
I have 2 grids result-grid & filter-grid.
The filter grid is created dynamically basing on result grid.
It contains 3 columns: “column name”, “operator”, “value”.
User can add rows to this grid to setup filtering of main grid.
The first column 2 columns are simple:
“column name” includes select-list of all column names from result grid.
“operator” allows to select operators like greater, equal etc…
The problematic is third column “value” as this column is editable
and includes editor that allows to enter custom value. The type of editor is based on selected column type from the result-grid in “column name”.

So I Implemented “dynamic editor” which wraps standard editors
and switch the editor depending on the selected column name in select list.

use grid to provide user-defined filter of result set (in different grid). So in my filter grid (that is created automatically from result-grid)
after creating grid right now I’m replacing editor in specific cell:

this.gridWidget.layout.cells[2].editor = new DynamicEditor(gridReference, columnTypes)

gridReference allow to read value from first column & decide which editor to use in second column.
(So it displays for example calendar for dates / plain input for texts etc…)

Well it works but maybe someone has better suggestion?

Thank you again for great improvements :)

Chris says:
Posted November 8th, 2008 at 9:12 pm

Thanks for all your great examples. They work when I copy them to my server. However, I can’t get them to work when I switch to using a CDN to load the dojo.xd.js script. Has anyone gotten a grid to work using dojo from a CDN?

Thanks,
-Chris

erick2red says:
Posted November 10th, 2008 at 9:40 am

@Lance: and all the others, i just found, grid 1.2.1 has a propertie called rowCount, which seems to work

erick

Eric says:
Posted November 12th, 2008 at 8:51 am

How do you implement a custom sort with the 1.2 version of grid? Sounds like this may be a store function but I can not find any docs on the subject. Thanks.

kzyp says:
Posted November 12th, 2008 at 11:06 am

@Eric: this is indeed a store function, the grid triggers the fetch method on the store with a sort parameter based on the column that was clicked. The fetch parameter is described here: http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/dojo-data-design/read-api
You can certainly customize the fetch method to handle sorting as desired.

erick2red says:
Posted November 15th, 2008 at 11:33 am

@kzpy: Could post some example?

thanks

erick2red says:
Posted November 15th, 2008 at 2:56 pm

hi guys, I’m trying to change default sort of a dojo data and cant get how….
so, i’m using XmlStore …any help. my grid has a column iwth numbers and i didn’t like the “10″ before “9″…
i’m using declarative approach

lukasz says:
Posted November 16th, 2008 at 11:20 am

hello,
how do I get hold of the the current grid structure that reflects column resizing/rearrangements ? Ultimately I’d like to stash it in a cookie to make the changes permanent…

thanks,
lukasz

lukasz says:
Posted November 16th, 2008 at 11:48 am

another question - how do I get a context menu pop up when clicking on a given row ? it seems like grid eats up mouse events :o(

lukasz

Abbid Siddiqui says:
Posted November 17th, 2008 at 2:43 am

Hi want to call a map.graphics event from a simple tag (a situation like that of yahoo maps). So the image of map.graphics can be used by clicking on this image or by clicking a standard html based .
How to accomplish that task?
Please give me some code to understand that. If my question is not clear then please visit maps.yahoo.com

Nathan says:
Posted November 17th, 2008 at 8:54 am

Hey everybody….I’m using the “formmatter:formatValue” parameter in the the grid structure. My problem is that although I’m changing formatting of that data, I want the grid to retain its knowledge of the original values so that its able to perform sorts of the original value….any ideas?

lukasz says:
Posted November 17th, 2008 at 3:30 pm

@nathan

isn’t sorting performed on the dojo.data values ? formatter shouldn’t affect these ?

Zed says:
Posted November 20th, 2008 at 12:21 pm

Hello,

Is it possible to drag and drop an entire row out of the grid to another area of a web page ?
I’d like to be able to do that, but how ?

Nimbe says:
Posted November 21st, 2008 at 2:00 am

Well, one thing that could be implemented is the use of ScrollPane or other layout features from dojox.

lukasz says:
Posted November 21st, 2008 at 11:28 am

answering myself:

current grid structure:
this can be inferred by scanning grid.layout.cells, eg:

for(var k in grid.layout.cells){
console.log(grid.layout.cells[k].field);
console.log(grid.layout.cells[k].name);
console.log(grid.layout.cells[k].unitWidth);
console.log(grid.layout.cells[k].hidden);
}

it would be actually convenient to have something like
getStructure() implemented within grid class itself to make
easier to implement persistent user-edited structure

context menu for rows:
these can be created after hooking up to onRowClick (or some other
event listed in dojox/grid/_Events.js).

Bou says:
Posted December 3rd, 2008 at 7:06 am

I’am new to dojo and I am playing with the grid, a very nice piece of work ..
I am looking for a king of “subpanel” instead of a subgrid in the grid.The row should expand not in a subgrid but in a subpanel where I can put text etc…
Anybody any idea how to do this.

Philip says:
Posted December 9th, 2008 at 8:42 am

This looks very interesting, but I’m getting extremely frustrated trying to get it to work on my computer. I downloaded release 1.2.2 and started building my application. Then I wanted to add a DataGrid, and so I tried to glean some information from here, however I can’t get it to actually work in the application. The headers show up but not the data, and in Internet Explorer everything after where the DataGrid is supposed to be is broken (simple text rather than TitlePanes, for example). If I download the tarball above, the examples work fine, but if I try to copy in my existing HTML/CSS files into that build, they don’t work (TitlePanes for example). What’s the point of showing examples off a custom build without explaining how they can be implemented in the standard releases? I seem to be getting so close but I just can’t figure out how to use the DataGrid properly in the standard release structure.

Nathan says:
Posted December 9th, 2008 at 11:09 am

Bryan or whomever might know,

In a previous blog article, I believe you mentioned that “checkboxes” in the grid would be available in grid 1.3…? Is this still the case? Any time frames on that?

I find the “dojox.grid.cells.Select” a little clunky for a simple true/false type of interface requirement (plus it doesn’t seem to change the value until you’ve clicked OUT of the cell!!???)

Anyways, just looking for a time frame.. on grid 1.3?
Thanks!

Philip says:
Posted December 9th, 2008 at 2:02 pm

Just thought I would post a follow-up. (Why is it you always figure out the problem *after* you post?) I found out that the problem was that my DataGrid was part of an external, href ContentPane. When I copied the relevant portion directly into the main document, it worked perfectly. Perhaps that will be helpful to someone else.

denov says:
Posted December 16th, 2008 at 7:21 pm

@nathan,

see dojox.grid.cells.Bool for the checkbox in 1.2

WenYuan says:
Posted December 16th, 2008 at 10:49 pm

@Jeremy Zerr,
Q:Does anybody know a way using js to unfocus the cells currently being edited in a DataGrid?
A:grid.edit.apply() or grid.edit.cancel()

Hope helps.

Hira says:
Posted December 17th, 2008 at 8:54 am

defenetly the next big thing would be allowing users simply to drag & drop columns of the grid. That would make a really great feature ! I can think of dozens of cool applications to this…

Manjunath says:
Posted January 1st, 2009 at 1:56 am

Hi Bryan,
I am new to DOJO, was trying to build a data grid. When the grid is rendered it displays two check boxes & a messeage “Sorry, an error occured” i do not have any clue why this is happening. Could you please help me in resolving this error. We are using struts 2 + ajax & dojo, below is my code

dojo.require(”dojo.data.ItemFileReadStore”);

var jsonStore;
jsonStore = new dojo.data.ItemFileReadStore({url: “${jsonUrl}”});

var grid = new dojox.grid.DataGrid({
id: ‘grid’,
query: {},
store: jsonStore,
structure: layout
}, ‘gridNode’);

Title
Client Name
Due Date

Ben says:
Posted January 6th, 2009 at 1:25 am

@Manjunath

You need to call grid.startup() after creating the DataGrid object. I don’t know why or how the examples here work without it, but it is necessary.

Categories

Archives

Search

New Features in Dojo Grid 1.2 October 22nd, 2008 at 11:10 am by Bryan Forbes

Dijit Interoperability

Selection Modes

Reorderable Columns

Header Context Menus

Column Hiding

37 Responses to “New Features in Dojo Grid 1.2”

Leave a Reply