Dojo Data Grid in XPages - Lessons Learned

Here are some things i came across when implementing a dojo data grid (the default dojo 1.6.1 in domino 8.5.3) on my xpage projects:

• include the correct css ("/.ibmxspres/dojoroot/dojox/grid/resources/Grid.css" will work)
• if you use an expensive web service, use the store to get the items and add them to the store manually, this way client side rendering and sorting will be faster (here is how you can do it)
• use dojo.data.ItemFileReadStore as a container for your items if you do not want to bother implementing your own sorting and caching
• do not use "auto" columns - it can only work if you are not using a store in the grid and you load all the data only once and push it to the grid, and even then it is discouraged
• do not set the style of element that contains the grid to "display: none" it will just not work
• try not to encapsulate the grid inside other panels or divs if possible, some css settings might break the design - in most cases the grid did not even show a single visible pixel for me, but it was definately there and populated
• set a style in px to tell dojo what dimensions to render, directly in the div / panel like this: style="width: 400px; height:300px"
• declare your own datastore to process data and connect easily to the fetch and _processResults methods and not mess with the original implementation (here is how its done)
• use a loading screen and connect to the _processResults to hide it after the data has been loaded