Highlighting an area of a grid using repeaters

Hi there,

Bit of a weird one for you. I want to create a demo of highlighting an area on a grid for an interactive map project I’m working on. I can get it to work with highlighting individual squares, and then moving a circle around to show a highlighted region as shown, but what I really want to be able to do is highlight the squares around the one in the middle in (like shown in my example on the right of the page, rather than having to use the circle.

Any ideas? I’ve tried creating a hidden shape and getting it to trigger states on the repeater when it goes over them, but I can’t get it to activate them individually (without having to update the whole data set which is very slow).
Any ideas? I’d also be up for faking it, and just getting the shape I’ve created to move by 35px increments, but couldn’t get this to work well.

Any thoughts appreciated. Thanks!


Grid Example.rp (172.2 KB)

Here’s my solution if anyone else comes across this…

.Grid Example_V2.rp (198.7 KB)


Here’s an example that uses OnMouseEnter of the rectangle inside the repeater itself. Notes:

  • There’s a snippet of javascript in OnLoad of the highlightDP that makes it invisible to mouse events, so it doesn’t eat up the repeater square’s OnMouseEnter event. (If you are using IE, you’ll need at least IE 11.)
  • There’s a “variable” (i.e., a label holding a value) that contains the number of columns that the repeater has, because that is not gettable from a repeater. (Here, it’s set to 15, same as the repeater is set.)
  • The x position of the highlightDP is obtained by using Item.index modulo’d by numColumns (with some other math)
  • The y position is determined by rounding down Item.index/numColumns (with some other math)
  • I removed certain borders of the rectangles in highlightDP so they didn’t rely on overlapping by 1 pixel; this gives it perfect alignment with the grid.

Live sample

File: Grid Example_V3.rp (170.3 KB)

Thank you so much Joseph that’s perfect! :slight_smile:

All the best!