Showing posts with label binding. Show all posts
Showing posts with label binding. Show all posts

Saturday, March 24, 2012

Problem binding DataTable to ListView using "set_data(result)"

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>

bump

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);
Posted by ubiquityvbno at 4:15 AM 0 comments
Labels: , , , , , , , , , , , , , , , ,

Problem creating binding for TextBox/AutoCompleteExtender and DropDownList/CascadingDropDo

I'm trying to use a textbox hooked up to an autocompleteextender todrive a DropDownList hooked up to a cascadingdropdown. I'm tryingto do this by creating a binding between the textbox and a hiddenDropDownList. The binding invokes a custom transform that updatesthe contents on the hidden dropdown with the text from the textbox whenthe textbox text changes. I am close, but I am running into someissues which I believe are due to the fact that my controls are insidean updatepanel. I'm getting the infamous Duplicate use of id...when the updatepanel reloads my textbox and autocompleteextender.

Here's the source. Can anyone offer any ideas? thanks...

<%@dotnet.itags.org. Page Language="C#" EnableEventValidation="false" %>
<%@dotnet.itags.org. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %
<script runat="server">

void AutoCompleteTextBox_PreRender(object sender, EventArgs e) {
((TextBox)sender).Attributes.Add("autocomplete", "off");
}

void Page_Load(object sender, EventArgs e) {

AccountTextBox.Visible = AccountRadioButton.Checked;
if (AccountRadioButton.Checked) {AccountAutoCompleteExtender.TargetProperties[0].Enabled = true; }
else {
AccountAutoCompleteExtender.TargetProperties.Clear();
CascadingDropDown1.TargetProperties.Clear();
}

LicenseTextBox.Visible = LicenseRadioButton.Checked;
LicenseDropDownList.Visible = !LicenseRadioButton.Checked;
if (LicenseRadioButton.Checked) {LicenseAutoCompleteExtender.TargetProperties[0].Enabled = true; }
else { LicenseAutoCompleteExtender.TargetProperties.Clear(); }

}

</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 id="Head1" runat="server">
<title>Untitled Page</title>

<script type="text/javascript">
<!-- //

var addl;
var atb;

function pageLoad(sender, e) {

atb = new Sys.UI.TextBox($("<%=AccountTextBox.ClientID %>"));
addl = new Sys.UI.Select($("<%=AccountDropDownList.ClientID %>"));

var addl_binding = new Sys.Binding();
addl_binding.set_dataContext(atb);
addl_binding.set_dataPath("text");
addl_binding.set_property("selectedValue");
addl_binding.transform.add(setDropDownList);

addl.get_bindings().add(addl_binding);

atb.initialize();
addl.initialize();
}

function setDropDownList(sender, eventArgs) {

// I WOULD HAVE LIKED TO HAVE CREATED AN INSTANCE OFTHE AtlasControlToolkit.CascadingDropDownNameValue,
// BUT COULDN'T SEEM TO FIGURE OUT HOW TO DO THAT...
var value = newDummy.CascadingDropDownNameValue(eventArgs.get_value(),eventArgs.get_value());

var cddp1 = $object("CascadingDropDownProperties1");
cddp1._setOptions([value]);

}

// -->
</script>

</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" />

<atlas:AutoCompleteExtender ID="AccountAutoCompleteExtender" runat="server">
<atlas:AutoCompleteProperties Enabled="true" MinimumPrefixLength="2"ServiceMethod="GetAccountList" ServicePath="Lookup.asmx"TargetControlID="AccountTextBox" />
</atlas:AutoCompleteExtender
<atlas:AutoCompleteExtender ID="LicenseAutoCompleteExtender" runat="server">
<atlas:AutoCompleteProperties Enabled="true" MinimumPrefixLength="2"ServiceMethod="GetLicenseList" ServicePath="Lookup.asmx"TargetControlID="LicenseTextBox" />
</atlas:AutoCompleteExtender>

<atlasToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server">
<atlasToolkit:CascadingDropDownPropertiesid="CascadingDropDownProperties1" TargetControlID="AccountDropDownList"Category="Account" PromptText="" ServicePath="~/FrontlineService.asmx"ServiceMethod="GetDropDownTextBoxContents" />
<atlasToolkit:CascadingDropDownPropertiesTargetControlID="LicenseDropDownList" Category="License"PromptText="Please select a License"ServicePath="~/FrontlineService.asmx"ServiceMethod="GetDropDownTextBoxContents"ParentControlID="AccountDropDownList" />
</atlasToolkit:CascadingDropDown>

<asp:Panel ID="LookupPanel" BackColor="#999999" CssClass="panel" runat="server">
<atlas:UpdatePanel ID="LookupUpdatePanel" Mode="Conditional"runat="server">
<ContentTemplate>
<div>
<table>
<tr>
<td rowspan="3"valign="top"><span style="font-weight: bold;">License LookupBy:</span></td>
<td>
<asp:RadioButtonID="AccountRadioButton" GroupName="Lookup" Checked="true"AutoPostBack="true" runat="server" /> Account
</td>
<td>
<asp:TextBoxID="AccountTextBox" OnPreRender="AutoCompleteTextBox_PreRender"runat="server" />
</td>
</tr>
<tr>
<td>
<asp:RadioButtonID="LicenseRadioButton" GroupName="Lookup" AutoPostBack="true"runat="server" /> License
</td>
<td>
<asp:TextBoxID="LicenseTextBox" OnPreRender="AutoCompleteTextBox_PreRender"runat="server" />
<asp:DropDownListID="AccountDropDownList" style="display: none;" runat="server"/>
<asp:DropDownListID="LicenseDropDownList" runat="server" />
</td>
</tr>
</table>
</div>

<scripttype="text/xml-script">
<pagexmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
</components>
</page>
</script>

</ContentTemplate>
<Triggers>
<atlas:ControlEventTriggerControlID="AccountRadioButton" EventName="CheckedChanged" />
<atlas:ControlEventTriggerControlID="LicenseRadioButton" EventName="CheckedChanged"/>
</Triggers>
</atlas:UpdatePanel>

</asp:Panel>

</form
<script type="text/javascript">
<!-- //

Type.registerNamespace("Dummy");

Dummy.CascadingDropDownNameValue = function(name, value) {
var _name = name;
var _value = value;

this.name = _name;
this.value = _value;

}

Dummy.CascadingDropDownNameValue.registerClass('Dummy.CascadingDropDownNameValue');
// -->
</script
</body>
</htmlHave you tried FAQ #6?
I did read that, and I did try to apply the
var context = Sys.Application.getMarkupContext();
if (context) { context.removeObject(this); }

to the dispose method of the CascadingDropDownBehavior.js but it didn't seem to make a difference.

I'm stilling getting the Duplicate use for the AccountTextBox, CascadingDropDownProperties1 and AccountDropDownList...
I'm trying a slightly different approach, but I'm still running intosome issues. I'm trying to define the autocomplete behaviordeclaratively, instead of using an autocompleteextender. everything works well, but when the updatepanel refreshes, theautocomplete behavior doesn't seem to exist anymore.

i tried placing the xml-script inside the updatepanel, too, no difference.

heres the code to reproduce:

<%@. Page Language="C#" EnableEventValidation="false" %
<%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %
<script runat="server">

void AutoCompleteTextBox_PreRender(object sender, EventArgs e) {
((TextBox)sender).Attributes.Add("autocomplete", "off");
}

</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 id="Head1" runat="server">
<title>Untitled Page</title
<script type="text/javascript">
<!-- //

function setDropDownList(sender, eventArgs) {

// I WOULD HAVE LIKED TOHAVE CREATED AN INSTANCE OF THEAtlasControlToolkit.CascadingDropDownNameValue,
// BUT COULDN'T SEEM TO FIGURE OUT HOW TO DO THAT...
var value = newDummy.CascadingDropDownNameValue(sender.get_text(), sender.get_text());

var cddp1 = $object("CascadingDropDownProperties1");
cddp1._setOptions([value]);

}

// -->
</script
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManagerid="ScriptManager1" EnablePartialRendering="true" runat="server" />

<atlas:AutoCompleteExtender id="LicenseAutoCompleteExtender" runat="server">
<atlas:AutoCompleteProperties Enabled="true" MinimumPrefixLength="2"ServiceMethod="GetLicenseList" ServicePath="Lookup.asmx"TargetControlID="LicenseTextBox" />
</atlas:AutoCompleteExtender>

<atlasToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server">
<atlasToolkit:CascadingDropDownPropertiesID="CascadingDropDownProperties1" TargetControlID="AccountDropDownList"Category="Account" PromptText="" ServicePath="~/FrontlineService.asmx"ServiceMethod="GetDropDownContents" />
<atlasToolkit:CascadingDropDownPropertiesTargetControlID="LicenseDropDownList" Category="License"PromptText="Please select a License"ServicePath="~/FrontlineService.asmx"ServiceMethod="GetDropDownContents" ParentControlID="AccountDropDownList" />
</atlasToolkit:CascadingDropDown
<script type="text/xml-script">
<pagexmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<textBox id="AccountTextBox"propertyChanged="setDropDownList">
<behaviors>
<autoComplete completionInterval="1000"completionList="completionList" completionSetCount="15"
dataContext="AccountTextBox" minimumPrefixLength="2"serviceMethod="GetAccountList"
serviceURL="Lookup.asmx">
</autoComplete>
</behaviors>
</textBox>
</components>
</page>
</script
<asp:Panel ID="LookupPanel" BackColor="#999999" CssClass="panel" runat="server">
<atlas:UpdatePanel id="LookupUpdatePanel" mode="Conditional"runat="server">
<ContentTemplate>
<div>
<table>
<tr>
<td rowspan="3" valign="top"><spanstyle="font-weight: bold;">License Lookup By:</span></td>
<td>
<asp:RadioButton ID="AccountRadioButton"GroupName="Lookup" Checked="true" AutoPostBack="true" runat="server"/> Account
</td>
<td>
<asp:TextBox ID="AccountTextBox"OnPreRender="AutoCompleteTextBox_PreRender" runat="server" />
<div id="completionList"></div>
<asp:DropDownList ID="AccountDropDownList"style="display: none;" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:RadioButton ID="LicenseRadioButton"GroupName="Lookup" AutoPostBack="true" runat="server" /> License
</td>
<td>
<asp:TextBox ID="LicenseTextBox"OnPreRender="AutoCompleteTextBox_PreRender" runat="server" />
<asp:DropDownList ID="LicenseDropDownList"runat="server" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
<Triggers>
<atlas:ControlEventTriggerControlID="AccountRadioButton" EventName="CheckedChanged" />
<atlas:ControlEventTriggerControlID="LicenseRadioButton" EventName="CheckedChanged" />
</Triggers>
</atlas:UpdatePanel>
</asp:Panel>
</form
<script type="text/javascript">
<!-- //

Type.registerNamespace("Dummy");

Dummy.CascadingDropDownNameValue = function(name, value) {
var _name = name;
var _value = value;

this.name = _name;
this.value = _value;
}

Dummy.CascadingDropDownNameValue.registerClass('Dummy.CascadingDropDownNameValue');
// -->
</script
</body>
</html

Posted by ubiquityvbno at 4:10 AM 0 comments
Labels: , , , , , , , , , , , ,

Problem in Binding Gridview through Modal popup

Hi,

I have a gridview inside a Panel which i being is shown byModalPopupExtender, and i am also using

DynamicServiceMethod -- to call a code_behind method , which inturn binds data from a data set to the gridview inside the panel.

But at the front end, i am unable to see any grid, all that i can see is just the empty pop-up(Modal). Need help on how

to bind dynamic data to modal pop.

thanks

Vishaal

It is the continuation of above problem

<ajaxToolkit:ModalPopupExtender

ID="ModalPopupExtender"runat="server"TargetControlID="imgBtnContinue"PopupControlID="pnlDiscounts"BackgroundCssClass="modalBackground"OkControlID="OkButton"OnOkScript="onOk()"CancelControlID="CancelButton"DropShadow="true"PopupDragHandleControlID="Panel3"DynamicServiceMethod="test()" (code behind method)DynamicControlID="gvDiscountDisplay" (grid inside panel) />

when i am clicking "imgBtnContinue" .. an javascript error is raised " Sys.ArgumentException: Value must not be null for Controls and Behaviors.

Parameter name:element


<ajaxToolkit:ModalPopupExtender

ID="ModalPopupExtender"

runat="server"

TargetControlID=" <Set target Id to some dummy control id>"

PopupControlID="pnlDiscounts"

BackgroundCssClass="modalBackground"

OkControlID="OkButton"

OnOkScript="onOk()"

CancelControlID="CancelButton"

DropShadow="true"

PopupDragHandleControlID="Panel3"/>

And in the actual Button click(Code-behind) invoke theModalPopupExtender.show()

-Vishaal

Posted by ubiquityvbno at 3:57 AM 1 comments
Labels: , , , , , , , , , , , , ,
Subscribe to: Posts (Atom)