I have two WebDataTrees on a single page. I use one as a "Toolbox" to perform tasks on the 2nd tree. These tasks include adding, removing and editing nodes. I want to be able to drag a "New Node" from the toolbox tree to the 2nd tree and upon completion of the drop, immediately put that new node into edit mode. I've tried to handle the client side event in NodeDropped and NodeAdded but neither seems to get me where I need to go. This is the code I have been playing with in the NodeAdded handler.
function onClientNodeAdded(sender, args) {
var tree = $find('<%= trvGeographic.ClientID %>'); var addedNode = args.getNode();
//Make sure the tree view and added node were found if ((tree != null) && (addedNode != null)) { var instanceVar = tree.getNodeEditing(); var resultVar = instanceVar.enterNodeEditing(addedNode); }}
It appears as though at this stage the added node is of type igdt_NodeHolderDragDrop and therefore does not have the same methods/properties available for use in order to set it into edit mode. NodeDropped fires after NodeAdded but it doesn't seem to be any better at handling what I want to do. NodeDropped does not even allow me to get a reference to the Dropped node using args.getNode(). That throws a javascript error and destination and source nodes are useless to me as they're not the nodes I'm trying to throw into edit mode. Is it possible to do what I'm attempting?
Also, I want my toolbox to have Editable set to "No". The problem is this transfers to the new node in the 2nd tree. Can I override the Editable property in client side script? I can see it is readable but not writeabl
Hello nhutchinson,
Thank you for contacting Infragistics!
Yes. You may set the Editable property at runtime as follows:
node.set_editable(2);
The value 2 corresponds to the value "On".
The NodeAdded event may be too early to set the newly added node to edit mode. I suggest using NodeDropped event instead. Please refer to the following code:
function WebDataTree2_NodeDropped(sender, eventArgs) { var tree = $find("WebDataTree2"); var nodeEditing = tree.getNodeEditing(); var node = eventArgs.get_destNode(); var prevNode = node.get_previousNode(); tree.set_activeNode(prevNode); //node.set_editable(2); nodeEditing.set_enabled(true); nodeEditing.enterNodeEditing(prevNode); }
I hope this helps.
If you have any questions, please let me know as well.
Please let me know if you have any questions.
I've also just upgraded to version 12.1 from 10.3 and am getting Javascript errors when I drop a new node onto the 2nd tree with AutoPostBack flags set to ON for NodeDropped and/or NodeAdded and client side event handlers created. The error is in the _getPostArgs function of the dynamically generated javascript file.
Thank you for the update.
Please let me know the build number you are using and have upgraded to.
Register Assembly="Infragistics4.Web.v12.1, Version=12.1.20121.2072"
Hi nhutchinson,
Thank you for the information. I may need additional details regarding your application.
Please attach a copy of the markup of the WeDataTrees.
Looking forward to your reply.
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="admingeographics.ascx.cs" Inherits="UserControls_Admin_Organization_admingeographics"%>
<%@ Register Assembly="Infragistics4.Web.v12.1, Version=12.1.20121.2072, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.Web.UI.NavigationControls" tagprefix="ig"%>
<table border="0" width="100%" runat="server">
<tr> <td valign="top"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top"> <asp:Panel ID="pnlLeftNav" runat="server" CssClass="leftNavContainer"> <div class="contentHeaderBox"> <asp:Label ID="lblNavBarTitle" runat="server" Text="Toolbox" CssClass="txtHeader3Bold"></asp:Label> </div> <ig:WebDataTree ID="trvToolBox" runat="server" Height="100px" Width="100px"SelectionType="Single"> <DragDropSettings AllowDrop="true" DragDropMode="Copy" EnableDragDrop="true" > </DragDropSettings> <Nodes> <ig:DataTreeNode Text="New Node" Key="InsertNode" Value="InsertNode"></ig:DataTreeNode> <ig:DataTreeNode Text="Trash Can" Key="DeleteNode" Value="DeleteNode"></ig:DataTreeNode> <ig:DataTreeNode Text="Edit" Key="EditNode" Value="EditNode"></ig:DataTreeNode> </Nodes> </ig:WebDataTree> </asp:Panel> </td> </tr> <tr> <td valign="top" style="width:100%"> <asp:Panel ID="pnlErrorSummary" runat="server" CssClass="leftNavContainer"> <div class="contentHeaderBox"> <asp:Label ID="Label1" runat="server" Text="Message Center" CssClass="txtHeader3Bold"></asp:Label> </div> <table border="0" runat="server"> <tr> <td runat="server" id="td_message" style="height:200px"></td> </tr> </table> </asp:Panel> </td> </tr> </table> </td> <td valign="top"> <asp:Panel ID="Panel1" runat="server" CssClass="leftNavContainer" Width="600" Height="346" > <div class="contentHeaderBox"> <asp:Label ID="Label2" runat="server" Text="Macro Geographic Locations" CssClass="txtHeader3Bold"></asp:Label> </div> <ig:WebDataTree ID="trvGeographic" runat="server" Height="300px" Width="200px" BackColor="White" EnableAjax="true" EnableAjaxViewState="true"> <DragDropSettings DragDropMode="Move" AllowDrop="true" EnableDragDrop="true" EnableDropInsertion="true"></DragDropSettings> <AutoPostBackFlags NodeDropped="Async" /> <Nodes> <ig:DataTreeNode Text="Root Node" Key="RootNode"></ig:DataTreeNode> </Nodes> </ig:WebDataTree> </asp:Panel> </td></tr></table>
I am glad you are able to move forward with your application.
If you have any questions, please let us know as well.
I found a workaround before you sent the last response. I cancelled the drop, added a new node manually and then sent that node into edit mode. Code is below. Thanks
//We'll do the add node manually. Cancel the eventargs.set_cancel(true);
var node = sender.createNode("New Location");sender.add(node, destinationNode._address.toString());destinationNode.set_expanded(true);
//Reset the node in order to get a valid reference to it rather than the ig_dropPlaceholder objectnode = destinationNode.get_childNode((destinationNode.get_childrenCount() - 1));
var instanceVar = tree.getNodeEditing();var resultVar = instanceVar.enterNodeEditing(node);
My apologies. I was not able to update sooner.
By handling NodeDropped event, the currently dropped node is the eventArg's previousVisibleNode based off of the destination node, destNode.
On this note, the currently dropped node may be access using the following code:
eventArgs.get_destNode().get_previousVisibleNode()
Please let me know how this works out or if you have any questions.
Has there been any work on this issue?