Tuesday, 13 March 2012

Listbox Move Up Down Right Left show / select all check list items in asp.net using javascript


Listbox Move Up Down Right Left show / select all check list items in asp.net controls using javascript sample demo code:

Script:

<SCRIPT>
        function listbox_move(listID, direction) {

            var listbox = document.getElementById(listID);
            var selIndex = listbox.selectedIndex;

            if(-1 == selIndex) {
                alert("Please select an option to move.");
                return;
            }

            var increment = -1;
            if(direction == 'up')
                increment = -1;
            else
                increment = 1;

            if((selIndex + increment) < 0 ||
                (selIndex + increment) > (listbox.options.length-1)) {
                return;
            }

            var selValue = listbox.options[selIndex].value;
            var selText = listbox.options[selIndex].text;
            listbox.options[selIndex].value = listbox.options[selIndex + increment].value
            listbox.options[selIndex].text = listbox.options[selIndex + increment].text

            listbox.options[selIndex + increment].value = selValue;
            listbox.options[selIndex + increment].text = selText;

            listbox.selectedIndex = selIndex + increment;
        }

        function listbox_moveacross(sourceID, destID) {
            var src = document.getElementById(sourceID);
            var dest = document.getElementById(destID);

            for(var count=0; count < src.options.length; count++) {

                if(src.options[count].selected == true) {
                        var option = src.options[count];

                        var newOption = document.createElement("option");
                        newOption.value = option.value;
                        newOption.text = option.text;
                        newOption.selected = true;
                        try {
                                
                                  dest.add(newOption); // IE only
                                 src.remove(count);
                                 //dest.add(newOption, null); //Standard
                                 //src.remove(count, null);
                         }catch(error) {
                                 dest.add(newOption); // IE only
                                 src.remove(count);
                         }
                        count--;

                }

            }

        }
        function listbox_selectall(listID, isSelect) {

            var listbox = document.getElementById(listID);
            for(var count=0; count < listbox.options.length; count++) {

                listbox.options[count].selected = isSelect;

            }
        }
        function listbox_showallall() {

            var listbox = document.getElementById("d");
            for(var count=0; count < listbox.options.length; count++) {

                //listbox.options[count].selected = isSelect;
                alert(listbox.options[count].text + "-" + listbox.options[count].value);

            }
        }
    </SCRIPT>
 
 
 
HTML Source: 
 
<div>
    
       <asp:ScriptManager ID="ScriptManager1" runat="server">
       </asp:ScriptManager>
   <table>
       
<tr valign="top">
<td>



<br/><br/>
Move <a href="#" onclick="listbox_move('d', 'up')">up</a>,
<a href="#" onclick="listbox_move('d', 'down')">down</a>

&nbsp;&nbsp;&nbsp;

Select
<a href="#" onclick="listbox_selectall('d', true)">all</a>,
<a href="#" onclick="listbox_selectall('d', false)">none</a>

</td>
<td>&nbsp;&nbsp;&nbsp;</td>
<td>
<SELECT id="s" size="10" >
 <OPTION value="a">Afghanistan</OPTION>
 <OPTION value="b">Bahamas</OPTION>
 <OPTION value="c">Barbados</OPTION>
 <OPTION value="d">Belgium</OPTION>
 <OPTION value="e">Bhutan</OPTION>

 <OPTION value="f">China</OPTION>
 <OPTION value="g">Croatia</OPTION>
 <OPTION value="h">Denmark</OPTION>
 <OPTION value="i">France</OPTION>
</SELECT>
</td>
<td valign="center">
<a href="#" onclick="listbox_moveacross('s', 'd')">&gt;&gt;</a>
<br/>

<a href="#" onclick="listbox_moveacross('d', 's')">&lt;&lt;</a>

</td>
<td>
<SELECT id="d" size="10" runat="server">
 <OPTION value="a">Afghanistan</OPTION>
 <OPTION value="b">Bahamas</OPTION>
 <OPTION value="c">Barbados</OPTION>
 <OPTION value="d">Belgium</OPTION>
 <OPTION value="e">Bhutan</OPTION>

 <OPTION value="f">China</OPTION>
 <OPTION value="g">Croatia</OPTION>
 <OPTION value="h">Denmark</OPTION>
 <OPTION value="i">France</OPTION>
</SELECT>

<br />
<a href=#" onclick="listbox_showallall();">Show All </a>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
     <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="listbox_showallall();" />
    </ContentTemplate>
    </asp:UpdatePanel>

</td>
</tr>
      
</table>
 </div>