Drag and Drop

10 posts, 0 answers
  1. eran
    eran avatar
    14 posts
    Member since:
    Jul 2010

    Posted 16 Jul 2010 Link to this post

    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
  2. eran
    eran avatar
    14 posts
    Member since:
    Jul 2010

    Posted 18 Jul 2010 Link to this post

    any idea ? i need this urgently.. >.<
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 19 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. eran
    eran avatar
    14 posts
    Member since:
    Jul 2010

    Posted 19 Jul 2010 Link to this post

    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.
  6. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 21 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. eran
    eran avatar
    14 posts
    Member since:
    Jul 2010

    Posted 24 Jul 2010 Link to this post

    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
  8. BaiH
    BaiH avatar
    83 posts
    Member since:
    Aug 2008

    Posted 28 Jul 2010 Link to this post

    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
  9. eran
    eran avatar
    14 posts
    Member since:
    Jul 2010

    Posted 28 Jul 2010 Link to this post

    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
  10. Vinkel
    Vinkel avatar
    36 posts
    Member since:
    Apr 2010

    Posted 29 Jul 2010 Link to this post

    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
  11. eran
    eran avatar
    14 posts
    Member since:
    Jul 2010

    Posted 05 Aug 2010 Link to this post

    hey vinkel, 

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

    Best Regard, 
    ER AN
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017