TreeView inside detailsView throws javascript error

Hi,

I have a DetailsView control inside which I place a treeview control. For EditItemTemplate, I set the following property for the treeview control - ShowCheckBoxes="All". For ItemTemplate this property is not set. It is working fine.

But when I place this detailsView inside an updatePanel, it is throwing javascript error. The error is thrown when I click on the expand node of the treeview control. This javascript error is thrown only in Edit Mode of the detailsview.

The javascript error is "ct100_ContentPlaceHolder1_DetailsView1_TreeView1_Data is undefined.". In ReadOnly Mode, the javascript error is not thrown and the node is expanded properly.

What could be the problem?

Thanks & Regards,

Maya

Hi,
????I write some testing codes to check if there is any javascript error to happen.But it works fine.I install Ajax Beta 2 and Visual Studio 2005.Here are my testing codes for your reference.
<div>
<asp:UpdatePanel ID="upTree" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px" AutoGenerateRows="False" DataSourceID="SqlDataSource1" AllowPaging="True" CellPadding="4" ForeColor="Black" GridLines="Vertical" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px">
<Fields>
<asp:TemplateField>
<ItemTemplate>
<asp:TreeView ID="TreeView1" runat="server">
<Nodes>
<asp:TreeNode Text="File" Value="File">
<asp:TreeNode Text="New" Value="New"></asp:TreeNode>
<asp:TreeNode Text="Open" Value="Open"></asp:TreeNode>
<asp:TreeNode Text="Exit" Value="Exit"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Edit" Value="Edit"></asp:TreeNode>
<asp:TreeNode Text="WebSite" Value="WebSite"></asp:TreeNode>
<asp:TreeNode Text="Build" Value="Build"></asp:TreeNode>
<asp:TreeNode Text="Debug" Value="Debug"></asp:TreeNode>
<asp:TreeNode Text="Format" Value="Format"></asp:TreeNode>
<asp:TreeNode Text="Help" Value="Help"></asp:TreeNode>
</Nodes>
</asp:TreeView>
</ItemTemplate>
<EditItemTemplate>
<asp:TreeView ID="TreeView2" runat="server" ShowCheckBoxes="All">
<Nodes>
<asp:TreeNode Text="File" Value="File">
<asp:TreeNode Text="New" Value="New"></asp:TreeNode>
<asp:TreeNode Text="Open" Value="Open"></asp:TreeNode>
<asp:TreeNode Text="Exit" Value="Exit"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Edit" Value="Edit"></asp:TreeNode>
<asp:TreeNode Text="WebSite" Value="WebSite"></asp:TreeNode>
<asp:TreeNode Text="Build" Value="Build"></asp:TreeNode>
<asp:TreeNode Text="Debug" Value="Debug"></asp:TreeNode>
<asp:TreeNode Text="Format" Value="Format"></asp:TreeNode>
<asp:TreeNode Text="Help" Value="Help"></asp:TreeNode>
</Nodes>
</asp:TreeView>
</EditItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"
ReadOnly="True" SortExpression="ProductID" />
<asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
<asp:CommandField ShowEditButton="True" />
</Fields>
<FooterStyle BackColor="#CCCC99" />
<EditRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F7DE" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:DetailsView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ProductConnectionString %>"
SelectCommand="SELECT [ProductID], [ProductName], [UnitPrice] FROM [Product]" DeleteCommand="DELETE FROM [Product] WHERE [ProductID] = @.ProductID" InsertCommand="INSERT INTO [Product] ([ProductName], [UnitPrice]) VALUES (@.ProductName, @.UnitPrice)" UpdateCommand="UPDATE [Product] SET [ProductName] = @.ProductName, [UnitPrice] = @.UnitPrice WHERE [ProductID] = @.ProductID">
<DeleteParameters>
<asp:Parameter Name="ProductID" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="ProductName" Type="String" />
<asp:Parameter Name="UnitPrice" Type="Double" />
<asp:Parameter Name="ProductID" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="ProductName" Type="String" />
<asp:Parameter Name="UnitPrice" Type="Double" />
</InsertParameters>
</asp:SqlDataSource>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="DetailsView1" />
</Triggers>
</asp:UpdatePanel>
</div>
Can you post your codes here? This will help us to fix the javascript error.

Hi,

Please find the code requested pasted below. The detailsview uses an xml datasource to bind. I am pasting that xml file also at the end. When I click on the + sign beside the File Item in the Treeview, it throws javascript error. This happens only when the detailsview is in edit mode. This error does not occur if I simply remove the asp:updatepanel tags. Any idea where I might be going wrong?

<%

@.PageLanguage="C#"MasterPageFile="~/mastertest.master"AutoEventWireup="true"CodeFile="test.aspx.cs"Inherits="test"Title="Untitled Page" %>

<%

@.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

<

asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">

<

asp:ScriptManagerProxyrunat="server"Id="ScriptManager1"></asp:ScriptManagerProxy>

<

tableborder="0"width="100%"cellpadding="0"cellspacing="0"class="body">

<tr><td><asp:UpdatePanelrunat="server"Id="ViewUpdatePanel"><ContentTemplate><asp:DetailsViewID="DetailsView1"runat="server"AutoGenerateDeleteButton="True"AutoGenerateEditButton="True"AutoGenerateInsertButton="True"AutoGenerateRows="False"DataSourceID="GroupDataSource"Height="50px"Width="100%"SkinID="Det"><Fields><asp:BoundFieldDataField="ID"HeaderText="ID"SortExpression="ID"/><asp:TemplateFieldHeaderText="Modules"><EditItemTemplate><asp:TreeViewID="TreeView1"runat="server"ShowCheckBoxes="All"ExpandDepth="0"><Nodes><asp:TreeNodeText="File"Value="File"><asp:TreeNodeText="New"Value="New"></asp:TreeNode><asp:TreeNodeText="Open"Value="Open"></asp:TreeNode><asp:TreeNodeText="Exit"Value="Exit"></asp:TreeNode></asp:TreeNode><asp:TreeNodeText="Edit"Value="Edit"></asp:TreeNode><asp:TreeNodeText="WebSite"Value="WebSite"></asp:TreeNode></Nodes></asp:TreeView></EditItemTemplate>

<ItemTemplate> <asp:TreeViewID="TreeView3"runat="server"ExpandDepth="0"><Nodes><asp:TreeNodeText="File"Value="File"><asp:TreeNodeText="New"Value="New"></asp:TreeNode><asp:TreeNodeText="Open"Value="Open"></asp:TreeNode><asp:TreeNodeText="Exit"Value="Exit"></asp:TreeNode></asp:TreeNode><asp:TreeNodeText="Edit"Value="Edit"></asp:TreeNode><asp:TreeNodeText="WebSite"Value="WebSite"></asp:TreeNode></Nodes></asp:TreeView></ItemTemplate></asp:TemplateField></Fields></asp:DetailsView></ContentTemplate></asp:UpdatePanel><asp:XmlDataSourceID="GroupDataSource"runat="server"DataFile="~/Group.xml"></asp:XmlDataSource></td></tr>

</

table>

</

asp:Content>

***************************XML FILE(Group DataSource)**********************************

<?

xmlversion="1.0"encoding="utf-8" ?>

<Groups>

<

GroupID="Admin"Name="Admin Group"GroupType="User">

</

Group>

</

Groups>

********************XML FILE***************************************

Thanks,

Maya

I tested your codes and got the same javascript error as yours in your first post. We can not set asp:DetailsView for asynchronous post back in asp:UpdatePanel.Maybe this is a bug of asp:UpdatePanel in Ajax Beta 2.It can work fine if we set <asp:PostBackTrigger ControlID="DetailsView1"/>
Try to change your codes as the following and it works fine,but there will be postback to take place.Otherwise we need to look forward to Ajax another release.Wish this bug could be solved in the near future.
<asp:ScriptManagerProxy runat="server" ID="ScriptManagerProxy1"></asp:ScriptManagerProxy>
<table border="0" width="100%" cellpadding="0" cellspacing="0" class="body">
<tr>
<td>
<asp:UpdatePanel runat="server" ID="ViewUpdatePanel" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateDeleteButton="True"
AutoGenerateEditButton="True" AutoGenerateInsertButton="True" AutoGenerateRows="False"
DataSourceID="GroupDataSource" Height="50px" Width="100%" SkinID="Det">
<Fields>
<asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" />
<asp:TemplateField HeaderText="Modules">
<EditItemTemplate>
<asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All" ExpandDepth="0" >
<Nodes>
<asp:TreeNode Text="File" Value="File">
<asp:TreeNode Text="New" Value="New"></asp:TreeNode>
<asp:TreeNode Text="Open" Value="Open"></asp:TreeNode>
<asp:TreeNode Text="Exit" Value="Exit"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Edit" Value="Edit"></asp:TreeNode>
<asp:TreeNode Text="WebSite" Value="WebSite"></asp:TreeNode>
</Nodes>
</asp:TreeView>
</EditItemTemplate>
<ItemTemplate>
<asp:TreeView ID="TreeView3" runat="server" ExpandDepth="0" >
<Nodes>
<asp:TreeNode Text="File" Value="File">
<asp:TreeNode Text="New" Value="New"></asp:TreeNode>
<asp:TreeNode Text="Open" Value="Open"></asp:TreeNode>
<asp:TreeNode Text="Exit" Value="Exit"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Edit" Value="Edit"></asp:TreeNode>
<asp:TreeNode Text="WebSite" Value="WebSite"></asp:TreeNode>
</Nodes>
</asp:TreeView>
</ItemTemplate>
</asp:TemplateField>
</Fields>
</asp:DetailsView>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="DetailsView1"/>
</Triggers>
</asp:UpdatePanel>
<asp:XmlDataSource ID="GroupDataSource" runat="server" DataFile="~\XML\Group.xml"></asp:XmlDataSource>
</td>
</tr>
</table>
Wish this can help you.
Hi,Thanks for the reply. Even I wish that this bug will be solved in the next release. Regards,Maya

Thanks a lotJasson, this simple solution helped me a lot.

Keep the good work going.

TreeView inside detailsView throws javascript error

Hi,

I have a DetailsView control inside which I place a treeview control. For EditItemTemplate, I set the following property for the treeview control - ShowCheckBoxes="All". For ItemTemplate this property is not set.

It is working fine. But when I place this detailsView inside an updatePanel, it is throwing javascript error. The error is thrown when I click on the expand node of the treeview control. This javascript error is thrown only in Edit Mode of the detailsview. The javascript error is "ct100_ContentPlaceHolder1_DetailsView1_TreeView1_Data".

In ReadOnly Mode, the javascript error is not thrown and the node is expanded properly.

What could be the problem?

Thanks & Regards,

Maya

While we work closely with the ASP.NET AJAX team when developing the Toolkit, they're the real experts on general ASP.NET AJAX issues. Your problem doesn't seem to be directly related to the Toolkit, so we'd appreciate if you considered posting to one of theother newsgroups such asAJAX Discussion and Suggestions. Your post will be more helpful to others looking for similar advice if it's in the right place. Thank you!

Trigger control outside the updatepanel

Hello,

I need that the control typed in the "ControlID" property of a trigger, to be outside of the updatepanel.

If I put the button inside of the updatepanel, atlas works correctly.

But if I put the button outside of the updatepanel, the button_Click event is doing a complete postback of the entire page.

I want to put the button outside, because i don't want to load the same button one more time, just want to refresh the updatepanel when this button is clicked.

I hope you can understand. You can note my english is not very well.

Thanks!

You can make the button_Click handler call the UpdatePanelName.Update() function to make a partial postback on updatepanel UpdatePanelName. I hope this helps!
I had a similar requirement and used updatepanels inside a main updatepanel.

Thanks for your answers.

I've tried the UpdatePanel.Update() method, but still refreshing the entire page.

I've tried too somethinglike this:

<cc1:UpdatePanel ID="PanelFotoGrande" runat="server" Mode="Conditional"><ContentTemplate> ...Big Foto...</ContentTemplate><Triggers> <cc1:ControlEventTrigger ControlID="rptMiniaturas" EventName="ItemCommand" /></Triggers></cc1:UpdatePanel><cc1:UpdatePanel ID="PanelMiniaturas" runat="server" Mode="Conditional"><ContentTemplate> ...Thumbnails...</ContentTemplate></cc1:UpdatePanel>

With the same result. Finally, i've tried to group the two update panels inside other one. But still updating both updatepanels.

Maybe i have to disable the autopostbak fired by the button?? I don't know how..

Thanks a lot.

Trigger does not work

I have a trigger, which is set to lblProgress.Text property. Once the user clicks the button, the code changes the property, but nothing is displayed untill the onclick event finish. Should not be the Atlas asynchronous?

Default.aspx:

<%

@dotnet.itags.org.PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default" %>

<!

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<

htmlxmlns="http://www.w3.org/1999/xhtml">

<

headrunat="server"><title>Untitled Page</title>

</

head>

<

body><formid="form1"runat="server"><atlas:ScriptManagerID="scriptManager"EnablePartialRendering="true"runat="server"/>

<atlas:UpdatePanelID="UpdatePanel1"Mode="Conditional"runat="server"><ContentTemplate><asp:ButtonID="btnImport"runat="server"Text="Import"OnClick="btnImport_Click"/><divstyle="background-color:Lime"><h1><asp:LabelID="lblProgress"runat="server"Text=""></asp:Label></h1></div></ContentTemplate><Triggers><atlas:ControlValueTriggerControlID="lblProgress"PropertyName="Text"/></Triggers></atlas:UpdatePanel></form>

</

body>

</

html>

Deafault.aspx.cs

using

System;

using

System.Data;

using

System.Configuration;

using

System.Web;

using

System.Web.Security;

using

System.Web.UI;

using

System.Web.UI.WebControls;

using

System.Web.UI.WebControls.WebParts;

using

System.Web.UI.HtmlControls;

public

partialclass_Default : System.Web.UI.Page

{

protectedvoid Page_Load(object sender,EventArgs e)

{

}

protectedvoid btnImport_Click(object sender,EventArgs e)

{

lblProgress.Text =

"Starting Import...";

System.Threading.

Thread.Sleep(5000);

lblProgress.Text =

"That took awhile...";

}

}

I suspect any of two:

1) Call to button_Onclick is not asynchronous, so the page is waiting for the sub to finish

or

2) Setting lblProgress.Text from code does not trigger the trigger.. That would mean a bug in Atlas I guess

Wonder what you think...

Hi,

Atlas being asynchronous means that when you trigger an update for an UpdatePanel, a HTTP request is sent asynchronously to the web server, i.e. you can do other processing on client-side while the request you sent is being processed and the corresponding response is generated.

But the above response is generated when the partial postback ends, i.e. when the page has completed its whole lifecycle and rendered the HTML for the controls inside the UpdatePanel. This means that when btnImport_Click returns, the Label's text is set to "That took awhile..." and it's this text that will be displayed, since it is this text that it is rendered by the Label control and sent in the response from the server.

OK, sounds logical.How do I make the label to refresh in my long running process, which is executed after click?

I have also noticed that UpdatePanel has update property, but not sure how to use it...

Hi,

there are many approaches to monitor a long running task. The one I would take is to spawn a separate thread to run the task (btw checkthis article) and then poll the server at a specified interval to check the task's status and update a progress bar or other kind of progress indicator.

Without Atlas, this could be done using pure Javascript or a meta refresh. Adding Atlas would probably mean using a Timer control to just send the polling requests asynchronously, and update some controls (the progress indicators) inside an UpdatePanel.

Thanks, I was hoping that this could be done simpler using Atlas, if I could only somehow force the UpdatePanel to refresh itself once the lblProgress.text property is updated, my initial thought was that the trigger would do it, but than reading your post I realized that it is waiting for the btnImport_OnClick sub to finish...

Maybe if I need to have btnImport_OnClick running in seperate thread?

You said:

"...But the above response is generated when the partial postback ends, i.e. when the page has completed its whole lifecycle and rendered the HTML for the controls inside the UpdatePanel. This means that when btnImport_Click returns, the Label's text is set to "That took awhile..." and it's this text that will be displayed, since it is this text that it is rendered by the Label control and sent in the response from the server..."

Can I render page early in my onlick sub? before onclick sub will finish?How would I execute UpdatePanel partial postback once my onlick sub sets the lplProgress.text property?

Hi,

rfurdzik:

Can I render page early in my onlick sub? before onclick sub will finish?

no, because the rendering of a page is a stage in its lifecycle and you cannot modify the Page's lifecycle.

rfurdzik:

How would I execute UpdatePanel partial postback once my onlick sub sets the lplProgress.text property?

A partial postback is just a postback performed asynchronously (i.e. using XMLHTTP). From the Page's lifecycle point of view, a classic postback and a partial postback are pretty much the same thing: the Page goes through all its whole lifecycle, like in a "regular" postback. The difference is that only the HTML of the controls inside the UpdatePanels that are updating is injected into the response.

Also what is the porpouse of UpdatePanel1.Update(); ?

Does it force UpdatePanel to do partial postback?

I have also found this interesting article:http://forums.asp.net/thread/1338483.aspx

Seems that he found a way around to execute partial postback... Wonder how would it be possible to execute partial postback in my code:

protectedvoid btnImport_Click(object sender,EventArgs e)

{

lblProgress.Text =

"Starting Import...";

//Here I would like to execute partial postback of Updatepanel1. I have tried UpdatePanel.Update(), but it did not work

System.Threading.

Thread.Sleep(5000);

//THIS LAST MESSAGE IS ONLY SHOWN

lblProgress.Text =

"That took awhile...";

}

<<A partial postback is just a postback performed asynchronously (i.e. using XMLHTTP). From <<the Page's lifecycle point of view, a classic postback and a partial postback are pretty much <<the same thing: the Page goes through all its whole lifecycle, like in a "regular" postback. The <<difference is that only the HTML of the controls inside the UpdatePanels that are updating is <<injected into the response.

I think I understand now, so the page lifecycle will be finished when the last line of the OnClick sub is executed. Is this correct? In this case I guess I need:

1) to have Onclick to instantiate a seperate thread for long running task and leave the task running.. (what happens if the user closes the browser?)

2) My import class calls delegate method (part of my page, setup in import class constructor),how could I make that delegate method to update the lblProgress.text and execute partial postback?

Do you think that using webservice would make more sense?

After doing some research I realized that you were right,btnClick_ONClick sub is part of Postback, that is why postback request can not be generated within.

So now the question would be which aproach to use?

1) The one suggested by you btnClick_ONClick sub would create a seperate thread. Seems like it should be OK to execute Postback from a seperate thread process...

2) Create control in Atlas and have the control to call webservice. Seems like only the control can update progress label settings, server side code can not...

What would be the cons and prons of eighter aproach?

Instead of worrying about creating a new thread, you could separate the single request into 3 separate requests. The initial button click would cause the UpdatePanel to postback where you can change the text to 'loading', and use RegisterClientScriptBlock to inject javascript which would then initiate a second postback. The second postback would then perform your long operation, and would use RegisterClientScriptBlock to inject javascript to fire the final request which would be responsible for changing your text to 'finished' or whatever you decide.

Hope this helps,
-Tony

That is a great idea! I did not think about it. Would this technique allow the text to change several times during the Long Running Process? For example (1,2,3% etc..)

What is the exact injected java script/atlas code to fire the LRP sub? I do not know java script too much... Do you think that that javascript could call asynchronous web method, which would perform LRP and update the label's text? Will the web method have access to the Page object? Thanks,

Rafal

<< and then poll the server at a specified interval to check the task's status

Is not that waste of resources? I was thinking to have the LRP (Long Running Process) to call page's method (via delegate) and force the page to postback itself (partial postback).

What do you think?

two-way property synching not working...

I have an ajax extender that was created using the AjaxControlToolkit "ASP.Net AJAX Extender Control" wizard. My extender derives from AjaxControlToolkit.ExtenderControlBase.

My class has a bunch of properties that have the ExtenderControlProperty and ClientPropertyName attributes. These properties sync just fine from server to client, but I can't seem to get them to sync from client to server. Using this.set_ClientState("xyz") on the client gives me a value that is readable in the ClientState property on the server, but that is cheating since it uses a hidden input element.

Yes, I call this.raisePropertyChanged("MyValue") in the client JS when the property changes, and I have ensured that raisePropertyChanged is actually be called (via debugger).

Any ideas?

Nobody has any suggestions?