make popup window resizable

2 posts, 0 answers
  1. lan luo
    lan luo avatar
    48 posts
    Member since:
    May 2010

    Posted 11 Dec 2019 Link to this post

    Hi Telerik team,

     

    Is there any way we can make file manager or image manager popup window resizable?

     

    Thanks in advance,

     

    Lan

  2. Rumen
    Admin
    Rumen avatar
    14275 posts

    Posted 16 Dec 2019 Link to this post

    Hi Lan,

    The contents of RadEditor dialogs have fixed size and for this reason they are not resizable with the mouse.

    You can resize the Image Dialog boundaries via the following script:

    <telerik:RadEditor runat="server" ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting" ExternalDialogsPath="~/EditorDialogs">
        <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" />
    </telerik:RadEditor>
    <script> 
        function OnClientCommandExecuting(editor, args) {
            if (editor.get_dialogOpener()) {
                var commandName = args.get_commandName();
      
                if (editor.get_dialogOpener()._getDialogContainer) {
                    dialogReference = editor.get_dialogOpener()._getDialogContainer(commandName);
                    setTimeout(function () {
                        editor.get_dialogOpener()._getDialogContainer("ImageManager").set_height("1080");
                    }, 2000);
      
                }
            }
        }
    </script>

    Note that the code will resize the RadWindow dialog only but not the contents inside it because they have fixed size. If you want to customize the appearance of the inner content inside the dialogs you can see how to load the external dialog files of RadEditor in this live demo: Customize Built-in Dialogs.

    The contents inside the dialog are located at \EditorDialogs\FileBrowser.ascx and you can control them via CSS.

    For example to move the Insert button add:

    <style>
        .reLightweightDialog.RadForm.redImageManager body {
            height: 1000px;
        }
    </style>


    More tips and tricks how to examine the HTML and applied CSS are available at https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools (see points 1 and 2). Since the file explorer is a complex component and might be hard to resize, this article can be useful too: http://erolbalci.com/setting-the-height-of-a-telerik-radfileexplorer-to-100-with-asp-net-c-3/ 

    Best Regards,
    Rumen
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top