Saturday, November 17, 2012

Following code can be used to move lists item from one to other and
Move up or down in same listbox.

It requires the jQuery lib.

Just bind values in source list box and copy paste following script and html in your screen.

Script:

 /*Move up or down the list items*/
        function MoveItemUpDown(updown) {
            $("[id$=ListBoxDestination] > option:selected").each(function () {
                if (updown == 'up') {
                    $(this).insertBefore($(this).prev());
                }
                else if (updown == 'down') {
                    $(this).insertAfter($(this).next());
                }
            });
            SetSelectedVlauesAndOrder();
            return false;
        }
        function MoveItemsFromSourceToDesitnationListBox(SourceListBoxId, DestinationListBoxId) {
            //Move items from one listbox to other list box
            $("[id$=" + SourceListBoxId + "] > option:selected").each(function () {
                $(this).remove().appendTo("[id$=" + DestinationListBoxId + "]").removeAttr('selected');
            });
            //Remove selected attributes from options
            $("[id$=" + SourceListBoxId + "] > option:selected").each(function () {
                $(this).removeAttr('selected');
            });
            $("[id$=" + DestinationListBoxId + "] > option:selected").each(function () {
                $(this).removeAttr('selected');
            });
            SetSelectedVlauesAndOrder();
            return false;
        }
        function SetSelectedVlauesAndOrder() {
            //Save selected items in destination listbox
            var destinationValues = '';
            $("[id$=ListBoxDestination] > option").each(
          function () {
              destinationValues = destinationValues + "," + $(this).val();
          }
          );
            $("[id$=HiddenFieldListBoxItemsId]").val(destinationValues);
            return false;
        }


HTML:

 <tr>
                <td>
                    <asp:ListBox Height="300px" Width="180px" ID="ListBoxSource" runat="server" SelectionMode="Multiple">
                    </asp:ListBox>
                </td>
                <td style="padding:0 10px;">
                    <asp:Button ID="ButtonMoveToDesitnation" OnClientClick="return MoveItemsFromSourceToDesitnationListBox('ListBoxSource','ListBoxDestination')"
                        Text=" >>" runat="server" />
                    <br />
                    <asp:Button ID="ButtonMoveToSource" OnClientClick="return MoveItemsFromSourceToDesitnationListBox('ListBoxDestination','ListBoxSource')"
                        Text=" <<" runat="server" />
                </td>
                <td>
                    <asp:ListBox Height="300px" Width="180px" ID="ListBoxDestination" runat="server"
                        SelectionMode="Multiple"></asp:ListBox>
                    <asp:HiddenField ID="HiddenFieldListBoxItemsId" runat="server" />
                </td>
                <td  style="padding:0 10px;">
                    <asp:Button ID="ButtonMoveItemUp" Text="^ ^" runat="server" OnClientClick=" return MoveItemUpDown('up')" />
                    <br />
                    <asp:Button ID="ButtonMoveItemDown" Text="v v" runat="server" OnClientClick=" return MoveItemUpDown('down')" />
                </td>
            </tr>

No comments: