plus/minus sign missing after adding/dropping nodes

[Mathias]

Hi,


I currently add nodes by adding a new one to the database, and then rebinding the parent node to a json result for that node.

This all works fine, but after rebinding the plus/minus sign is missing on the parent node if it had no children previously.
This also happens on the Live demo for drag/drop on your site, which makes me think it might be a bug.

Edit: actually I just noticed this happens on the "Client Side events" demo, but not on the "Drag n drop" demo.

Any way around it, is it a known issue?

Do you recommend another way of adding a node on the client side? i see in the PITS that client side add() is not scheduled.

[Slava]

JSON packet must be an array, not object
var jsonObject = [ {Text:"Product 1",Expanded:true} ] http://demos.telerik.com/aspnet-mvc/treeview/clientsidebinding

[Mathias]

I think I confused you. I meant I'm rebinding the parent node to a json result for that parent.

So the rebinding works fine in that sense it reloads the child nodes (including the new child node).
However it doesn't create a plus sign for the node that recieved the new node (the parent) if it didnt already have one.

I'd really like to see an add($node) feature on the client side, so I only need to pass the new node back and add it to the tree.

Regards,
Mathias

[Slava]

I understood you correct. In my case this behaviour of parent node is caused by JSON object binding.
When I replaced object with a array of objects, all became fine.

[Mathias]

This is the post action on client side. I'm using an example from another forum thread where a context menu acts on the node. 

$.post('@Url.Action("AddNode", "Home")',

{

    id: treeView.getItemValue($node)

}, function (data) {

    //rebind the parent

    var treeview = $('#TreeView');

    var selectedItem = treeview.find('.t-state-selected').closest('.t-item');

 

    treeView.dataBind(selectedItem, data);

I then add a new node to the database in the controller, and return the result from getting all nodes for the parent. That is what gets bound client side on success.

[HttpPost]
        public ActionResult AddNode(int id)
        {
            try
            {
                MainTreeEntities.Test1Entities db = new MainTreeEntities.Test1Entities();
                MainTreeEntities.MainTree tree = new MainTreeEntities.MainTree();
                tree.DisplayName = "New Node";
                tree.ParentMainTreeId = id;
                db.MainTrees.AddObject(tree);
                db.SaveChanges();

                int? parentId = id;

                var nodes = from item in db.MainTrees
                            where item.ParentMainTreeId == parentId || (parentId == null && item.ParentMainTreeId == null)
                            orderby item.MainTreeId
                            select new TreeViewItem
                            {
                                Text = SqlFunctions.StringConvert((double)item.MainTreeId) + " " + item.DisplayName,
                                Value = SqlFunctions.StringConvert((double)item.MainTreeId),
                                LoadOnDemand = item.MainTree1.Count > 0,
                                Enabled = true,

                            };
                return new JsonResult { Data = nodes };
            }
            catch
            {
                return Content("");
            }
        }

If I use the code from the example in the success method like this:

$.post('@Url.Action("AddNode", "Home")',
            {
                id: treeView.getItemValue($node)
            }, function (data) {

                //rebind the node
                var treeview = $('#TreeView');
                var selectedItem = treeview.find('.t-state-selected').closest('.t-item');

                var jsonObject = [
                { Text: "Product 1", Expanded: true,
                    Items: [
                      { Text: "Product 1.1" },
                      { Text: "Product 1.2" },
                      { Text: "Product 1.3" },
                      { Text: "Other products", LoadOnDemand: true, Value: "other" }
                  ]
                },
                { Text: "Product 2 (unavailable)", Enabled: false },
                { Text: "Product 3" }
            ];
            treeView.dataBind(selectedItem, jsonObject);

            });

I get exactly the same behaviour. the parent is reloaded but the plus sign is missing. 

And like I said in my original post the same thing is happening in the "Client Side events" demo when using DND.

Ultimately I don't want to use this method, but instead only returning the new object and using something like add() on the client side for just the new node.

[Slava]

So, try to intercept the HTTP package. The package must contain an array of objects.

The Data field is axcess.
And perhabs, you need to add ToList() function to ActionResult:

try to use
return Json( nodes.ToList() );

[Mathias]

First of all I'd like to thank you for trying to help. I've tried your suggestions using toList() and removing the data field, and using Json() instead of new JsonResult - same result.
If you look at my code example I also tried binding the example node structure which is an array.
The treeview seems to understand its getting a collection of nodes because its actually binding them and displaying them correctly.

The problem is the plus sign on node that has been rebound.

The problem with Drag and drop showing the same behavior is only when the tree is load on demand. I also use load on demand.

See live demos of "Client side events" and "drag and drop". On the live demo of "client side events" if you drag a single node and drop it ontop of another single node, the target node does not get the little expander triangle to the left, but the dropped item appears underneath like it should. Doing the same on the "drag and drop" demo works absolutely as expected, but this demo doesnt use loadondemand so that is what i suggest is the issue.

Regards,
Mathias

[Mathias]

A small update, adding it myself fixed it for when rebinding to a node that previously had no children.

treeView.collapse(selectedItem); // collapse nodes first, otherwise plus/minus icon stops working on nodes that _have_ children
treeView.dataBind(selectedItem, data); // rebind node
$('<span class="t-icon t-minus"></span>').prependTo(selectedItem.find('div').first()); // add a plus/minus icon in case it had no children previously

However this does not fix the drag n drop issue, when using load on demand.

I wish someone from telerik could confirm there is a known issue when using drag n drop onto a node that have no children previously. Seems only to happen when using load on demand.

[Mathias]

Simply repeating the last line (add the <span> manually) in the onNodeDrop() function fixed the drag n drop issue. FYI.