This is a migrated thread and some comments may be shown as answers.

Grid template flow control

2 Answers 54 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Christian
Top achievements
Rank 1
Christian asked on 01 Apr 2014, 09:06 AM
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.

Christian

2 Answers, 1 is accepted

Sort by
0
Christian
Top achievements
Rank 1
answered on 01 Apr 2014, 09:20 AM
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.
0
Konstantin Dikov
Telerik team
answered on 03 Apr 2014, 10:42 PM
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.


Regards,
Konstantin Dikov
Telerik
 

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.

 
Tags
General Discussions
Asked by
Christian
Top achievements
Rank 1
Answers by
Christian
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or