RadTreeView Freeze/Delay when displaying a RadGridView in a Item

[Aaron]

Hi,

 We've been using a RadTreeView to display a RadGridView as one of its items, recently we updated to the latest Telerik Silverlight controls and there is a major delay in showing the RadGridView (previously it was pretty instant).  

 

<telerik:RadTreeView Name="AlertTree"
                                     HorizontalAlignment="Left"
                                     Margin="0,0,0,0"
                                     VerticalAlignment="Top"
                                     IsVirtualizing="True"
                                     telerik:TreeViewPanel.IsVirtualizing="True"
                                     telerik:TreeViewPanel.VirtualizationMode="Standard">

The RadGridView only has 100 rows - it loads at normal speeds into the tree when collapsed (i.e. not visible).   The problem occurs when the tree is expanded to display the RadGridView.  The UI appears to freeze and to display the 100 rows with 6 columns takes a minimum of 10 seconds (previously 1 or 2).  The memory also jumps considerably when RadGridView finally becomes visible.

// Create the grid view
RadGridView aGridView= new RadGridView();
aGridView.ItemsSource = new Telerik.Data.DataTable(e.Result);

// Attach the grid view to the Tree 
RadTreeViewItem aItem = new RadTreeViewItem();
aItem .Header = " Header Info";
aItem .Items.Add(aGridView);

 As mentioned before, this was working fine previously.  

Thanks
Oliver

 

[Dinko | Tech Support Engineer]

Hello Aaron,

In your case, RadTreeView measures the RadGridView height with Infinity. Because of this, the Virtualization of the RadGridView is turned off  and the performance is greatly reduced. Basically, you can set Height / MaxHight property of the RadGridView.

In an addition, you can take a look at the Tips and Tricks and Degraded Performance help articles that could be in handy for your solution.

Hope this information is useful. If you have any other questions, you can contact us again.


Regards,
Dinko
Telerik

[Anatoly]

Hi,

RadTreeview completely freezed and failed.

 

Could you please help ?

<telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server"

                    EnableDragAndDrop="True" Skin="Default" Height="750"  

                    AllowNodeEditing="True"

                    OnNodeEdit="RadTreeView1_NodeEdit"

                    OnNodeDrop="RadTreeView1_HandleDrop"

                    OnClientNodeDropping="onNodeDropping"

                    OnClientNodeDragging="onNodeDragging"

                    OnClientDoubleClick="ClientDoubleClick"

                    MultipleSelect="true" EnableDragAndDropBetweenNodes="true">

                </telerik:RadTreeView>

JS: 

(function () {

    var demo = window.demo = window.demo || {};

    function isMouseOverGrid(target) {

        alert("isMouseOverGrid");

        parentNode = target;

        while (parentNode !== null) {

            if (parentNode.id === demo.grid.get_id()) {

                return parentNode;

            }

            parentNode = parentNode.parentNode;

        }

        return null;

    }

    function dropOnHtmlElement(args) {

        alert("dropOnHtmlElement");

        if (droppedOnInput(args))

            return;

        if (droppedOnGrid(args))

            return;

    }

    function droppedOnGrid(args) {

        alert("droppedOnGrid");

        var target = args.get_htmlElement();

        while (target) {

            if (target.id === demo.grid.get_id()) {

                args.set_htmlElement(target);

                return;

            }

            target = target.parentNode;

        }

        args.set_cancel(true);

    }

    function droppedOnInput(args) {

        alert("droppedOnInput");

        var target = args.get_htmlElement();

        if (target.tagName === "INPUT") {

            target.style.cursor = "default";

            target.value = args.get_sourceNode().get_text();

            args.set_cancel(true);

            return true;

        }

    }

    function dropOnTree(args) {

        alert("dropOnTree");

        var text = "";

        if (args.get_sourceNodes().length) {

            var i;

            for (i = 0; i < args.get_sourceNodes().length; i++) {

                var node = args.get_sourceNodes()[i];

                text = text + ', ' + node.get_text();

            }

        }

    }

    function clientSideEdit(sender, args) {

        alert("clientSideEdit");

        var destinationNode = args.get_destNode();

        if (destinationNode) {

            firstTreeView = demo.firstTreeView;

            secondTreeView = demo.secondTreeView;

            firstTreeView.trackChanges();

            secondTreeView.trackChanges();

            var sourceNodes = args.get_sourceNodes();

            var dropPosition = args.get_dropPosition();

            //Needed to preserve the order of the dragged items

            if (dropPosition === "below") {

                for (var i = sourceNodes.length - 1; i >= 0; i--) {

                    var sourceNode = sourceNodes[i];

                    sourceNode.get_parent().get_nodes().remove(sourceNode);

                    insertAfter(destinationNode, sourceNode);

                }

            }

            else {

                for (var j = 0; j < sourceNodes.length; j++) {

                    sourceNode = sourceNodes[j];

                    sourceNode.get_parent().get_nodes().remove(sourceNode);

                    if (dropPosition === "over")

                        destinationNode.get_nodes().add(sourceNode);

                    if (dropPosition === "above")

                        insertBefore(destinationNode, sourceNode);

                }

            }

            destinationNode.set_expanded(true);

            firstTreeView.commitChanges();

            secondTreeView.commitChanges();

        }

    }

    function insertBefore(destinationNode, sourceNode) {

        alert("insertBefore");

        var destinationParent = destinationNode.get_parent();

        var index = destinationParent.get_nodes().indexOf(destinationNode);

        destinationParent.get_nodes().insert(index, sourceNode);

    }

    function insertAfter(destinationNode, sourceNode) {

        alert("insertAfter");

        var destinationParent = destinationNode.get_parent();

        var index = destinationParent.get_nodes().indexOf(destinationNode);

        destinationParent.get_nodes().insert(index + 1, sourceNode);

    }

    window.onNodeDragging = function (sender, args) {

        alert("onNodeDragging");

        var target = args.get_htmlElement();

        if (!target) return;

        if (target.tagName === "INPUT") {

            target.style.cursor = "hand";

        }

        var grid = isMouseOverGrid(target)

        if (grid) {

            grid.style.cursor = "hand";

        }

    };

    window.onNodeDropping = function (sender, args) {

        alert("onNodeDropping");

        var dest = args.get_destNode();

        if (dest) {

            var clientSide = demo.checkbox.checked;

            if (clientSide) {

                clientSideEdit(sender, args);

                args.set_cancel(true);

                return;

            }

            dropOnTree(args);

        }

        else {

            dropOnHtmlElement(args);

        }

    };

}());