Hello,
I am using telerik listView control for displaying data on web page. I have 16 object in data source and I am binding in to list view control. What I want is that it should display 4X 4 format(4 rows and 4 columns) on page. When i am doing it is displaying all 16 elements in a single column. How I will do this?
I am using telerik listView control for displaying data on web page. I have 16 object in data source and I am binding in to list view control. What I want is that it should display 4X 4 format(4 rows and 4 columns) on page. When i am doing it is displaying all 16 elements in a single column. How I will do this?
4 Answers, 1 is accepted
0
Kevin
Top achievements
Rank 2
Rank 2
answered on 21 Jan 2013, 07:19 PM
Hello Ranjan,
You take a look at this demo:
http://demos.telerik.com/aspnet-ajax/listview/examples/appearancestyling/predefinedlayouts/defaultcs.aspx
You can use the Floated Tiles built-in template, along with grouping to create your 4 by 4 layout. With the Floated Tiles, you'll need to set the width of each item so that when combined they take up the full width of the container. You can then use the Group Template as way to separate them, just in case the height's cannot be made the same, otherwise if they will be a fixed height you can set the height of the items and ignore the Grouping feature.
I hope that helps.
You take a look at this demo:
http://demos.telerik.com/aspnet-ajax/listview/examples/appearancestyling/predefinedlayouts/defaultcs.aspx
You can use the Floated Tiles built-in template, along with grouping to create your 4 by 4 layout. With the Floated Tiles, you'll need to set the width of each item so that when combined they take up the full width of the container. You can then use the Group Template as way to separate them, just in case the height's cannot be made the same, otherwise if they will be a fixed height you can set the height of the items and ignore the Grouping feature.
I hope that helps.
0
Ranjan
Top achievements
Rank 1
Rank 1
answered on 22 Jan 2013, 10:32 AM
Thanks Kevin,
Your post is really helpful. I have another concerned. I want drag and drop functionality to reorder items. Is it possible in RadListView. If yes then how?
Your post is really helpful. I have another concerned. I want drag and drop functionality to reorder items. Is it possible in RadListView. If yes then how?
0
Princy
Top achievements
Rank 2
Rank 2
answered on 23 Jan 2013, 04:41 AM
Hi,
Try the following steps to enable Items Drag & Drop in RadListView.
1) Set RadListView.ClientSettings.AllowItemsDragDrop="true".
2) Add a RadListViewItemDragHandle control to your ItemTemplate / AlternatingItemTemplate.
3) Add a CSS marker on a data item container element (.rlvI for ItemTemplate, .rlvA for AlternatingItemTemplate)
Please take a look into this documentation and demo for more information.
Hope this helps.
Regards,
Princy.
Try the following steps to enable Items Drag & Drop in RadListView.
1) Set RadListView.ClientSettings.AllowItemsDragDrop="true".
2) Add a RadListViewItemDragHandle control to your ItemTemplate / AlternatingItemTemplate.
3) Add a CSS marker on a data item container element (.rlvI for ItemTemplate, .rlvA for AlternatingItemTemplate)
Please take a look into this documentation and demo for more information.
Hope this helps.
Regards,
Princy.
0
Ranjan
Top achievements
Rank 1
Rank 1
answered on 23 Jan 2013, 09:50 AM
Hi Princy,
In your example we drag the list view items to some other source. But in my scenario I am reordering the element of a rad list view items which are arranges in 4X4 matrix format. For example i drag item which is on 4th place and drop on 1st place and there order has been changed.
In your example we drag the list view items to some other source. But in my scenario I am reordering the element of a rad list view items which are arranges in 4X4 matrix format. For example i drag item which is on 4th place and drop on 1st place and there order has been changed.