Tranfering items between Listboxes in an upadated Panel

hi,

i have a page in which there are 2 listboxes. I have also taken 2 buttons (HTML)... Buttons are used to transfer items between Listboxes...

Its working fine and items are transfered between Listboxes...

when i want to put an updated panel and in the <content template>, i put listboxes its not working.....

any anybody has an idea??

Regards,

Suryansu

Would you show us your source code for the page please?

What do you mean by "not working", can you give a sample and a bit more explanation?

If you are having problems with your UpdatePanel specifically, check out:http://blogs.visoftinc.com/archive/2007/09/23/asp.net-ajax--updatepanel-not-working--common-problems.aspx

-Damien

suppose i select one value from drop downbox...As per the value the LIstbox1 is changed and from listbox1 , i will select some items and add to the listbox2...again suppose i select another item from dropdownbox...as per the value in the dropdownbox, the listbox1 items changed...but i want the items in selected in LISTBOX2 should be retained..next time when i select some items from listbox1 to listbox2 , it should be added to the listbox2......

So i thought to use updated panel and so i put DROPDOWNBOX and LISTBOX in the updated panel...so Items in the LISTBOX2 willnot refreshed again and again...items will be only added......

ProtectedSub Page_Load(ByVal senderAsObject,ByVal eAs System.EventArgs)HandlesMe.Load

ListBox2.EnableViewState =True

IfNot IsPostBackThen

Button2.Attributes.Add("onClick","javascript:testme();")

EndIf

ProtectedSub DropDownList1_SelectedIndexChanged(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles DropDownList1.SelectedIndexChanged

Dim varSelectedDDlistAsString

varSelectedDDlist = DropDownList1.SelectedValue

Dim strQueryAsString ="select attribute_value,attribute_display_name from tblattribute_displayname"

ds = objTest.BindData(strQuery)

ListBox1.Items.Clear()

' ||||| Set the DataValueField to the Primary Key

ListBox1.DataValueField ="attribute_value"

' ||||| Set the DataTextField to the text/data you want to display

ListBox1.DataTextField ="attribute_display_name"

' ||||| Set the DataSource the the OleDBDataReader's result

ListBox1.DataSource = ds

ListBox1.DataBind()

EndSub

<%@.PageLanguage="VB"AutoEventWireup="false"CodeFile="Default8.aspx.vb"Inherits="Default8"EnableEventValidation="false" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml">

<headid="Head1"runat="server">

<title>Untitled Page</title>

<scripttype="text/javascript">

var selecetedfield="";

function testme()

{

//alert('hiiiiii');

//alert('hyyy');

//var thisdate= new date();

//alert(thisdate);

//return true;

//alert("hi")

//alert(document.getElementById('ListBox1').options.length);

//alert(document.getElementById('ListBox2').options.length);

var list = document.getElementById('ListBox2');

for(var i = 0; i < list.options.length; ++i)

{

selecetedfield= selecetedfield +",(" +list.options[i].value +") ";

}

// alert(selecetedfield)

// alert(list.options[i].value);

document.form1.HiddenField1.value = selecetedfield;

selecetedfield="";

//alert(document.form1.HiddenField1.value)

}

function setSize(list1,list2)

{

list1.size = getSize(list1);

list2.size = getSize(list2);

}

function selectNone(list1,list2){

list1.selectedIndex = -1;

list2.selectedIndex = -1;

addIndex = -1;

selIndex = -1;

}

function getSize(list){/* Mozilla ignores whitespace,

IE doesn't - count the elements

in the list */

var len = list.childNodes.length;var nsLen = 0;

//nodeType returns 1 for elements

for(i=0; i<len; i++){if(list.childNodes.item(i).nodeType==1)

nsLen++;

}

if(nsLen<2)return 2;

else

return nsLen;

}

var selectedList;

var availableList;

function createListObjects(){

availableList = document.getElementById("ListBox1");

selectedList = document.getElementById("ListBox2");

//alert(availableList)

//alert(selectedList)

}

function delAttribute(){

//availableList = document.getElementById("ListBox1");

// selectedList = document.getElementById("ListBox2");

var selIndex = selectedList.selectedIndex;

if(selIndex < 0)

return;

availableList.appendChild(selectedList.options.item(selIndex));

// selectNone(selectedList,availableList);

// setSize(availableList,selectedList);

}

function addAttribute(){

//alert('hi');

//availableList = document.getElementById("ListBox1");

// selectedList = document.getElementById("ListBox2");

var addIndex = availableList.selectedIndex;

//alert(addIndex)

if(addIndex < 0)return;

selectedList.appendChild(availableList.options.item(addIndex));

// selectNone(selectedList,availableList);

// setSize(selectedList,availableList);

}

</script>

</head>

<bodyonload="createListObjects()">

<formid="form1"runat="server">

<div>

<asp:AccessDataSourceID="AccessDataSource2"runat="server"DataFile="~/PMO - Accounts.mdb"

SelectCommand="SELECT DISTINCT [attribute_section] FROM [tblattribute_displayname]">

</asp:AccessDataSource>

<asp:HiddenFieldID="HiddenField1"runat="server"/>

<asp:ButtonID="Button1"runat="server"Style="z-index: 103; left: 195px; position: absolute;

top: 91px"Text="Click"Width="33px"/>

<inputid="Button3"style="z-index: 107; left: 542px; position: absolute; top: 82px; width: 56px;"

type="button"value=">>"onclick="addAttribute()"unselectable="on"/>

<inputid="Button4"style="z-index: 108; left: 542px; position: absolute; top: 110px; width: 57px;"

type="button"value="<<"onclick="delAttribute()"/>

<asp:ScriptManagerID="ScriptManager1"runat="server">

</asp:ScriptManager>

<asp:UpdatePanelID="UpdatePanel1"runat="server">

<ContentTemplate>

<br/>

<asp:ButtonID="Button2"runat="server"Style="z-index: 101; left: 189px; position: absolute;

top: 119px"Text="Execute"Width="54px"/>

<asp:GridViewID="GridView1"runat="server"Style="z-index: 109; left: 10px; position: absolute;

top: 180px"Height="1px"Width="1px">

</asp:GridView>

<br/>

<br/>

<br/>

<br/>

</ContentTemplate>

</asp:UpdatePanel>

<asp:DropDownListID="DropDownList1"runat="server"DataSourceID="AccessDataSource2"

DataTextField="attribute_section"DataValueField="attribute_section"Height="82px"

Style="z-index: 105; left: 265px; position: absolute; top: 23px"AutoPostBack="True">

</asp:DropDownList>

<asp:ListBoxID="ListBox1"runat="server"Height="107px"Style="z-index: 100; left: 414px;

position: absolute; top: 55px"Width="121px"></asp:ListBox>

<asp:ListBoxID="ListBox2"runat="server"Style="z-index: 102; left: 606px; position: absolute;

top: 56px"Height="103px"Width="126px"></asp:ListBox>

</div>

</form> </body>

</html>

Triggers Across Content Control

I've seen this posted a few times but no concrete solution or identification of the problem. I have 2 content section. The first one has buttons that should trigger an update in the second content. The second content has an UpdatePanel with the trigger definition. But I get the following error:

The ControlID property of the trigger must reference a valid control.

This is the code:

<

asp:ContentID="Content3"ContentPlaceHolderID="MainContentHeaderHolder"Runat="Server">
<strong>Property Details :: Options</strong>
<div>
<asp:ButtonID="btnNewResident"Text="[New Resident]"OnClick="ViewResidentPanel"runat="server"/>
</div>
</asp:Content>
<asp:ContentID="Content4"ContentPlaceHolderID="MainContentHolder"Runat="Server">
<atlas:UpdatePanelID="upNewRecordPanels"runat="Server">
<ContentTemplate>
......
</ContentTemplate>
<Triggers>
<atlas:ControlEventTriggerControlID="btnNewResident"EventName="Click"/>
<atlas:ControlEventTriggerControlID="btnNewContactNumber"EventName="Click"/>
<atlas:ControlEventTriggerControlID="btnNewAuthorizedGuest"EventName="Click"/>
</Triggers>
</atlas:UpdatePanel>
</asp:Content>

Is there a solution or is this a bug or by design?

{Bump}

Any thoughts from anyone on this? Is it by design that you cannot cross content sections or does it need to be done a different way?

Hi
I bumped into the same problem. It makes some kind of sense, because the controls in the other content control will be loaded in a different container and from what I've seen the UpdatePanel cannot find it.
One solution would be to edit the control id to its UniqueID:
<atlas:ControlEventTriggerControlID="MainContentHeaderHolder$btnNewResident"EventName="Click"/>
or
<atlas:ControlEventTriggerControlID="ctl00$MainContentHeaderHolder$btnNewResident"EventName="Click"/>

In both cases the error disappears, but i didn't test if the trigger gets fired. An alternative would be to add the trigger from the code using the UniqueId (easier if you later need to modify the control herarchy).

Anther solution (the one i used) would be to relate the trigger to a control that gets changed inside the UpdatePanel, like a panel.Visible - you probably have one that changes, otherwise you wouldn't need to update it. Although the controls inside the content template of the update panel do not appear as choices in the designer, you can add the trigger manually in source view.

I hope this helps
Vlad

Triggers

Hi to all.

So, I create buttons in a usercontrol after it i want to create triggers on this buttons in page. Is it possible?

I tried to do something like this on page

private

void FindButton(Control control)

{

foreach (Control phin control.Controls)

{

if (ph.Controls.Count > 0)

FindButton(ph);

if (phisCMSLinkButton)

{

ControlEventTrigger cet =newControlEventTrigger();

cet.ControlID = ph.ID;

cet.EventName =

"Click";

((

UpdatePanel)this.FindControl("UPContent")).Triggers.Add(cet);

}

}

}

I got an error

The ControlID property of the trigger must reference a valid control.

Exception Details:System.InvalidOperationException: The ControlID property of the trigger must reference a valid control.

Can anyone help me? :)

I'm getting the same error when trying to set my triggers to buttons inside of a Gridview. I'm still looking for the answer, but thought I'd post here in case someone came across and knew the answer for both of us.

No one knows why does it happens ?
Did anyone find out how to reference a gridview button in atlas?

for gridview or datagird : you just put an update panel around the grid markup code, hence you don't need to use Triggers to trap event. code like this:

<

atlas:UpdatePanelID="upd1"runat="server"><ContentTemplate>

<asp:GridView ...>...</asp:GridView>

</

ContentTemplate></atlas:UpdatePanel>

Ok, that all. just format your grid as you want, the update panel around the grid will help you control the event from button, hyperlink button... inside the grid and, of course, you don't need to use Triggers here.

Extending idea from those above, if you put the update panel right after the form tag, and so you don't need to trigger any events. Like this:

<form runat="server">
<atlas:UpdatePanel....>
<ContentTemplate>
...your markup code ...
</ContentTemplate>
</UpdatePanel>
</form>

tuantran:

for gridview or datagird : you just put an update panel around the grid markup code, hence you don't need to use Triggers to trap event. code like this:

<

atlas:UpdatePanelID="upd1"runat="server"><ContentTemplate>

<asp:GridView ...>...</asp:GridView>

</

ContentTemplate></atlas:UpdatePanel>

Ok, that all. just format your grid as you want, the update panel around the grid will help you control the event from button, hyperlink button... inside the grid and, of course, you don't need to use Triggers here.

Extending idea from those above, if you put the update panel right after the form tag, and so you don't need to trigger any events. Like this:

<form runat="server">
<atlas:UpdatePanel....>
<ContentTemplate>
...your markup code ...
</ContentTemplate>
</UpdatePanel>
</form>

What if you have more than one update panel? How do I reference the GridView from a separate update panel?

Please copy and paste here the mark-up code of your .aspx in that you have some seperate update panel and brieftly explain your request. I will try to find a correct solution if I can.

Regards