Customizing Existing Dialogs & Custom Dialogs

19 posts, 0 answers
  1. Axe
    Axe avatar
    88 posts
    Member since:
    Feb 2007

    Posted 28 Jun 2008 Link to this post

    I have been reading alot of the documentation in regards to Customizing Dialogs and I can't seem to work it out. I downloaded the current zip version (2008.1 619). The EditorDialogs folder contains all the dialogs but the docs don't seem to correspond to the current content of dialogs ascx files. For example if I want to hide or disable tabs which are now in a toolbar.
    If I customize a dialog how can I use it as the dialogs seem to be embedded in dll's? So I searched a bit more and I found the section on Adding Custom Dialogs and you create a new DialogDefinition class and pass in either a type of dialogType or a string of virtualPath in the constructor. I added the EditorDialogs folder to my project and tried adding the ImageManager.ascx file into contructor but got the 'Object reference not set to an instance of an object' error. Is there another way to do this? 

    If that is not possible then I guess I need to create custom dialog from scratch. If I create from scratch then is it possible to utilize existing built in controls such as the widgets controls eg. <widgets:GenericFileLister>. How and what would I need to wire these up. I can think of a lot of custom dialogs that are either existing managers that I alter or taking advantage of a bunch of the widget controls to build dialogs from scratch. I have read alot of the docs and searched forums/knowledge base/code library and found bits and pieces that give me hope but I feel like I am shooting in the dark.

    What I specifically want to build now is a dialog based on any of the file browser dialogs, it could be file based or implement a custom FileBrowserContent Provider. The file browser will list mp3 files that when clicked will use a Flash mp3 player to play the selected track so you can preview the track and if the track you want is not there then the user can upload the new track. I know I can build a totally custom dialog but it seems that so much of the functionality is already so close to what I want.

    Regards
    Axe
  2. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 02 Jul 2008 Link to this post

    Hi Axe,

    The Customizing Dialogs article should be invisible in the help, because it applies to the old RadEditor. If you want to customize the existing RadEditor dialog then copy the EditorDialogs folder from the RadControls for ASP.NET AJAX installation to the root of your application and set the ExternalDialogsPath property to point to it, e.g.

    <telerik:radeditor id="RadEditor1" ExternalDialogsPath="~/EditorDialogs"  runat="server"></telerik:radeditor>

    After that open the ascx file of the dialog that you want to customize and edit its code. You can find more examples on how to use the ExternalDialogsPath solution in the forums.

    If this does not help, then you can create your own custom dialog from scratch by using the
    showExternalDialog method of RadEditor, which will allow you to open your own aspx page from a custom button and insert content in the editor from it. For your convenience I have attached an example how to use the showExternalDialog method.

    Unfortunately, the <widgets:GenericFileLister> control cannot be used in custom dialogs.

    Best regards
    ,
    Rumen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Axe
    Axe avatar
    88 posts
    Member since:
    Feb 2007

    Posted 02 Jul 2008 Link to this post

    Thanks for the info.
    How can I do it with a standalone dialogOpener? I have been looking around for the same property but can't find it.

    What I have so far:

    <telerik:dialogopener runat="server" id="ImageDialog"  /> 
    <button onclick="$find('<%= ImageDialog.ClientID %>').open('ImageManager');return false;">Select Image</button> 
     
    <div id="previewPane"></div> 
     
    <script type="text/javascript">  
    function ImageManagerFunction(sender, args)  
    {  
        CreateImgPreview(args.Result.src,'previewPane',200,200);  
        var path = args.SelectedItem.getPath();  
    }  
    </script> 

        protected void Page_Load(object sender, EventArgs e)  
        {  
            string myContentProviderTypeName = typeof(CustomEditorFileProvider).AssemblyQualifiedName;  
     
            FileManagerDialogParameters imageManagerParameters = new FileManagerDialogParameters();  
            imageManagerParameters.ViewPaths = new string[] { "~/Images" };  
            imageManagerParameters.UploadPaths = new string[] { "~/Images" };  
            imageManagerParameters.DeletePaths = new string[] { "~/Images" };  
            imageManagerParameters.MaxUploadFileSize = 5000000;  
            imageManagerParameters.FileBrowserContentProviderTypeName = myContentProviderTypeName;  
     
            DialogDefinition imageManager = new DialogDefinition(typeof(ImageManagerDialog), imageManagerParameters);  
            //DialogDefinition imageManager = new DialogDefinition("./EditorDialogs/ImageManager.ascx", imageManagerParameters);  
            imageManager.ClientCallbackFunction = "ImageManagerFunction";  
            imageManager.Width = Unit.Pixel(694);  
            imageManager.Height = Unit.Pixel(440);  
     
            ImageDialog.DialogDefinitions.Add("ImageManager", imageManager);  
     
            ImageManagerDialogParameters imageEditorParameters = new ImageManagerDialogParameters();  
            imageEditorParameters.ViewPaths = new string[] { "~/Images" };  
            imageEditorParameters.UploadPaths = new string[] { "~/Images" };  
            imageEditorParameters.DeletePaths = new string[] { "~/Images" };  
            imageEditorParameters.MaxUploadFileSize = 5000000;  
            imageEditorParameters.EnableImageEditor = false;  
     
            DialogDefinition imageEditor = new DialogDefinition(typeof(ImageEditorDialog), imageEditorParameters);  
     
            imageEditor.Width = Unit.Pixel(832);  
            imageEditor.Height = Unit.Pixel(520);  
            ImageDialog.DialogDefinitions.Add("ImageEditor", imageEditor);  
     
     
     
            FileManagerDialogParameters documentManagerParameters = new FileManagerDialogParameters();  
            documentManagerParameters.ViewPaths = new string[] { "~/Documents" };  
            documentManagerParameters.UploadPaths = new string[] { "~/Documents" };  
            documentManagerParameters.DeletePaths = new string[] { "~/Documents" };  
            documentManagerParameters.MaxUploadFileSize = 5000000;  
     
     
            DialogDefinition documentManager = new DialogDefinition(typeof(DocumentManagerDialog), documentManagerParameters);  
            documentManager.ClientCallbackFunction = "DocumentManagerFunction";  
            documentManager.Width = Unit.Pixel(694);  
            documentManager.Height = Unit.Pixel(440);  
     
            ImageDialog.DialogDefinitions.Add("DocumentManager", documentManager);  
     
     
        } 


    Regards
  5. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 04 Jul 2008 Link to this post

    Hi Axe,

    The ExternalDialogsPath property is a property of RadEditor only and it cannot be used with the DialogOpener control. The standalone dialogs are not intended to be customized. If you want to modify the contents of the standalone image manager the only possible way is by using javascript. Here is an example how to get a referenvce to the image manager and hide its toolbar:

    <telerik:dialogopener runat="server" id="ImageDialog"  />
    <button onclick="OpenImageManager();return false;">Select Image</button>
     
    <div id="previewPane"></div>
     
    <script type="text/javascript"> 
    function OpenImageManager()
    {
        var imgDialog = $find('<%= ImageDialog.ClientID %>');
        imgDialog.open('ImageManager');
        window.setTimeout(function()
        {
            var frame = window.frames["ImageDialogImageManager"];  //get a reference to the Image Manager dialog frame
            //search for the desired html objects and manipulate them with javascript
            //for example find and hide the file manager toolbar

            frame.document.getElementById("fileManagerToolBar").style.display="none";
        }, 1000);
    }
    function ImageManagerFunction(sender, args) 

        CreateImgPreview(args.Result.src,'previewPane',200,200); 
        var path = args.SelectedItem.getPath(); 

    </script>

    Have a nice weekend,
    Rumen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Axe
    Axe avatar
    88 posts
    Member since:
    Feb 2007

    Posted 04 Jul 2008 Link to this post

    Thanks for your help.

    I will just build something myself and use a RadWindow.

    Regards
    Axe
  7. Axe
    Axe avatar
    88 posts
    Member since:
    Feb 2007

    Posted 05 Jul 2008 Link to this post

    At first I couldn't find the button with frame.document.getElementById("fileManagerToolBar") but after some debugging and searching the dom I found out it was:
    frame.document.getElementById("dialogControl_ImageManager_FileLister1_ImageEditorCaller")
    I thought I would post in case someone else was looking.

    Other useful ones:

    (

    "dialogControl_ImageManager_FileLister1_CreateNewDirectory")

    (

    "dialogControl_ImageManager_FileLister1_Delete")

    Regards
    Axe

  8. Axe
    Axe avatar
    88 posts
    Member since:
    Feb 2007

    Posted 05 Jul 2008 Link to this post

    Just one more thing and this is more a general javascript question is that instead of using window.setTimeout function it would be better to perform the function on the iframe pages onload event. If I keep at 1000 then users on slower connection will get errors as the page is not loaded and if I make much longer then those with faster connections will see those nuttons for the timeout's duration.  From a javascript perspective how can I do this?
    I tried something that dosn't work but I'm don't know alot of javascript I'm guessing I need to attach the handler somehow. I will search for it but if you do read this and know can you post please.

    var

    frame = window.frames["ImageDialogImageManager"];

    frame.body.onload(

    function(){alert('loaded')};

    Regards
    Axe

  9. Tervel
    Admin
    Tervel avatar
    1337 posts

    Posted 08 Jul 2008 Link to this post

    Hello Axe,


    You should try something along the following lines:

    //Get frame/iframe by ID
    var frame = document.getElementById("SOME_ID");

    frame.contentWindow.document.body.onload =

    function()
    {
        alert(
    'loaded');
    }



    Regards,
    Tervel
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  10. Axe
    Axe avatar
    88 posts
    Member since:
    Feb 2007

    Posted 12 Jul 2008 Link to this post

    Have you removed the id's for each of the buttons in the latest release? I can't seem to find them now. There is an id for the button row 'fileManagerToolBar' but everything inside is id-less.
  11. Axe
    Axe avatar
    88 posts
    Member since:
    Feb 2007

    Posted 12 Jul 2008 Link to this post

    What I ended up doing is:

    var frame = window.frames["ImageDialogImageManager"];

    var fileManagerToolBar = frame.document.getElementById("fileManagerToolBar");

    var listitems = fileManagerToolBar.getElementsByTagName('li');

    listitems[4].style.display=

    "none"


    I also tried the onload function you provided above but I can't get it to work. I get an error when using this function:

    function OpenImageManager()

    {

    var imgDialog = $find('<%= ImageDialog.ClientID %>');

    imgDialog.open(

    'ImageManager');

    var frame = window.frames["ImageDialogImageManager"];

    frame.contentWindow.document.body.onload =

    function()

    {

    alert(

    'loaded');

    //hide buttons

    }

    }

    Basically contentWindow.document is null.
    I can use window.setTimeout() but like I mentioned I am wondering what will happen if a user has a slow connection and the dialog has not opened before the timeout period.

  12. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 14 Jul 2008 Link to this post

    Hi Axe,

    I have good news that you can set the ExternalDialogsPath property via the DialogDefinitions collection of the DialogOpener control, e.g.

    FileManagerDialogParameters imageManagerParameters = new FileManagerDialogParameters();
    imageManagerParameters.ViewPaths = new string[] { "~/Images" };
    imageManagerParameters.UploadPaths = new string[] { "~/Images" };
    imageManagerParameters.DeletePaths = new string[] { "~/Images" };
    imageManagerParameters.MaxUploadFileSize = 5000000;
        
    DialogDefinition imageManager = new DialogDefinition(typeof(ImageManagerDialog), imageManagerParameters);
    imageManager.ClientCallbackFunction = "ImageManagerFunction";
    imageManager.Width = Unit.Pixel(694);
    imageManager.Height = Unit.Pixel(440);
    imageManager.Parameters["ExternalDialogsPath"] = "~/EditorDialogs/";

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

    This will help you to modify directly the ImageManager.ascx control placed inside the EditorDialogs folder.


    Kind regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  13. Axe
    Axe avatar
    88 posts
    Member since:
    Feb 2007

    Posted 14 Jul 2008 Link to this post

    That's great. I will start playing with that right away.

    Regards
    Axe
  14. Kevin Warnke
    Kevin Warnke avatar
    98 posts
    Member since:
    Dec 2005

    Posted 20 Jul 2009 Link to this post

    I'm trying to use this for modifying the dialogs for the DocumentManager (2009 Q2) but it doesn't seem to be "seeing" my changes.

    Everything is running fine but I'm editing the DocumentManager.ascx to hide the LinkManager but it still shows up.

    Is there something special you need to do to get this to work with DocumentManager (I've gotten this to work with ImageManager as defined above).

    Thanks,
    Kevin
  15. Kevin Warnke
    Kevin Warnke avatar
    98 posts
    Member since:
    Dec 2005

    Posted 21 Jul 2009 Link to this post

    This is very strange.  I came down this morning and the exact same code that was NOT working last night was working this morning.  Go figured.  Darn gremlins.

    Thanks,
    Kevin
  16. d
    d avatar
    4 posts
    Member since:
    Jun 2011

    Posted 19 Dec 2011 Link to this post

    The image in ImagEditor disappears just after loading the ImageEditor.Can somebody help me out with this? I can preview the image in the image browser and when I click on Image Editor option, the image shows up on loading the Image Editor but disappears in a second. The images are loaded from a mapped drive, which points to a location on a server different to the one on which the Rad Editor is running.

  17. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 22 Dec 2011 Link to this post

    Hi,

    Please, open the web.config file and ensure that the Telerik.Web.UI.WebResource handler is registered in the

    Copy Code
    <httpHandlers>
          <add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false" />
          <add path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" validate="false" />
          <add path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" validate="false" />
    </httpHandlers>

    and

    Copy Code
    <handlers>
      <add name="Telerik_Web_UI_WebResource_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" />
      <add name="Telerik_Web_UI_DialogHandler_aspx" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" />
      <add name="Telerik_Web_UI_SpellCheckHandler_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" />
    </handlers>

    sections. If it is not registered you will experience the reported problem.

    Greetings,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  18. d
    d avatar
    4 posts
    Member since:
    Jun 2011

    Posted 28 Dec 2011 Link to this post

    Thank a lot for your reply. That was really helpfull.
  19. IT Development
    IT Development avatar
    3 posts
    Member since:
    Apr 2008

    Posted 23 Oct 2012 Link to this post

    Hello!

    I have the same code, but my dialog opener is not "seeing" my changes....

     
    <span id="spanImageManager" runat="server">
    <button onclick="$find('<%= DialogOpener1.ClientID %>').open('ImageManager', {CssClasses: []});return false;">Change Image</button>
     </span>
    <telerik:RadDialogOpener runat="server" ID="DialogOpener1" AdditionalQueryString="" HandlerUrl="Telerik.Web.UI.RadDialogHandler.axd" Style="display: none;" />



    FileManagerDialogParameters imageManagerParameters = new FileManagerDialogParameters();
    imageManagerParameters.ViewPaths = new string[] { "~/Images/partners" };
    imageManagerParameters.UploadPaths = new string[] { "~/Images/partners" };
    imageManagerParameters.DeletePaths = new string[] { "~/Images/partners" };
    imageManagerParameters.MaxUploadFileSize = 131072000;
     
    DialogDefinition imageManager = new DialogDefinition(typeof(ImageManagerDialog), imageManagerParameters);
    imageManager.ClientCallbackFunction = "ImageManagerFunction";
    imageManager.Width = Unit.Pixel(694);
    imageManager.Height = Unit.Pixel(440);
    imageManager.Parameters["ExternalDialogsPath"] = "~/EditorDialogs/";
     
    DialogOpener1.DialogDefinitions.Add("ImageManager", imageManager);


    Please help!
  20. IT Development
    IT Development avatar
    3 posts
    Member since:
    Apr 2008

    Posted 25 Oct 2012 Link to this post

    Using the custom dialog decided to work by itself! just like the post above, the day after, it was working fine.

    I ended up creating a custom control to extend the RadFileExplorer (to change the order of the items in the Context Menu) to be able to change its behavior inside the FileBrowser.ascx that is inside the ImageManagerDialog together with the ImageManager.ascx

    Thanks!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017