Grid template flow control

3 posts, 0 answers
  1. Christian
    Christian avatar
    69 posts
    Member since:
    Apr 2008

    Posted 01 Apr 2014 Link to this post

    I have a dilemma where we have a datasource that defines either a 'landscape' or 'portrait' item, each of these need its own template inside a grid (or other recommended control) that flows in the correct manner, see attached illustration.

    In the example you can disregard the odd item on the first row, this is simply a 'hoover' effect that has nothing to do with the actual problem.
    But as you can see there are two types of items, one landscape and one portrait to be able to show the correct images and still make it flow together with one another. Of course there might be cases where the last item is dropped if we have three landscape items in a row.

    So, Is there any way to accomplish this? 
    Suppose we need an Event that still hasn't bound the template and we can bind it to the correct template based on the item datasource.

  2. Christian
    Christian avatar
    69 posts
    Member since:
    Apr 2008

    Posted 01 Apr 2014 Link to this post

    Or if someone has any idea of how to sort this using one template and simply have the width dynamically altered. Maybe a listview control is more correct, I´m all ears to a solution at this point.
  3. Konstantin Dikov
    Konstantin Dikov avatar
    2466 posts

    Posted 03 Apr 2014 Link to this post

    Hello Christian,

    For your requirement I could recommend the RadListView control. It should allow you to easily accomplish the desired result. Please have a look at the following online demo, where a Image Gallery is created with RadListView control:
    As for the different templates for different images, in my opinion a better approach would be to have one template for all image, but to handle the server-side ItemDataBound event of the RadListView for retrieving the relevant information (if the image is landscape or portrait) and to change the Width or Height properties of the container/control displaying the image.

    Another possible approach would be to add different CSS classes to the wrapping container of the image in the PreRender event, by traversing through each item.

    Hope that helps.

    Konstantin Dikov

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top