The custom grid tutorial does not appear to work

Markus shared this question 5 years ago


It's really frustrating working with this tutorial.

I really can't get this to work. I have a grid, I've copied and pasted it and added an OnPageLoad event to the page. I have added the pagination event and I still get the single grid behaving in the same way, not moving to the next page.

Comments (6)


Good grief, the tutorial is not clear.

This tutorial is a pretty big workaround. Basically, the Page Load event is used in combination with the "next" pagination action, to trick each grid into stepping into the next record (row) based on the number of "rows per page".

The way to activate this trick, is to set the "rows per page" found in the properties of each datagrid incrementally. So for Grid 1, you need 1 row (and no pagination action), for Grid 2 you need 1 row (with a pagination action) and for Grid 3 you need 2 rows (with a pagination action).

Please make this clearer in the tutorial, I wasted a whole evening experimenting with this.


Thanks for the feedback. We are actually considering making new and improved tutorials.

Is there a particular question you want to ask about this tutorial?


Hi John,

I've laid out a grid with x5 datagrids, these 5 are horizontal left to right. I've paginated them correctly with each grid paginated by it's number -1 (Grid 5 = pagination 4, Grid 4 = pagination 3 etc.)

I'm finding that grids 3 and 4 are displaying the correct data but these grids also repeat the data underneath just once. Take a look at the attached image to this comment... Why is that happening?




It's hard to tell what you did on these data grids. Can you please send the .vp file to I will take a look at it.

Also, just for clarification, you just wanted the five data grids on the above row, and then get rid of the two repeated grids below? Is this correct?


I've worked this out.

My data only contained 5 records, but when you add more it becomes apparent how this "hack" works.

The pagination tells the data grid how many rows there should be in total and it counts through the number of "next page" events loaded on Page Load to display the "first" image to give you a left to right readable view of your data.

Unfortunately, where there's more data in the data master, these data get loaded afterwards and this increases with the number of data grids.

The work around not clear in the tutorial is to use the data grids on rows 2, 3, 4... to cover up the "left overs" that are being displayed.

Guys - can't you just create a nice data grid component? This is a pain in the arse.


But to be honest your product is just starting to overtake Axure.

The datamaster features are so useful, and such a point of difference between Axure and Prototyper.

These features really help to prototype an experience much closer to the finished product. This makes keeping up with Developers who get faster and faster, and who are more particular about the detail, easier to do.

I just need to be sure they work reliably before deciding to buy your product and hacks like this make me a bit nervous.