Expand All

[Jack]

I am trying to set up a client (or server) side expand/collapse settings for the tree view on File Explorer. Everything is working for the collapse, but my expand code is still having issues.

I tried first on the server side with 'fileExplorer.TreeView.ExpandAllNodes()', but during Page_Load the TreeView is null.

I then switched to trying on the client side. I was able to get the first level of nodes to expand, but then the ajax call prevented further expanding.

Here's my js code which expands the first level:

function treeExpandCollapse(t, b) {
    var nodes = t.get_allNodes();
    for (var i = 0; i < nodes.length; i++) {
        nodeExpandCollapse(nodes[i], b);
    }
}
function nodeExpandCollapse(n, b) {
    var nodes = n.get_allNodes();
    for (var i = 0; i < nodes.length; i++) {
        if (b) nodes[i].expand();
        else nodes[i].collapse();
        //nodes[i].set_expanded(b);
        // Recurse
        nodeExpandCollapse(nodes[i]);
    }
}

Since the client isn't aware of the subfolders until the ajax call returns, nodeExpandCollapse does not recurse. After I load all the folders using ajax, the collapse and expand buttons work correctly.

I thought that by attaching to the OnClientNodePopulated event of the treeview, I could determine that a node has been populated and then run it through the expander, but this event (using tree.add_nodePopulated()) does not fire at all when the tree is expanded, even doing a manual expand. My first thought is that the FileExplorer tie in is blocking my tie in (if I check get_events(), it shows two handlers for OnClientNodePopulated) but if anyone has any ideas it would be much appreciated.

[Dobromir]

Hi Jack,

RadFileExplorer is using callbacks to populated the expanded nodes. So, in order to expand all nodes of the tree you need to handle the Tree's ClientNodePopulated client-side event and manually expand the sub-nodes of currently expanded node.

The following sample page implements the required functionality:

<telerik:RadFileExplorer ID="RadFileExplorer1" runat="server" OnClientLoad="explorerLoad">
    <Configuration ViewPaths="~/ROOT" />
</telerik:RadFileExplorer>

<script type="text/javascript">
    function explorerLoad(explorer, args)
    {
        var tree = explorer.get_tree();//get reference to the TreeView
        tree.add_nodePopulated(nodePopulated);//attach ClientNodePopulated handler
        expandSubNodes(tree);//manually expand initially visible nodes
    }
    function nodePopulated(sender, args)
    {
        var currentNode = args.get_node();//get reference to the expanded node
        expandSubNodes(currentNode);
    }
    function expandSubNodes(parent)
    {
        var nodes = parent.get_allNodes();//get an array of all sub-nodes
        for (var i = 0; i < nodes.length; i++) {
            nodes[i].expand();
        }
    }
</script>

I hope this helps.

Best wishes,
Dobromir
the Telerik team

[Rohan]

Hi all,

           I want to  expand the particular node in File explorer tree view  from the client side and set focus to that folder …

[Rohan]

Hi   Dobromir, 

I want to  expand the particular node in File explorer tree view  from the client side and set focus to that folder and also refresh the file explorer grid  …

[Vessy]

Hi Rohan,

You could achieve the desired functionality by using the FileExplorer's loadFolder() method. It would set both the focus to a specific folder and load its content in the Grid. The path, which is passed as a first parameter to loadFolder() method must be the same as the path to that folder, displayed in the FileExplorer's AddressBar (and it must begin with a "/"):

<telerik:RadFileExplorer runat="server" ID="RadFileExplorer1" Width="520px" Height="520px" OnClientLoad="OnClientLoad">
    <Configuration ViewPaths="~/Images" UploadPaths="~/Images" DeletePaths="~/Images"/>
</telerik:RadFileExplorer>
<script type="text/javascript">
    function OnClientLoad(explorer, args) {
        explorer.loadFolder("/ROOT/Images/4/", false);
    }
</script>

Regards,
Vesi
the Telerik team

[Rohan]

Hi Vesi,

Thanks for you replay ... it works for me.. thanks

I have one external rad window for upload file with different parameters ,i don't want any postback during the upload ... i down this but my file explorer is not showing the current uploaded file . hos can is do this ... is ajaxfilemanager need to use?

[Vessy]

Hi Rohan,

You could achieve it by calling the FileExplorer's refresh() method after a file has been successfully uploaded - this will refresh the current loaded folder, showing the new files:

var explorer = $find("<%=FileExplorer1.ClientID%>");
explorer.refresh();

Regards,
Vesi
the Telerik team