Fun with server-side RadTreeView

[SDI]

Hello Telerik,

So far we have been having a difficult time developing the RadTreeView using server-side coding and data. We have a single table with 3 fields that help define the tree/levels and our internal structure for the application. We want the TreeView to be only postbacked with AJAX on a button click. The TreeView should send back all nodes to the code, which includes new/renamed/reorder nodes. The 3 fields are

NodeLevel - this starts at 1 and ends and the last node in the tree (just a counter of all the node entries - in order of the tree node collection)
NodeLevelUnder - this is a parent to the node - points to the NodeLevel field number
NodeLevelDepth - this is the depth of the node - level deep

Data (NodeLevel, ..Under, ...Depth):
Fruit 1, 0, 0
    Apples 2, 1, 1
        Granny Smith 3, 2, 2
        Greenish Hue 4, 2, 2
    Bananas 5, 1, 1
        Dole 6, 5, 2
            Hawaii 7, 6, 3
            Brazil 8, 6, 3
        Frozen 9, 5, 2
Veggies 10, 0, 0
    Lettuce 11, 10, 1
    Peas 12, 10, 1
        Sugar Snap 13, 12, 2
        Green Pod 14, 12, 2

Well good news is we can get most of this edited nodes, levels, but not the parents id. Using "ClientOperation" of the RadTreeNode in the TreeNode.ClientChanges we can not determine who the parent is of a node that has been added. The GetAllNodes() collecton DOES NOT include the new nodes in the count. We have no idea where it has been added or added and moved. If a old node has a new Parent we need to get that LevelId and put it in the NodeLevelUnder field. The same with a new node that is under a new parent, the index will not reflect the total indexes in the Tree itself, because they are not included in the GetAllNodes() count.

Are we really out of luck trying to accomplish this on the server-side coding? We went through your example here:
http://www.telerik.com/help/aspnet-ajax/treeview-server-save-made-changes-to-treeview-to-database.html
...but you know it really doesnt show real helpful example. It doesnt explain the track/commit at all and really who is just editing node text and reording them, deleting and adding are key features  that should have more attention, at least from our stand point.

Please tell me there is a way to accomplish getting the RadTree back as a whole and iterate through ALL nodes as they appear on the web page? If we cant, then we are defaulted to use custom attributes on the cilent-side for all the user changes and persist them back to the server-side. Will this work? We would have to change out our server-side code and fill in the 3 custom attributes, everytime the client reorders, add, edits, etc., or maybe jsut fill them in once when they click the button to save.

Thanks for the help here
SDI

[SDI]

We resorted to an array for storing the database information using the client-side attributes and saving them out to the nodes before the postback. I would really like to know if it was at all possible to get all the nodes "as is" on the screen instead of pieces, the nodes that have been changed and the existing nodes.

Anywho the array works fine and we store the data in the data-tier table.

SDI

[Bozhidar]

Hi Brian,

To have the newly created nodes available on the server, when you add them on the client, you have to use both functions - trackChanges() and commitChanges(). After that, on the server you can use the GetAllNodes() method of the treeview to iterate through all nodes in the tree (including the newly created ones) in a depth-first-search manner. 

I think this is the exact behaviour you are looking for.

Regards,
Bozhidar
the Telerik team

[SDI]

Hello Bozhidar,

We are using that js code for commiting the changes to the tree, but its not seen on the server-side.

var myRadTreeView;

                                        // set the myRadTreeView to the page RadTreeView control
                                        function pageLoad()
                                        {
                                            myRadTreeView = $find( "<%= RadTreeViewGroups.ClientID %>" );
                                        }


function AddGroup( button, args )
                                        {
                                            //Set its text
                                            var myNodeText = radprompt( "Please enter a group name:", CallBackAddNode, 350, 100, null, "GroupName", "MyGroupName" );
                                        }

                                        function CallBackAddNode( arg )
                                        {

                                            myRadTreeView.trackChanges();

                                            //Instantiate a new client node
                                            var myNewNode = new Telerik.Web.UI.RadTreeNode();

                                            if ( arg == null )
                                            {
                                                return false;
                                            }
                                            if ( arg == "" )
                                            {
                                                arg = "MyGroupName";
                                            }

                                            var myAttributes = myNewNode.get_attributes();

                                            myNewNode.set_text( arg );
                                            myNewNode.set_expandMode( Telerik.Web.UI.TreeNodeExpandMode.ClientSide );

                                            myAttributes.setAttribute( "GroupId", -1 );
                                            myAttributes.setAttribute( "Name", arg );
                                            myAttributes.setAttribute( "Description", "" );
                                            myAttributes.setAttribute( "GroupLevel", 0 );
                                            myAttributes.setAttribute( "GroupLevelUnder", 0 );
                                            myAttributes.setAttribute( "LevelDepth", 0 );
                                            myAttributes.setAttribute( "Status", 0 );

                                            //Add the new node as the child of the selected node or the treeview if no node is selected
                                            var myParent = myRadTreeView.get_selectedNode() || myRadTreeView;
                                            myParent.get_nodes().add( myNewNode );
                                            //Expand the parent if it is not the treeview
                                            if ( myParent != myRadTreeView && !myParent.get_expanded() )
                                                myParent.set_expanded( true );

                                            myRadTreeView.commitChanges();
                                        }




<telerik:RadTreeView ID="RadTreeViewGroups" runat="server" AllowNodeEditing="True" EnableDragAndDrop="True" EnableDragAndDropBetweenNodes="True" >

This postback is a button. The treeview is wrapped in an AJAXPanel. Is there something I am missing?

Thanks
SDI

[Bozhidar]

Hello Brian,

I tried your sample and it worked as expected. The nodes are persisted on the server. I've modified the page a little to show that it works. I've added a button that calls the AddGroup function, and another button to cause a postback and get the names of all nodes, in the order that you specified.

Please see the attached page, and if it doesn't work as you would like it to, please specify the exact behavior that you wish to achieve.
 
Regards,
Bozhidar
the Telerik team

[jlj30]

Hi,

I seem to have a similar challenge, so I thought I'd piggyback on this thread rather than starting a new one.
I present the user with a 2-level treeview within a RadWindow popup (separate aspx page).
All the user can do is re-order the nodes by dragging and dropping them, either within the same parent node, or to a different parent.
I've used the sample code in one of the Telerik demos and everything works fine on-screen (client side).

My issue is in the code behind.
I do get Remove and Insert operations, but I need to iterate through the entire treeview exactly as it appeared on the user's screen.
Using GetAllNodes() shows me the "original" sequence of the treeview, not the updated one.
I too have placed a RadAjaxPanel around my treeview.

The problem with the Remove and Insert operation records is that there is no notion of "where" this happened.
I do notice that there is a Reorder value for ClientOperationType, although your documentation does not mention it, nor do I see any such operation records being created.

What approach would you suggest to allow me to get the newly re-ordered treeview nodes?

Thanks in advance.

Jim

[jlj30]

Hi,

Found my problem.
I'm an idiot.

On the Page_Load event in my code behind I load the treeview.
However, I omitted the usual if (!IsPostBack), so my treeview was being rebuilt on the postback.

Jim