Monday, 7 May 2012

Listbox move updown rightleft jquery


Listbox Move Up Down Right Left Delete Item value show / select all check list items in asp.net controls using jquery js sample demo code:


This jquery/js will perform the following function (not by using javascript method)...

1. Move list items between two listbox with multiple move option
2. Delete List Item / multiple list items.
3. Move list items up and down (multiple)
4. Seletet / read all list items. (option to show selected list items is commented in jquery js code)



Script sample demo code
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
            $("#MoveRight,#MoveLeft").click(function(event) {
                var id = $(event.target).attr("id");
                var selectFrom = id == "MoveRight" ? "#from" : "#to";
                var moveTo = id == "MoveRight" ? "#to" : "#from";

                var selectedItems = $(selectFrom + " :selected").toArray();
                $(moveTo).append(selectedItems);
                selectedItems.remove;
            });
        });
    //function moveUp() {
    $(function() {
    $("#MoveUp").click(function(event) {
  
    $('#to :selected').each(function(i, selected) {
        if (!$(this).prev().length) return false;
        $(this).insertBefore($(this).prev());
    });
    $('#to select').focus().blur();
  
});
});

//function moveDown() {
$(function() {
$("#MoveDown").click(function(event) {
    $($('#to :selected').get().reverse()).each(function(i, selected) {
        if (!$(this).next().length) return false;
        $(this).insertAfter($(this).next());
    });
    $('#to select').focus().blur();
  
});
});
$(function() {
$("#ReadAll").click(function(event) {
$('#to option').each(function(index) {
//  if ( ($(this).is(':selected')) {
//    // do stuff if selected
//  }
//  else {
//   // this one isn't selected, do other stuff
//  }
alert($(this).val()+'--' + $(this).text());
});
});
});
$(function() {

$("#Delete").click(function(event) {
    $('#to :selected').each(function(i, selected) {
      
        $(this).remove();
        alert('Selected item deleted');
       $('#to').focus().blur();
  
});
});
});

    </script>
 
 
 
HTML APSX Source code 

<div>
    <asp:ListBox ID="from" runat="server" SelectionMode="Multiple">
    <asp:ListItem Value="f1">frm list 1</asp:ListItem>
    <asp:ListItem Value="f2">frm list 2</asp:ListItem>
    <asp:ListItem Value="f3">frm list 3</asp:ListItem>
    <asp:ListItem Value="f4">frm list 4</asp:ListItem>
    <asp:ListItem Value="f5">frm list 5</asp:ListItem>
    </asp:ListBox>
 
   
    <input id="MoveRight" type="button" value=" >> " />
    <input id="MoveLeft" type="button" value=" << " />
    <input id="MoveUp" type="button" value=" UP " />
    <input id="MoveDown" type="button" value=" Down " />
    <input id="Delete" type="button" value=" Delete Item " />
    <input id="ReadAll" type="button" value=" Read All " />
     
    <asp:ListBox ID="to" runat="server" SelectionMode="Multiple">
    <asp:ListItem Value="to1">to list 1</asp:ListItem>
    <asp:ListItem Value="to2">to list 2</asp:ListItem>
    <asp:ListItem Value="to3">to list 3</asp:ListItem>
    <asp:ListItem Value="to4">to list 4</asp:ListItem>
    <asp:ListItem Value="to5">to list 5</asp:ListItem>
    </asp:ListBox>
    </div>