Web Development

20-Mar-06 4:48

Hello!

I have two listboxes, one is filled with data when page is loaded, and the other is empty. When user clicks a button I want the selected items from one of them to show up in the other. I'd love to have a non-postback solution of this, as all the postbacks required with my current solution doesn't feel very userfriendly. Here's the code how it looks today:

private void btnOppenVard_Click(object sender, System.EventArgs e)<br />
{<br />
	ArrayList alTotal = new ArrayList();<br />
	ArrayList alOld = new ArrayList();<br />
	ArrayList alNew = new ArrayList();<br />
<br />
             // Items already existing in listbox2<br />
	foreach(ListItem li in lblValdOppenVard.Items)<br />
	{<br />
		alOld.Add(li.Value.ToString());<br />
	}<br />
			<br />
	alTotal.AddRange(alOld);<br />
         <br />
             // items selected in listbox1<br />
	foreach(ListItem li in lbOppenVard.Items)<br />
	{<br />
				if(li.Selected == true)<br />
		{<br />
			alNew.Add(li.Value.ToString());<br />
		}<br />
	}<br />
<br />
            // Remove dublicates<br />
	foreach (System.Object obj in alNew)<br />
	{<br />
				if(alTotal.Contains(obj.ToString()))<br />
		{<br />
			alTotal.Remove(obj);<br />
		}<br />
	}<br />
  <br />
	alTotal.AddRange(alNew);<br />
<br />
             // bind data<br />
	lblValdOppenVard.DataSource = alTotal;<br />
	lblValdOppenVard.DataBind();<br />
}

Is this possible to achieve with javascript? And could someone point me in the right direction as to how I should go about doing this?

George L. Jackson20-Mar-06 15:56

George L. Jackson

20-Mar-06 15:56

The listbox renders as a "select" element on the client-side. Look on a search web site such as www.google.com or Code Project using "DHTML" and "SELECT" as key words.

sharma sanjeev20-Mar-06 17:03

20-Mar-06 17:03

try this

function MoveOption(objSourceElement, objTargetElement) { var aryTempSourceOptions = new Array(); var x = 0; //looping through source element to find selected options for (var i = 0; i < objSourceElement.length; i++) { if (objSourceElement.options[i].selected) { //need to move this option to target element var intTargetLen = objTargetElement.length++; objTargetElement.options[intTargetLen].text = objSourceElement.options[i].text; objTargetElement.options[intTargetLen].value = objSourceElement.options[i].value; } else { //storing options that stay to recreate select element var objTempValues = new Object(); objTempValues.text = objSourceElement.options[i].text; objTempValues.value = objSourceElement.options[i].value; aryTempSourceOptions[x] = objTempValues; x++; } } //resetting length of source objSourceElement.length = aryTempSourceOptions.length; //looping through temp array to recreate source select element for (var i = 0; i < aryTempSourceOptions.length; i++) { objSourceElement.options[i].text = aryTempSourceOptions[i].text; objSourceElement.options[i].value = aryTempSourceOptions[i].value; objSourceElement.options[i].selected = false; }

sanjeev

livez20-Mar-06 21:05

20-Mar-06 21:05

brilliant, it worked like a charm! thanks alot

sharma sanjeev21-Mar-06 16:55

21-Mar-06 16:55

take a hidden fields to store data and their corresponding id,s

try this
Add this function to attributes of your button as
this.btnSubmit.Attributes.Add("onclick","javascript return showSelected();");

targetlistId is id of target list
'hiddennames' is input type hidden for names
'hiddenId' is input type hidden for id's

function showSelected()
{
var optionList = document.getElementById("targetlistId").options;
var data = '';
var names = '';
var len = optionList.length;
for(i=0; i{
if(i>0)
{
data += ',';
names += ',';
}
data += optionList.item(i).value;
names += optionList.item(i).text;
}
document.getElementById('hiddennames').value=names;
document.getElementById('hiddenId').value=data;
return true;
}

sanjeev

livez21-Mar-06 22:24

21-Mar-06 22:24

Thanks for the responseI tried this solution, but didnt get any data to register in the the hidden field. I tried

adding attribute:
this.btnOppenVardVald.Attributes.Add("onclick","javascript: return showSelected();");

adding hidden field:
<input id="HiddenValue" type="hidden" value="Initial Value" runat="server" NAME="HiddenValue">

also tried:
<input id="HiddenValue" type="hidden" value="Initial Value" NAME="HiddenValue">

the function:

<script language="JavaScript" type="text/javascript"><br />
function showSelected()<br />
{<br />
	var optionList = document.getElementById("lblValdOppenVard").options;<br />
	var data = '';<br />
	var names = '';<br />
	var len = optionList.length;<br />
	for (var i = 0; i < optionList.length; i++)<br />
	{<br />
		if(i>0)<br />
		{<br />
			data += ',';<br />
			names += ',';<br />
		}<br />
		data += optionList.item(i).value;<br />
		names += optionList.item(i).text;<br />
	}<br />
	document.getElementById('HiddenValue').value=names;<br />
	return true;<br />
} <br />
</script>

but value of HiddenValue is still "Initial Value" after I press btnOppenVardVald. Should "HiddenValue" have runat="server" or not? And what else am I doing wrong?

sharma sanjeev21-Mar-06 22:31

21-Mar-06 22:31

no run at server for listbox

<asp:listbox id="lstCategories2" cssclass="SearchCategory" runat="server"
="" enableviewstate="True">

livez21-Mar-06 22:38

21-Mar-06 22:38

if I remove the runat server for the listbox, its not rendered at all.

asp:listbox id="lblValdOppenVard" runat="server" CssClass="inmatningstext" SelectionMode="Multiple"

Do I have to create some sort of html control instead of an asp:listbox? Im sorry if the answer is obvious, im kind of new to this.

-- modified at 4:40 Wednesday 22nd March, 2006

livez21-Mar-06 22:56

21-Mar-06 22:56

working now, thanks for the help everybody, sanju sharma in particular!

sharma sanjeev21-Mar-06 23:06

21-Mar-06 23:06

my mistake dont remove runat server
use

and add it in .cs page as html control

like

protected System.Web.UI.HtmlControls.HtmlInputHidden hiddenLinkTypeId;

and get value of hidden as
string ids=hiddenLinkTypeId.Value;

sanjeev

Guffa21-Mar-06 22:43

Guffa

21-Mar-06 22:43

As this is client side code, the runat="server" attribute is totally irrelevant.

This is the way you add the attribute:

this.btnOppenVardVald.Attributes.Add("onclick","return showSelected();");

---
b { font-weight: normal; }

sharma sanjeev21-Mar-06 16:53