Add scrollbar to Image Editor

[Anna]

Hello,

I am very new to telerik controls. I have to  make a modification to a project (not my implementation) where an ImageEditorDialog is opened in the following way:

                //Telerik File Browser Dialog
                this.DialogOpener1 = new RadDialogOpener();
                this.DialogOpener1.HandlerUrl = "~/Telerik.Web.UI.DialogHandler.axd";
                this.DialogOpener1.Window.Title = Utility.GetLanguageResource("ImagePicker_DisplayName");
/*
                 *
                 *  ATTENTION: FileBrowser Dialog doesn't support IE6!!! - The URL isn't stored after selection!
                 *
                 */

                //Get the folders to display in the dialog
                SPListCollection listsOfTyp = this.Web.GetListsOfType(SPBaseType.DocumentLibrary);
                listsOfTyp.ListsForCurrentUser = true;
                listsOfTyp.IncludeRootFolder = true;
                ArrayList list = new ArrayList();
                foreach (SPList list2 in listsOfTyp)
                {
                    if (SharepointTelerikCustomProvider.IsNotSystemFolder(list2.RootFolder) && !list2.Hidden)
                    {
                        list.Add(list2.RootFolder.ServerRelativeUrl);
                    }
                }

                ImageManagerDialogParameters imdp = new ImageManagerDialogParameters();

                imdp.ViewPaths = (string[])list.ToArray(typeof(string));
                imdp.UploadPaths = (string[])list.ToArray(typeof(string));
                imdp.DeletePaths = (string[])list.ToArray(typeof(string));
                imdp.MaxUploadFileSize = 5000000;
                imdp.FileBrowserContentProviderTypeName = typeof(SharepointTelerikCustomProvider).AssemblyQualifiedName;

                DialogDefinition imageManager = new DialogDefinition(typeof(ImageManagerDialog), imdp);
                imageManager.ClientCallbackFunction = txtUrlNew.ClientID + "ImageManagerFunctionPU";
                imageManager.Width = Unit.Pixel(649);
                imageManager.Height = Unit.Pixel(300);

                DialogOpener1.DialogDefinitions.Add("ImageManager", imageManager);



                FileManagerDialogParameters imdp2 = new FileManagerDialogParameters();
                imdp2.ViewPaths = (string[])list.ToArray(typeof(string));
                imdp2.UploadPaths = (string[])list.ToArray(typeof(string));
                imdp2.DeletePaths = (string[])list.ToArray(typeof(string));
                imdp2.MaxUploadFileSize = 5000000;
                imdp2.FileBrowserContentProviderTypeName = typeof(SharepointTelerikCustomProvider).AssemblyQualifiedName;
                DialogDefinition imageEditor = new DialogDefinition(typeof(ImageEditorDialog), imdp2);
                imageEditor.Width = Unit.Pixel(649);
                imageEditor.Height = Unit.Pixel(300);
                DialogOpener1.DialogDefinitions.Add("ImageEditor", imageEditor);
                this.Controls.Add(DialogOpener1);


                Button browseButton = new Button();
                browseButton = new Button();
                browseButton.Text = "Browse";
                browseButton.CssClass = "ms-ButtonHeightWidth";


                //var o = window.document.body.getElementsByClassName('ms-dlgFrameContainer')[0].style;
                browseButton.OnClientClick = "$find('" + DialogOpener1.ClientID + @"').open('ImageManager', {Colors: [], CssClasses: []});return false;";

 

I would like to add a scrollbar to the dialog. The following works not:
 

 

DialogOpener1.Style["overflow"] = "scroll";

  

 

Please help, I know it can not be hard but i can't figure out how to do it.
Thank you.

Anna 

 

 

 

 

 

[Dobromir]

Hi Anna,

From the provided code I assume you are using RadEditor's dialogs as a standalone as explained in this KB article.

I am not quite sure what exactly you want to achieve. If you are want to enable scrolling of the entire dialog you need to get reference to the content element of the dialog and set CSS rule overflow: scroll. You can achieve this using the following sample code:

<telerik:DialogOpener runat="server" ID="DialogOpener1" OnClientOpen="dialogOpenHandler">
</telerik:DialogOpener>

<script type="text/javascript">
    //DialogOpener's OnClientOpen handler
    function dialogOpenHandler(dialogOpener, args)
    {
        setTimeout(function ()
        {
            var dialogName = args.get_dialogName();//get the name of the opned dialog
            var oWnd = dialogOpener._dialogContainers[dialogName];//get reference to the RadWindow
            var dialogIframe = oWnd.get_contentFrame();//get reference to the content iframe
            dialogIframe.style.overflow = "scroll";//set css rule overflow: scroll
        }, 0);
    }
</script>

If this is not the case could you please describe the specific scenario in more details?


Kind regards,
Dobromir
the Telerik team

[Anna]

hello Dobromir!

It took me some time but finally it is done. Ur code works perfectly! Thank you very much!

Anna