[Solved] Drag Drop per Data Item in ListView Style

[Henry]

Hi,

I followed the listview demo:
http://demos.telerik.com/aspnet-ajax/grid/examples/programming/listview/defaultcs.aspx

to produce a listview display of thumbnail images via asp.net Image control:

	<telerik:RadGrid ID="RadGrid1" DataSourceID="EntityDataSource1" AllowFilteringByColumn="false"
	runat="server" GridLines="None" AllowPaging="true" AllowSorting="false" OnPreRender="RadGrid1_PreRender"
	PageSize="6">
	<PagerStyle Mode="NextPrevAndNumeric" />
	<MasterTableView TableLayout="Auto" ShowHeader="false">
	<ItemTemplate>
	<%# (((GridItem)Container).ItemIndex != 0)? "</td></tr></table>" : "" %>
	<asp:Panel ID="ItemContainer" CssClass='<%# (((GridItem)Container).ItemType == GridItemType.Item)? "item" : "alternatingItem" %>' runat="server">
	<asp:Image ID="Image1" runat="server" ImageUrl=<%# Eval("Path")%> Height="40" Width="40" ImageAlign="Middle" />
	</asp:Panel>
	</ItemTemplate>
	</MasterTableView>
	<GroupingSettings CaseSensitive="false" />
	<ClientSettings AllowColumnsReorder="true" AllowDragToGroup="true" ReorderColumnsOnClient="true" AllowRowsDragDrop="true">
	<Selecting AllowRowSelect="true" />
	<Scrolling AllowScroll="true" UseStaticHeaders="true" />
	</ClientSettings>
	</telerik:RadGrid>

It worked as expected, however, when I place lines number 14-17 to produce the drag and drop effect, the drag and drop functionality works per row, which as per demo, all data items, (in my case asp.net image controls) are just one row, thus, when dragging, I'm dragging every thumbnail displayed in one go - which is not the desired effect.

Hope you can explain how can I achieve drag&drop per data item (w/c in this case is the Image Control binded by Eval("Path") ), in a ListView Style (w/c displays items horizontally).

Many Thanks,
Henry Wu

[Veli]

Hello Henry,

Please note that when using RadGrid's drag and drop functionality, the same is implemented on the <tr> element level, meaning you need to drag and drop only individual items rendered as <tr> elements. In the CardView example, RadGrid renders all of its data into a single row and single cell, therefore you drag and drop only that. This is achieved by braking the regular rendering of RadGrid's items to enable all data records to be rendered in one and the same container, so that they can be aligned horizontally.

Please note that if you define a general ItemTemplate for RadGrid's MasterTableView without the  above mentioned "hacking" approach, your data items will be renderd into separate <tr> elements. This means that you will now be able to drag and drop them, but you cannot achieve horizontal alignment.

Therefore, drag and drop for listview grid is currently an unsoported scenario.

All the best,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.