Wednesday, March 28, 2012

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.

Smile

No comments:

Post a Comment