Drag and Drop

[eran]

Hi,

I am showing a photo gallery and allow users to move the photos and drop at the category repeater.
I have seen the demo in the website.

http://demos.telerik.com/aspnet-ajax/listview/examples/itemdragdrop/defaultcs.aspx

can anyone explain to me about the code ? I am doing something like the demo but i am not dropping song to genre

but i am dropping image to different category.

Can anyone guide to do that ?

Kind Regard,
kea

[eran]

any idea ? i need this urgently.. >.<

[Veli]

Hello eran,

The idea is  the same, really. You define your custom ItemTemplate / AlternatingItemTemplate containing your images. These templates should also contain a RadListViewItemDragHandle control reprenting the drag handle you can grab items by. After you set AllowItemsDragDrop="True", your listview items can now be dragged to any HTML element on the page.

When items are dropped, RadListView fires the server-side ItemDrop event as demonstrated in the demo. The event handler gives you the client ID of the HTML element you dropped the listview item to. To be able to infer which category you dropped your item over, you need to use the ID of the destination element. Then you can apply your custom logic to move the specified image to the selected category.

The following RadListView online help article explains this process in detail.

Kind regards,
Veli
the Telerik team

[eran]

do you have a clear explaination about the javascript() and the trackManager ?

i keep having error for the _itemDrag.

i need a clear explaination for it.. thanks in advance.

[Veli]

Hello eran,

If the error about _itemDrag says it is not defined, it means you haven't enabled ItemsDragDrop in RadListView. RadListView's client-object has a field named _itemDrag that refers to another client object implementing drag-and-drop for listview items. This object is added to the listview client object only when items-drag-and-drop is enabled. Therefore, if you do not have it, most probably you haven't enabled drag-and-drop. It is also important to mention that RadListView's drag-and-drop functionality is available since version 2010.Q1 of Telerik RadControls for ASP.NET AJAX. If you happen to be using an older version, drag-and-drop is not available.

Also, note that to make your items draggable, you need to indicate the listview item's boundaries. As RadListView does not define and track its own HTML elements, it is the developer's responsibility to indicate which HTML element is the RadListView DataItem container. This is done using the .rlvI and .rlvA CSS classes applied to your listview container elements as indicated in the demo and help article we referred to in previous posts. Failing to put .rlvI or .rlvA classes to your item HTML elements will prevent them from being dragged.

Finally, when dropping a RadListView item on the page, the immediate target HTML element's id is sent to the server. This client ID is available in the ItemDrop event's DestinationHtmlElement property. You need to use it to indicate the the destination category, meaning the client ID of your HTML element should contain information about the target category, which you need to use on the server.

Finally, the TrackManager you asked about is a custom class in the RadListView Items drag-and-drop demo. It simply helps abstract data operations like getting all tracks in a single category, getting all categories, as well as setting the category for a specified track.

I hope things are clearer now. If you have any specific questions, please ask.

Best,
Veli
the Telerik team

[eran]

Hi,

Can you explain the repeater part ? is it possible to use a sqldatasource on the repeater ?

I manage to drag out from the listview but the problem i having is dropping on the repeater linkbutton. 

How can that be done ?

Thanks in advance.

Best Regards,
ER AN

[BaiH]

Man, what's so confusing with this sample? It is quite straightforward actually -> When an item is dragged from the ListView onto the repeater, the actual record's type (Genre) is changed to the record (Genre) bound to the repeater's item.

Yes,  you can use SqlDataSource but then instead in-memory you will need to change the track data in the DB.

--BH

[eran]

Hi Baih,

i am pretty new to visual basic and javascript. i had never use repeater for my project before. Just wondering how does it work so that i can implement it to my project. For now i am able to drag the item in the listview. the problem i facing is where to drop and how to drop ? this is the main problem i met now. If possible maybe you can share your code with me ? i will appreciate it. :) 

Best Regard,
ER AN

[Vinkel]

eran, if you go through the code in the drag and drop listview demo (javascript and code-behind), you will see how to implement. If you need, browse MSDN and javascript tutorials to educate.

-J

[eran]

hey vinkel, 

do you mind giving me the link for the javascript tutorials in MSDN ?

Best Regard, 
ER AN