New Features in Dojo Grid 1.2

By on October 22, 2008 11:10 am

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):

Gasket Lookup

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:

Gasket Lookup

Part Number Type Thickness I.D. O.D. Min. Temp. (F) Max. Temp. (F) Max. Pressure

[Live Example]
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:

Part Number Type Thickness I.D. O.D. Min. Temp. (F) Max. Temp. (F) Max. Pressure

[Live Example]
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):

Part Number Type Thickness I.D. O.D. Min. Temp. (F) Max. Temp. (F) Max. Pressure

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.

[Screencast]
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:


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:

Part Number Type Thickness I.D. O.D. Min. Temp. (F) Max. Temp. (F) Max. Pressure

[Live Example]
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:

Part Number Type Thickness I.D. O.D.

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:



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);
});

[Live Example]
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:


[Live Example]
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.

Comments

  • erick2red

    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

    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

  • @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

    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

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

  • erick2red

    @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.

  • 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

    @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…

  • 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

    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,

  • 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

    @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

    @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

    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

    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

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

    erick

  • Eric

    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.

  • @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

    @kzpy: Could post some example?

    thanks

  • erick2red

    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

    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

    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

  • 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

  • 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

    @nathan

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

    lukasz

  • Zed

    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

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

  • lukasz

    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

    Hello,

    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

    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.

  • 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

    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

    @nathan,

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

  • WenYuan

    @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

    Hi,

    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

    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

    @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.

  • paulbrickell

    It’s great to have examples in markup, for those of using template technologies. Thanks for those.

    How about a ‘range’ selection, so I could select a group of cells? The way you might in a spreadsheet?

  • jschanhals

    I have a cell that may or may not be editable based on the value of another cell. I have been unable to determine how to turn editing on/off for a particular cell. The view structure looks like var view = [{ name: ‘Limit’, width:’50px’, field:’Timelimit’, editable:true }, { name: ‘Order’, width:’100px’, field:’Orderid’ }]; Whenever the OrderId is blank, the TimeLimit cell is not editable. I have tried connecting to the following callbacks – onCellClick, onCellFocus, onStartEdit and attempted to change the cell’s editable field there. In the onStartEdit, I am successful in not getting the text box for editing – the first time. After that, no editing will take place. Its probably because I changed the editable value and there is code after the callbacks that depends on this value not changing. Its interesting also, that internally, the calls are to DataGrid.onCellClick, DataGrid.onCellFocus, DataGrid.onStartEdit, but the callbacks are in reverse order (onStartEdit, onCellFocus, onCellClick).

    How can I change the cell’s editable field – either as the result of a callback or after the fetching of the store’s data?

  • @jschanhals:
    I believe one way to do this is to redefine the canEdit function:
    grid.canEdit = function(cellIndex, rowIndex){
    // determine whether or not the given cell is editable based
    }

  • jschanhals

    @Kris:

    Thanks – that worked!

  • Rob T.

    I’m having a problem getting the 1.2(.3) grid to resize correctly, it won’t grow past it’s original size when displayed. If I resort the columns the grid will grow to fill the contain.

    My layout is two content panes dividing the screen into top & bottom. The top pane has a tab container with the grid in a content pane inside of the tab. The layout id done programmatically, however the grid inside the table is declared through markup.

    Resizing works correctly with Dojo 1.1, but broke when I switched to 1.2.3.

    Any ideas?
    Thanks,
    –Rob

  • Sean P

    I know this is probably a stupid question, however I’m not sure how to handle this (not a javascript person).

    In my controller, I put convert a java ArrayList into a JSONArray, then put this array into the ModelAndView (mav.addObject( “json”, jsonObj );). I’m just not very clear how this gets coded via the markup? What is the best way to handle this for the grid?

    I’ve tried some basics or creating a store via:

    var jsonStore = new dojo.data.ItemFileReadStore({data:json});

    Then in the grid setting the store to jsonStore. Obviously this isn’t working, but am I even close here?

  • Marc

    Is it possible to create an image (using the formatter function) which can be dragged from the grid into a different DND destination?

    Thx!

  • John

    How did you make the wheel image show up based on type of 0 and 1 in the data?…

  • Hi,

    I would like to have a feature in this grid.
    The columns position, width, and the colums shown/hidden of the last shown should be stored and processed the next time the grid is viewed.

    I would be a nice feature if the grid properties are saved and used when a user comes back…. and so it becomes more customizable for the users

  • gao

    I tried to run your examples with dojo 1.3. Briefly, I just copied all the non-dojo files to a dojo 1.3 directory and ran the examples. No data showed up. Why? Thanks.

  • gao

    I have found out the reason for some of the examples, e.g.dojo_data_1.html and dojo_data_2.html, that failed to show data in the grid after copied over to the new directory for dojo 1.3. The answer is in this article: “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.”.

    Not sure why these examples work OK in the place after the tar filed extracted.

  • Ray

    Thank you Bryan for the great article. I have been cruising along with hooking graphics on a map to rows in a grid until I started compatibility checking with IE7.

    I’ve noticed the hiding context menu causes a problem with IE7. It seems that when you unload the doc it generates a JS error, “‘this.domNode.parentNode’ is null or not an object”. It comes from Dojo code. I’m using Dojo 1.2.3.

    Both the context menu hiding examples here also generate the error. For example the context example here http://www.sitepen.com/labs/code/grid/new_grid_features/column_hiding_context.html.

    Any guidance will be greatly appreciated. I’ve scoured with searches and can’t believe I haven’t come across anyone else with the error.

  • matt bigham

    How do you allow some one to print from a grid. the grid only seams to print out the top, left most rows and columns?

  • Marco

    First of all, thank you Brian for this great article. I know it’s possible to make the whole grid reorderable by setting columnReordering to true, but is it possible to make this configuration at column level, i.e. making some columns reorderable and others not? In case it is, How can I do this? Thanks in advance.

  • Tarun

    How can we add a row in the middle or top of a grid??I’ve been searching it but the only example i got was adding it to last.Thanks in Advance

  • Satyanarayana

    Hi,
    I tried to run your example files using dojo 1.3. but the grid is not shown. when i applied startup call on grid object, it’s getting displayed. please explain the reason. So to perform startup() call, i put a button in the page. but if that button pressed for more times, the grid size getting increased. please clarify the reason for this.

  • Satyanarayana

    i created the grid using javascript code.

  • Satyanarayana

    sorry….. the grid size is getting increased when i click on column header for sorting the content.

  • Eric

    is it possible to filter the list from a selected value in the title row?

  • Sathya

    Can we able to apply/update the cell value if we move out of the grid?

    I tried “commitOnBlur” as true in _base.js but still onblur event listener is not updating the value.

    Any workaround available for onblur issue?

    I am using Dojo 1.2.

  • I’m looking for a way to set a custom editor specific to a cell and not the entire column. Has this been done already, if not where would the connection be set?

  • Jamie

    Does anyone know a way or have an example where the grid is displayed as a properties type grid. Where the field columns are on the left and the field values are on the right?

  • Leon

    I need to use DataGrid,but the data i receive from other channel-pushlet via ajax connection,I just need to add new row to grid and every 10ms i”ll populate the cells myself,so i don’t have url for any version of Store that requires data sources.
    How i can add new rows without using ***Store?

  • kaczmar2

    Does anyone have an example of the dojox.grid.DataGrid being used as the base class for a custom widget. I cannot get my custom widget to render data when I inherit from the DataGrid.

  • Vinoth

    I need to add an custom attribute in a HTML TR element in the data grid created. Can you help me to sort out this issue ?

  • Jekser

    What is about “commitOnBlur” question ???
    I’m using dojo 1.4 and have the same problem :(
    I need to validate user input, and prevent cell blur by error.

  • I’m also looking for a way to set a custom editor specific to a cell and not the entire column. Has this been done already, if not where would the connection be set?

  • neil

    This was awesome help, thank you!

    Thought I’d note my final version of the context-menu version. While there is a link to your programmatic example, the menu is still in markup. I’m building out different grids for different users with user-defined “views” so to create this inside my class was important:

    var selectFieldsMenu = new dijit.Menu({jsId:”selectFieldsMenu”});
    var selectFieldsInnerMenu = new dojox.widget.PlaceholderMenuItem({label:”GridColumns”});
    selectFieldsMenu.addChild(selectFieldsInnerMenu);

    this.userGrid = new dojox.grid.DataGrid({……, headerMenu:selectFieldsMenu

    …works! Thanks again!

    Suggested addition (anybody?): HOW to detect the event of user-column resizing??? Nobody on IRC seems to have the answer, so far.

  • dave42

    Neil,

    The following snippet of code worked for me to hook into user-column resizing:

    dojo.forEach(dijit.byId(“layout_grid”).views.views, function(view) {
    dojo.connect(view.header, “doResizeNow”, function(inDrag, data) {
    console.log(“Row “+inDrag.index+” set to width “+data.w);
    });
    });

    The id of my grid is “layout_grid”. I hope the rest is clear. Still looking for a way to set a custom editor per-cell – I will post here if I find it.

  • neil

    Thanks, Dave42,

    I tried your code and I appreciate the way it got me thinking, but it didn’t do it for me. Still, it was great searching for an answer today and finding this. Here is my working version to detect column resize. What a booger. I tried to find an event for forever. I guess I don’t get inheritance in dojo-land just yet. (dojo.exists helps)

    this.connect(this.grid, “onResizeColumn”, function(){
    console.log(“onResizeColumn, mark in view list”);
    });

    Here this is my widget, but could be dojo.connect.
    Also, this.grid is my widget’s grid and could be a dijit.byId as Dave uses.

  • Mat

    Hi guys!
    I love the DataGrid but how do I deselect a row???
    I have a datagrid with ‘selectionMode=single’ and I want to be able to deselect currently selected row. How do I do that?
    Mat

  • Saurabh Jain

    To clear the selection call this._dataGrid.selection.clear();

  • Sudhish Jayaswal

    Hi,

    In regards to DOJO Grids query option, how can we build a compound query with a AND & OR Conditions. As fas as every example on the web I have seen, it uses a single condition eg. query=”{Id:’*’}”, what if we needed a query which like query=”{Id:’*’ && type:’Employee’}”, is that possible, please can you advise/assist/help.

    Thanks

  • abigail

    Data within the grid is extracted for printing but until the whole data grid is scrolled till the end of the data and available in the grid the print page does not display the data…how can I overcome this problem?
    Only the data available after the page loads is available for printing. Thank you for your time.

  • Mustafa

    hi how can i set options in a cell and the options filled dynamically ?

  • jack

    how can i shift the row select column order in the datagrid ?

  • Srikanth

    I have used escapeHTMLInData:false in my grid and using all form fields directly in grid.
    I am facing one issue when I have used text field, data is populating correctly but it is not allowing me to enter space in between data. kindly suggest me on this.