Dojo Grids In XPages

Dojo Data Grid Control

Dojo EnhancedGrid – Use plugins for enhanced functionality!

Dojo TreeGrid – Categorized grids with counts and totals

Demo Database on OpenNTF


36 responses to “Dojo Grids In XPages”

  1. whs says :

    Could you provide demo.nsf down about Dojo Grids In XPages,
    Picture not display on web in Chinese

  2. Eric Tomenga says :

    Great blog and coverage. Thank you for the webinar too.

  3. Misha Ovsichtcher says :

    Tnx a lot Brad! Very useful info! This is way better than the view control!

  4. Dan says :

    Thanks for the demo the other day for TLCC/TeamStudio! Is it possible to get a copy of the demo application you were using? Did you send out a download link?

  5. Steve Smillie says :

    I watched the recoded version of your Webinar (great job by the way!) and have been referencing your blog posts. You made my experimenting with Dojo Grids a lot easier. It allowed me to have some working examples quickly.

    Couple requests for future blogs:
    – On a Editable Grid, add empty row for new data and store as new document in database on save.
    – Also on Editable Grid, deleting row(s) and corresponding document(s)

  6. Petter Kjeilen says :

    Great series Brad. Tnx a lot for sharing. Btw, did you have a look at GridX ?

    • Brad Balassaitis says :

      Thank you very much!

      I have been looking into GridX. I haven’t had a chance to finish it, but I’ve spent some time working on using it in XPages. I’ll definitely write about it when I get it working.

  7. Doug DeCoursin says :

    Hi Brad – really appreciate this tutorial! I’ve implemented field specific search successfully, but would like to know what is the best way to get the row count with each search. Using Notes 9.0 Social Edition with an 8.5.3. Server

    Here is the rest service definition (not sure how helpful this is, but pasting the entire page seemed like overkill!

    I’m hoping to be able to do this using the standards Dojo Data Grid. Thanks in advance for any guidance!

  8. Doug DeCoursin says :

    Thanks Brad – have not had a chance to evaluate Mark Roden’s workaround, but I am hoping to not have to run the query twice just to show a row count. I noticed the grid had a rowCount property which seems to contain the number of rows returned by the query. Based on this, I’ve been playing with this logic with odd results:

    The page shows the rowcount in a computed field just fine if I leave in the alert statement, but shows a rowcount of 0 if I remove the alert. This made me think the issue came down to an event timing thing. Or maybe the alert causes the page to refresh somehow?

    Since the data grid is a client-side object with client-side events, I wanted to just find the right timing/logic to simply update a DOM object on the page with the actual row count returned. I will also need this logic to work with a partial refresh since the query is dynamic.

    I’m also contemplating JSON RPC, but started thinking that might be over-engineering…

    Any guidance appreciated!

    • Brad Balassaitis says :

      I definitely agree that it’s not good for performance to perform the search again.

      The behavior you’re seeing when checking the row count is definitely a timing issue — I’m seeing the same behavior.

      I think I’ve got it working now, so I’ll write up the solution and post it by Monday.

  9. Gilles REBIERE says :

    I tried to do a test with “Categorized Dojo TreeGrid in XPages – Add Totals and Counts” and if the categorized field is a NAME that does not work. (no disply in view)
    The “field type” must be a “summary”.

    Can you explain why?

    Thank you.

    • Brad Balassaitis says :

      Can you share a snippet of the JSON data that is written out by the XAgent? My first guess would be that there’s something in there that’s affecting the data.

      As for the field being required to be a summary field, that would be a requirement for displaying it in a view. The XAgent code shown in the post reads from a view entry. In order to get the data into a view, the field must be a summary field.

      • Gilles REBIERE says :

        Thank you for your reply, Brad.
        My code is the same code that you have, except that I use another view with my first column categorized (which is a column with a “Name” field ; not a “summary”).
        I agree with you if the column is with a “summary” field, it works.

        Do you know how to convert a “Name” field (Author, Reader, etc …) in “summary” field?
        (I never needed to do that before this test)

        Thank you for yor help.

        here is portion of code used…
        var layout = [
        { cells: [
        {field: “currentActorNA”, name: “currentActorNA”},
        {field: “childItems”,
        children: [
        { field: “betGetTeam1TX”, name: “betGetTeam1TX”, formatter: formatText},
        { field: “betGetTeam2TX”, name: “betGetTeam2TX”},
        { field: “betPointNO”, name: “Totals Points” }
        aggregate: “sum”
        var jsonStore = new{ url: “TreeGrid_DataStore_TotalsAndCounts.xsp”});

        // “TreeGrid_DataStore_TotalsAndCounts.xsp”…
        var vw:NotesView = database.getView(‘betView2’);
        var nav:NotesViewNavigator = vw.createViewNav();
        var ve:NotesViewEntry = nav.getFirst();

        while (ve != null) {
        var cv = ve.getColumnValues();

        // When a categorized entry is reached:
        // (a) write out the previous category and children
        // (b) set up the new category element
        if (ve.isCategory()) {
        // Write out the previous category and child entries
        if (categoryAndChildren != “”) {
        // Trim the trailing comma and space off the category item, close of the childItems array (]) and the category item (})
        categoryAndChildren = categoryAndChildren.substring(0, categoryAndChildren.length – 2);
        writer.write(“\n” + categoryAndChildren + “] }, “);

        // Start building the new category and child entries
        categoryAndChildren = ” {id:'” + cv[0] + “‘, type: ‘currentActorNA’, currentActorNA:'” + cv[0] + “‘, numPeople: 3, childItems:[ \n”;

        } else {
        // This isn’t a category, so add another child item
        categoryAndChildren += “{id:'” + ve.getUniversalID() + “‘, betGetTeam1TX:'” + cv[1] + “‘, betGetTeam2TX: ‘” + cv[2] + “‘, betPointNO: ‘” + cv[3] + “‘}, ”

        // Get the next entry and recycle the current one
        var tmpentry = nav.getNext();
        ve = tmpentry;

        // Write out the last category and children, without the trailing commas
        categoryAndChildren = categoryAndChildren.substring(0, categoryAndChildren.length – 2);
        writer.write(“\n” + categoryAndChildren + “] }, “);

        // Close the JSON string

      • Brad Balassaitis says :

        This is the source code that your using to generate the grid. Can you share a snippet of the JSON output that the XAgent generates? I think there may be something in the field that throws off the JSON string.

        Another way to isolate whether the name is the problem would be to modify the view or the XAgent output to ensure that it’s writing out a plain string rather than a name, which may have characters that need to be escaped. Maybe changing the view’s name column formula to use @Name to limit it to the common name may help isolate the problem.

  10. Clute says :

    I am really loving the theme/design of your site. Do you ever run into any browser compatibility problems? A number of my blog audience have complained about my blog not operating correctly in Explorer but looks great in Chrome. Do you have any suggestions to help fix this issue?

  11. Claudio Mazzola says :

    Hi Brad
    new in Xpages and I need help about use Data Grid(DG) or Dojo Data Grid(DDG).

    How can I use “filters” using a Read/Write/Input DDG/DG whitin an XPages Form?


    I have input Field in Xpages Form(1)


    and in the same Form(1) have

    DDG/DG whith field’s

    Article (array field) combo box
    ArticleType (array field) text
    Location (array field) text

    The field’s in the DDG/DG belong to the same form, then, How can I use “filters” using a Read/Write/Input DDG/DG whitin an XPages Form, to only return the data that NumberCase match in DDG/DG and not that of all documents?

    Brad could give me a help? Thank you

    • Brad Balassaitis says :

      I’m not positive that I understand what you’re looking for, but it sounds like you’re asking how to filter the grid data based on fields you set up on your own form.

      You can use a technique similar to the example shown here:

      This is for a View Panel, but the same thing will work if you set similar properties on the REST service that provide the data for a Dojo grid.

      Otherwise, if you want to use the grid’s built-in filtering features, take a look at this post on adding EnhancedGrid filtering:

      • Claudio Mazzola says :

        Thank you for your reply, Brad.

        Is correct, I need filter the grid data based on fields you set up on your own form.

        I used the technique you indicate using it with Rest Service and Dojo grid.

        Thank you for yor help.

      • Brad Balassaitis says :

        Glad to hear it! Thanks for letting me know.

      • Claudio Mazzola says :

        Hi Brad:

        I was able to filter and display data in data grid dojo, but I have a problem:

        – As noted earlier in a document I have fields that are Array type, which are the ones I want to show in Dojo Data Grid.

        – The data of the Array fields displays correctly, but in a row: Example:

        Field Array DataItem contains: Battery, Book, Table
        Field Array TypeItem contains: E, C, F

        This data is shown in Dojo Data Grid like this:

        Data Item Type
        Battery,Book,Table E, C, F

        and I need to show like this:

        Data Item Type
        Battery E
        Book C
        Table F

        How I can do this?

        Thank you again.

      • Brad Balassaitis says :

        This post shows how to use HTML content in a cell. You could write code to split up the array and pass a BR tag in between each element to get them to display on individual lines.

  12. Billyson says :

    How do i change the background color of the row on row click without marking as selected.

  13. Steven Podrouzek says :

    Really Enjoying this series! Great stuff

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: