14 Answers, 1 is accepted
Please see this live demo for an illustration of the approach and details concerning its implementation.
Should you have additional questions, please feel free to ask them.
Regards,
Simon
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
How do I construct the part to inject code to handle simple node moves/copies? I have tried:
ScriptManager.RegisterClientScriptBlock(Page,
GetType(Page), "aaa", gridscript, True)
and the script does get added to the page, but the tree has no knowlege of the script functions. The events are not wired to the code.
In Moss web parts, how do we add server side code to support the moves?
Finally, in you examples, I would suggest you add information regarding MOSS Web Part implementation. For example, in you examples you have a tabs for "Example Source Code and Description", where you could add a MOSS tab.
We currently don't have any specific MOSS related implementation notes. However since a WebPart is a custom control RadTreeView should work as expected. You only need to set up everything from codebehind. I agree that this is rather inconvenient sometimes - you may consider using SmartPart which allows user controls to be used as a web part. Development should be a lot easier.
In your particular case you need to set up the required properties in order for RadTreeView to "see" your javascript functions e.g.
RadTreeView1.OnClientNodeDragging = "onDraggingFunction";
Regards,
Albert
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
Which brings me back to the original question of a SIMPLE Example of Drag/Drop. The example I am working from is dragging from one tree to another.
Part 2: Also, I'd like to see how a simple "Hellow World" AJAX call can be made from tree interactions.
]
Once I try to add script for the tree via my webpart code via the RegisterClientScriptBlock a javascript error occurs on the page at load, and the tree becomes unusable. The page source SEEMS to have the appropriate code injected.
<script type="text/javascript">
//<![CDATA[
function ClientNodeClicked(sender, eventArgs)
{
var node = eventArgs.get_node();
alert('You clicked ' + node.get_text());
}//]]>
</script>
The Error:
"Error: 'ClientNodeClicked' is undefined."
Heres the code:
Protected Sub AddTelerikControls()
Dim nl As String = Environment.NewLine
Dim m_RadTreeFolderHierarchy As New Telerik.Web.UI.RadTreeView ' Telerik.WebControls.RadTreeView
Try
m_RadTreeFolderHierarchy.LoadContentFile(
"~/MJComponentSupport/TreeData.xml")
m_RadTreeFolderHierarchy.CheckBoxes =
True
m_RadTreeFolderHierarchy.EnableDragAndDrop =
True
'm_RadTreeFolderHierarchy.LoadContentFile("~/Layouts/MJTree/TreeData.xml")
Catch ex As Exception
Dim RadTreeNodeRoot As New Telerik.Web.UI.RadTreeNode(_WorkEmail)
m_RadTreeFolderHierarchy.Nodes.Add(RadTreeNodeRoot)
RadTreeNodeRoot =
New Telerik.Web.UI.RadTreeNode(ex.Message)
m_RadTreeFolderHierarchy.Nodes.Add(RadTreeNodeRoot)
End Try
' tree node code
Dim javaScr As String = "" & nl & nl & _
" function ClientNodeClicked(sender, eventArgs) " & nl & nl & _
"{ " & nl & nl & _
" var node = eventArgs.get_node(); " & nl & nl & _
" alert('You clicked ' + node.get_text());" & nl & nl & _
"}" & nl & nl & _
" function onNodeDragging(sender, args)" & nl & nl & _
" {" & nl & nl & _
" var target = args.get_htmlElement(); " & nl & _
"" & nl & _
" if(!target) return;" & nl & _
"" & nl & _
" if (target.tagName == 'INPUT')" & nl & _
" { " & nl & _
" target.style.cursor = 'hand';" & nl & _
" }" & nl & _
"" & nl & _
" var(Grid = isMouseOverGrid(target))" & nl & _
" If (Grid) Then" & nl & _
" {" & nl & _
" grid.style.cursor = 'hand';" & nl & _
" }" & nl & _
" }" & nl & _
"" & nl & _
" function dropOnHtmlElement(args)" & nl & _
" { " & nl & _
" If (droppedOnInput(args)) Then" & nl & _
" return;" & nl & _
"" & nl & _
" If (droppedOnGrid(args)) Then" & nl & _
" return; " & nl & _
" }" & nl & _
"" & nl & _
" function droppedOnGrid(args)" & nl & _
" {" & nl & _
" var target = args.get_htmlElement();" & nl & _
"" & nl & _
" While (target)" & nl & _
" {" & nl & _
" if(target.id == gridId)" & nl & _
" {" & nl & _
" args.set_htmlElement(target);" & nl & _
" return; " & nl & _
" }" & nl & _
"" & nl & _
" target = target.parentNode;" & nl & _
" }" & nl & _
" args.set_cancel(true);" & nl & _
" }" & nl & _
"" & nl & _
" function droppedOnInput(args)" & nl & _
" {" & nl & _
" var target = args.get_htmlElement();" & nl & _
" if (target.tagName == 'INPUT')" & nl & _
" {" & nl & _
" target.style.cursor = 'default';" & nl & _
" target.value = args.get_sourceNode().get_text(); " & nl & _
" args.set_cancel(true);" & nl & _
" return true;" & nl & _
" } " & nl & _
" }" & nl & _
"" & nl & _
" function dropOnTree(args)" & nl & _
" {" & nl & _
" var text = '';" & nl & _
"" & nl & _
"If (args.get_sourceNodes().length) Then" & nl & _
" { " & nl & _
" var i; " & nl & _
" for(i=0; i < args.get_sourceNodes().length; i++) " & nl & _
" { " & nl & _
" var node = args.get_sourceNodes()[i];" & nl & _
" text = text + ', ' +node.get_text();" & nl & _
" }" & nl & _
" }" & nl & _
"}" & nl & _
"" & nl & _
" function clientSideEdit(sender, args)" & nl & _
"{" & nl & _
" var destinationNode = args.get_destNode(); " & nl & _
"" & nl & _
" If (destinationNode) Then" & nl & _
" { " & nl & _
" var firstTreeView = $find('RadTreeView1');" & nl & _
" var secondTreeView = $find('RadTreeView2');" & nl & _
"" & nl & _
" firstTreeView.trackChanges();" & nl & _
" secondTreeView.trackChanges();" & nl & _
" var sourceNodes = args.get_sourceNodes();" & nl & _
"for (var i = 0; i < sourceNodes.length; i++)" & nl & _
"{" & nl & _
" var sourceNode = sourceNodes[i];" & nl & _
" sourceNode.get_parent().get_nodes().remove(sourceNode); " & nl & _
"" & nl & _
" if(args.get_dropPosition() == 'over') destinationNode.get_nodes().add(sourceNode); " & nl & _
" if(args.get_dropPosition() == 'above') insertBefore(destinationNode, sourceNode);" & nl & _
" if(args.get_dropPosition() == 'below') insertAfter(destinationNode, sourceNode);" & nl & _
"}" & nl & _
"destinationNode.set_expanded(true);" & nl & _
"firstTreeView.commitChanges();" & nl & _
"secondTreeView.commitChanges();" & nl & _
"}" & nl & _
"}" & nl & _
" function insertBefore(destinationNode, sourceNode)" & nl & _
" { " & nl & _
" var destinationParent = destinationNode.get_parent();" & nl & _
" var index = destinationParent.get_nodes().indexOf(destinationNode);" & nl & _
" destinationParent.get_nodes().insert(index, sourceNode);" & nl & _
" }" & nl & _
"" & nl & _
" function insertAfter(destinationNode, sourceNode)" & nl & _
" {" & nl & _
" var destinationParent = destinationNode.get_parent();" & nl & _
" var index = destinationParent.get_nodes().indexOf(destinationNode);" & nl & _
" destinationParent.get_nodes().insert(index+1, sourceNode);" & nl & _
" } " & nl & _
" function onNodeDropping(sender, args)" & nl & _
" { " & nl & _
" var dest = args.get_destNode();" & nl & _
" If (dest) Then" & nl & _
" { " & nl & _
" var clientSide = document.getElementById('ChbClientSide').checked;" & nl & _
"" & nl & _
" If (clientSide) Then" & nl & _
" {" & nl & _
" clientSideEdit(sender, args); " & nl & _
" args.set_cancel(true);" & nl & _
" return;" & nl & _
" }" & nl & _
"" & nl & _
" dropOnTree(args);" & nl & _
" }" & nl & _
" Else" & nl & _
" { " & nl & _
" dropOnHtmlElement(args);" & nl & _
" }" & nl & _
" }"
m_RadTreeFolderHierarchy.OnClientNodeClicked =
"ClientNodeClicked"
Me.Controls.Add(m_RadTreeFolderHierarchy)
ScriptManager.RegisterClientScriptBlock(Page,
GetType(Page), "aaa", javaScr, True)
End Sub
RegisterClientScriptBlock works only if called no later than the prerender event. Please check if this is not the case. You can also inspect the rendered output to see if the JavaScript is rendered.
Regards,
Albert
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
Still trying to get the basic Drag/Drop to work. Some Questions:
1. My javascript needs the treeview object, so is using the find method. Since the webpart renders the control, I wonder if this is the correct way to generate the find statement.
" var firstTreeView = $find(""" & m_RadTreeFolderHierarchy.UniqueID & """);"
2. If I want to wrap the tree in an RADAJAXPanel control, this is the syntax I tried. Is this valid?
Dim RadAJAXPanelContainer As New Telerik.Web.UI.RadAjaxPanel
RadAJAXPanelContainer.Controls.Add(m_RadTreeFolderHierarchy)
Once I get this working I can move on, purchase a license, and publish my findings.
Rank 1
I cannot add this javascript to the webpart using
ScriptManager.RegisterClientScriptBlock(Page,
GetType(Page), "aaa2", javaScrC, True)
Dim javaScrC As String = "" & nl & _
" function ClientNodeDropping(sender, args)" & nl & nl & _
" { " & nl & nl & _
" var sourceNode = args.get_sourceNode(); " & nl & nl & _
" var destNode = args.get_destNode(); " & nl & nl & _
" If (destNode) Then " & nl & nl & _
" { " & nl & nl & _
" sender.trackChanges(); " & nl & nl & _
" If (!isCtrl) Then" & nl & nl & _
" { " & nl & nl & _
" sourceNode.get_attributes().setAttribute('isCtrl', 'no'); " & nl & nl & _
" } " & nl & nl & _
" Else " & nl & nl & _
" { " & nl & nl & _
" sourceNode.get_attributes().setAttribute('isCtrl', 'yes'); " & nl & nl & _
" } " & nl & nl & _
" sender.commitChanges(); " & nl & nl & _
" } " & nl & nl & _
" } "
Me.Controls.Add(m_RadTreeFolderHierarchy)
m_RadTreeFolderHierarchy.OnClientNodeDropping =
"ClientNodeDropping"
This code works fine:
Dim javaScr As String = "" & nl & _
" function ClientNodeClicked(sender, eventArgs) " & nl & nl & _
" { " & nl & nl & _
" var node = eventArgs.get_node(); " & nl & nl & _
" alert('You clicked ' + node.get_text());" & nl & nl & _
" } "
m_RadTreeFolderHierarchy.OnClientNodeClicked =
"ClientNodeClicked"
Me.Controls.Add(m_RadTreeFolderHierarchy)
ScriptManager.RegisterClientScriptBlock(Page,
GetType(Page), "aaa", javaScr, True)
Rank 1
This is a working example...
Dim
javaScrC As String = "" & nl & _
" function ClientNodeDropping(sender, args)" & nl & nl & _
" { " & nl & nl & _
" var sourceNode = args.get_sourceNode(); " & nl & nl & _
" var destinationNode = args.get_destNode(); " & nl & nl & _
" var firstTreeView = $find(""RadTreecontrol1"");" & nl & _
" var sourceNodes = args.get_sourceNodes();" & nl & _
" for (var i = 0; i < sourceNodes.length; i++)" & nl & _
" {" & nl & _
" var sourceNode = sourceNodes[i];" & nl & _
" sourceNode.get_parent().get_nodes().remove(sourceNode); " & nl & _
"" & nl & _
" if(args.get_dropPosition() == 'over') destinationNode.get_nodes().add(sourceNode); " & nl & _
" if(args.get_dropPosition() == 'above') insertBefore(destinationNode, sourceNode);" & nl & _
" if(args.get_dropPosition() == 'below') insertAfter(destinationNode, sourceNode);" & nl & _
" }" & nl & _
" destinationNode.set_expanded(true);" & nl & _
" } " & nl & _
" function insertBefore(destinationNode, sourceNode)" & nl & _
" { " & nl & _
" var destinationParent = destinationNode.get_parent();" & nl & _
" var index = destinationParent.get_nodes().indexOf(destinationNode);" & nl & _
" destinationParent.get_nodes().insert(index, sourceNode);" & nl & _
" }" & nl & _
""
m_RadTreeFolderHierarchy.OnClientNodeDropping =
"ClientNodeDropping"
Me.Controls.Add(m_RadTreeFolderHierarchy)
ScriptManager.RegisterClientScriptBlock(Page,
GetType(Page), "aaa", javaScrC, True)
Regarding your questions:
"1. My javascript needs the treeview object, so is using the find method. Since the webpart renders the control, I wonder if this is the correct way to generate the find statement.
" var firstTreeView = $find(""" & m_RadTreeFolderHierarchy.UniqueID & """);"
2. If I want to wrap the tree in an RADAJAXPanel control, this is the syntax I tried. Is this valid?"
Dim RadAJAXPanelContainer As New Telerik.Web.UI.RadAjaxPanel
RadAJAXPanelContainer.Controls.Add(m_RadTreeFolderHierarchy)
1) You should find the control by its ClientID and not by its UniqueID, like this:
| " var firstTreeView = $find(""" & m_RadTreeFolderHierarchy.ClientID & """);" |
2) Yes, this is valid syntax.
Finally, did you manage to run the Drag&Drop functionality successfully?
Kind regards,
Simon
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
My previous post shows my working Treeview code, including drag/drop. One major piece left is the ability to save tree changes on the server. I'd prefer to do this in AJAX style, to aviod a postback.
I will try the code for find via ClientID.
You could use the track/commitChanges() client-side functions of the TreeView to store the client-side changes to the server as well.
That is, as you drag&drop Nodes inside the TreeView, the changes will be persisted on the server silently, without postbacks.
Please read more about the track/commitChanges() functions here.
Greetings,
Simon
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
On the server, how do I listen for the changes. Is there an AJAX way to make this happen, or does a Postback need to occur?
Please note I am working w/ a MOSS webpart.
This page demonstrates a loop through the changes, but how would the web part get notification of such changes, and when?
http://www.telerik.com/help/aspnet-ajax/client-side-programming-access-client-changes-at-server.html
"Client side changes are available on the server side after postback. ..."
You can have a Save button which will make a postback and in the Click event handler you can access the client-side changes.
All the best,
Simon
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1