Flow Layout In ASP.NET DataView (Upcoming Feature)

ASP.NET Team Blog
23 December 2008

In the DXperience 2009 volume 1 release, expected to release 1st quarter of 2009, the ASPxDataView will support the 'flow' layout mode.

With a flow layout, the items in the ASPxDataView will flow one after another even after the browser is resized. This allows you to automatically fill the page area in the best possible way.

Why is this useful?

Let's say you've got a page that displays a bunch of images. A flow layout allows the site to be 'stretchable'. Therefore, if the user has a larger monitor and wants to see more items, the ASPxDataView in flow layout will expand and fill the page area.

The flow feature also frees you from having to choose 2, 3, or however many columns may fit into your target client browsers. For example, power users always want more data displayed but you still have to accommodate the small monitors, too. Flow layout helps with that.

Check out these screenshots of the sample photo gallery website. At different resolutions, the images in the ASPxDataView auto expand to fill the browser area:

800 x 600 (Small Laptop, Netbook):

 VicSS1

1024 x 768 (Standard Size / 48% of Internet Users):

 VicSS2

1275 x 794 (Large Monitor / Power User):

VicSS3

You'll get the new ASPxDataView's flow feature as soon as it's released with your DXperience subscription. Not subscribed to DXperience? Here's more info on how to do that.

The flow layout is a slick new feature and looks great on a photo website. What other websites would a flow layout be useful for?

10 comment(s)
John Phillips
John Phillips

Will this wrok with ASPGRIDVIEW?

24 December, 2008
Anonymous
Lieven Bogaert

Nice pictures!

25 December, 2008
Anonymous
heather

Hi Mehul,

Cool new feature.  It would be great to support web user controls in a similar manner.  Shopping cart sites, inventory control, catalog site would all benefit greatly from the feature.

Imagine a web user control with a photo, pricing info, etc able to be managed in a flow layout.

28 December, 2008
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Thanks Lieven,

The fish pictures were taken by one of team leads, Victor, while free diving in the Red Sea.

29 December, 2008
CESAR F. QüEB
CESAR F. QüEB

Useful feature.. but.. please... add support "free-position resize" (not only vertical/horizontal position), like this:

www.adidas.com/.../homepage.asp

Regards

29 December, 2008
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Heather,

Thanks, since the ASPxDataView supports templates, it's possible to design custom controls with the flow layout.

29 December, 2008
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hi Cesar,

That page uses flash though to create that effect. Surprise

29 December, 2008
CESAR F. QüEB
CESAR F. QüEB

Hi Mehul,

Thank you for u'r reply... like you say.. yes!.. the related page uses flash.. but.. my request is some like the effect implemented in the page.. without flash... is this possible.?

29 December, 2008
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hi Cesar,

Perhaps with JQuery, check out the AnimateBlock sample near the bottom here: docs.jquery.com/.../animate

You might try that with a mouseover event.

Btw, scritptaculous has a grow/shrink JS animations as well:

github.com/.../effect-grow

29 December, 2008
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hi John,

No the ASPxGridView doesn't support flow layout because there are many more features of the ASPxGridView that would be affected. We'd probably have to disable many of them to get flow layout and in that case, you're better off just using the ASPxDataView and it's templates. Wink

13 January, 2009

Please login or register to post comments.