Jan 302008
 

This is the third posting going more in depth of the code I showed at my Lotusphere session BP212: The Great Code Giveaway: “Beyond Cool”. If you haven’t read the first and second article yet I recommend doing so. You find them by clicking the links. You can download the instructions, code and databases here.

What is a Grid

The Book of Dojo explains it well.

Grids are familiar in the client/server development world. Basically a grid is a kind of mini spreadsheet, commonly used to display details on master-detail forms. From HTML terms, a grid is a “super-table” with its own scrollable viewport.

The domino.view.grid that I showed in my session contains two classes. The domino.view.grid class that extends dojox.grid.Grid and the domino.view.model class that extends the dojox.grid.data.DojoData class. It also uses domino.data.ViewStore for doing the XMLHttpRequest (XHR). I wrote about the domino.data.ViewStore in the previous postings.

Instead of going through 630+ lines of code, I’m going to show how to add it to your pages or forms. First the easy one and we’ll gradually move to more complex examples.
All the examples I’m going to show require you to add a couple of lines of code to your page/form.

In the HTML Head Content you have to add a style sheet, tundraGrid.css, and the dojo.js JavaScript. The tundraGrid.css file contains all the classes needed for the Grid to display properly.

"<style type="text/css">" + @NewLine +
"@import "/dojo102/dojox/grid/_grid/tundraGrid.css";" + @NewLine +
"</style>" + @NewLine +
"<script type="text/javascript" src="/dojo102/dojo/dojo.js" djConfig="parseOnLoad: true, usePlainJson: true"></script>"

In the HTML Body Attributes we add a class of tundra.

"class="tundra""

In the JS Header we add the required JavaScript files for the domino.view.grid and the dojo.parser. This is done the very specific Dojo way. It looks like Java but is really JavaScript. Dojo does this really smart by checking if the external JS file is already loaded and available to the browser. If it is not it gets/loads it.

dojo.require("domino.view.grid");
dojo.require("dojo.parser");

All those have to be added in all my examples here. In some of the examples in the download I have added more CSS classes and more JavaScript. In the very basic example this is all we need.

Now let’s add the HTML code to our page/form.

<div dojoType="domino.view.grid" url="sessiongrid1" style="height:600px;"></div>

As you can see (click on thumbnail for larger view) this is a very basic example that just displays a 600 pixel high grid from a view called “sessiongrid1″ in the same database as the page/form. If you would look at the “sessiongrid1″ view you would see that these columns are in the same order and widths. If you have specified that a column is not Resizable than you can’t resize it in the Grid either.

In the next example we add an attribute of handleViewDesign=true. That will also read in font families, sizes, colors, style and justification of both column headers and bodies. It will also read in colors for Alternate rows in the view property. You also see in this example that when Display values as icons is selected on the column, it displays in the Grid. Both numbered and shared Resources work.

<div dojoType="domino.view.grid" url="sessiongrid2" handleViewDesign="true" style="height:600px;"></div>

Structure

A really neat feature of Dojo’s Grid is that you can have multi row headers. That gives us a way of displaying more data in less space, especially when we have columns with a lot of text. Again the Book of Dojo explains it for us.

In standard spreadsheet and table terminology, a cell is the basic unit of displayed data. A row is a horizontally aligned contiguous group of cells, and a column is a vertically aligned contiguous group of cells. (Wow, that makes a simple concept sound complex!)

In grid-land, there’s a distinction between rows and subrows. A subrow is what people normally think of as a row – it’s exactly one cell tall. In Grid, a row may be more than one subrow – but it is selectable as a unit.

A View is a group of contiguous logical rows with the same inner and outer “shape”… You specify this in JavaScript with an array of arrays. Each array element is an object literal. The most important property of the object is “name”, which names the column. The column name always appear as the top logical row of the grid, and unlike other rows, it doesn’t scroll up or down.

<div dojoType="domino.view.grid" url="sessiongrid3" structure="myStructure" style="height:600px;"></div>

As you can see we are using a view called “sessiongrid3″. You can find that view in the “Sessions.nsf” database in the download. In that view we have added a column with the SessionAbstract field. This field contains a lot of text and if we displayed it in the same way as the previous examples we would see only two/three documents and we would have to scroll the grid a lot. But as you can see we have added a new attribute to the div, structure="myStructure". That tells the domino.view.grid class NOT to read in the design of the view and creating the structure dynamically, but instead that we are supplying it to the grid. Below you see the code example from the page “Grid 4″ inside “Sessions.nsf”.

var myViewDesign = {
cells: [
[
{
name:'Session ID',
field:"SessionID",
width:'68px',
sortAsc:true,
sortDesc:true
},
{
name:'Location',
field:"SessLocs",
width:'113px',
sortAsc:true,
sortDesc:true
},
{
name:'Begin',
field:"BeginTime",
width:"96px",
sortAsc:true,
sortDesc:true
},
{
name:'End',
field:"EndTime",
width:"96px",
sortAsc:true,
sortDesc:true
},
{
name:'Session Abstract',
field:"SessionAbstract",
width:'auto',
rowSpan: 2
}
],
[
{
name:'Title',
field:"TITLE",
colSpan: 2
},
{
name:'Speaker',
field:"Speaker",
sortAsc:true,
sortDesc:true,
formatter: withLineBreaks,
colSpan: 2
}
]
]
};
var myStructure = [ myViewDesign ];

Let’s take a look at this code. First we create an object called myViewDesign and in that object we have a property of cells which is an array containing two arrays. Each array represents it’s own row. The first array contains five column objects and the last array two column objects.

Let’s look at the first column object: Session ID. As you can see we have a few properties to this object. The first two are required. The name property is what we want it to say in the column header. The field property is the Programmatic Name of that column specified in the view column with Domino Designer. Width is the default width of the column when first displayed. sortAsc and sortDesc set to true is if we have selected that the column can be sorted ascending, descending or both.

If you look at the Session Abstract column object, you’ll see that we have a width of auto and that we added a property of rowSpan: 2. This column is going to span over 2 rows but also extend to the width of the grid.

The last two column objects are in their own array. As you can see both have a colSpan property with a value of 2. Just as you can do in a HTML table these two columns will span over two columns each, leaving only the Session Abstract column by itself. It however spans over two rows as mentioned earlier. The last thing we do is to create an array, myStructure (named so as to match the structure attribute on the div HTML tag representing the grid), and set it to our object myViewDesign. You can see the result to the right.

In this posting I have only scratched the surface of what you can do with Grids. If you download the demo databases you will see many more examples including how to open documents by clicking cells or rows. You also see examples of how to use several Grids in conjunction with each other, i.e. click on a user document in the first Grid and display his/hers sessions in the second.

If you read up on Dojo Grids on the Dojo Toolkit website you’ll see that there are many more things we can do with Grids. One is to update document data inline right there in the Grid. This doesn’t work in the domino.view.grid class yet but I’m working on it. We also need an Agent for that to work. This Grid class does not work with categorized views as of yet, but I’m working on that as well. Check back here on my blog for updates.

I hope you enjoyed this demo/tutorial and as always if you have any comments or questions please post them here.

  26 Responses to “Dojo Grid with Domino Views”

  1. I attended your wonderful presentation at Lotussphere on using the DOJO Toolkit. I came to your site to try and download your sample database, but can’t because of the active X controls. Would it be possible to send me the database?

  2. L Dusang,
    Thank you for your kind remarks on my session.
    I’m afraid I can’t do that. Why don’t you go there with Firefox and you don’t have to worry about Active X.

  3. Hi Victor, thanks for the great code. I was wondering if you have any examples of using djoj xhrPost to do SOAP queries against R7 webs services?

    Thanks,

    Jeff

  4. Jeff,
    No I haven’t done any XHR SOAP queries yet, but thanks for a great idea.

  5. I’ll let you know if I get it working.

  6. What approach would you take for categorized data? Twisties to open? Accordion? Tree Control?
    :-) stw

  7. Victor,

    Can I change the URL of a domino.view.grid instead of the query? Something like oGrid.url = ?

    Thanks,

    Jeff

  8. Never mind :-), I was able to accomplish what I wanted by building a better view that I could filter.

    Again, thanks so much for the great Dojo Domino code!

    Jeff

  9. Jeff,
    You’re welcome. I’m glad you figured it out.

  10. Hi Victor,

    Yet another Dojo question. Is there a problem with the Dojo Date Picker and Domino?

    It works fine when entering a date into a domino field, however when opening the same form in edit mode, you can see the date field “flash” and then dojo takes over and the date input field is empty.

    Have you heard of this? Is there a work around?

    Thanks again,

    Jeff

  11. Hi, really nice example!
    May i ask you how to change the content of the grid (make it point to another view) without reloading the page? I’m trying this approach:

    myGrid.url=thisDb+’/newviewtoshow';
    myGrid._getViewDesign();
    myGrid.replaceGridData(null)
    myGrid.refresh();
    myGrid.update();

    but it doesn’t work :(

    Thanks so much

  12. I have this installed as directed in the instructions.txt. I see the grid and not the data. Does this work only with R8?

  13. Lynn,
    Only 7.0.2 and above. The code is using JSON from views and that was introduced in version 7.0.2 of Domino.

  14. Hi Victor,

    Have you tried the grid with the new Dojo 1.1.0? I noticed that the sorting by clicking the header doesn’t appear to work i.e. it hangs with … in each of the grid cells?

  15. Hi Viktor

    thanks for this demo, it is really useful.

    I was going to post a quwery asking why the ocCellClickEvent only triggered from the first column in the grid7 demo but I found the onRowClickEvent which gave me what I needed

    Thanks again Sean

  16. Hi Victor,
    Your sample is very nice!! But I use XML in the view? My version Domino is 6.5.
    Thanks,
    Ailton

  17. we would like to use your libraries with projectzero application. In ProjectZero we have dojo 1.0.1
    – how to implement your extension to existing dojo?
    – would it work with 1.0.1?

    thanks
    Grzegorz

  18. Hi Viktor.
    My colleges saw your presentation at LotusSphere and we love the work you did.
    I saw you mentioned in other posts that you liked the Dojo 1.1 release and we tried your framework with dojo 1.1.1 and the only thing we could see that didn’t work was the sorting of columns (when clicking the column header).

    Do you have any ideas of what needs to be changed for us to use it on the most recent dojo releases.

    Anyway great work.

  19. @Ailton
    The grids work with XML. You just have to add that attribute.

    @Grzegorz
    I have not tested the Domino grid with anything but Dojo 1.0. I just have not had any time to look at updating the Domino grid to work with 1.1.x yet.

    @Daniel
    Tack för komplimangerna. (Thanks for the compliments)
    See note above.

  20. Hi Viktor.
    I’m new to dojo and a little stuck figuring out how to refresh the grid. I have an action that creates new document in domino and I have to reload the whole page to make it visible in the grid, this is not a very web2.0 friendly behavior. Is there any way to refresh only the data in the grid?
    I would be glad for any help.
    Thanks,
    Pawel

  21. Hi Viktor,
    I managed to solve partially the problem from my last post, but I have another one…

    Is it possible to full-text search the grid or just a column?
    In your examples we can search a column but the search phrase has to be exactly the same as the beginning of the entry in the grid.
    If the user knows only a part of the name that he is looking for then it is difficult for him to find the right entry.

    Can this be done?

    Thanks,
    Pawel

  22. Am I the only person who develops categorised views?

    Thought not, but I have never seen an example of one using the Dojo. Is this possible?

    I hope so, otherwise the Dojo is useless for me in upgrading my web based Domino apps.

  23. I have problem with Swedish letters. When I use them only ? show up in the cells. Should it work with Swedish letters?
    Thanks , Anna

  24. i am looking to display quickr place search results in a grid. was anybody able to do somehting like this?
    Thanks.

  25. i search for download the demo database and i registered to snapss, but i non have access to download area for this database
    I am new to dojo toolkit and i search for you demo
    thank in advance

  26. I am always looking for ways to enhance traditional Domino application. Is the Session.nsf (or a database with examples available for download?)

    Thanks in advance,

    Graham

Leave a Reply to Travis Hiscock Cancel reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>