spring-roo dojox.grid.DataGrid not rendered

Question

Hello, I'm using spring-roo trying to use dojox.grid.DataGrid. The page renders as a plain table. Why does it not use the DataGrid? Thanks! Steve

<div xmlns:spring="http://www.springframework.org/tags"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"><jsp:output
omit-xml-declaration="yes" /> <script type="text/javascript">
dojo.require("dijit.TitlePane");
</script> <script type="text/javascript"
src="&lt;c:url value=&quot;/resources/dojo/dojo.js&quot; /&gt;">

</script> <script type="text/javascript"
src="&lt;c:url value=&quot;/resources/spring/Spring.js&quot; /&gt;">

</script> <script type="text/javascript"
src="&lt;c:url value=&quot;/resources/spring/Spring-Dojo.js&quot; /&gt;">

</script> <script type="text/javascript">
dojo.require("dojox.grid.DataGrid");
dojo.require("dojox.data.CsvStore");
</script>

<div id="_title"><spring:message var="app_name"
code="application.name" /> <spring:message var="title"
code="welcome.titlepane" arguments="${app_name}" /> <script
type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration( {
    elementId : '_title',
    widgetType : 'dijit.TitlePane',
    widgetAttrs : {
        title : '${title}'
    }
}));
</script>

<h4>Title</h4>
<table dojoType="dojox.grid.DataGrid">
<thead>
    <tr>
        <th field="fieldName" width="200px">Column Name</th>
        <th field="fieldName" width="200px">Column Name</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>test1</td>
        <td>test2</td>
    </tr>
    <tr>
        <td>test3</td>
        <td>test4</td>
    </tr>
</tbody>
</table>
</div>
</div>

Answer 1

The documentation at http://docs.dojocampus.org/dojox/grid/DataGrid#required-css says you need this css:

<style type="text/css">
    @import "/moin_static163/js/dojo/trunk/dojox/grid/resources/Grid.css";
    @import "/moin_static163/js/dojo/trunk/dojox/grid/resources/tundraGrid.css";
    .dojoxGrid table { margin: 0; } html, body { width: 100%; height: 100%;
    margin: 0; }
</style>

I used this which worked too:

<link rel="stylesheet" type="text/css" href="script/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="script/dojox/grid/resources/tundraGrid.css" />
<style type="text/css">
    .dojoxGrid table { margin: 0; } html, body { width: 100%; height: 100%; margin: 0; }
</style>

In my application I also had a conflict with my global css which I fixed using height: 999px instead of 100%.

 <table dojoType="dojox.grid.DataGrid" store="store1"
                query="{ Title: '*' }" clientSort="true"
                style="width: 100%; height: 999px;" rowSelector="20px">

Answer 2

Hi. I tried implementing the same approach answered by user210788 but still, plain table appears. The application we're developing is based on spring-roo sample apps, which integrates the dojo library, but unfortunately, dojox is not included, so I followed Jeremy's advice from this post.

<script type="text/javascript">dojo.require('dojox.grid.DataGrid');</script>

<script type="text/javascript">
    Spring.addDecoration(new Spring.ElementDecoration({
        elementId : 'table1', 
        widgetType : 'dojox.grid.DataGrid'
    }));
</script>
<table id="table1" style="width: 970px;">
    <thead>
...
...
</table>

And in the default.jspx...

<spring:url value="/static/dojox/grid/resources/Grid.css" var="grid_url"/>
<spring:url value="/static/dojox/grid/resources/tundraGrid.css" var="tundra_grid_url"/> 
<link rel="stylesheet" type="text/css" href="${grid_url}" />
<link rel="stylesheet" type="text/css" href="${tundra_grid_url}" />

Anybody has a clue?

Thanks, Dennis

Answer 3

hi ---as there is no dojox in spring roo ----it only has dojo and dijit

so u cant use dojox ---

thanks

nitigya bajaj