ListBox and DragPanelExtender

ListBox is rendered last so z-index has no effect.

Can a use any (html) trick to get the object attach to the DragPanelExtender (asp:panel) moving over the ListBox?

My reading of thez-index documentation makes me think it would help here - you're saying it doesn't?

no z-index fails
On IE (at least) ListBox, TextBox, and ComboBox are actual windows controls placed by the browser. Since they are separate HWNDs ordered above the browsers rendering surface HWND< they can't be z-ordered under other elements, unfortuntately.
I am running into this right now. The DragPanelExtender is pretty much useless unless you don't have any controls with Hwnds on your page (which is very rare for me.) Granted I could leave it, but it does not look professional at all.

The frustrating thing is that the PopupControlExtender DOES get layered above all other controls. So I think it is an opportunity for the Atlas team to change the DragPanelExtender to have whatever it is the PopupControlExtender has that allows it to be on top.

If I come up with a solution, I will post it. I think there should be a way around this if the PopupControlExtender is able to show HTML content on top of an asp:DropDownList.

can i use css adapters to make z-index to work for DropDownList ...

I found another page have some hints to doing so, I think it should also implement to Modal Popup

http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx

<html>
<head>
<script>
function DivSetVisible(state)
{
var DivRef = document.getElementById('PopupDiv');
var IfrRef = document.getElementById('DivShim');
if(state)
{
DivRef.style.display = "block";
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
IfrRef.style.display = "none";
}
}
</script>
</head>
<body>
<form>
<select>
<option>A Select Box is Born ...</option>
</select>
</form>
<div
id="PopupDiv"
style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">
... and a DIV can cover it up<br>through the help of an IFRAME.
</div>
<iframe
id="DivShim"
src="http://pics.10026.com/?src=javascript:false;"
scrolling="no"
frameborder="0"
style="position:absolute; top:0px; left:0px; display:none;">
</iframe>
<br>
<br>
<a href="http://links.10026.com/?link=#" onclick="DivSetVisible(true)">Click to show DIV.</a>
<br>
<br>
<a href="http://links.10026.com/?link=#" onclick="DivSetVisible(false)">Click to hide DIV.</a>
</body>
</html>

Listbox Client Controls?

I noticed that there's not a lot of support for listboxes on the client side. There's only the Web.UI.Select object, but it's pretty sparse in terms of functionality (ie. no clear or add methods).

Also haven't seen any examples of DataBinding a listbox - all the sample seem to work on ListView controls and binding to individual label elements, which isn't quite possible with lists.

Anybody have an example on how to bind a list using ATLAS declarative or script code?

+++ Rick --

Hi,

here's an example of a Web.UI.Select control bound to a DataTable. Hope it helps.

<%@. Page Language="C#" %>
<%@. Import Namespace="System.Data" %>
<%@. Import Namespace="System.Web.Services" %
<script runat="server">
[WebMethod]
public DataTable GetDummyDataTable()
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("ID", typeof(int)));
dt.Columns.Add(new DataColumn("Name", typeof(String)));
dt.Columns.Add(new DataColumn("LastName", typeof(String)));

dt.Rows.Add(1, "John", "Doe");
dt.Rows.Add(2, "John", "Smith");

return dt;
}
</script
<!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 runat="server">
<title>ListBox Databinding Example</title>
</head>
<body>
<form id="form1" runat="server">

<atlas:ScriptManager ID="sm" runat="server" />

<div>
<select id="myListBox"></select>
</div>
<div>
<span>Selected Value is </span>
<span id="myLabel"></span>
</div>
</form>
<script type="text/javascript">
function populateList() {
PageMethods.GetDummyDataTable(onGetComplete);
}
function onGetComplete(result) {
var myListBox = Web.Application.findObject('myListBox');

myListBox.set_data(result);
}
</script>
<script type="text/xml-script">
<page>
<components>
<select id="myListBox"
textProperty="LastName"
valueProperty="ID"
firstItemText="Make Your Selection"
/>

<label id="myLabel">
<bindings>
<binding dataContext="myListBox"
dataPath="selectedValue"
property="text"
/>
</bindings>
</label>

<application load="populateList" />
</components>
</page>
</script>
</body>
</html>

Thanks Garbin - fantastic!

Your example and some comments from other post have helped me see more of Atlas outside of the server controls.

ListSearchExtender

I trying to implement this on a page and get the following java error.

AjaxControlToolkit.Resources.ListSearch_DefaultPrompt is null or not an object

this is the code

<cc1:listsearchextenderid="ListSearchExtender1"runat="server"targetcontrolid="ddlmylist"PromptText="Type to search"PromptCssClass="ListSearchExtenderPrompt"PromptPosition="Top"></cc1:listsearchextender>

any ideas?

I've not seen this one before -- could you try hitting Shift-Refresh to be sure that you are getting all the latest JavaScript scripts into the browser. If it still doesn't work could you try creating a new test web site and seeing if that also fails? If it does could you possibly zip it up and send it to me?

Thanks,

Damian (ListSearch contributor)

Listview Bug?

I have this code, it runs when I click in a line of my ListView:

var ListViewParceiros = $object("ListViewParceiros");var ListViewBuscaParceiro = $object("ListViewBuscaParceiro");var iSelectedIndex = sender.control.get_dataContext().get_index(); ListViewParceiros.get_data().remove(ListViewParceiros.get_data().getItem(iSelectedIndex));

for example: if my listview has 6 lines and I delete the third line, the fifhty line (old sixty), remains with the (sender.control.get_dataContext().get_index() == 6) :(

Is this a bug or I need to do this on another way?

thanx

hello.

i remember reporting a bug with the selected index beeing set to 0...the situation you describe seems to be a bug...

ListView SelectedItem problem

I have a ListView object bound to a client-side DataTable. As I add a row to the table, I want the associated ListView item to become the selected item, as displayed using a different CSS.

I set up the listView with the selectedItemCssClass property, and as each item is clicked, it works fine. However, if I add a row to the table, the ListView re-binds correctly, but all items now appear as unselected.

This is all client-side behavior - no UpdatePanels or PageMethod calls.

1 - How do I force the record I added to become the selected item i the ListView?

2 - If I didn't want to do that, how do I ensure that the selected item remains selected when an item is added?

Much Thanks.

Although this might not work in the latest release, you should be able to set the selectedIndex or selectedItem in Javascript.

Yeah... obviously, since the Datatable went Preview some time ago. Closing this post.

Literal nested in UpdatePanel error: "Object reference not set to an instance of an object

I am trying to set the content of a literal which is nested inside an UpdatePanel. But when I try to reference the Literal control, I get this message: "Object reference not set to an instance of an object." This despite the fact that the name shows in Intellisense. Actually, not entirely true. It sometimes isn't showing in Intellisense, for reasons I can't fathom. But I'm not getting a compilation error, so I assume it does recognise the name, but for some reason the object is null. Here's the code:

 <asp:UpdatePanel runat="server" ID="UpdatePanel1" EnableViewState ="true" Visible="true" RenderMode="Block" UpdateMode="Conditional"> <asp:ContentTemplate> <div style="width:350px; height:400px" class="newscontent"> <asp:Literal runat="server" ID="litContent"></asp:Literal> </div> </asp:ContentTemplate> </asp:UpdatePanel>

C#:

protected void Refresh(Object Sender, RepeaterCommandEventArgs e) {if (e.CommandName=="GetContent") {int id = Convert.ToInt32((e.CommandArgument)); ObjectModel.News item =new ObjectModel.News(id); litContent.Text = item.Content; litContent.Text += DisplayDocuments(id); UpdatePanel1.Update(); } }

The Refresh function is triggered by the user clicking on a LinkButton in a repeater, but this is irrelevant to the problem, since I get the same error message if I put a simple line of code in the page load function to set the text property on the the literal.

just yesterday got same problem with accordion control and textbox

spend about 3 hours here how it goes :UpdatePanel1 onpage load or on page init try this code

///////////////////////////////////////////////////////////////////////////

Literal litContent=newLiteral();

litContent= UpdatePanel1.FindControl ("litContent") asLiteral;

////////////////////////////////////////////////////

Sol90046:

just yesterday got same problem with accordion control and textbox

spend about 3 hours here how it goes :UpdatePanel1 onpage load or on page init try this code

///////////////////////////////////////////////////////////////////////////

Literal litContent=newLiteral();

litContent= UpdatePanel1.FindControl ("litContent") asLiteral;

////////////////////////////////////////////////////

Thank you! This worked as far as eliminating my error message went. But even though the code now appears to be doing what it is told, i.e., I can step through it in debug mode and the text property of the Literal is being set to the correct content, the update panel is not displaying the results. It also appears to be doing a full page refresh rather than a partial one. I do have a scriptmanager on the page with EnablePartialRendering set to true.

Load an script at first.

The scriptmanager will Load the script at last (when all of page loaded).

How to load the script at first (before all object of this page) as this page do:

http://www.pageflakes.com/

Thanks for reply!

(Sorry because my English)

hello.

have you tried using the registerclientscriptblock method?

uh!, Thanks your suggest from you, I will try it. Thanks.

Loading Image Postion

Hello all

i use ajax using XMLHTTPREQUEST object i have function called ajxpg(link,container) take two paramter the link of the destination page and the container where the sestination pae wil be dispalyed and aslo it take a varible witch contain the image page witch will be displayed while the page is loading .

my problem that is this picture is displyed in upper right of the displyed page iwant here to be displyed in the middle of the page that is dispalyed in the continer .

ihope i can found a soulution.

Javascript:

image.style.position = absolute
image.style.top = ((screen.height/2) - (image.height/2))
image.style.left = ((screen.width/2) - (image.width/2))

This the the ajax function witch i put in javascript file named Ajax.js

ar bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid)
{
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari, Firefox, Opera 8.0+, Safari
page_request = new XMLHttpRequest()
else if (window.ActiveXObject) // ifInternet Explorer\
{
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e)
{
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false

document.getElementById(containerid).innerHTML=loadstatustext
page_request.onreadystatechange=function()
{
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()

page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)

}

function loadpage(page_request, containerid){
if (page_request.readyState != 4)
{return;}
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
//alert(page_request.responseText)
}

and here how i use it in the aspx file

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Display.aspx.cs" Inherits="Display" %>
<script src="http://pics.10026.com/?src=ajax.js"></script>
<script>

var loadstatustext=" <img src='images/loading.gif' /><Font Class='Content'> ???? ??????? </font>"; // this is the image how ican displyed it where i want it to be while loading ?

function Page1()
{
var links="AjaxPage1.aspx";
var container1="Main1";
ajaxpage(links,container1);
}

<html>

<head></head>

<body>

<div id=Main1><!-- here where the page will be siplayed --></div>

</body>

</html>

ifound who to di this

var loadstatustext=" <Div align='center'><img src='../../images/loading.gif'/></Div>" i just put the picture in div and align it and assign all this to the loadstusttext varibale