dijit widget to Grid?

Submitted by garthfield on Tue, 12/11/2007 - 16:48.

DojoX Support

I'm trying to add a dijit widget to a custom grid column, programmatically. The following code works however the checkbox that is added is not "dijified". Has anyone managed to programmatically add a dijit widget to a dojox grid?

function customColumn() {
  var html = '';
  return html
}

var view = {
  cells:  [[
    { name: "First name", , field: "first_name" },
    { name: "Last name", field: "last_name" },
    { name: 'Action', formatter: customColumn }
    ],
]};

var layout = [ view ];

Login or register to post comments
Unsubscribe post

take a look at dojox/grid/tests/test_edit_dijit.html

Submitted by peller on Tue, 12/11/2007 - 19:45.

There appear to be some clipping issues we need to work out in some browsers (Safari, iirc) but this shows how to use wrappers to include your favorite Dijits as well as provide special formatting routines for i18n.

It ain't pretty, but...

Submitted by Jo-jo on Thu, 12/13/2007 - 21:28.

People may well spit on me and call me names for doing the whole 'widgets-in-widgets' thing, but it can be kinda sexy if you can get around all of the issues. (And there are quote a few.)

IIRC, this was pulled together from numerous places in the Dojo test tree... dojox/grid/tests/test_subgrid.html springs to mind.

Note that the standard disclaimer applies... I have this working in a number of scenarios, but of course YMMV.

Example as derived from above:

<javascript>
var customColumn = function(inRowIndex) {
if (! dijit.byId('briefGrid').model.data[inRowIndex]) {
// Don't act before the data exists
return;
}

// Create a unique placeholder node id
var nodeId = dijit.byId('briefGrid').id + '_row' + inRowIndex + '_ph';

// Create an event to occur after the node has been created
setTimeout(function() {
if (! dijit.byId(nodeId)) {
// Only instanciate the widget once
var newWidget = new dijit.form.CheckBox({}, dojo.byId(nodeId));
// Do stuff with newWidget here if you're so inclined
}
}, 1);

// Return the node as content for the grid
return '<div id=' + nodeId + '></div>';
}

var view = {
cells: [[
{ name: "First name", , field: "first_name" },
{ name: "Last name", field: "last_name" },
{ name: 'Action', get: customColumn }
],
]};

var layout = [ view ];
</javascript>

<html>
<div dojoType="dojo.data.ItemFileReadStore" jsId="store" url="json/people.json"></div>
<div dojoType="dojox.grid.data.DojoData" jsId="model" rowsPerPage="20" store="store" query="{ first_name: '*' }" clientSort="true"></div>
<div id="briefGrid" dojoType="dojox.Grid" model="model" structure="layout"></div>
</html>

It's not pretty, it's probably not a great idea(tm), but it's got me out of a couple of "right pickles". Note that funny focus issues present themselves with widgets and their parents... often it's a case of stomping default handers here and there, but that's a case by case thing. (I also haven't tested this exact example, just modified it alongside something I have on-hand.)

Anyone wanting to thrash me over this atrocity may do so publicly in #dojo. ;-)

Jo-jo.

Using an XML file to pass as data for grid

Submitted by raghubetter on Fri, 12/14/2007 - 07:05.

Using an XML file to pass as data for grid
can anyone tell me how is it possible to pass a xml file directly to data grid in dojox, so that we wont be converting it to json or rails object or multi-dimensional array, if an example is given it will be helpful. thanks in advance

Thanks for showing me that.

Submitted by garthfield on Fri, 12/14/2007 - 12:22.

Thanks for showing me that. This example seems to show how to embed a dijit widget to be used for editing a cell's contents. I just want to add a dijit widget for any other action. For instance I want to add a Button widget that when clicked will call the formatter function and retrieve which row was clicked before redirecting to a different URL.

Poof

Submitted by clogan on Fri, 04/03/2009 - 21:12.

I think I've tried this a few weeks back and this works until the grid gets resized and then, poof, like magic it is gone. Also the grid does not resize the row to the widget, so grid height is off.

Does anybody know how to conditionally include other widgets in a given row-cell depending on value? In other words, I have a column assigned to a field and depending on that field value, use a specific widget to represent data from a different data field in the same record (dijit.ProgressBar for meas. progress of a status field (in progress)). To express more concretely: A column is assigned to a status field. If the status value is "In Progress", get the progress field value and display a ProgressBar (bound to that field, so it updates). If not "In Progress", display HTML text or images (that are static) based on other fields.

I'm using 1.3 for this. I've seen another example of someone defining a digit that is not in the "defined/accepted" list of widgets for a grid cell and subclasses another type, but I can't seem to get the example to work and I need it to be more dynamic too - that is choose a widget or static HTML depending on value.

I've been searching all over, have read through most of "Mastering Dojo", and have walked the API, and can't seem to figure out how to make this work. Any ideas? I'm lost in the details of how grid works. Does someone have a flow for DataGrid outlined w/ description of what each step does - this is very challenging and I may just have to settle for "get" and static html text.

Thanks.

Search