CSTrüter HomeArticlesDownloadsAbout meContact me
How to enable the filestream feature in SQL 2008 - Alternative way to store blobs(files) via SQL 2010-08-21 19:31:56
How to create a Singleton Pattern in C# 2010-08-10 22:52:52
How to prevent that threads access shared resources concurrently via Monitor. 2010-08-06 15:31:15
A quick review of the book PHP 6 and MySQL 5 for Dynamic Web Sites: Visual QuickPro Guide written by Larry Ullman 2010-08-04 21:48:58
How to prevent that threads access shared resources concurrently via Mutex. 2010-08-03 14:42:36
How to stop propagation of javascript events 2010-07-25 21:59:29
Post about how Pete the web developer fixed his sitemap 2010-07-17 15:12:02
How to setup an out of process session service 2010-07-08 17:51:46
How to display/add images from/to a SQL Database 2010-07-04 23:15:15
How to register a custom URL protocol handler 2010-06-28 20:34:01
Creating a WYSIWYG textbox for your website is actually quite simple. 2007-02-01 12:00:00
Move items between two listboxes in ASP.net(C#, VB.NET) and PHP 2008-06-12 17:07:43
Firefox word wrapping issues 2008-06-09 09:51:21
Populate a TreeView control in a windows application. 2009-08-27 16:01:03
2007-02-22 12:00:00
Ever wanted to move items between two listboxes in ASP.net (or PHP for that matter)? Someone wanted the exact same thing on codeproject.com a while ago but I didn't give much thought to it, until someone at work asked me how to do it - since he wasn't able to find a viable solution on the internet. The solution I scripted wasn't as simple as I thought, nor would have liked it to be, my feeling was that one would be able to alter the two listboxes easily using javascript and simply "harvest" the changes (from the Request variables) when its submitted to the server. The reality however is that only items selected(or highlighted) in the listboxes, will be returned to the server, not the state of the listboxes - so we need to somehow send the state of the listboxes along with the page request. What I did was, I wrote a javascript script, that serialized the contents of the listboxes as xml to a hiddenfield on the page - whenever you submit the form to the server, a xml string containing the state of the listboxes get sent along - which one can easily process server side (which I will show you just in a while). You can download the full working source code here, contains sources for ASP.net(C# & VB.NET) and PHP source code. function move(fromID, toID, containerID) { var from = document.getElementById(fromID); var to = document.getElementById(toID); for (var i = 0; i < from.options.length; i++) { if (from.options[i].selected) { to.options.add(new Option(from.options[i].text,from.options[i].value)) from.remove(i--); } } var container = document.getElementById(containerID); container.value = escape("<listboxes>" + serialize(from) + serialize(to) + "</listboxes>"); } function serialize(dropdown) { var value = '<' + dropdown.id + '>'; for (var i = 0; i < dropdown.options.length; i++) { value+= '<option><key><![CDATA[' + dropdown.options[i].text + ']]></key><value><![CDATA[' + dropdown.options[i].value + ']]></value></option>'; } value+='</' + dropdown.id + '>'; return value } function unselect(listbox) { document.getElementById(listbox).selectedIndex=-1; } Tying it all together (javascript with some .net code), you can easily write yourself an usercontrol, like I did in my example, or create a composite control. The .net code below is pretty straighforward, you'll noticed two publicly exposed ListBox properties (lstFrom, lstTo), giving us easy access to the listboxes. If you really need to, you can easily add third, forth listboxes (with slight changes to the javascript code) The PHP code is quite a bit more involved, I had to create a few classes that give similiar control of what you would expect from an ASP.NET server side control. There is a lot easier ways to do this, but I believe this is a fairly manageable approach. C# using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Xml; public partial class ListPicker : System.Web.UI.UserControl { private XmlDocument _xmlDocument = new XmlDocument(); public ListBox fromListBox { get { return lstFrom; } } public ListBox toListBox { get { return lstTo; } } private void PopulateListBox(ListBox listBox) { listBox.Items.Clear(); XmlNodeList nodes = _xmlDocument.SelectNodes("listboxes/" + listBox.ClientID + "/option"); foreach (XmlNode node in nodes) { listBox.Items.Add(new ListItem(node["key"].InnerText, node["value"].InnerText)); } } private void PopulateListBoxes() { _xmlDocument.LoadXml(HttpUtility.UrlDecode(hdnDropdowns.Value)); PopulateListBox(lstFrom); PopulateListBox(lstTo); } protected void Page_Load(object sender, EventArgs e) { Page.ClientScript.RegisterClientScriptInclude("listboxjs", Page.TemplateSourceDirectory + "/js/listbox.js"); if (!IsPostBack) { String movejs = "move('{0}','{1}','{2}')"; String unselectjs = "unselect('{0}')"; lstFrom.Attributes["onclick"] = String.Format(unselectjs, lstTo.ClientID); lstTo.Attributes["onclick"] = String.Format(unselectjs, lstFrom.ClientID); btnTo.Attributes["onclick"] = String.Format(movejs, lstFrom.ClientID, lstTo.ClientID, hdnDropdowns.ClientID); btnFrom.Attributes["onclick"] = String.Format(movejs, lstTo.ClientID, lstFrom.ClientID, hdnDropdowns.ClientID); } else { if (!(String.IsNullOrEmpty(hdnDropdowns.Value))) { PopulateListBoxes(); } } } } VB.net Imports System.Xml Partial Class ListPicker Inherits System.Web.UI.UserControl Private _xmlDocument As New XmlDocument() Public ReadOnly Property fromListBox() As ListBox Get Return lstFrom End Get End Property Public ReadOnly Property toListBox() As ListBox Get Return lstTo End Get End Property Private Sub PopulateListBox(ByVal lstBox As ListBox) lstBox.Items.Clear() Dim nodes As XmlNodeList = _xmlDocument.SelectNodes("listboxes/" + lstBox.ClientID + "/option") For Each node As XmlNode In nodes lstBox.Items.Add(New ListItem(node.Item("key").InnerText, node.Item("value").InnerText)) Next End Sub Private Sub PopulateListBoxes() _xmlDocument.LoadXml(HttpUtility.UrlDecode(hdnDropdowns.Value)) PopulateListBox(lstFrom) PopulateListBox(lstTo) End Sub Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Page.ClientScript.RegisterClientScriptInclude("listboxjs", Page.TemplateSourceDirectory & "/js/listbox.js") If Not IsPostBack Then Dim movejs As String = "move('{0}','{1}','{2}')" Dim unselectjs As String = "unselect('{0}')" lstFrom.Attributes("onclick") = String.Format(unselectjs, lstTo.ClientID) lstTo.Attributes("onclick") = String.Format(unselectjs, lstFrom.ClientID) btnTo.Attributes("onclick") = String.Format(movejs, lstFrom.ClientID, lstTo.ClientID, hdnDropdowns.ClientID) btnFrom.Attributes("onclick") = String.Format(movejs, lstTo.ClientID, lstFrom.ClientID, hdnDropdowns.ClientID) Else If Not String.IsNullOrEmpty(hdnDropdowns.Value) Then PopulateListBoxes() End If End If End Sub End Class PHP <?php require_once("controls.php"); require_once("listbox.php"); class listpicker extends controls { var $lstFrom; var $lstTo; var $deserializable; function listpicker($id) { $this->attributes['id'] = $id; $this->lstFrom = new listbox($id.'_lstFrom'); $this->lstFrom->attributes['style'] = 'width:200px'; $this->lstFrom->attributes['onclick'] = "unselect('".$id."_lstTo')"; $this->lstTo = new listbox($id.'_lstTo'); $this->lstTo->attributes['style'] = 'width:200px'; $this->lstTo->attributes['onclick'] = "unselect('".$id."_lstFrom')"; if ($_REQUEST[$id.'$hdnDropdowns']) { $this->deserializable = true; $this->xml(urldecode($_REQUEST[$id.'$hdnDropdowns'])); } } function render() { $id = $this->attributes['id']; $html='<table> <tr> <td>' .$this->lstFrom->render(). '</td> <td> <input id="btnTo" type="button" value=">>" onclick="move(\''.$id.'_lstFrom\',\''.$id.'_lstTo\',\''.$id.'_hdnDropdowns\')" /> <br /> <input id="btnFrom" type="button" value="<<" onclick="move(\''.$id.'_lstTo\',\''.$id.'_lstFrom\',\''.$id.'_hdnDropdowns\')" /> </td> <td>' .$this->lstTo->render(). '</td> </tr> </table> <input type="hidden" ID="'.$id.'_hdnDropdowns" name="'.$id.'$hdnDropdowns" />'; return $html; } function xml($text) { $id = $this->attributes['id']; $parser = xml_parser_create(); xml_parse_into_struct($parser, $text, $vals); xml_parser_free($parser); $tag = ""; for($i = 0; $i < count($vals); $i++) { switch($vals[$i]['tag']) { case strtoupper($id.'_lstFrom') : $tag = "lstFrom"; break; case strtoupper($id.'_lstTo') : $tag = "lstTo"; break; } if (($tag) && ($vals[$i]['tag'] == "KEY")) { $this->{$tag}->addItem($vals[$i]['value'], $vals[$i+1]['value']); } } } } ?>
function move(fromID, toID, containerID) { var from = document.getElementById(fromID); var to = document.getElementById(toID); for (var i = 0; i < from.options.length; i++) { if (from.options[i].selected) { to.options.add(new Option(from.options[i].text,from.options[i].value)) from.remove(i--); } } var container = document.getElementById(containerID); container.value = escape("<listboxes>" + serialize(from) + serialize(to) + "</listboxes>"); } function serialize(dropdown) { var value = '<' + dropdown.id + '>'; for (var i = 0; i < dropdown.options.length; i++) { value+= '<option><key><![CDATA[' + dropdown.options[i].text + ']]></key><value><![CDATA[' + dropdown.options[i].value + ']]></value></option>'; } value+='</' + dropdown.id + '>'; return value } function unselect(listbox) { document.getElementById(listbox).selectedIndex=-1; }
using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Xml; public partial class ListPicker : System.Web.UI.UserControl { private XmlDocument _xmlDocument = new XmlDocument(); public ListBox fromListBox { get { return lstFrom; } } public ListBox toListBox { get { return lstTo; } } private void PopulateListBox(ListBox listBox) { listBox.Items.Clear(); XmlNodeList nodes = _xmlDocument.SelectNodes("listboxes/" + listBox.ClientID + "/option"); foreach (XmlNode node in nodes) { listBox.Items.Add(new ListItem(node["key"].InnerText, node["value"].InnerText)); } } private void PopulateListBoxes() { _xmlDocument.LoadXml(HttpUtility.UrlDecode(hdnDropdowns.Value)); PopulateListBox(lstFrom); PopulateListBox(lstTo); } protected void Page_Load(object sender, EventArgs e) { Page.ClientScript.RegisterClientScriptInclude("listboxjs", Page.TemplateSourceDirectory + "/js/listbox.js"); if (!IsPostBack) { String movejs = "move('{0}','{1}','{2}')"; String unselectjs = "unselect('{0}')"; lstFrom.Attributes["onclick"] = String.Format(unselectjs, lstTo.ClientID); lstTo.Attributes["onclick"] = String.Format(unselectjs, lstFrom.ClientID); btnTo.Attributes["onclick"] = String.Format(movejs, lstFrom.ClientID, lstTo.ClientID, hdnDropdowns.ClientID); btnFrom.Attributes["onclick"] = String.Format(movejs, lstTo.ClientID, lstFrom.ClientID, hdnDropdowns.ClientID); } else { if (!(String.IsNullOrEmpty(hdnDropdowns.Value))) { PopulateListBoxes(); } } } }
Imports System.Xml Partial Class ListPicker Inherits System.Web.UI.UserControl Private _xmlDocument As New XmlDocument() Public ReadOnly Property fromListBox() As ListBox Get Return lstFrom End Get End Property Public ReadOnly Property toListBox() As ListBox Get Return lstTo End Get End Property Private Sub PopulateListBox(ByVal lstBox As ListBox) lstBox.Items.Clear() Dim nodes As XmlNodeList = _xmlDocument.SelectNodes("listboxes/" + lstBox.ClientID + "/option") For Each node As XmlNode In nodes lstBox.Items.Add(New ListItem(node.Item("key").InnerText, node.Item("value").InnerText)) Next End Sub Private Sub PopulateListBoxes() _xmlDocument.LoadXml(HttpUtility.UrlDecode(hdnDropdowns.Value)) PopulateListBox(lstFrom) PopulateListBox(lstTo) End Sub Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Page.ClientScript.RegisterClientScriptInclude("listboxjs", Page.TemplateSourceDirectory & "/js/listbox.js") If Not IsPostBack Then Dim movejs As String = "move('{0}','{1}','{2}')" Dim unselectjs As String = "unselect('{0}')" lstFrom.Attributes("onclick") = String.Format(unselectjs, lstTo.ClientID) lstTo.Attributes("onclick") = String.Format(unselectjs, lstFrom.ClientID) btnTo.Attributes("onclick") = String.Format(movejs, lstFrom.ClientID, lstTo.ClientID, hdnDropdowns.ClientID) btnFrom.Attributes("onclick") = String.Format(movejs, lstTo.ClientID, lstFrom.ClientID, hdnDropdowns.ClientID) Else If Not String.IsNullOrEmpty(hdnDropdowns.Value) Then PopulateListBoxes() End If End If End Sub End Class
<?php require_once("controls.php"); require_once("listbox.php"); class listpicker extends controls { var $lstFrom; var $lstTo; var $deserializable; function listpicker($id) { $this->attributes['id'] = $id; $this->lstFrom = new listbox($id.'_lstFrom'); $this->lstFrom->attributes['style'] = 'width:200px'; $this->lstFrom->attributes['onclick'] = "unselect('".$id."_lstTo')"; $this->lstTo = new listbox($id.'_lstTo'); $this->lstTo->attributes['style'] = 'width:200px'; $this->lstTo->attributes['onclick'] = "unselect('".$id."_lstFrom')"; if ($_REQUEST[$id.'$hdnDropdowns']) { $this->deserializable = true; $this->xml(urldecode($_REQUEST[$id.'$hdnDropdowns'])); } } function render() { $id = $this->attributes['id']; $html='<table> <tr> <td>' .$this->lstFrom->render(). '</td> <td> <input id="btnTo" type="button" value=">>" onclick="move(\''.$id.'_lstFrom\',\''.$id.'_lstTo\',\''.$id.'_hdnDropdowns\')" /> <br /> <input id="btnFrom" type="button" value="<<" onclick="move(\''.$id.'_lstTo\',\''.$id.'_lstFrom\',\''.$id.'_hdnDropdowns\')" /> </td> <td>' .$this->lstTo->render(). '</td> </tr> </table> <input type="hidden" ID="'.$id.'_hdnDropdowns" name="'.$id.'$hdnDropdowns" />'; return $html; } function xml($text) { $id = $this->attributes['id']; $parser = xml_parser_create(); xml_parse_into_struct($parser, $text, $vals); xml_parser_free($parser); $tag = ""; for($i = 0; $i < count($vals); $i++) { switch($vals[$i]['tag']) { case strtoupper($id.'_lstFrom') : $tag = "lstFrom"; break; case strtoupper($id.'_lstTo') : $tag = "lstTo"; break; } if (($tag) && ($vals[$i]['tag'] == "KEY")) { $this->{$tag}->addItem($vals[$i]['value'], $vals[$i+1]['value']); } } } } ?>
so very nice coding....easily understand this code
Hi John Thank you for your contribution. At a stage I am going to write a follow-up post (perhaps article) - or lets call it an evolution post of this one, which will include a number of ways to achieve this in ASP.net. Things like Json, JQuery etc etc, since JQuery seems to be a standard in ASP.net 4.0 - I was quite surprised at the beginning of the year when I installed VS 2010 and saw JQuery included in the project templates.(So I guess JQuery is something devs need to take more seriously) Anyway... thanks again :)
I don't know if you are still monitoring these posts but thank you for the code to move items between list boxes. I added a function to move them up and down in asp.net which needed your serialization to hidden field for .net to get the view state correct. If anyone is interested here is the code I added (do similar for move down): function moveUp(listID, containerID) { var theList = document.getElementById(listID); for (var i = 1; i < theList.options.length; i++) { if (theList.options[i].selected) { var oldValue = theList.options[i].value; var oldText = theList.options[i].text; theList.options[i].value = theList.options[i-1].value; theList.options[i].text = theList.options[i-1].text; theList.options[i-1].value = oldValue; theList.options[i-1].text = oldText; theList.options[i-1].selected = true; theList.options[i].selected = false; break; } } var container = document.getElementById(containerID); container.value = escape("<listboxes>" + serialize(theList) + "</listboxes>"); }
The items doesn't actually disappear, when moving an item from one list to another, it appends the moved items to the bottom of the list - hence the scrollbar. If you feel it isn't userfriendly, you can always rather prepend the moved items. e.g. in the listbox.js file at about line 19, change to.options.add(new Option(from.options[i].text,from.options[i].value)) to to.options.add(new Option(from.options[i].text,from.options[i].value), 0) Alternatively you can also resize the height of list (which brings you back to your previous issue)
and I am using php and have actually 150 records to show!
When you have abt 20 Records, in short when a horizontal scroll bar appears in the from list -> and you move items from left to right. Try moving items back from right to left. The item dissapears. Is there any solution to that? Please reply back.. It would be helpful!
/// <summary> /// Sorts the list items as an integer with five digits - Store Number /// </summary> /// <param name="items">The list items to be sorted</param> private void SortStoreListItem (ListItemCollection items) { SortedList<int, string> sl = new SortedList<int, string>(); foreach (ListItem item in items) { sl.Add(int.Parse(item.Text), item.Value); } items.Clear(); foreach (KeyValuePair<int, string> item in sl) { items.Add(new ListItem(item.Key.ToString("00000"), item.Value)); } } Enjoy! Rob
Yes Please! It would make a big difference to have other ways of using your code
Basically you'll need to iterate through your query results, adding items to the listbox via your iteration, do you need an example of how to do this?
thanks that worked. If you dont mind me asking how would i work a list box into this where the content comes from a database and not your list. So box 1 is "NewTownList" dynamically populated using sql SELECT Query "this works" just need to know how i would tie "NewTownList" into your code Thanks a mil
1 2 3 Last / 3 Pages (23 Entries)
The company I am currently working for as software developer.
Collection of C# snippets 2010-05-22 01:06:19
Collection of MS SQL snippets 2010-05-22 00:55:15
Collection of JavaScript snippets 2010-05-22 00:37:57
Collection of ASP.net snippets 2010-05-22 00:29:56
Collection of PHP snippets 2010-05-22 00:06:45
a Parallel reference of programming languages 2009-09-10 12:48:23
a tutorial explaining how to develop a simple login using PHP and MySQL 2009-09-05 18:26:47
An article looking at adding some kind of event driven model to PHP 5 2008-07-28 12:48:09
It is very simple creating your own rss reader, the following article looks at a few methods of doing this. 2008-06-23 13:18:25
A quick reference about working with dropdown boxes (select element) in javascript. 2007-02-17 16:36:41
Collection of funny programming articles 2006-10-08 14:23:43