How do I not set focus on loadFolder call?

[Richard]

Is there a way to have Is there to have the clientside's loadFolder function not set focus?

[Vessy]

Hi Richard,

It is not possible to avoid the new folder focusing when the loadFolder function is called, but you can handle the OnClientFolderChange event and set the focus to the desired element in it.

For example:

        <telerik:RadFileExplorer ID="RadFileExplorer1" runat="server" Skin="Default" OnClientFolderChange="onFolderChange">
            <Configuration ViewPaths="~/" DeletePaths="~/" UploadPaths="~/" />
        </telerik:RadFileExplorer>
        <button onclick="select()">Load Folder</button>
        <script>
            function select() {
                $find("RadFileExplorer1").loadFolder("/App_Data");
            }
            function onFolderChange(fileExplorer, args) {
                fileExplorer.get_element().focus();
            }
        </script>

Regards,
Vessy
Progress Telerik

[Richard]

The problem is I don’t want to focus on any element, I want the page to stay exactly where it is, the function call is causing the page to jump to the bottom where the control is located. But the action that calls it, also asynchronously loading a bunch of forms and grids on the top of the page as well. Moving the screen to focus anywhere would confuse the user.
There is no way to override any .focus() method to ignore focus for the control all together?

Calling the controls other functions separately do not seem to work when I am trying to make all the other ajax updates because the file explorer will not load until the user hits the refresh button in the control.

Or what are my options?

This way has the focus issue:

function ClientLoadDocumentsFolder() {
     var documentsFileExplorer = GetDocumentsFileExplorer();
     focumentsFileExplorer.loadFolder($(".urlCopy").val());
     focumentsFileExplorer.clearFolderCache();
 }

This way does not focus, but does not load the file explorer until the user hits refresh:

function ClientLoadDocumentsFolder() {
     var documentsFileExplorer = GetDocumentsFileExplorer();
     //This does not focus, but does not load the file explorer without hitting refresh
     documentsFileExplorer.set_currentDirectory($(".urlCopy").val());
     documentsFileExplorer.get_fileList().refreshFileList($(".urlCopy").val());
 }

 

 

 

 

[Vessy]

Hi Richard,

I am afraid that the focusing of the FileExplorer's  FileList (and scrolling to it) is called in many different places of the source code (e.g. on making internal AJAX updates, clicking hidden buttons which are stealing the focus, etc.). in the specific loadFolder() scenario the focus is stolen by the AjaxLoadingPanel shown during the folder items loading. 

You can add the following overwrite in order to prevent the showing of loading panel:

            Telerik.Web.UI.RadFileExplorer.prototype._onAjaxRequestStart = function(sender, args)
            {
                var elem = args.get_postBackElement();
                if (elem && (elem.id == this.get_postbackButton() || (this.get_tree() && elem.id == this.get_tree().get_id())))
                {
                    //this._showLoadingPanel(this.get_treePane().get_id());
                    this.raiseEvent("ajaxRequestStart", Sys.EventArgs.Empty);
                    var tree = this.get_tree();
                    this._treeId = tree != null ? tree.get_id() : null;
                    args.get_request().isRFE = this.get_id();
                }
            }

 

Regards,
Vessy
Progress Telerik

[Richard]

Adding the code you provided still seems to have the same effect. The code its still focusing on the right pane of the radFileExplorer. I checked the prototype and the override was in fact overridden, as well hitting a test break point I placed inside of the override. Any ideas why that override might not work for my problem?

The closest solution I was able to come up with was to put the control into a panel that I hide, and then display it a second later. But that still has undesired movement in controls, which I am also trying to avoid. 

[Vessy]

Hi Richard,

I expanded my test scenario a bit and found some cases which are not handled only by the _onAjaxRequestStart() override. commenting the below highlighted line in the _onAjaxResponseEnd() function allows me to prevent the focusing in all of my tests. Can you test it and see if it is working at your end as well?

            Telerik.Web.UI.RadFileExplorer.prototype._onAjaxRequestStart = function (sender, args) {
                var elem = args.get_postBackElement();
                if (elem && (elem.id == this.get_postbackButton() || (this.get_tree() && elem.id == this.get_tree().get_id()))) {
                    //this._showLoadingPanel(this.get_treePane().get_id());
                    //debugger;
                    this.raiseEvent("ajaxRequestStart", Sys.EventArgs.Empty);
                    var tree = this.get_tree();
                    this._treeId = tree != null ? tree.get_id() : null;
                    args.get_request().isRFE = this.get_id();
                }
            }

            Telerik.Web.UI.RadFileExplorer.prototype._onAjaxResponseEnd = function (sender, args) {
                var response = args.get_response();
                if (!response) {
                    return;
                }
                var webRequest = response.get_webRequest();
                if (webRequest && webRequest.isRFE && webRequest.isRFE == this.get_id()) {
                    this._hideLoadingPanel(this.get_treePane().get_id());
                    args.get_response().get_webRequest().isRFE = null;
                    if (this._treeId != null) {
                        //Re-attach tree handlers because the tree was destroyed as as a result of AJAX request
                        this._attachTreeHandlers();
                        this._disableTreeMultiSelectInTouch();
                    }

                    //The selected folder in a treeview might have changed as a result of the AJAX update. We need to update the grid as well
                    var currentDirectory = this.get_currentDirectory();
                    if (this._currentDirectory && this._currentDirectory != currentDirectory) {
                        this._currentDirectory = null;
                        var item = this._createItemFromPath(currentDirectory);
                        var fcArgs = new Telerik.Web.UI.FileExplorerEventArgs(item, "");
                        this.raiseEvent("folderChange", fcArgs);
                    }
                    this._refreshFileList(currentDirectory);

                    //Set tabindex to the tree element to make sure it is accessible
                    var tree = this.get_tree();
                    if (tree) {
                        var treeElement = tree.get_element();
                        treeElement.setAttribute("tabindex", "0");
                        if ($telerik.isIE7 || $telerik.isIE6)
                            treeElement.setAttribute("tabIndex", "0");
                        treeElement.style.outlineStyle = "none";
                    }
                    //re-attach the focus handlers
                    this._attachFocusHandlers(false);

                    //Focus the last element after an ajax call
                    var lastFocusedElement = this._lastFocusedElement;
                    if (lastFocusedElement) {
                        lastFocusedElement = this._lastFocusedElement = $get(lastFocusedElement.id);//re-assigns the variable to the newly created DOM element after AJAX
                        var self = this;
                        //window.setTimeout(function () { self._focus(lastFocusedElement); }, 0);
                    }

                    this.raiseEvent("ajaxRequestEnd", Sys.EventArgs.Empty);
                }
            }

Regards,
Vessy
Progress Telerik