Login Register

RESOLVED: Client Side Paging in Grid Using ItemFileReadStore

I have a client request to implement client side paging with a Grid. I need to limit the number of rows displayed in a Grid to a certain number (say 25) and allow the user to page through results using 'Next' and 'Previous' buttons. The grid should initially show the first 25 results, and then the next 25, etc.

I am populating an ItemFileReadStore object with JSON returned from a servlet and have implemented paging using the technique shown here in the Book of Dojo. I have this working if I want to display the paged data in an HTML table, but am having trouble figuring out how to populate a Grid from the chunk of data I get from the store. Is it possible to do so?

I am rather new to Dojo, so the way I am trying to implement this may not be the best or most efficient way. If you have any suggestions on how I might do this differently, I am open to suggestions.

Thanks in advance for the help. Let me know if you have any questions or if I should provide any further information. I can post my code if it would be helpful.

Edit - I have posted some example code below.

DataGrid

Hi:

you can use dojox.grid.DataGrid from the 1.1.1 nightly tarball:

http://archive.dojotoolkit.org/nightly/

Here is a code example. Install the new dojotoolkit and try it:

<head>
  <title>Test dojox.grid.DataGrid Basic</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
  <style type="text/css">
    @import "dojotoolkit/dijit/themes/soria/soria.css";
    @import "dojotoolkit/dojox/grid/resources/soriaGrid.css";
  </style>
  <script type="text/javascript" src="dojotoolkit/dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>
  <script type="text/javascript">
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dojo.parser");

    var data  = {   
            identifier: 'name',
            items: [
                                { name: 'Adobo', aisle: 'Mexican' },
                                { name: 'Balsamic vinegar', aisle: 'Condiments' },
                                { name: 'Basil', aisle: 'Spices' },
                                { name: 'Bay leaf', aisle: 'Spices' },
                                { name: 'Beef Bouillon Granules', aisle: 'Soup' },
                                { name: 'Vinegar', aisle: 'Condiments' },
                                { name: 'White cooking wine', aisle: 'Condiments' },
                                { name: 'Worcestershire Sauce', aisle: 'Condiments' },
                                { name: 'pepper', aisle: 'Spices' }
            ]
    }

   var myStore = new dojo.data.ItemFileReadStore({
     jsId: 'myStore',
     data: data
   })
  </script>
</head>

<body class="soria">
<table dojoType="dojox.grid.DataGrid"
  jsid="grid" id="grid"
  store="myStore"
  rowsPerPage="20"
  style="width: 300px; height: 200px"
>

  <thead>
    <tr>
      <th field="name" width="60%">Name Column</th>
      <th field="aisle" width="40%">Aisle Column</th>
    </tr>
  </thead>
</table>
</body>

Am I Making This Too Hard?

Thank you for your quick reply! I know how to populate a grid with a JSON string just fine if I'm using all of the data in the JSON, but I want to populate the grid with only a chunk of the data from the JSON, not the whole string.

Here is some example code. I need to populate the grid with only the correct sized chunk of data returned from the ItemFileReadStore fetch, but am not sure how to populate the grid from the array of data returned from the fetch.

In the example below, the object jsonStateData is an ItemFileReadStore object that has been created with JSON returned from a servlet. I have Next and Previous buttons defined that increment/decrement the pageStart variable and call the populateStateResults() function.

var pageStart = 0;
var pageSize = 5;

function populateStateResults() {																													
	var gotStateList = function(items, request)
	{
                   // Here is where I need the magic to happen.  
                   //I am wanting to create and populate a grid with only 
                   //the data in the 'items' array returned from the fetch here.
	}			
		
	var gotError = function (error, request) {
		alert("Error Error Error:  " + error);
	}
			
	jsonStateData.fetch({start: pageStart, count: pageSize, onComplete: gotStateList, onError: gotError});
			
	
}

Is there an easy way to do this? Or is my only option to recreate the JSON string and create a new ItemFileReadStore object to use to populate the grid in the onComplete function?

Solution

I stumbled upon how to accomplish what I needed yesterday.

I just needed to add the following code to the gotStateList function that gets called by the fetch onComplete. I was trying to avoid having to traverse over the array of items returned by the fetch to build a JSON string to pass to a model for the grid and this solution does not require that.

Hopefully this will help someone else who might be trying to do the same thing.

var gotStateList = function(items, request)
{
	// Create JSON object with page of data returned from the fetch											
	var jsonChunkString = {};
	jsonChunkString.identifier = "state";
	jsonChunkString.label = "statelist";
	jsonChunkString.items = items;		
									
	// Create data store from the JSON object holding the page of data									
	var jsonChunkStore = new dojo.data.ItemFileReadStore({data: jsonChunkString});
			
	var modelStates = new dojox.grid.data.DojoData(null, jsonChunkStore, {query:{state:'*'}, clientSort:true});		
	var viewStates = {						
		rows: [
				[
					{ name: 'State', styles: 'text-align: center;', width: '12'},
					{ name: 'Capital', styles: 'text-align: center;', width: '12'},
				]
			]
	};
			
	var layoutStates = [ viewStates ];
			
	var gridStates = new dojox.Grid({
		"id": "gridStates",				
		"model": modelStates,
		"structure": layoutStates,
		"autoWidth": "true"					
	});		
}

Thanks! I'm trying to do

Thanks! I'm trying to do exactly that.

In my first attempt, I took the items object and created an array with it, then created a new object similar to how you did above, then created a new store with it.

BUT, for some reason dojo is linking the data in the new store to the data in the old.

I will try what you have here and let you know if it fixes the issue.

Thanks again for posting this fix, I will let you know if this does it.

Andy

linking the data?

quote: "BUT, for some reason dojo is linking the data in the new store to the data in the old. "
So, can you still do correct paging??

Can you post a complete page html for me to learn?

I posted a similar question.
http://dojotoolkit.org/forum/dojo-core-dojo-0-9/dojo-core-support/how-ad...