Hello,
I'm calling a web service which is providing a DataTable to my client ASP.NET AJAX javascript code. I'm then trying to bind that data table to a client listview control. The code runs without error message but no results are displayed, despite the datatable having positive content. The problem seems to arise because the "set_data" makes a call to "render" and in that method it checks the validity of "get_length", which the client DataTable does NOT support, so the code falls out to the "Empty Data" template. Basically it seems that ASP.NET AJAX is not expecting to see a DataTable at all, but something else. Can anyone help me with this please?
Here is my page code, the WebService.asmx simply returns a DataTable and "main()" simply wires up the button to kick the process off. the commented code will successfully display the data as an unordered list (simulating a listview):
<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="ListViewUnorderedList.aspx.cs" Inherits="ListViewUnorderedList" %>
<!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>Untitled Page</title>
<script>
function main()
{
document.getElementById("btnLoadVendors").onclick = getVendors;
}
function getVendors()
{
var onVendors = function(result)
{
// result is a dataset or data object
var ele = document.getElementById("output");
var ctl = ele.control;
ctl.set_data(result);
/* This would work and do the same job...
ele.innerHTML = "<ul>";
for (var i=0; i<result.rows.length; i++)
{
ele.innerHTML += "<li>" + result.rows[i].Name + "</li>";
}
ele.innerHTML += "</ul>";
*/
}
WebService.getVendors(onVendors);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewGlitz.js" />
<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewDragDrop.js" />
</Scripts>
<Services>
<asp:ServiceReference Path="WebService.asmx" />
</Services>
</asp:ScriptManager>
<script>
Sys.Application.get_events().addHandler("load", main);
</script>
<input id="btnLoadVendors" type="button" value="Load Vendors" />
<!-- Template for output -->
<div id="output">
Vendor list goes here.
<div style="display:none">
<div id="vendorsLayout">
<ul id="vendorsItemParent">
<li id="vendorsItem">
<span id="vendorsName">Vendor Name goes here</span>
</li>
</ul>
</div>
</div>
</div>
</form>
<script type="text/xml-script">
<page xmlns="http://schemas.microsoft.com/xml-script/2005">
<components>
<listView itemTemplateParentElementId="vendorsItemParent" id="output">
<layoutTemplate>
<template layoutElement="vendorsLayout" />
</layoutTemplate>
<itemTemplate>
<template layoutElement="vendorsItem">
<label id="vendorsName">
<bindings>
<binding dataPath="Name" property="text" transform="ToString" />
</bindings>
</label>
</template>
</itemTemplate>
</listView>
</components>
</page>
</script>
</body>
</html>
With hindsight, perhaps I've worded this problem all wrong.
Basically, the "set_data" method of a client control does not accept/understand an ASP.NET AJAX Client datatable object, as I was led to believe it did.
So what object structure do you pass to it?
Well, it looks as if the answer is to pass it the "rows" property of a datatable, this seems to work:
document.getElementById(
"output").control.set_data(result.rows);