Enter Title

DotnetCo.de Blog

30

In my application I needed to have 2 listboxes and users should be able to move entries from the source list to the target list.

listboxes

Using normal buttons would cause a postback on every click which is ugly of course. Additionally this could be done with JavaScript without problems. The only handicap: As the selection is done in the FrontEnd only, the Backend does not know about it and therefore you could not get the selections made. I’ve found several tips but no complete code so I put together some tips and post it here so you could easily copy it into your application.

The script is based on a blog entry from Colt Kwong: Move Items between 2 Listboxes.  But as said above, this script does not give the selected items to the Backend. Searching further I found tips to use a hidden field, and that’s what I’ve done. The script needs to check whether the selected item is already in the hidden list (and so it would remove it) or whether it’s not in the list (and so it will be added).

 

The JavaScript code:

<script type="text/javascript" language="javascript"> function MoveItem(ctrlSource, ctrlTarget) { var Source = document.getElementById(ctrlSource); var Target = document.getElementById(ctrlTarget);
 if ((Source != null) && (Target != null)) { while ( Source.options.selectedIndex >= 0 ) { var HiddenList = document.getElementById('<%= SelectedAdditionalInvolved.ClientID %>') //The hidden field var SelectedValue = Source.options[Source.options.selectedIndex].value + ','; // Hidden List is comma seperated var newOption = new Option(); // Create a new instance of ListItem newOption.text = Source.options[Source.options.selectedIndex].text; newOption.value = Source.options[Source.options.selectedIndex].value; Target.options[Target.length] = newOption; //Append the item in Target Source.remove(Source.options.selectedIndex); //Remove the item from Source if (HiddenList.value.indexOf(SelectedValue) == -1) { HiddenList.value += SelectedValue; // Add it to hidden list } else { HiddenList.value = HiddenList.value.replace(SelectedValue,""); // Remove from Hidden List } } } } </script>

 

In my aspx:

<span class ="selectionListUsernames"> <asp:ListBox ID="AdditionalUsers" Width="100%" Height="100%" runat="server" AutoPostBack="false" /> </span> <span class="selectionListUsernamesButtons"><br /><br /> <input onclick="Javascript:MoveItem('<%= AdditionalUsers.ClientID %>', '<%= AdditionalUserSelection.ClientID %>');" type="button" value="->" /><br /><br /> <input onclick="Javascript:MoveItem('<%= AdditionalUserSelection.ClientID %>', '<%= AdditionalUsers.ClientID %>');" type="button" value="<-" /> </span> <span class="selectionListUsernames"> <asp:ListBox ID="AdditionalUserSelection" width="100%" Height="100%" runat="server" AutoPostBack="false" /> </span>


<asp:HiddenField ID="SelectedAdditionalInvolved" runat="server" />

 

<!--wpads#TextMain-->

In my css:

.selectionListUsernames { float:left; width: 300px; height: 150px; } .selectionListUsernamesButtons { float: left; width: 120px; text-align: center; vertical-align:middle; }

In your postback (e.g. when user clicks ‘Save’) you could grab the Hidden field ‘SelectedAdditionalInvolved’. It contains a comma-seperated field containing the selected values, e.g. ‘Value1,Value2,Value3,’. That’s it. If a user selected some values and you saved it make sure to fill the hidden field on next Page_Load.

This article was written by Kai Wilzer. .

Posted in: ASP.net, AJAX, vb.net

Comments

matt
# matt
Tuesday, December 31, 2013 3:42 PM
If anyone tries to enter the same value into the list twice, this completely fucks up.

Post Comment

Name (required)

Email (not required)

CAPTCHA image
Enter the code shown above: