[RESOLVED] Retrieving ListView Items after Drag Drop

[slaws]

Hi everyone!

So I have two databound listviews and I'm using jQuery to drag and drop the items between the two. I utilized this implementation. That part is working great (finally).

However after I am done dragging and dropping I need to get all of the items from one of the lists. Iterating through the listview in the code behind only returns the items that were originally bound to the list (by design).

So how can loop through the list view, get all the items and return it server side. I'm assuming it's a javascript solution be I haven't found any good examples of that. Or is there a jQuery solution to that?

Any help would be appreciated and I thank you in advance for any replies.

[SambaNeko]

I'm assuming it's a javascript solution be I haven't found any good examples of that. Or is there a jQuery solution to that?

jQuery is Javascript, if there was any confusion.

You can use jQuery to get the new ordering of elements in either (or both) list(s); here's one approach:

$('#myFormId').submit(function(){
  var listItems = '';
  $('#sortable2 li').each(function(){
    listItems += $(this).text()+',';
  });
  $(this).append('<input type="hidden" name="listItems" value="'+listItems+'"');
});

This is making some assumptions about your code and how you want to handle things. It assumes you'll have a form with id "myFormId," and that upon submission, it will gather the list items in #sortable2 and make a comma-separated string of their text in consecutive order, and then append that string to the form as a hidden input named "listItems".

So you have some options to consider: do you want to use form submission? Would you rather use AJAX? Will a comma-separated list be an appropriate data format to use? Is there something more ideal? All things you can change, depending on what you want.

[slaws]

Thanks for the reply Samba, that sounds like what I want to do.

Some further details:

• I am wanting to gather the items in the listview on a button click
  

  <asp:Button ID="cmdRecipientOK" runat="server" Text="OK" CssClass="cmdButton" />

• After the cmdRecipientOK button is clicked I want JQuery to gather everything in the listview in to a string, send it to code behind where it will be split and tossed into a DB.
• I am using AJAX so this is all within an update panel. The button also resides in an AJAX modal popup.
• The JQuery DragDrop script is being registered from the code behind when the listitems are bound to the data. I assume I will need to do the same thing for the "submit" script that you provided as well?
  

  ScriptManager.RegisterStartupScript(mpeRecipients, Me.GetType(), "jqDragDrop", strScript.ToString, False)

I am currently attempting to implement your jQuery code. I'm having an issue trying to get anything to happen in jQuery when the button is clicked.

$("#cmdRecipientOK").live('click', function () {
alert('I am clicked');
});

So I'm working on trying to figure out what the issue is there.

I appreciate your input greatly.

[SambaNeko]

I'm honestly kind of ignorant on .Net aspects In the sample code that you linked, there's this block of script:

<script type="text/javascript">
  $(function () {
    $("#sortable1, #sortable2").sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  });

  $(document).ready(function () {
    $("li").dblclick(function () {
      $(this).closest('li').remove();
    });
  });   
</script>

It's a little redundant in that both of these constructs do the same thing:

$(document).ready(function () {
  //script that you put in here will be executed when the page loads
}

$(function () {
  //script that you put here will also be executed when the page loads;
  //this is a shorthand version of the above
}

So, you could condense this into one block, and it's the same place where you'll want to add anything else that runs on page load (such as assigning callbacks for events like submit and click):

<script type="text/javascript">
  $(function () {
    $("#sortable1, #sortable2").sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();

    $("li").dblclick(function () {
      $(this).closest('li').remove();
    });

    //additional code goes here:
    $("#cmdRecipientOK").live('click', function () {
      alert('I am clicked');
      return false;
    });

  });   
</script>

From there, you could put the innards of my submit function into the click function, and then use one of jQuery's AJAX methods to submit. It may or may not be necessary, but I added "return false" in your click handler as this is often appropriate when you want the click to execute AJAX: it prevents the default action of the click, such as navigating away from the page (via link, form submission, etc.).

[slaws]

Thanks SambaNeko that was exactly what I needed!