Skip to main content

dojo.dijit.grid: how much of the original dojo documentation can be used ?

3 replies [Last post]
c031917
Offline
Joined: 2008-09-17

I can use dojo.dijit.grid in Netbeans 6.1 and get a fine standard table with scrollbars.

Reading the dojo documentation

http://dojotoolkit.org/book/dojo-book-0-9/docx-documentation-under-devel...

i see advanced stuff like creating subrows, views etc. I see also how to control layout in detail.

When looking into jmaki doc the grid is not on the list at all.

1. Is the there a jmaki dojo grid doc available soon ?

2. are the original dojo features (besides the event stuff of course) accessible when using the jmaki version of the widget ? what is the syntax to do so ?

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
sloanb
Offline
Joined: 2003-09-14

What advanced features are you looking for. Currently we only implement the basic add/remove/ update etc.. What are you looking to do?

c031917
Offline
Joined: 2008-09-17

i would need all the layout capabilities like subrows plus sorting, filtering, coupled scrolling, cell editors. Dojo does a lot of this via DojoData:

<div>dojoType="dojox.grid.data.DojoData" jsId="model"
rowsPerPage="20" store="jsonStore" query="{ namespace: '*' }"
clientSort="true">
</div>

And some features happen on definition of the grid layout:

...
// a grid view is a group of columns
var view1 = {
cells: [[
{name: 'Namespace', field:0, width: "25em"}
],
[
{name: 'Summary', colSpan:"2", field:2}
]
]
};

var rowbar = {
type: 'dojox.GridRowView', width: '20px'
};

var fixedColumn = {
cells: [[ {name: 'Class', field:1, width:"25em"} ]]
};

var layout = [ rowbar, fixedColumn, view1 ];

....

How do all the dojo features relate to the jmaki version of the same widget ?

A typical example of a grid as i would like to use it in the jmaki universe:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test dojox.Grid Editing</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<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"
body {
font-size: 0.9em;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.heading {
font-weight: bold;
padding-bottom: 0.25em;
}

#grid {
border: 1px solid #333;
width: 40em;
height: 30em;
}
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="isDebug:false, parseOnLoad: true"></script>

<script type="text/javascript">
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
dojo.require("dojox.grid._data.dijitEditors");
dojo.require("dojo.parser");

function colorDescriptions(inRow) {
// Am not sure why this happens
if (model.getRow(inRow.index) === undefined)
return;
if (model.getRow(inRow.index).description != '')
inRow.customStyles = 'color:red';
}

</script>
</head>
<body class="tundra">
<div class="heading">Color Dijits with Examples Red</div>

<div dojoType="dojo.data.ItemFileWriteStore"
jsId="jsonStore" url="/dojoroot/dijit/tests/_data/dijits.json">
<script type="dojo/connect" event="onSet" args="item,attr,oldVal,newVal">
console.debug("About to change "+attr+" from "+oldVal+" to "+newVal);
</script>
</div>
<div dojoType="dojox.grid.data.DojoData" jsId="model"
rowsPerPage="20" store="jsonStore" query="{ namespace: '*' }"
clientSort="true">
</div>

<div id="grid" elasticView="2" dojoType="dojox.Grid" model="model"
structure="layout" onStyleRow="colorDescriptions" jsId="thisGrid">
<script type="dojo/method">
//debugger;
var view1 = {
cells: [[
{name: 'Namespace', field: "namespace", width:"30em"},
{name: 'Description', field: "className", width:"30em"}
],
[
{name: 'Summary', field: "summary", colspan:2,
editor: dojox.grid.editors.Dijit }
]
]
};
var rowbar = {
type: 'dojox.GridRowView', width: '20px'
};
var fixedColumn = {
noscroll: true,
cells: [[ {name: 'Class', field: "className"} ]]
};

// a grid layout is an array of views.
var layout = [ rowbar, fixedColumn, view1 ];
thisGrid.setStructure(layout);
</script>
</div>
</body>
</html>

Does the jmaki wrapping prevent passing through all the additional parameters dojo knows ? Could I do something like

<%= jmaki_widget 'dojo.dijit.grid', [b]:dojo_params => {model="model" ; structure="layout";...;...}[/b]
:value =>
{:columns => [
{ :label => 'Name', :id => 'Name'},
{ :label =>'ProductTypeStr', :id => 'ProductTypeStr'},
{ :label =>'ProductName', :id => 'ProductName'},

{ :label =>'ProductSubType', :id => 'ProductSubType'}
],
:rows => @rows_data
}
-%>

sloanb
Offline
Joined: 2003-09-14

While this can be easily done by customizing the widget for your own likings it may interest us to add some of these features. The only problem is that by doing this the model becomes a bit less consistent and can cause confusion to some. I will discuss it with the team and see what the opinions are.

As far as customizing the widget yourself simply copy the widget directory to a name of your liking and change the namespace to the name of the directory. From here you can customize as much as you would like. Let me know if you need help doing this.