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>

Trigger a panel refresh from javascript/pure html control

Hi,

I have a pure HTML tree control, that is outside of an ajax UpdatePanel. I want to write a JS function that triggers a particular panel to refresh, *as if* I hit a submit button inside of the panel. I don't want to put the HTML tree control inside an Ajax panel, as it will loose it's state (it will return to a completely collapsed state).

Putting a button inside the panel, and then running the JSelement.click() event from my tree control works in IE, but Firefox submits the entire page(the submit event is not captured by the AJAX framework in FF in this case,apparently).

I have looked into the client reference documentation at http://ajax.asp.net/docs/ClientReference/Global/default.aspx, and it seems like there should be a way to trigger a postback/panel refresh, but I have not found a way.

The PageRequestManager does not help, since it only monitors existing page requests. I need to invoke a page request, and run something like

PageRequest.Invoke('MyUpdatePanel');

or

var ajaxpanel = document.getElementById('AjaxPanelClientID');
ajaxpanel.update();

A related suggestion:

It would be nice if the UpdatePanel supported client side triggers, not just server side triggers. Consider the following hypothetical code:

<ajax:UpdatePanel ID="ajxUpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<!-- CONTENT -->
</ContentTemplate>
<Triggers >
<ajax:AsyncPostBackTrigger ClientTriggerFunction="MyCustomTrigger" OnTrigger="MyCustomTrigger_ontrigger" />
</Triggers>
</ajax:UpdatePanel>

Then the system would automatically generate the JS function (with the appropriate .NET ajax framework calls that I don't need to know about), so I can call it anywhere on the page, from multiple HTML controls if needed.

<input type="button" value="MyHTMLButton" onclick="MyCustomTrigger('argstring');">

The system should enable a code-behind event handler where I can put my server side code:

protected void MyCustomTrigger_ontrigger(object sender, AjaxClientTriggerEventArgs e) {
//run some server side .NET code here
switch(e.ClientArgString){
...
}
}

You can trigger an asynchronous post back by invoking the __doPostBack function. Just pass in the ID of the control that's either inside an update panel or is marked as a trigger for one. Here's an example:

<asp:UpdatePanel ID="up" runat="server">
 <ContentTemplate>
 <asp:Button ID="myButton" runat="server" OnClick="myButton_Click" Text="Click me!" />
 <asp:Label ID="myLabel" runat="server" />
 </ContentTemplate>
</asp:UpdatePanel>
<input id="myOtherButton" type="button" value="No, click me!" />
<script type="text/javascript">
 function pageLoad() {
 $addHandler($get('myOtherButton'), 'click', triggerAsyncPostBack);
 }
 function triggerAsyncPostBack(e) {
 __doPostBack('<%= myButton.UniqueID%>', '');
 }
</script>

One thing to watch out for is that the first parameter to __doPostBack needs to be the full ID of the control. If you're using master pages, your control IDs will be longer than they appear. Use the UniqueID property to get the full ID or the event handlers for your control won't run on the server.

Also, if you have event validation turned on (the default), you'll get an exception if you don't pass in a correct event argument as the second parameter to __doPostBack. For button controls, it should be the empty string. For other controls, it might be different, but you'll have to experiment to find out.

Hope this helps.

Thank you Jason,

That is the behaviour I was looking for, and it works in Firefox as well as IE. I knew about the _doPostBack function in general, but I did not know the syntax to call it.

Where is the best place to find documentation and syntax for the built-in ASP.NET and AJAX JS functions and calls? For example, I did not know about $get or $addHandler functions.

(I am familiar with similar functions from the prototype.js library).

Thanks again :-)

Another related discovery that is slightly more elegant (I am probably repeating what some already know...but I think its great :-)

Is is not necessary to use a button to trigger the post back inside the panel. I updated a hidden input field with a value, and then submitted thehidden field iteself with __doPostBack, and it worked great. I needed a hidden field to pass in a unique ID anyway, so the panel would know how to refresh itself.

Inside the UpdatePanel:

<input id="txtGroupID" type="hidden" runat="server" onserverchange="txtGroupID_ServerChange" />

JS code:

txt = $get("<%=this.txtGroupID.ClientID %>");
txt.value = somevalue;
__doPostBack("<%=this.txtMatGroupID.UniqueID %>","");

Douglas Smith:

Where is the best place to find documentation and syntax for the built-in ASP.NET and AJAX JS functions and calls? For example, I did not know about $get or $addHandler functions.

The ASP.NET AJAX documentation does document all of these functions. You'd have to know where to look, though. All of the $-prefixed functions seem to be documented in the Sys.UI namespace here:

http://ajax.asp.net/docs/ClientReference/Sys.UI/default.aspx

Browsing through the source code helps find the undocumented stuff.

That will trigger an asynchronous post back, but no event will be raised on the server with that control as the target. You probably want to execute some code to modify the controls inside the update panel or there'd be little point in triggering the asynchronous post back. That's why I used a button control in the example I gave you. If all you want to do is trigger the asynchronous post back and don't care about raising a specific event on the server, you could use the ID of the update panel control as the event target. To me, that would be stating the intention of what you're trying to do a little clearer.

If you don't want to use a button but do want to raise an event on the server, you can use any control that implements IPostBackEventHandler as the event target. Those controls have a RaisePostBackEvent method that gets invoked when a post back is received with their ID as the event target. For button controls, they raise their Click event in that method. That's where your code gets to do its stuff. You could easily create an "empty" custom control that didn't render anything, but could be used as the event target. (I tried using the page control for this, but there's code that prevents you from registering the page as an asynchronous post back trigger.)

It'd be nice if the UpdatePanel control itself implemented IPostBackEventHandler and raised some sort of custom event on the server that let you do this without having to write much custom code. You could simulate this a bit by putting some code inside one of the event handlers on your page and checking to see if the ScriptManager control's AsyncPostBackSourceElementID is the ID of the UpdatePanel control you used as the event target. If so, execute your custom code.

Hope this helps.

Trigger design-time error

At the begin, is all ok: when I open my project the controls was showed normally.
After first run, when I switch from html view to design-view the updatepanel control show this error:

Error Creating Control - Content1
'Triggers' could not be initialized. Details: 'Triggers' could not be added to the collection. Details: Object does not match target type.

This is my code:

<%

@dotnet.itags.org.PageLanguage="VB"MasterPageFile="~/MasterPage.master"AutoEventWireup="false"CodeFile="Ricerche.aspx.vb"Inherits="Ricerche"title="Ricerche" %>
<asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"runat="Server">
<atlas:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true"EnableScriptGlobalization="false"></atlas:ScriptManager>
<asp:TextBoxID="TxtSearch"runat="server"></asp:TextBox>
<asp:ImageButtonID="ImageButton1"runat="server"ImageUrl="~/Images/Cerca.gif"/><br/><atlas:UpdatePanelID="UpdatePanel1"runat="server"Mode="Conditional">
<ContentTemplate>
<asp:GridViewID="GridView1"runat="server"AutoGenerateColumns="True"DataKeyNames="ID"></asp:GridView>
</ContentTemplate>
<Triggers>
<atlas:ControlEventTriggerControlID="ImageButton1"EventName="Click"/>
</Triggers>
</atlas:UpdatePanel>
</asp:Content>

I must say that I use April CTP of Atlas and Atlas controlToolkit too.
Now i try to delete triggers section and change update panel mode to always, and the page was displayed correctly. But if I insert again triggers section the error come back.
What I can do? thanks

I also just started getting the same design time error ..

Error Creating Control - Content1
'Triggers' could not be initialized. Details: 'Triggers' could not be added to the collection. Details: Object does not match target type.

And in my specific case, I have:

And .. I've been using pages that have a very similar setup for like 2 weeks without problems like this.
Then today, I started getting the 'Error Creating Control' message when I went from Source view of the asp page to the Design view.

<asp:Content id="content1"> <atlas:UpdatePanel id="updatePanel1" runat="server" mode="Conditional"> <ContentTemplate> ... <asp:GridView ... /> ... </ContentTemplate> <Triggers> <atlas:ControlEventTrigger ControlID="button1" EventName="Click" /> <atlas:ControlValueTrigger ControlID="ddl1" PropertyName="SelectedValue" /> </Triggers> </atlas:UpdatePanel> ... <asp:Button id="button1" runat="server" Text="Huh?"> ... <asp:DropDownList id="ddl1" runat="server" /> ...</asp:Content>

Need assistance with this problem .. thanks!
Hmm .. interesting, so .. I open up the project this morning. The problem I was having yesterday isn't occurring anymore. Not much has changed from yesterday to today, other than I've added more content to the page.
I believe this is a bug with the IDE not handeling the trigger well in design mode. I have had this exact same problem and fix it by restarting VS 2005.

For some reason, the error went away for me when I hit "Save"...

if that's any help

triggering an export of Excel content through Atlas

I built an Atlas-enabled form. Depending on an input parameter, I need to either display the output data in HTML or push an Excel stream to the browser. The former is accomplished beautifully with the UpdatePanel; however, I am struggling to figure out the latter. The folowing code works as desired (it results in the browser opening the "File Download" dialogue that allows users to Save or Open the file) with the "regular" postback:

 Response.ContentType ="application/xls"; Response.AddHeader("content-disposition", GetExportFileName("Excel")); XlsExport xls =new XlsExport(); xls.Export(report.Document, memStream); Response.BinaryWrite(memStream.ToArray()); Response.End()

What do I need to do to accomplish this behavior with Atlas?

Thanks a lot!

hello.

can you do that on an external window? ex.: a button click opens a window which targets a handler that returns the response you've shown in the previous post...

Unfortunately, I am not allowed to open an external window.

I was allowed to implement the obvious workaround: save Excel file to disk, put another UpdatePanel on this page, and then display the download link once the file becomes available; however I would rather avoid having to maintain hard copies of the files...

How about an IFRAME with the Excel content type?

I must admit my ignorance: I have not worked with IFrames before. I started reading just now, and it looks like it might be a good solution - if there is a way to close the IFRAME once the user sees the "Save as/Open" dialogue. I will research this further...

If you know of a good working sample online, please let me know.

Thanks a lot!

hello.

hum...i think you're in luck since you can set the src dinamically and event its display is set to none, you'll have the downlod. test this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<iframe id="frm" style="display: none"></iframe>
<hr />
<input type="button" value="donwload" onclick="download()" />

<script type="text/javascript">
function download()
{
document.getElementById("frm").src = "eula.rtf";
}
</script>
</body>
</html>

I am sorry it took me a while to reply - I am in the final stretch of a project...

I managed to build a prototype based on Luis' suggestion; however, there is one problem with this approach: if a user clicks on "Open" button of the "Save as/Open" IE dialogue, then the file may open not in a new instance of the Excel, but in the transparent iframe - and hence be invisible to the user. This wouldn't be an issue had the response been written to a new browser window instead of the iframe, but in my case it wasn't an option.

In the end I simply ran out of time to play around and put in the workaround I described a couple of posts ago.

Thanks a lot for everybody's help!