Simple listview drag and drop

[Sean]

All I'm looking for is a simple example of dragging and dropping from one list view to another with custom item/select templates I want the selected item template to be different in the destination listview... the telerik demo is a little more than i need to dissect for something that should be simple ... does anyone out there have a SIMPLE example that does not require all of the objects/data sources  etc.

[Sean]

Ok so using the 'MP3/itunes' style demo where the 'tracks' are dragged and dropped to a 'Genre' repeater I was able to get this to work where they are dropped onto a listview - the issue now is when one of the items is 'Selected' in the 'destination' listview after the selection the emptydatatemplate is displayed - if i then drag another item on to the 'destination' listview it displays with all of the items from the listview and the 'selected' state of the previously selected item.

[Konstantin Dikov]

Hi Sean,

Thank you for contacting Telerik Support.

For selecting in RadListView I would suggest you have a look at our demo page "RadListView - Selecting items". Also, if you want to clear all selected items from the RadListView when dropping items, you may use the OnItemDrop event and call the RadListView ClearSelectedItems() method.

If the above is not what you have in mind, please consider providing the markup and the code-behind of your project with additional information for your requirements so we can be of any further assistance.

Looking forward to your reply.

 

Regards,
Konstantin Dikov
Telerik

[Sean]

I was able to get this to work however i want the 'selected' item template to behave more like a toggle so if they click an item in the selected itemtemplate I have some textboxes dropdowns etc. if they click the item again 'collapsing' it i want to maintain the values that were set in the selected item template

Is this not possible with the listview? should i be using something more like a repeater with a simple jquery toggle?

[Sean]

this is somewhat more what im trying to accomplish ... but i want to have a 'listitem' view and an expanded view for the items in the right box...

http://demos.telerik.com/aspnet-ajax/listbox/examples/functionality/templates/defaultcs.aspx

[Konstantin Dikov]

Hi Sean,

In order to achieve the scenario you require for replicating the ListBox demo with ListView, I may suggest you follow the steps bellow:

• Use the "SelectedIndexChanged" server-side event to get the selected DataItem index;
• After retrieving the selected DataItem index, you can extract the data from the ListView and populate the second control that will display the "expanded view" (a second ListView for example):

protected void RadListView1_SelectedIndexChanged(object sender, EventArgs e)
{
    foreach (var selectedItem in (sender as RadListView).SelectedItems)
    {
        selectedItem.Selected = false;
        int selectedItemIndex = selectedItem.DataItemIndex;
        //
        // Extract the data and populate the second control
        //
    }
}

• Use the second control to edit the data (if second ListView is used you may easily add the selected DataItem and add it to the second ListView, set its Edit property to "true" and edit the item);
• On event of your choice from the second control you may update the data of the ListView;

If you however decide to implement the previous scenario with opening edit mode on selection I may suggest you the following solution:

• Set ItemTemplate and EditItemTemplate of the ListView;
• On SelectedIndexChange event you can set the Selected property of the item to "false" and then set the "Edit" property to "true":

protected void RadListView1_SelectedIndexChanged(object sender, EventArgs e)
{
    foreach (var selectedItem in (sender as RadListView).SelectedItems)
    {
        selectedItem.Selected = false;
        int selectedItemIndex = selectedItem.DataItemIndex;
        selectedItem.Edit = true;
    }
}

• For updating the data you may refer to the demo above.

Additionally, please review the following online demos so you can get a better idea of how to use ItemTemplate, EditItemTemplate, LayoutTemplate and SelectedItemTemplate.:

• Automatic data editing;
• Data and layout templates;
• Selecting items.

If we can be of any further assistance, please feel free to contact us again.

Regards,
Konstantin Dikov
Telerik