Image Drag and Drop functionality for Sorting list items

9 posts, 0 answers
  1. VTech
    VTech avatar
    3 posts
    Member since:
    Nov 2010

    Posted 03 Nov 2010 Link to this post

    Hi,

    We are using Telerik  RADControls for ASP.NET/AJAX and are looking to implement a Image galary with functionilty to change/maintain the sort order/item listing on products page of website  by simple drag and drop of Product images which we would be binded in ListView control.

    Please refer the link with link with sample implementation using DHTM/AJAX - http://www.dhtmlgoodies.com/scripts/floating_gallery/floating_gallery.html

    Do you have any sample/demo of ListView with this implementation?
  2. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 08 Nov 2010 Link to this post

    Hello,

    I recommend that you use the Items Drag-and-drop functionality to achieve reordering of list view items. You can handle the RadListView's ItemDrop event, get the new position of the dropped item, update the data source and rebind the listview. You can see how this is implemented here.

    Please, give this approach a try and let me know how it goes.
     
    Best wishes,
    Mira
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. VTech
    VTech avatar
    3 posts
    Member since:
    Nov 2010

    Posted 09 Nov 2010 Link to this post

    Hi Mira,

    Thanks for your response. We have already referred demo links for Item Drag & Drop event for ListView control (http://demos.telerik.com/aspnet-ajax/listview/examples/itemdragdrop/defaultcs.aspx). However, it does not seem to let drag & drop of objects in the same list view control. The demo example lets you drag and drop object from one listview control to anoter list view control. We need capability of drag and drop of objects within same control. Please let us know if this can be acheived and it would be great if you can provide a sample code for the same.
  5. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 11 Nov 2010 Link to this post

    Hello,

    To implement the desired functionality, I recommend that you use handle the ItemDrop event in the following way:
    protected void RadListView1_ItemDrop(object sender, RadListViewItemDragDropEventArgs e)
    {
        if (e.DestinationHtmlElement.IndexOf("RadListView1") < 0)
        {
            return;
        }
     
        //the item is dropped on the same list view
    //reorder the data in the data source and rebind the list view
     
    }
    You can see how the data can be reordered here.

    Please give this approach a try and let me know how it goes.

    All the best,
    Mira
    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
  6. VTech
    VTech avatar
    3 posts
    Member since:
    Nov 2010

    Posted 16 Nov 2010 Link to this post

    Hi Mira,

    We tried implementing this however, Itemdrop event does not fire if we try to drag any element from the listview within same control.
    Can you provide a sample/demo application using ListView control which would allow to drag and drop elements within same control?
  7. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 18 Nov 2010 Link to this post

    Hello,

    I have followed your scenario and prepared a sample project for you demonstrating how the desired functionality can be implemented. You can find it attached to this message.

    I hope it helps.

    Sincerely yours,
    Mira
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  8. moegal
    moegal avatar
    273 posts
    Member since:
    Jul 2007

    Posted 27 May 2014 in reply to Mira Link to this post

    Does anyone have a working example of this?  I am having several issues with the example from Mira.  It has helped but I am still stuck.

    1. I cannot seem to get the id of the item I want to move the desire item to.
    2. Not sure how to tell if the item is before or after an item to put it first or last.
    3. Not getting any visual cue's

    Thanks, Marty
  9. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 30 May 2014 Link to this post

    Hello Marty,

    If you check the attached sample you could get the id of item which is moved by using the e.DraggedItem.GetDataKeyValue("OrderID"). On the other side if you need to get the id of the item on which you have dropped then you could get it from the e.DestinationHtmlElement. After you have this information you could retrieve the index of the items and rearrange the collection the way you like. You could add the item which is moved on the left or on the right side of the destination item. Please review the attached sample to better understand how the reorder of items is implemented.

    Regards,
    Kostadin
    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.

     
  10. Nick
    Nick avatar
    17 posts
    Member since:
    Feb 2011

    Posted 06 Nov 2014 in reply to Mira Link to this post

    Where do you run the sample from?
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017