Auto-Collapse & Folder Visibility for the selected folder

[Vineeth]

Hi,

 

I am working on a web application using Telerik FileExplorer with custom implementation as explained here, as I had to point the application to physical and Shared paths  for browsing a set of folders from A-Z , which includes numerous sub-folders and files (refer attached Screenshot1.JPG). Each folder holds the subfolders starting with the Root folder name (A-Z)… for e.g. Folder A contains subfolders AGGH, AJJJ,AYYY etc Folder B contains subfolders BSSS,BHHHE,BYUU etc. Following is the tree view structure:

 

Root

 --- Folder A

                ---Sub Folder AGGH

                ---Sub Folder AJJJ

                ---Sub Folder AYYY

 

--- Folder B

                ---Sub Folder BSSS

                ---Sub Folder BHHHE

                ---Sub Folder BYUU

 

 

I also have a lookup text box to search for a sub folder (e.g. AGGH,BYUU etc) and based on the input in the textbox, the Sub folder would be auto-selected. My requirements are:

 

1. whenever I do a search it should collapse all the sub-folders and folders which was expanded on a previous search (if any). i.e. The only sub-folder that would be expanded would be the one I’ve searched.

1. As there are numerous sub-folders in each folder, while expanding the sub-folder through search, I need to scroll all the way down to see the folder selected. Is there a way to make the currently selected Folder visible? (Please refer the attached screenshots. Currently when I search for ZUKAN which is under folder Z, I see the screen as in Screenshot2.JPG.. I would like to see it as in Screenshot3.JPG).

 

Thanks for your quick response.

-Vineeth

[Fiko]

Hi Vineeth,

When the search button is clicked you can set the RadFileExplorer's InitialPath property to point to the folder which is found (as a result of the search). In this case it will be automatically selected. You can use OnClientLoad event of the RadFileExplorer control in order to collapse the nodes. Your code should be similar to this one:

function OnClientLoad(oExplorer, args)
{
    var tree = oExplorer.get_tree();
    colapsenodes(tree, oExplorer.get_currentDirectory());
    tree.get_selectedNode().get_element().scrollIntoView();
}

function colapsenodes(oTree, selectedDirectoryPath)
{
    var allTreeNodes = oTree.get_allNodes();
    for (var i = 0; i < allTreeNodes.length; i++)
    {
        var currentNode = allTreeNodes[i];
        if (!selectedDirectoryPath.startsWith(currentNode.get_value()))
        {
            currentNode.collapse();
        }
    }
}

Please note the scrollIntoView() method, which scrolls the TreeView in order to show the selected node.


Regards,
Fiko
the Telerik team