This is a migrated thread and some comments may be shown as answers.

Looking for a simple example of tree Drag/Drop w/in a moss web part for vb.net.

14 Answers 96 Views
Sharepoint Integration
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Bob asked on 04 Aug 2008, 12:31 PM
I have a Tree displaying, and now want to get the drag/drop between nodes working.  Anyone have a simple sample of this working?

14 Answers, 1 is accepted

Sort by
0
Simon
Telerik team
answered on 05 Aug 2008, 10:32 AM
Hi Bob,

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.
0
Bob
Top achievements
Rank 1
answered on 05 Aug 2008, 04:37 PM
I'm looking for MOSS Web Part Specific implementation notes.  For example, my part is created as a web part. 

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.
0
Atanas Korchev
Telerik team
answered on 06 Aug 2008, 06:58 AM
Hello Bob,

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.
0
Bob
Top achievements
Rank 1
answered on 07 Aug 2008, 02:11 PM
[UPDATE:  When I simplified my JavaScript to be injected to only the ClientNodeClicked function, it worked, so there must be a problem in the rest of the javascript.

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

0
Atanas Korchev
Telerik team
answered on 07 Aug 2008, 03:59 PM
Hello Bob,

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.
0
Bob
Top achievements
Rank 1
answered on 07 Aug 2008, 07:51 PM

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.

0
Bob
Top achievements
Rank 1
answered on 07 Aug 2008, 09:11 PM

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)

0
Bob
Top achievements
Rank 1
answered on 08 Aug 2008, 02:41 PM
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)

0
Simon
Telerik team
answered on 11 Aug 2008, 11:44 AM
Hello Bob,

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.
0
Bob
Top achievements
Rank 1
answered on 11 Aug 2008, 01:34 PM
Simon,

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.
0
Simon
Telerik team
answered on 13 Aug 2008, 11:14 AM
Hi Bob,

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.
0
Bob
Top achievements
Rank 1
answered on 14 Aug 2008, 02:08 PM
Not quite clear yet...

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
0
Simon
Telerik team
answered on 15 Aug 2008, 01:10 PM
Hi Bob,

"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.
0
Bob
Top achievements
Rank 1
answered on 09 Sep 2008, 08:35 PM
Any chance you can create an example for me to build on?
Tags
Sharepoint Integration
Asked by
Bob
Top achievements
Rank 1
Answers by
Simon
Telerik team
Bob
Top achievements
Rank 1
Atanas Korchev
Telerik team
Share this question
or