Please help in SpringMVC + Dojo-Grid integration

[winforce]

Hi Friends...

i'm trying to build a simple application by using SpringMVC + Dojo-Grid + JPA + JsonLib.. but i'm stuck.. because i'm new learn about Dojo JSON app..
I don't know how to bind data from JPA Entities (which Serialized by JsonSerializer class)...

this is my JPA entity :

public class Major{
     private Long id;
     private String name;
     private Long version;
     //getter n setter
}

this is my controller :

@Controller
public class JSON1 {
     @Autowired
     private MajorService majorService;

    @RequestMapping("/json1.htm")
    public ModelAndView show(HttpServletRequest request, HttpServletResponse response) throws Exception{
        List<Major> majors=majorService.getAll();
        Object o =new JsonSerializer().serialize(majors);
        return new ModelAndView("json1", "data", o);
    }
}

and the result from JsonSerializer is :

[{"~unique-id~":"0","id":1,"class":"com.example.entities.Major","name":"First Major","version":10},{"~unique-id~":"1","id":1,"class":"com.latihan.entities.Major","name":"Second Major","version":5}]

now.. how to bind it in Dojo Grid?..

i've tried this.. but it's still doesn't work..
this is my javascript's function :

 var view1 = {
            cells: [
                [
                    {name: 'Id', field: "id"},
                    {name: 'Name', field: "name"},
                    {name: 'Version',field: "version"}
                ]
            ]
        };
        // a grid layout is an array of views.
        var layout = [ view1 ];
        // the model will contain the data to be displayed in the view
        model = new dojox.grid.data.Objects([{key: "id"}, {key: "nama"},{key: "version"}]);

function loadTable(page){
            start = page * batchSize;
            var targetURL = "/WebApplication/json1.htm";
            dojo.xhrGet({
                url: targetURL,
                handleAs: "json",
                load: handleResponse,
                error: handleError
            });
        }

function handleResponse(responseObject, ioArgs){
            model.setData(responseObject);
        }

<div id="grid" dojoType="dojox.Grid" model="model" structure="layout"></div>

Please help me..

Thanks in advance..

[pradeep4566]

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

dojo.addOnLoad(
				var dummylayout=[{
					type: "dojox.grid._CheckBoxSelector"
				},[{
					field: 'id',
                    name: 'Id',
                    width: '45%'
                    
				},
				{
					field: 'name',
                    name: 'Name',
                    width: '50%'
                    
				},
				{
					field: 'version',
                    name: 'Version',
                    width: '50%'
                    
				}]];
				
				var datastore=new dojo.data.ItemFileReadStore({
					url:"<!-- Here url for the controller calling -->",
					clearOnClose:true,
					urlPreventCache:true
				});
				
				var grid=new dojox.grid.DataGrid({
					structure:dummylayout,
					store:datastore,
					style: "width:100%"
				},
				dojo.byId("grid")
				);
				grid.startup();
				);
</script>

				<div id="grid"></div>

[Rossen Stoyanchev]

this is my controller :

@Controller
public class JSON1 {
     @Autowired
     private MajorService majorService;

    @RequestMapping("/json1.htm")
    public ModelAndView show(HttpServletRequest request, HttpServletResponse response) throws Exception{
        List<Major> majors=majorService.getAll();
        Object o =new JsonSerializer().serialize(majors);
        return new ModelAndView("json1", "data", o);
    }
}

On a separate note you can remove the request and response from the argument list if you don't use them. Try taking an argument of type Model instead and return a String "json1".

[Fireball]

Any ideas what is going wrong with this simple test with a static datastore?

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

		dojo.ready(function() {
				var datastore = {
					"identifier": "id",
					"items": [
						{ id: 1, x: "1", y: "19021" },
						{ id: 2, x: "1", y: "12837" },
						{ id: 3, x: "1", y: "12378" },
						{ id: 4, x: "1", y: "21882" },
						{ id: 5, x: "1", y: "17654" },
						{ id: 6, x: "1", y: "15833" },
						{ id: 7, x: "1", y: "16122" }
					]
				};

				var dummylayout=[
					{ type: "dojox.grid.DataSelection" },
					[
					 	{ field: 'id', name: 'Id', width: '45%' },
					 	{ field: 'x', name: 'X', width: '50%' },
					 	{ field: 'y', name: 'Y', width: '50%' }
					]
				];
				
				var grid=new dojox.grid.DataGrid({
						structure:dummylayout,
						store:datastore,
						style: "width:100%"
					},
					dojo.byId("grid")
				);
				grid.startup();
		});
	</script>

	<div id="grid"></div>

I get no grid but firebug shows the following error:

Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLDivElement.appendChild]
http://localhost:8080/test4/resources/dojo/dojo.js
Line 27

[Endee777]

On a separate note you can remove the request and response from the argument list if you don't use them. Try taking an argument of type Model instead and return a String "json1".

I am trying something similar as above. Here is my controller method
================================================== ============================
@RequestMapping(value = "/test/{employeeId}", headers="Accept=application/json")
public @ResponseBody String showTestEmployee(@PathVariable("employeeId") Integer employeeId, Model uiModel ){
Employee emp = employeeRepository.findOne(employeeId);
TestEmployee employee = new TestEmployee();
employee.setCurrentDesignation(emp.getCurrentDesig nation().getDesignationName());
employee.setFirstName(emp.getFirstName());
employee.setEmployeeId(emp.getEmployeeId().toStrin g());

return employee.toJson(); //the testemployee has the four methods that use FlexJson
}
================================================== ====================================
Here is my list.jspx file:
================================================== ============================
dojo.addOnLoad(function() {
var theGreatestTeamOfAllTime = {
items: [ {
"employeeId":"12",
"firstName":"Jim Kelly",
"currentDesignation":"QB"
},
{
"employeeId":"34",
"firstName":"Thurman Thomas",
"currentDesignation":"RB",
},
{
"employeeId":"89",
"firstName":"Steve Tasker",
"currentDesignation":"WR"
}
],
identifier: "employeeId"
};

var dummylayout=[{ type: "dojox.grid._CheckBoxSelector"},
[{
field: 'currentDesignation',
name: 'Designation',
width: '50%'

},
{
field: 'employeeId',
name: 'Employee Id',
width: '45%'

},
{
field: 'firstName',
name: 'First Name',
width: '50%'

}
]];
var datastore = new dojo.data.ItemFileReadStore({ url:"url_to_controller" ,clearOnClose:true,urlPreventCache:true});
var grid=new dojox.grid.DataGrid({structure:dummylayout, store:datastore, style: "width:100%" }, dojo.byId("grid"));
grid.startup();
================================================== ============================
I can see the JSON response returned by the controller,using firebug.
But when i inspect the datastore object, the _jsonData property in it is undefined.

If i try the above as follows, with a hard coded data:
================================================== ============================
var datastore = new dojo.data.ItemFileReadStore({ data:theGreatestTeamOfAllTime });
var grid=new dojox.grid.DataGrid({structure:dummylayout, store:datastore, style: "width:100%" }, dojo.byId("grid"));
grid.startup();
================================================== ============================
i can see the grid filled with three rows. But when i use the controller to fill the grid, the grid appears empty.

Any clue?