[Solved] Image Manager - How to resolve directory and focus on subfoder's image

[Linh Hoang]

Hi,

I've been customizing image manager in Rad Editor. I wonder if there is any way to set focus on subfolder's file when we load image manger dialog (I mean the cursor points directly to one predefined image on the first time image manager dialog is loaded) ?

For a more specific usecase: First, I insert an image in the editing area. Then, how could I set focus on that image when I open image manager dialog so that I can preview the image right away? That can be very helpful to me since my folder contains thousand of images and subfolders as well.

Some one give me a hand, please. Thanks in advance.

Hoang

[Rumen]

Hi Linh,

If you need to highlight the selected image in the file browser list when you click on the Image Manager tool then try the code below:

<script type="text/javascript">
/*The code below will allow you to set the PreselectedItemUrl value in the OnClientCommandExecuting event of RadEditor and load the desired location in the Image manager. After that in the OnClientCommandExecuted event you should set the value of oldAdditionalQueryString to null to not apply everytime additional querystring to the dialog when it is being opened:*/

var oldAdditionalQueryString = null;
function OnClientCommandExecuting(editor, args)
{
        var selectedElement = editor.getSelectedElement();
        if (!selectedElement || selectedElement.tagName != "IMG")
        {
            oldAdditionalQueryString = editor.get_dialogOpener().get_additionalQueryString()
            //random number is added to make the url unique and force the reload of the dialog.
            //this way we can ensure that the file will be selected when the dialog loads.
            editor.get_dialogOpener().set_additionalQueryString(oldAdditionalQueryString + "&rndnum="+ (new Date()-100) + "&PreselectedItemUrl=" + encodeURIComponent("/editorQ1SP12009/Images/test/"));  //in the encodeURIComponent put the desired image folder location parameter
        }
}
function OnClientCommandExecuted(editor, args)
{
        if (oldAdditionalQueryString)
        {
         editor.get_dialogOpener().set_additionalQueryString(oldAdditionalQueryString);
         oldAdditionalQueryString=null;
        }
}
</script>

<telerik:RadEditor id="RadEditor1" runat="server" OnClientCommandExecuting="OnClientCommandExecuting" OnClientCommandExecuted="OnClientCommandExecuted">
    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" />
</telerik:RadEditor>

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.