[Solved] Refreshing the parent node of the currently selected node.

[Jonathan]

I've hit a bit of a brick wall in my development regarding TreeView. I'm creating a page where a tree view represents an existing file structure on a hard drive, and allows one to upload and delete files, and add and delete folders. Obviously to make this look nice I have to have a tree that updates dynamically whenever the user makes such a change.

In general I have data binding working, but I'm having a problem regarding how to properly refresh the tree after adding a file using the Upload control. Using the Upload control's OnUpload event, I can tell the Save function the directory that the user currently has selected in the tree, so it saves the file there. If the user has a file selected in the tree instead of a folder, the Save function knows to find the file's containing directory, and save the Uploaded file there. But after the save is done, Upload executes the OnSuccess event. This is where I want to refresh the tree, like so:

function onSuccess(e) {
        //get the tree view
        var treeview = $('#fileViewer');

        //get the root node
        var selectedItem = treeview.find('.t-state-selected').closest('.t-item');

        //refresh the item
        treeview.data('tTreeView').ajaxRequest(selectedItem);
}

This, of course, gets the currently selected item and passes it along as the node to refresh in the controller action I designated for data binding. This works fine when the currently selected node is a directory, but what if the currently selected node is a file? I've got it set up so files have LoadOnDemand set to false, so at least that prevents files from suddenly getting child nodes they shouldn't have. But I need to figure out some way to identify that the selected node is a file, and then pass the selected node's parent node into the on-demand action. So there's one of three ways I can see solving this, assuming I can do any of them:

1) Somehow do this "is it a file?" check within Javascript. Javascript is client-side though, so I don't think it'll be able to look at the server-side file structure.

2) In the on-demand controller action, somehow redirect the refresh from the passed in node to it's parent node. I have no idea how I'd do that though.

3) Just refresh the whole dang tree. This would mean I'd always pass the root node of the tree into ajaxRequest. But two problems here: first, I don't know how to get the top node of the tree using jquery. How would you do that? Second, I feel like this solution is too "dumb" and could incur unnecessary processing or something... but maybe that's just me being paranoid.

So, what would you guys suggest I do? 3rd option seems like it'd be guaranteed to work, but like I said I don't know how to get the topmost node using jquery. I'm not really sure how the TreeView data is set up in that regard.

[Alex Gyoshev]

Hello Jonathan,

Option 1 seems to make the most sense. Two things come to mind:

1. (cheap but volatile) File nodes don't have children, so you might be safe if you reload the parent of every node that doesn't have children.
2. (more robust) If you are visualizing whether the node is a directory or file (i.e. through images or a sprite), you can check what the image/className is.

Greetings,
Alex Gyoshev
the Telerik team

[Jonathan]

Actually I thought about this a bit more, and realized something: while a file is uploading, there's nothing stopping the user from just clicking another node in the tree. This would cause the OnSuccess refresh to target the wrong node anyway. Hrm...

I'm thinking that my 3rd option might be the best option: to just refresh the whole darn tree. So I'd have to pass the root node into ajaxRequest. I'm kinda crappy at jQuery though, especially in regards to telerik, so I'm not sure how to do that. Where would I go to learn more about how to navigate telerik data in jQuery?

Another solution would be to design OnUpload to somehow store the upload target path in some kind of "needs to be refreshed after upload" queue that is then somehow utilized in OnSuccess. But that feels like it'd be going overboard, if just refreshing the whole tree works fine.

[Alex Gyoshev]

Looking at your other thread, I assume you figured it out already -- but for the sake of completeness, you can rebind the whole treeview by calling the ajaxRequest method. The client API and events page itself contains a lot of information on how to work with the client API.

Regards,
Alex Gyoshev
the Telerik team

[Jonathan]

Yeah, I just bashed my head against google and also examined my page's html to figure it out. Thanks.