This is a migrated thread and some comments may be shown as answers.

Image Drag and Drop functionality for Sorting list items

7 Answers 383 Views
ListView
This is a migrated thread and some comments may be shown as answers.
VTech
Top achievements
Rank 1
VTech asked on 03 Nov 2010, 03:50 PM
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?

7 Answers, 1 is accepted

Sort by
0
Mira
Telerik team
answered on 08 Nov 2010, 02:41 PM
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
0
VTech
Top achievements
Rank 1
answered on 09 Nov 2010, 03:57 PM
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.
0
Mira
Telerik team
answered on 11 Nov 2010, 04:41 PM
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
0
VTech
Top achievements
Rank 1
answered on 16 Nov 2010, 08:42 PM
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?
0
Mira
Telerik team
answered on 18 Nov 2010, 05:11 PM
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.
0
moegal
Top achievements
Rank 1
answered on 27 May 2014, 06:59 PM
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
0
Kostadin
Telerik team
answered on 30 May 2014, 01:13 PM
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.

 
Tags
ListView
Asked by
VTech
Top achievements
Rank 1
Answers by
Mira
Telerik team
VTech
Top achievements
Rank 1
moegal
Top achievements
Rank 1
Kostadin
Telerik team
Share this question
or