Simple listview drag and drop

6 posts, 0 answers
  1. Sean
    Sean avatar
    51 posts
    Member since:
    May 2008

    Posted 24 Jul 2013 Link to this post

    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.
  2.
  3. Sean
    Sean avatar
    51 posts
    Member since:
    May 2008

    Posted 25 Jul 2013 Link to this post

    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.
  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2386 posts

    Posted 29 Jul 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  7. Sean
    Sean avatar
    51 posts
    Member since:
    May 2008

    Posted 29 Jul 2013 Link to this post

    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?

  8.
  9. Sean
    Sean avatar
    51 posts
    Member since:
    May 2008

    Posted 29 Jul 2013 Link to this post

    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
  11. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2386 posts

    Posted 01 Aug 2013 Link to this post

    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.:

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

    Regards,
    Konstantin Dikov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top