Use Sitefinity Layout Controls without Drag\Drop

July 01, 2013
Layout controls are awesome...they just are.  You get a ton of layout flexibility just about instantly with a quick drag\drop control.  See the attached Gist below if you want to see or copy\paste the syntax to write them.

ANYWAY...what if you're needing to perhaps do a 4 column or 3 column repeater layout to display content...and the repeating happens in a template.

Well normally you'd just write your own css, maybe give each column margins, percentage widths, box-sizing maybe, etc etc.  I call this method the reinventing the wheel method because sitefinitys layouts already do these for you.  Not only that but when you use the layout syntax you're making your element automatically responsive because they will follow the rules setout in the sitefinity backend.

So here's my solution, a helper you can use in your RadListView templates
The idea is everytime it runs it'll put the total count and current size onto the out and in for you...I mean you could do it direct in the markup, but gets a bit sloppy with the 3 column needing "34" as the middle size.

The benefit of this method though too is that we can do GROUPINGS!  So if you checkout the Gist grouping example you can see what I mean.  If you have 8 items in your result-set, just enable grouping to 4 columns and it'll render as if you've stacked 2 4 column layouts on-top of each other.

Resources:



Image Description

Steve McNiven-Scott

Best\Only Blogger on this site. Therefore defacto blogger of the year Award Winner.