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

15 posts, 0 answers
  1. Bob
    Bob avatar
    55 posts
    Member since:
    Apr 2008

    Posted 04 Aug 2008 Link to this post

    I have a Tree displaying, and now want to get the drag/drop between nodes working.  Anyone have a simple sample of this working?
  2. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 05 Aug 2008 Link to this post

    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.

  3. Bob
    Bob avatar
    55 posts
    Member since:
    Apr 2008

    Posted 05 Aug 2008 Link to this post

    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.
  4. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 06 Aug 2008 Link to this post

    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.
  5. Bob
    Bob avatar
    55 posts
    Member since:
    Apr 2008

    Posted 07 Aug 2008 Link to this post

    [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

  6. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 07 Aug 2008 Link to this post

    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.
  7. Bob
    Bob avatar
    55 posts
    Member since:
    Apr 2008

    Posted 07 Aug 2008 Link to this post

    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.

  8. Bob
    Bob avatar
    55 posts
    Member since:
    Apr 2008

    Posted 07 Aug 2008 Link to this post

    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)

  9. Bob
    Bob avatar
    55 posts
    Member since:
    Apr 2008

    Posted 08 Aug 2008 Link to this post

    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)

  10. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 11 Aug 2008 Link to this post

    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.
  11. Bob
    Bob avatar
    55 posts
    Member since:
    Apr 2008

    Posted 11 Aug 2008 Link to this post

    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.
  12. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 13 Aug 2008 Link to this post

    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.
  13. Bob
    Bob avatar
    55 posts
    Member since:
    Apr 2008

    Posted 14 Aug 2008 Link to this post

    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
  14. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 15 Aug 2008 Link to this post

    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.
  15. Bob
    Bob avatar
    55 posts
    Member since:
    Apr 2008

    Posted 09 Sep 2008 Link to this post

    Any chance you can create an example for me to build on?
Back to Top