Login Register

Bind Json data with grid

Hi,

I got a button which use xhrPost to get data in json format from the backend. I need to
put them into grid. Somehow it cames up with "?" for each data column and it doesn't display
within the grid. The following is the dump on the json data from console.log. Thanks in advanced.

Object
0 "test1"
1 "test2"
2 "test3"
A "test1"
B "test2"
C "test3"

my script is as follow
...
function populateResults(data){
model = new dojox.grid.data.DojoData();
model.jsId="dataModel2";
model.store=data;
model.query="{ name : '*' }";

var view1 = {
cells: [
[
{name: '0'},
{name: '1'},
{name: '2'},
{name: 'AskingPrice'},
{name: 'Description'},
{name: 'DatePosted'}
]
]
};
// a grid layout is an array of views.
var layout = [ view1 ];

var grid = new dojox.Grid({
"id": "grid",
"model": model,
"structure": layout
});
dojo.byId("searchResults").appendChild(grid.domNode);
grid.render();
}

....

A few things to check: 1.

A few things to check:

1. Generally, on complex widgets, you need a call to startup, e.g., grid.startup(), say, before grid.render().

2. It is important to import the appropriate .css files, e.g., dojo.css, Tundra.css,TundraGrid.css. See examples, test files.

3. If the grid is not a child of a layout container or a domNode with a defined width/height, set the grid's height/width either in the styles:"width:200px;height:200px" grid parameter or within the style tags in the header, e.g., #grid {width:200px;height:200px;}

If the above doesn't fix it, please post a very small, complete, working/failing html page code here (within eiher code or html tags) for review.

No luck with the suggestion

Hi,
I think I have done as per your suggestion..hmm...no luck!
What I saw was a "?" on top with the focus grid when I click on it.
The header of "ow_name" was display after the button and 2 small checkbox underneath it.
Here is the simplified html code.
Thanks.

 
  Property search

	@import "/dojo100/dojo/resources/dojo.css";
	@import "/dojo100/dijit/themes/tundra/tundra.css";
	@import "/dojo100/dijit/themes/tundra/tundra_rtl.css";
	@import "/dojo100/dijit/themes/dijit.css";
	@import "/dojo100/dijit/tests/css/dijitTests.css"; 
	@import "/dojo100/dojox/widget/Loader/Loader.css"; 
	@import "/dojo100/dojox/widget/Toaster/Toaster.css";
	
	@import "/dojo100/dojox/_grid/tundraGrid.css";
	
	.oddRow { background-color: #f2f5f9; }
	table { border: none; }
	
	
	.small {
		width: 2.5em;
	}
	.medium {
		width: 10em;
	}
	.long {
		width: 20em;
	}	
	#grid {width:200px;height:200px;}
  
   
  
	
		dojo.require("dojo.parser");
		dojo.require("dijit.form.Button");
		dojo.require("dojox.grid.Grid");
		dojo.require("dojox.grid._data.model");
		dojo.require("dojox.grid._data.dijitEditors");
		dojo.require("dojox.grid.tests.databaseModel");
		dojo.require("dijit.form.Form");
	
	
	        function searchBasic(form1){
				var testData = { identifier: 'ow_name',
								  label: 'now_name',
								  items: [
								     { ow_name:'Egypt1' },
								     { ow_name:'Egypt2' },
								     { ow_name:'Nairobi' },
								     { ow_name:'Mombasa' },
								     { ow_name:'Sudan'}
									]
								};
	        	
		        var kw;
			        kw = {
			                url: "SearchPropertyPost.php",
			                handleAs: "json",
			                load: function(responseObject, ioArgs) {
			                   populateResults(testData);
			                  return responseObject;
			                },
			                error: function(responseObject, ioArgs) { // 
			                  alert("error");
			                  return responseObject; // 
			                },
			                form:"frmSearchBasic"
			        };
		        
		        dojo.xhrPost(kw);
	      }
	        
	      function populateResults(data){
				model = new dojox.grid.data.DojoData();
				model.jsId="dataModel2";
				model.store=data;
				model.query="{ name : '*' }";
				
				var view1 = {
					cells: [
						[
							{name: 'ow_name'}
						]
					]
				};
				// a grid layout is an array of views.
				var layout = [ view1 ];
				
				var grid = new dojox.Grid({
					"id": "grid",
					"model": model,
					"structure": layout
				});
				dojo.byId("searchResults").appendChild(grid.domNode);
				grid.startup();
				grid.render();				
	      }
	      
		      
		
	




		
			
					Search basic
				
			
		
	

Below is your code above,

Below is your code above, but modified. Note that the path to my dojo is different from yours.

The main mods were:

1. fix the tundraGrid path.
2. remove the Loader.js, since didn't think it is needed.
3. remove the dojo.require("dojox.grid.tests.databaseModel");
4. add the ItemFileReadStore require, since wanted to fix your grid display problem only, for now.
5. within searchBasic, commented out your server call for now and added a direct call to populateResults.
6. within populateResults, replaced the model with one similar to what you will need for the server call, using ItemFileReadStore and correcting the query name to ow_name. to do this, moved the testData to an external file, jsonData.txt.

Good luck.

<head>
  <title>Property search</title>
<style type="text/css">
        @import "js/dojo1/dojo/resources/dojo.css";
        @import "js/dojo1/dijit/themes/tundra/tundra.css";
        @import "js/dojo1/dijit/themes/tundra/tundra_rtl.css";
        @import "js/dojo1/dijit/themes/dijit.css";
        @import "js/dojo1/dijit/tests/css/dijitTests.css";
        @import "js/dojo1/dojox/widget/Loader/Loader.css";
        @import "js/dojo1/dojox/widget/Toaster/Toaster.css";
      /*  @import "js/dojo1/dojox/_grid/tundraGrid.css"; */
        @import "js/dojo1/dojox/grid/_grid/tundraGrid.css";       
        .oddRow { background-color: #f2f5f9; }
        table { border: none; }
       
       
        .small {
                width: 2.5em;
        }
        .medium {
                width: 10em;
        }
        .long {
                width: 20em;
        }       
        #grid {width:200px;height:200px;}
</style>
<!-- script type="text/javascript"
    src="http://localhost/dojo100/dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true">

</script -->
 <script type="text/javascript"
  src="js/dojo1/dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true">
</script>
   
  <!--script type="text/javascript" src="http://localhost/dojo100/dojox/widget/Loader.js">
</script -->
        <script type="text/javascript">
                dojo.require("dojo.parser");
                dojo.require("dijit.form.Button");
                dojo.require("dojox.grid.Grid");
                dojo.require("dojox.grid._data.model");
                dojo.require("dojox.grid._data.dijitEditors");
              //  dojo.require("dojox.grid.tests.databaseModel");
                dojo.require("dijit.form.Form");
                dojo.require("dojo.data.ItemFileReadStore");
        </script>
        <script type="text/javascript">
                function searchBasic(form1){
                 /*               var testData = { identifier: 'ow_name',
                                                                  label: 'now_name',
                                                                  items: [
                                                                     { ow_name:'Egypt1' },
                                                                     { ow_name:'Egypt2' },
                                                                     { ow_name:'Nairobi' },
                                                                     { ow_name:'Mombasa' },
                                                                     { ow_name:'Sudan'}
                                                                        ]
                                                                };
                       
                        var kw;
                                kw = {
                                        url: "SearchPropertyPost.php",
                                        handleAs: "json",
                                        load: function(responseObject, ioArgs) {
                                           populateResults(testData);
                                          return responseObject;
                                        },
                                        error: function(responseObject, ioArgs) { //
                                          alert("error");
                                          return responseObject; //
                                        },
                                        form:"frmSearchBasic"
                                };
                       
                        dojo.xhrPost(kw);*/ 
                        populateResults();  //<<<
              }
               
              function populateResults(data){
                         /*       model = new dojox.grid.data.DojoData();
                                model.jsId="dataModel2";
                                model.store=data;
                                model.query="{ name : '*' }";  //<<ow_name, not name.
                         */
                              var jsonData = new dojo.data.ItemFileReadStore({url:'jsonData.txt'});
                                var model = new dojox.grid.data.DojoData(null,jsonData,{query:{ow_name:'*'},clientSort:true});   
     
                                var view1 = {
                                        cells: [
                                                [
                                                        {name: 'ow_name'}
                                                ]
                                        ]
                                };
                                // a grid layout is an array of views.
                                var layout = [ view1 ];
                               
                                var grid = new dojox.Grid({
                                        "id": "grid",
                                        "model": model,
                                        "structure": layout
                                });
                                dojo.byId("searchResults").appendChild(grid.domNode);
                                grid.startup();
                                grid.render();       
              }
             
                     
        </script>
       
       

</head>
<body class="tundra">
                <form id="frmSearchBasic" dojoType="dijit.form.Form" name="frmSearchBasic" execute="searchBasic">
                        <button dojoType="dijit.form.Button" type="submit">
                                        Search basic
                                </button>
                       
                </form>
        <div id="searchResults">
        </div>

       

</body>

it works with jsonData.txt

Hi,
Thanks for the correction.
Now, with the ItemFileReadStore I am able to display the correctly.
When I tried to commented the line on ItemFileReadStore and replaced with

var jsonData = { identifier: 'ow_name',
label: 'now_name',
items: [
{ ow_name:'Egypt1' },
{ ow_name:'Egypt2' },
{ ow_name:'Nairobi' },
{ ow_name:'Mombasa' },
{ ow_name:'Sudan'}
]
};

I got no luck, it shows the following in the firebug
this.store.getFeatures is not a function
(no name)(null, Object identifier=ow_name:items=[5], Object query=Object clientSort=true)
(noname)()
...

Well, I have met the same

Well, I have met the same problem. My code is bellow:

 <div dojoType="dojo.data.ItemFileReadStore"
  jsId="jsonStore"
  url="../../Dojo/dijit/tests/_data/countries.json"
  ></div>
 <div dojoType="dojo.data.ItemFileReadStore"
  jsId="jsonStore2"
  url="../JSON/getNews.json.php"
  ></div>
 <div dojoType="dojo.data.ItemFileReadStore"
  jsId="jsonStore3"
  url="../JSON/json.txt"
  ></div>
 <span dojoType="dojox.grid.data.DojoData"
  jsId="dataModel"
  rowsPerPage="10"
  store="jsonStore2"
 >
 </span>
 <div id="grid2" dojoType="dojox.Grid" elasticView="2"
  model="dataModel" structure="layoutCountries">
 </div>

I found that , no matter which "jsonStore" I choose , it goes well on FireFox. But once I put it on IE , with "jsonStore2" , use ".php" to support the json data , it just send an error. When I'm using dijit.form.FilteringSelect , I've met the same problem already .

"dojo.data.ItemFileReadStore" can't go well on IE if I use ".php" to support the "json" data.

1. Make testData

1. Make testData available.

2. Change the data store part of the model definition to:

var jsonData = new dojo.data.ItemFileReadStore({data:testData});

yes i got it

Hi frankf ,
Thanks for guiding me so far to the correct way of doing grid.
I really love the grid and the tests are quite helpful for me to proceed further.

Yes. With the testData I am able to get the right table display. What I found out is
the server side data being passed back from xhrPost. As you can see it is handleAs "json" and
it display correctly in the console. Unfortunately, I think it doesn't comply with the
ItemFileReadStore format. Is there a way in dojo to convert it to the right format?

Tan

resolved: done

Hi frankf,

Yes. I got it right now.

The xhrPost is returning the array of json data. If I put it in as below it won't work.

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

I tried the following instead

jsonData = { identifier: 'PropertyId',
label: 'PropertyId',
items:
data

};

Wow...it really surprised me it works perfectly as expected.

Thanks for all your help.
Tan

grid created on fly don't work for IE

Hi i was trying to create grid on fly but IE don't render the grid itself.
I ran the same code on Mozilla Firefox it worked.
Can any one have solution for this ?
Below is the html code.

<head>
        <title>Test dojox.Grid Basic</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;
                }
                               
                #grid1 {
                        border: 1px solid #333;
                        width: 35em;
                        height: 30em;
                }
                                .heading1 {
                                                font-weight: bold;
                                                padding-bottom: 0.25em;
                                }

                                #my_grid {
                                                border: 1px solid #333;
                                                width: 50em;
                                                height: 30em;
                                }

        </style>
        <script type="text/javascript" src="C:/DEV/UI/SVN/iTAAC_Web/WebContent/js/dojo-release-1.0.0/dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>

        <script type="text/javascript">
            dojo.require("dojo.data.ItemFileReadStore");
                        dojo.require("dojox.grid.Grid");
                        dojo.require("dojox.grid._data.model");
                        dojo.require("dojo.parser");
   
                        // a grid view is a group of columns.
                        var view1 = {
                                        cells: [[
                                                                {name: 'Abbreviation', width: "10%", field: "abbreviation"},
                                                                {name: 'StateName', width: "30%", field: "name"},
                                                                {name: 'Label', width: "60%", field: "label"}
                                          ]
                                        ]
                        };
                        // a grid layout is an array of views.
                        var layout = [ view1 ];
                </script>
                <script type="text/javascript">
                         dojo.addOnLoad(function(){
                                // a grid layout is an array of views.
                                var my_view = {
                                        cells: [[
                                                        {name: 'StateName', width: "50%", field: "name"},
                                                        {name: 'Abbreviation', width: "50%", field: "abbreviation"}
                                          ]
                                        ]
                                };
                                // a grid layout is an array of views.
                                var my_layout = [ my_view ];
                                var my_store = new dojo.data.ItemFileReadStore({jsId: 'my_jsonStore', url: 'states.json'});
                                var my_model = new dojox.grid.data.DojoData(null, my_store,{jsId: 'my_model', rowsPerPage: 20, query: { name: '*' }});
                                var my_grid = new dojox.Grid({"id": "my_grid",model: my_model,structure : my_layout,"class": "tundra",rowsPerPage: 20});
                                dojo.byId("gridContainer").appendChild(my_grid.domNode);
                                my_grid.render();
                         });
                </script>
                <script type="text/javascript">
                        function fillNewData(){
                                /* filter the message list to messages in this folder */
                                // set new model
                                var my_store = new dojo.data.ItemFileReadStore({jsId: 'my_store', url: 'states.json'});

                                var newModel = new dojox.grid.data.DojoData();
                                newModel.rowsPerPage = 20;
                                newModel.store = my_store;
                                newModel.query = {
                                        name: "N*"
                                };
                                newModel.clientSort = true;
                                myGrid.setModel(newModel);
                                myGrid.setStructure(layout);
                        }

                        function changeStructure(){
                                /* filter the message list to messages in this folder */
                                var new_view = {
                                        cells: [[
                                                        {name: 'Abbreviation', width: "10%", field: "abbreviation"},
                                                        {name: 'StateName', field: "name"}
                                          ]
                                        ]
                                };
                                // a grid layout is an array of views.
                                var new_layout = [ new_view ];
                                myGrid.setStructure(new_layout);
                        }
        </script>
</head>
<body class="tundra">
                <div class="heading">Simple Grid</div>
        <div dojoType="dojo.data.ItemFileReadStore"
                jsId="jsonStore" url="">

        </div>
        <div dojoType="dojox.grid.data.DojoData" jsId="model"
                rowsPerPage="20" store="jsonStore" query="{ name: 'NONE' }">

        </div>
        <div id="grid1" dojoType="dojox.Grid" jsId="myGrid" model="model" structure="layout"></div>

                <form id="myform" name="myform">
                <input type="button" id="button1" name="button1" value="Filter Data" onClick="fillNewData()"/>  
                <input type="button" id="button2" name="button2" value="Hide Label" onClick="changeStructure()"/>
                </form>
                <br><br>
                <div class="heading1">Programatic Grid</div>
        <div id="gridContainer"></div>
</body>

I copied your code above,

I copied your code above, changed the references to the aolcdn css files and the .js files to my local path, and used the states.json file below. The bottom grid, labeled "Programmatic Grid", displays fine in FF2 and IE7.


        Test dojox.Grid Basic
        
        
        @import "js/dojotoolkit/dojox/grid/_grid/tundraGrid.css";
        @import "js/dojotoolkit/dijit/themes/tundra/tundra.css";
        @import "js/dojotoolkit/dojo/resources/dojo.css"

                body {
                        font-size: 0.9em;
                        font-family: Geneva, Arial, Helvetica, sans-serif;
                }
                .heading {
                        font-weight: bold;
                        padding-bottom: 0.25em;
                }
                               
                #grid1 {
                        border: 1px solid #333;
                        width: 35em;
                        height: 30em;
                }
                                .heading1 {
                                                font-weight: bold;
                                                padding-bottom: 0.25em;
                                }

                                #my_grid {
                                                border: 1px solid #333;
                                                width: 50em;
                                                height: 30em;
                                }

        
        

        
            dojo.require("dojo.data.ItemFileReadStore");
                        dojo.require("dojox.grid.Grid");
                        dojo.require("dojox.grid._data.model");
                        dojo.require("dojo.parser");
   
                        // a grid view is a group of columns.
                        var view1 = {
                                        cells: [[
                                                                {name: 'Abbreviation', width: "10%", field: "abbreviation"},
                                                                {name: 'StateName', width: "30%", field: "name"},
                                                                {name: 'Label', width: "60%", field: "label"}
                                          ]
                                        ]
                        };
                        // a grid layout is an array of views.
                        var layout = [ view1 ];
                
                
                         dojo.addOnLoad(function(){
                                // a grid layout is an array of views.
                                var my_view = {
                                        cells: [[
                                                        {name: 'StateName', width: "50%", field: "name"},
                                                        {name: 'Abbreviation', width: "50%", field: "abbreviation"}
                                          ]
                                        ]
                                };
                                // a grid layout is an array of views.
                                var my_layout = [ my_view ];
                                var my_store = new dojo.data.ItemFileReadStore({jsId: 'my_jsonStore', url: 'states.json'});
                                var my_model = new dojox.grid.data.DojoData(null, my_store,{jsId: 'my_model', rowsPerPage: 20, query: { name: '*' }});
                                var my_grid = new dojox.Grid({"id": "my_grid",model: my_model,structure : my_layout,"class": "tundra",rowsPerPage: 20});
                                dojo.byId("gridContainer").appendChild(my_grid.domNode);
                                my_grid.render();
                         });
                
                
                        function fillNewData(){
                                /* filter the message list to messages in this folder */
                                // set new model
                                var my_store = new dojo.data.ItemFileReadStore({jsId: 'my_store', url: 'states.json'});

                                var newModel = new dojox.grid.data.DojoData();
                                newModel.rowsPerPage = 20;
                                newModel.store = my_store;
                                newModel.query = {
                                        name: "N*"
                                };
                                newModel.clientSort = true;
                                myGrid.setModel(newModel);
                                myGrid.setStructure(layout);
                        }

                        function changeStructure(){
                                /* filter the message list to messages in this folder */
                                var new_view = {
                                        cells: [[
                                                        {name: 'Abbreviation', width: "10%", field: "abbreviation"},
                                                        {name: 'StateName', field: "name"}
                                          ]
                                        ]
                                };
                                // a grid layout is an array of views.
                                var new_layout = [ new_view ];
                                myGrid.setStructure(new_layout);
                        }
        


                
Simple Grid


Programatic Grid

states.json

{identifier:"abbreviation",
items: [
        {name:"Alabama", label:"Alabama",abbreviation:"AL"},
        {name:"Alaska", label:"Alaska",abbreviation:"AK"},
        {name:"American Samoa", label:"American Samoa",abbreviation:"AS"},
        {name:"Wyoming", label:"Wyoming",abbreviation:"WY"}
]}

If your states.json file has a trailing comma after the last {...} entry, IE will not like it.