Wednesday, March 28, 2012

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.

No comments:

Post a Comment