Dojo Data Grid – Part 29: Displaying the Row Count

In this post, I’ll show how display a row count for the grid and update it after executing a search.

Dojo Data Grid Series

Dojo Grids in XPages — All Blog Posts

All About the Timing

The grid has a rowCount property which will generally return the number of rows in the grid.

It will work fine if you check it by clicking a button after the page loads. However, if you run this immediately as the page loads (even if it’s in the onClientLoad event), it will return 0, because the grid hasn’t been drawn out yet).

At this point, my solution is to introduce a delay to give it time — then it can return the correct amount.

Displaying the Count

One simple way to display the count is to put a simple span tag on the page, add a class to it so it can be programmatically updated.

I added this to my page:

Row Count: <span class="displayRowCount"></span>

Updating the Count

Another consideration is that you don’t just want to check the count when the page loads, you’ll want it to be updated any time the grid is refreshed.

In the post where I showed how to add search to a grid I mentioned that executing a search must refresh the rest service and the grid, so you should put them both in a panel and target that panel with a partial refresh.

To finish this solution, add code that will check the grid’s row count and update the display (span) tag on the onClientLoad event of the panel, so it re-runs every time the panel is refreshed.

var t=setTimeout(function(){
    var myGrid = dijit.byId('#{id:djxDataGrid1}');
    dojo.query('.displayRowCount')[0].innerHTML = myGrid.rowCount;

This code waits half of a second (500 milliseconds) and then checks the grid’s row count (line 2) and updates the span tag to display it (line 3).

These screen shots show the row count below the grid after initial load and then after a search:
Grid 29 - 1

Grid 29 - 2

REST Service Note

I tested this with a JSON rest service as the source for the grid. Interestingly, the service’s count property is set to 20, so it shouldn’t be retrieving the full set of rows, but it returns the full count of over 1,300 anyway.


4 responses to “Dojo Data Grid – Part 29: Displaying the Row Count”

  1. Doug DeCoursin says :

    Hi Brad –

    I used this approach as well (setTimeout) to force a delay, but found that the results were not always consistent based on how long the delay was. I’d assume the higher the delay, the higher the chance of success – but still felt defeated having to insert a false delay just to get this working. I ended up just not using partial refresh and now it seems to work as expected. The performance difference is not discernable so far. Shouldn’t dojo.addOnLoad be a reliable way to ensure the page is fully loaded? Or is there some other event we can latch onto later in the cycle?

    Thanks again for your expertise and willingness to share!


    • Brad Balassaitis says :

      I agree that it doesn’t feel like a perfect solution, but I’m not aware of a better solution at the moment.

      Adding dojo.addOnLoad within the onClientLoad event of the panel still returned 0 for the row count with a few quick tests.

      And I looked again at the grid documentation and did not find any additional events that can be targeted to get the row count more cleanly.

      If you search around, the solution that you’ll see posted involves executing another query against the store and counting the rows that way, which is more overhead.

    • Brad Balassaitis says :

      Doug – I’ve got another idea that may work for you to get the row count easily. Send me an e-mail at (mylastname) at yahoo dot com and I’ll send it to you.

  2. Jhay Jong says :

    Useful article . For my two cents , if your company are wanting to merge PDF or PNG files , my business found a service here

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: