Hi,
I have been trying to add nodes on the client side and its failed.
The treeview is working fine without RadAjaxPanel postback.
Following is my source code to add the nodes in TreeView on the client side.
PS:
- The following code is the sample page that I build to re-create the problem so you can copy and paste directly..
- The TreeView is working fine when you comment out the following line in "SelectNextTab" function
-----------------------
$find('<%= rapMultiPage.ClientID %>').ajaxRequest();
----------------------
Any sample work around will be best.
PS: I need the RadAjaxPanel to refresh the TreeView data when the user click "Next" button.
Thanks.
--------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TelerikTest._Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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></title>
</head>
<body>
<telerik:RadCodeBlock ID="rcbReport" runat="server">
<script type="text/javascript">
function SelectNextTab(TabIndex, direction) {
var multiPage = $find('<%=rmpCustomReport.ClientID %>');
if (multiPage) {
multiPage.set_selectedIndex(TabIndex);
if (direction == 'Next') {
// Need to refresh the data based on the user's table selection
$find('<%= rapMultiPage.ClientID %>').ajaxRequest();
return false;
}
}
return false;
}
function MoveTo() {
var treeViewSource = $find("<%= rtvFields.ClientID %>");
if (treeViewSource) {
treeViewSource.trackChanges();
var node = new Telerik.Web.UI.RadTreeNode();
node.set_text("New Node");
treeViewSource.get_nodes().add(node);
treeViewSource.commitChanges();
}
return false;
}
</script>
</telerik:RadCodeBlock>
<form id="form1" runat="server">
<div>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxPanel ID="rapMultiPage" runat="server" Width="99%">
<asp:Label ID="lblMessage" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label><br />
<telerik:RadMultiPage id="rmpCustomReport" Runat="server" SelectedIndex="0">
<telerik:RadPageView id="Step1" runat="server">
<table border="0" style="width: 98%">
<tr>
<td>
Step 1 - Select the module to report on</td>
</tr>
</table>
<br />
<table border="0" style="width: 95%">
<tr>
<td style="width: 700px; height: 450px" valign="top">
<asp:CheckBoxList ID="cblModule" runat="server">
</asp:CheckBoxList></td>
</tr>
</table>
<br />
<table style="width: 700px">
<tr>
<td>
</td>
<td align="right">
<asp:Button ID="btnNext1" runat="server" CausesValidation="False" OnClientClick="SelectNextTab(1, 'Next'); return false;"
Text="Next" /></td>
</tr>
</table>
</telerik:RadPageView>
<telerik:RadPageView id="Step3" Runat="server" Width="100%">
<br />
<table style="width: 700px">
<tr>
<td style="width: 345px;" valign="middle">
</td>
<td style="width: 345px" valign="top" >
<asp:Panel ID="pDestinationBasic" runat="server" Height="420px" ScrollBars="Auto" Width="340px" BorderColor="Khaki" BorderStyle="Dotted">
<asp:Button ID="btnAddNode" runat="server" OnClientClick="MoveTo(); return false;"
Text="Add Node" />
<telerik:RadTreeView ID="rtvFields" runat="server" EnableDragAndDrop="True" EnableDragAndDropBetweenNodes="True" Skin="Web20" CausesValidation="False">
<CollapseAnimation Duration="100" Type="OutQuint" />
<ExpandAnimation Duration="100" />
</telerik:RadTreeView>
</asp:Panel>
</td>
</tr>
</table>
<br />
<br />
</telerik:RadPageView>
</telerik:RadMultiPage>
</telerik:RadAjaxPanel>
</div>
</form>
</body>
</html>
------------------------------