Auto-size standard dialogs of RadAlert, RadPrompt and RadConfirm

43 posts, 0 answers
  1. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 13 Dec 2014 Link to this post

    Requirements

    Telerik Product and Version

    UI for ASP.Net Ajax Q2 2013 and the Q3 2014

    Supported Browsers and Platforms

    IE, FireFox and Chrome

    Components/Widgets used (JS frameworks, etc.)

    Only 100% pure JavaScript (so no dependency on jQuery or any other framework)


    PROJECT DESCRIPTION
    By using this solution, a developer can save a lot of painful effort in trying to make these nice dialog boxes work no matter what the screen size. By screen size, I mean it could be a screen of a smart phone or a tablet or ipad or a laptop, and this solution should work across all these in a seamless manner. I tested this functionality on multiple devices using the emulator in Google Chrome browser's developer tools.

    Goal: To auto-size the standard dialogs of radalert, radprompt and radconfirm in an automated manner in both mobile and non-mobile screens

    Online DEMO: http://www.kandoodev.com/AutoSizeDemoUsingRadScriptManager.aspx


    Following steps are needed to implement this solution.

    1. Download the attached zip file and unzip it to any folder on your computer. After unzipping, you should end up with a minified JavaScript file called 'RadAlertConfirmPromptAutoSize.js' inside a Scripts folder
    2. Include this JavaScript file in your  content page or master page. This can be done in one of the two ways.
      • Include the script within RadScriptManager or ScriptManager as show below in your master page or content page. The html code for this is given in code snippet below
      • Include the script file at end of your content page or the master page. It's important to include the script at end of your page else you may get 'radalert is undefined' error.

    After above steps you should get auto-sizing of all your standard dialog boxes without changing any of the existing code.


    Html Code for including auto-sizing script within RadScripManager

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
       <Scripts>
          <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
          <asp:ScriptReference Path="~/Scripts/RadAlertConfirmPromptAutoSize.js" />
       </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server"  >
    </telerik:RadWindowManager>


    Some more details about this solution are as below.

    • For normal sized messages or small messages, pass null for width and height. You can also mention a width if you want it to be wider than default width.
    • For large sized messages, pass a very high width that is is like 5000 or any value greater than screen size and pass null or anything for height value.
    • In both above cases, you never have to worry whether the dialog box will be too big for a mobile screen, since no matter what you mention as height and width parameters, the dialog box will be automatically adjusted to the small mobile screen.
    • Auto-sizing should work for all existing skins including the modern big themes Metrotouch and BlackMetroTouch.
    • Auto-sizing should work no matter what RenderMode you use for RadWindowManager.
    • Two extra parameters are added to the list of standard parameters. These are not necessary but just added to allow greater control over auto-sizing.

     isSizeFixed : The boolean parameter which is second from the last parameter tells whether the dialog box should auto-size (for this parameter value should be false) or remain fixed (for this parameter value should be true) as per passed height and width parameters. When using fixed sizing, vertical scroll bar will automatically appear for content depending on message size. Default value of this parameter is false, which means, by default the box will try to autosize.

    maxSizeFactor
    : The array parameter, which is the last parameter tells the maximum size a dialog box can expand to. For example, [.5, .7] means maximum width is .5 times the viewport width and maximum height is .7 times the viewport height.Default value of maximum size parameter is [.9,.9] which means the maximum size of a dialog box will be 90% of viewport width and 90% of viewport height.

    Examples of JavaScript code are as below, where x is a variable holding a string message to be displayed.

    radalert(x,4500, null, "Very Long Message", null,false, [.5,.7]);//this will result in auto-sized box which will never exceed 50% of viewport width and 70% of viewportheight

    radalert(x,500, 340, "Very Long Message", null,true, [.5,.7]);//this will result in a fixed size box with a scrollable content area

    radalert(x,null, null, "Normal Message", null);//this will result is auto-sized box of default width and an auto-adjusted height

    radalert(x,300, null, "Normal Message", null);//this will result in autosized box of width 300px and an auto-adjusted height


    I have included two demo pages that you can simply copy into your web application root folder and do extensive testing. One of the demo pages includes the JavsScript file inside RadScriptManager, while the other demo page includes it separately in the web page. For the second demo page, the script file should be placed at end of page else there would be an error saying 'radalert is undefined'.

    Make sure you drop the JavaScript file into a folder called 'Scripts' under your web app's root folder, and name this file 'RadAlertConfirmPromptAutoSize.js'.

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 18 Dec 2014 Link to this post

    Hello Sunil,

    Thank you for your contribution. I have updated your Telerik points.

    If you create a next version of the script, you can share it as another post in the thread.


    Regards,

    Marin Bratanov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 21 Dec 2014 Link to this post

    LATEST JavaScript File
    Please use the attached latest JavaScript file in place of the original file. In this file, I have included a fix for an edge case that shows up only when displaying RadConfirm on very small mobile screens  having a width less than 245 px.
  4. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 06 Mar 2015 Link to this post

    With the release of Q1 2015, I have updated the script so it works seamlessly with latest release of Q1 2015. Please use this script file.

    (If you use the script before this post, then auto-sizing would only work with classic render mode if you are using Q1 2015. But for earlier versions, the same old script will work across all render modes.)
  5. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 24 Aug 2015 Link to this post

    I am posting a new version of auto-sizing library for 2 reasons:

    1. the client-side JavaScript library has been enhanced
    2. a new server-side library has been created that allows creating auto-sized standard dialogs from server-side code in C# or VB.Net A new demo file  has been included in the attachment that shows how to use the client-side as well as server-side library to create auto-sized dialogs in non-ajax and ajax scenarios. The attachment contains both the new client-side library as well as Debug and Release versions of server-side library. It also includes the source code for server-side library in case you do not want to use the dll for this library.
      This works with latest version of v2015.2.729.45 with render modes and skins.

      Client-side library changes
    1. Better adaptive behavior on mobile screens: Since mobile screens have limited viewing area, so the text shown on these standard dialogs need to use as much space as possible when rendering on small mobile screens. For this following global settings are available to use. The names of these global settings are self-explanatory.
    2. Its best to put this global settings code in  head part of the master page so all content pages would automatically use them, or you could just put them somewhere in the content pages.
    3. The first two settings tell when the standard dialog automatically expands to fill the whole screen ( when screen width <= window["mobileScreenWidthForMaximizing"] OR screen height <= window["mobileScreenHeightForMaximizing"] then the standard dialog will automatically maximize to fill the entire screen).
    4. The third setting of window["minScreenWidthForSmallLeftMargin"] tells when the empty space on left side of dialog should be removed; this empty space on left side seems ok for large laptop screens, but in a small mobile screen the same dialog looks awkward/difficult to read, with this left empty space. If you don't specify these global settings then the default values as mentioned below will be assumed.
                   
      window["mobileScreenWidthForMaximizing"] =  340;//default value is 500
      window["mobileScreenHeightForMaximizing"] = 450; //default vvalue is 300
      window["minScreenWidthForSmallLeftMargin"] = 600; //default value is 1224


      Server-side library
      This library is a small utility class with static methods that allow you to open these standard dialogs from server-side in ajax and non-ajax scenarios.
    1. By using these static methods on AutoSizedStandardDialogs class, you can create auto-sized dialogs using the same principles as for the client-side library.
    2. The signatures of each of these methods is same as the server-side methods for RadWindowManager except for last 3 optional arguments (which you can always skip).  These 3 parameters correspond to isSizeFixed and maxSizeFactor in the client-side library ( read the first post for details on these extra parameters).
    3. To use  these server-side methods, you either drop the AutoSizedStandardDialogs.dll into the bin folder of you app OR include the source code for the same class in your web app. The dll is included under 'Release' folder as well under 'Debug' folder in the attachment.  Also, do not forget to inlcude the JavaScript library in your master page or content page; this library can be found under Scripts  folder in the attachment.
    4. An example of creating radalert from server-side is to use this code: AutoSizedStandardDialogs.RadAlertAutoSized. Similar methods can be used for other standard dialogs.
    5. The method that is not suffixed with 'FromAjax' should be used when an ajax request is not there. For example, when a page posts back without ajax or when a page is loading for the first time, then these methods should be used.
    6. You never have to worry about single quotes or new line characters in ​the text to be displayed ​by these dialogs, because the server-side methods will automatically escape/handle these special characters. So, you could just pass the following as text to these methods without having to worry about single quote or new line characters:"John's application is ready for testing.\nPlease use the new 'tool' to do the testing.\r\nReport back the results in a week's time".
    7. Methods that are suffixed with 'FromAjax' are used in ajax cases and its recommended but not necessary to  have ajax initiator include RadWindowManager in the list of updated controls; however when using these AJAX methods, even if you did not include RadWindowManager in list of updated controls, the ajax method will still work, but a small get request will take place after the ajax request has completed. The ajax methods that create the dialog assume that RadAjaxManager is there in the master or content page, while the methods that get JavaScript for ajax scenarios do not need a RadAjaxManager.
    8. If you just want the JavaScript on the server-side for opening these dialogs, then you can use the corresponding script method. For example, the JavaScript for opening radconfirm in a non-ajax scenario is obtained by calling this method: AutoSizedStandardDialogs.RadConfirmAutoSizedScript

      Method Signatures of important server-side methods
      RadAlertAutoSized( string text, int? width, int? height, string title, string callBackFnName, string imgUrl, bool isSizeFixed = false, int maxWidthFactorInPercent = 90, int maxHeightFactorInPercent = 90)
      RadAlertAutoSizedFromAjax( string text, int? width, int? height, string title, string callBackFnName, string imgUrl, bool isSizeFixed = false, int maxWidthFactorInPercent = 90, int maxHeightFactorInPercent = 90)
      RadConfirmAutoSized(string text, string callBackFnName, int? width, int? height, object callerObject, string title, string imgUrl, bool isSizeFixed = false, int maxWidthFactorInPercent = 90, int maxHeightFactorInPercent = 90)
      RadConfirmAutoSizedFromAjax(string text, string callBackFnName, int? width, int? height, object callerObject, string title, string imgUrl, bool isSizeFixed = false, int maxWidthFactorInPercent = 90, int maxHeightFactorInPercent = 90)
      RadPromptAutoSized( string text, string callBackFnName, int? width, int? height, object callerObject, string title, string initialValue, bool isSizeFixed = false, int maxWidthFactorInPercent = 90, int maxHeightFactorInPercent = 90)
      RadPromptAutoSizedFromAjax( string text, string callBackFnName, int? width, int? height, object callerObject, string title, string initialValue, bool isSizeFixed = false, int maxWidthFactorInPercent = 90, int maxHeightFactorInPercent = 90)


  6. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 27 Aug 2015 in reply to Sunil Link to this post

    The version in last post works but the developer needs to keep some basic points in mind. On client-side, one would have to use code like below, in which you will notice that RadWindowManager object is not being used explicitly. While, on server-side one would need to use the static methods of utility class AutoSizedStandardDialogs to autosize these dialogs, and not the methods on RadWindowManager object. Your code should look like below when using the previous version.

     

    //client-side
    radalert(msg, width, height, "AutoSized RadAlert", null, keepFixed, sizeProportions);

    //server-side
    AutoSizedStandardDialogs.RadAlertAutoSized(text, w, h, "Server-side RadAlert", null, null, autoSize.Checked, widthFactor, heightFactor);


    The latest version overcomes both these points. In other words, it will also autosize dialogs that are opened using RadWindowManager server-side API, or using the client-side methods on RadWindowManager object.  So, following 2 code snippets would work with this latest version but not with previous version.  

    //client-side
    var wm = GetRadWindowManager();
    wm.radalert(msg, width, height, "AutoSized RadAlert", null, keepFixed, sizeProportions);

    //server-side
    RadWindowManager1.RadAlert(text, w, h, "Server-side RadAlert", null, null);

     You can still use the static methods of utility class AutoSizedStandardDialogs for enhanced functionality in place of standard RadWindowManager methods. This enhanced functionality is (1) no need to escape single quotes , (2) no need to handle new line characters in message string, and (3) also be able to pass the following extra parameters for controlling autosizing - isSizeFixed and maxSizeFactor. If you use RadWindowManager API like below, it will fail because of the single quote in the message string, but the utility class method will run without any error.​​

    So now, if you just include the JavaScript file in your master or content page, then all standard dialogs opened from client-side or server-side, will be automatically autosized, and you don't have to change any existing code for autosizing to happen.

  7. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 24 Sep 2015 in reply to Sunil Link to this post

    The JavaScript file named RadAlertConfirmPromptAutoSize.js in last post  is slightly changed to allow for auto-sizing standard dialogs that are animated. The same script file in last post will auto-size these dialogs ​provided they are not animated.

    To animate the standard dialogs, just set the the Animation property of RadWindowManager to something other than None and AnimationDuration to something greater than zero like 300 or 400.

    If you were using the file in last post, then all you need to do is replace that file with the attached file, and everything else will work seamlessly with no other changes.

  8. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 14 Oct 2015 in reply to Sunil Link to this post

    Latest version of the script file for auto-sizing is as attached.

    When auto-sizing with native animation, the scroll position of the page was sometimes getting disturbed on mobile screen, which is fixed. On postback, scroll position will only be preserved if page has its MaintainScrollPositionOnPostBack property set to true. Also, some edge case when autosizing an animated standard dialog on mobile screen is fixed. Please use latest version if you already have the earlier version.

     

  9. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 14 Oct 2015 Link to this post

    Hi Sunil,

    I updated the original post with this archive.

    Regards,

    Marin Bratanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  10. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 16 Dec 2015 Link to this post

    Please use latest attached JavaScript file if you are using this library in your application.

    The property window["minScreenWidthForSmallLeftMargin"] did not have a default value set when it was supposed to have 1224 as the default value. This was resulting in a large left margin showing up on smaller devices, which made the dialog appear not so nice since dialog text was squeezed into a small area.  This has been corrected in the attached JavaScript file.

    A large left margin for these dialogs is ok on larger devices like laptop and desktop and actually makes the dialog appear better on these bigger devices, but on smaller devices this is not true.

     

  11. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 17 Dec 2015 Link to this post

    I replaced the archive in the opener post with this one.
  12. Ruth Goldberg
    Ruth Goldberg avatar
    54 posts
    Member since:
    Dec 2009

    Posted 15 Jun Link to this post

    I've tried this script because I really needed a radAlert that would only show the scroll bar when needed. That part works fine. My problem is that I am losing the bottom border of the RadAlert popup, even if I make it fixed height and leave plenty of extra room. I could try to change the script, but it is so complex, I don't know where to start. If you can fix it, or tell me how to, that would be great. The attached screenshot called radAlert with the text and width of 600 only.
  13. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 15 Jun in reply to Ruth Goldberg Link to this post

    Can you post the JavaScript you used to open the radalert that you have shown in the screen shot? I mean the full radalert JavaScript statement. Also, did you try with the latest version of auto size script? The script in first post in this thread contains the most recent script that I submitted which was a few months ago.
  14. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 15 Jun in reply to Ruth Goldberg Link to this post

    Also, you can try the online demo at following url and see if you can reproduce your issue: http://www.kandoodev.com/AutoSizeDemoUsingRadScriptManager.aspx.  I was unable to reproduce it.
  15. Ruth Goldberg
    Ruth Goldberg avatar
    54 posts
    Member since:
    Dec 2009

    Posted 15 Jun Link to this post

    Thank you for replying. I tried the demo and got the bottom border, using WebBlue (which I think is the skin we are using), but I don’t get it from my application. This is the code I ran:
    radalert(strShow, 600);

    This was the value in strShow (there should be no line breaks except for those generated by html):
    <p>User's Qlikview Group: Qlikview Marketing Intelligence<br /> User's Domain: <br />CN=Administrators,CN=Builtin,DC=centurion_group,DC=com<br/>CN=Domain Admins,CN=Users,DC=centurion_group,DC=com<br/></p>

    I thought this line in the server page load event might be causing a problem, but the same thing happened when I commented it out:
        Me.RadWindowManager1.AlertTemplate = New AjaxControls.AlertTemplate(Me.Page)

    This is the template:
    Class AlertTemplate
        ImplementsITemplate
        Private _page As Page
        PublicSub New(ByVal page As Page)
          Me._page = page
        End Sub
        Sub InstantiateIn(ByVal owner As Control) Implements ITemplate.InstantiateIn
          Dim ctrl As Control = _page.LoadControl("~/Templates/AlertTemplate.ascx")
          owner.Controls.Add(ctrl)
        End Sub
      End Class

    And this is the .ascx file (the code behind is empty):
    <%@ ControlLanguage="VB"AutoEventWireup="false"CodeFile="AlertTemplate.ascx.vb"
      Inherits="Templates_AlertTemplate" %>
    <div class="rwDialogPopup radalert">
      <div class="rwDialogText">
        {1}
      </div>
      <div>
        <a onclick="$find('{0}').close();" class="rwPopupButton"href="javascript:void(0);">
          <span class="rwOuterSpan"><span class="rwInnerSpan">##LOC[OK]##</span> </span>
        </a>
      </div>
    </div>

    There may be something else that is causing the problem. Any suggestions would be appreciated.
  16. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 15 Jun in reply to Ruth Goldberg Link to this post

    I see that you are using a custom template for radalert and that is most likely the source of your issue. The auto-sizing library works when using the standard out-of-the-box templates for radalert, radconfirm and radprompt, but is not guaranteed to work with a custom template.

    Could you try without a custom template? Also, try to use the auto-sizing script file that is attached with this message just in case you are using an older version of the script file.

    When I tried your scenario with a  custom template, this is what I got: Video of how it looked. As you can see, it does auto size the radalert, but I would recommend not to use custom template for radalert when using auto-sizing library.

    The code I used to try out your issue is also attached.

  17. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 16 Jun in reply to Ruth Goldberg Link to this post

    What version of Telerik controls are you using? If it's very old then that could also be a cause.
  18. Ruth Goldberg
    Ruth Goldberg avatar
    54 posts
    Member since:
    Dec 2009

    Posted 16 Jun Link to this post

    Next to the last version: 2016.2.504.40. I'm upgrading from an old version and will probably upgrade again to the latest before I go live.

    As I said, I tried commenting out the line that used the custom template. So I think I tried it without using one. It still lost the bottom line. There might be some other code in the system (it's quite big) that is causing the problem. I am hoping for some suggestions of things that I can look into.

    This form is loaded into a mutipageview of a tabstrip on a wrapper page. Maybe the problem is in the wrapper page. I'll look into it. The problem is that only this particular form needed the autosizing. All the others use RadAlert for error messages, which tend to be fairly short. I created a test application for a support ticket with a similar scenario. I will modify it to generate a RadAlert and attach it to my next post.

  19. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 16 Jun Link to this post

    If you are using 2016.2.504.40 or even versions up to one and half years back then auto-sizing library should work.

    • My suggestion is  to create an isolated page and then see if auto-sizing works on that isolated page with your message string and WebBlue skin for RadWindowManager. If it works, then there is some other issue that is specific to your original page.
    • Another suggestion, is to render the radalert from original page in Chrome browser. Then press F12 to open Developer Tools and go to Console tab. If you see some JavaScript errors that are in red color, then that could be causing your issue. Here is a screen shot of how Chrome Developer Tools with Console tab looks like: Chrome Developer Tools with Console tab
    • Also, try setting RenderMode="Lightweight" for RadWindowManager in the markup. 

    You can attach code that is very similar to your scenario as a zipped file here and I can take a look at it. If you have an online version of your page, then I can check it out online.

     

  20. Ruth Goldberg
    Ruth Goldberg avatar
    54 posts
    Member since:
    Dec 2009

    Posted 16 Jun in reply to Sunil Link to this post

    Thank you for your effort. I found the problem. If I included the script in the main wrapper program, I got the border. If I only included it in the loaded form, I did not. I don't think it will hurt to always use the autosize RadAlert, so I'll just put the include in the wrapper.

     

    Thanks again. I really like it.

  21. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 16 Jun in reply to Ruth Goldberg Link to this post

    That's great you got it working. In your case, it seems the problem was that you included the auto-sizing library incorrectly. You should always use one of the two approaches for including this script file:

    1. Include the auto-sizing script file in the markup for RadScriptManager or ScriptManager in your master page or content page
    2. If you do not include it in RadScriptManager or ScriptManager, then include the file just before the closing form tag in your master page or content page, else you would see some JavaScript errors.

    It's best to include it in a master page so it's available to all content pages, and this will auto size every standard dialog that opens from any page.

  22. Ruth Goldberg
    Ruth Goldberg avatar
    54 posts
    Member since:
    Dec 2009

    Posted 16 Jun Link to this post

    There is no master and content page, just regular pages. The main wrapper form has a menu and tab strip. The loaded form goes into one of the tabs. In my test application, it worked once I moved the include into the Main Wrapper form, but not when it was included in the loaded form. In my full-blown application, it didn't help. I'll just have to see what else is in the production version that isn't in my test that is causing the problem.
  23. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 16 Jun Link to this post

    So the main wrapper is like a master page in your case. Do you have a ScriptManager or RadScriptManager in main wrapper form or in the loaded form? 

    If yes, then just include the auto-sizing script within ScriptManager or RadScriptManager but make sure it's the last script in list of scripts.

    Also, if you must include the script file in loaded form, then try putting the script tag as the last line in the loaded form's markup.

  24. Ruth Goldberg
    Ruth Goldberg avatar
    54 posts
    Member since:
    Dec 2009

    Posted 16 Jun Link to this post

    Thank you. I think you identified the problem. In my test, that was the only script I included. The others were not in the test. But I still have a problem. I need to include scripts in both the main wrapper and the other form (since the main wrapper is not a master page, the script will not automatically be included). I tried moving all scripts to the RadScriptManager in both forms, keeping yours as last. I tried putting yours only in the main wrapper (as below) and also tried putting it in both forms. I can't get it to work either way. Here is what I have:

    Main Wrapper:

    <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
    <Scripts>
    <asp:ScriptReference Path="Scripts/agora.js" />
    <asp:ScriptReference Path="Scripts/jquery-1.4.1.js" />
    <asp:ScriptReference Path="Scripts/RadAlertConfirmPromptAutoSize.js" />
    </Scripts>
    </telerik:RadScriptManager>

    Loaded form:

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
    <asp:ScriptReference Path="../Scripts/agora.js" />
    <asp:ScriptReference Path="../Scripts/xmlhttp.js" />
    </Scripts>

  25. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 16 Jun in reply to Ruth Goldberg Link to this post

    Since your situation is complex without master page, I suggest that you include auto-sizing script using code-behind in a dynamic manner.  Also, it seems that sometimes you are using 2 RadScriptManagers if both wrapper form and loaded form are used which is going to create problems, so you should avoid this at all costs. Use ScriptManagerProxy instead in load form but only if you are sure that load form is never loaded just by itself i.e. it has a wrapper form being loaded with RadScriptManager.

    • In your code-behind for load form add the following code  to Page_Load event. (a CSharp and  VB.Net version is pasted below). You can include this code if the  Page.IsPostBack  is false.
    • In wrapper page include the auto-sizing library as you have already done in RadScriptManager markup.
    • Also, remove this library from RadScriptManager markup in load form. 

    C# code

    int isScriptIncluded = RadScriptManager.GetCurrent(this.Page).Scripts.Count(sr=>sr.Path=="Scripts/RadAlertConfirmPromptAutoSize.js");
    if (isScriptIncluded == 0)
    {
        RadScriptManager.GetCurrent(Me.Page).Scripts.Add(new ScriptReference { Path = "Scripts/RadAlertConfirmPromptAutoSize.js", });
    }

    VB.Net Code

    Dim isScriptIncluded As Integer = RadScriptManager1.Scripts.Count(Function(sr) sr.Path = "Scripts/RadAlertConfirmPromptAutoSize.js")
    If isScriptIncluded = 0 Then
        RadScriptManager1.Scripts.Add(New ScriptReference("Scripts/RadAlertConfirmPromptAutoSize.js"))
    End If

  26. Ruth Goldberg
    Ruth Goldberg avatar
    54 posts
    Member since:
    Dec 2009

    Posted 16 Jun Link to this post

    I tried pasting your vb.net code into my page load event but it gives me an error. It does not like any parameters after .Count. I'm not sure about the rest. I'll try it on Monday (I'm off tomorrow).
  27. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 16 Jun in reply to Ruth Goldberg Link to this post

    That may be because RadScriptManager1 may not be defined in your page. Also, for some reason Count is not showing up as a valid method, so I used Where extension method in Vb.Net. Make sure that System.Linq, which I think is included by default in VB.Net.

    Dim isScriptIncluded As Integer = RadScriptManager.GetCurrent(Me.Page).Scripts.Where(Function(sr As ScriptReference) sr.Path = "Scripts/RadAlertConfirmPromptAutoSize.js").Count
    If isScriptIncluded = 0 Then
        RadScriptManager.GetCurrent(Me.Page).Scripts.Add(New ScriptReference("Scripts/RadAlertConfirmPromptAutoSize.js"))
    End If

  28. Ruth Goldberg
    Ruth Goldberg avatar
    54 posts
    Member since:
    Dec 2009

    Posted 20 Jun Link to this post

    Thank you for your reply. I tried your suggestions, but it didn't help. I could not use ScriptManagerProxy. I got an error when I tried, that I needed a ScriptManager on the page. The loaded form is not a content form. It is also not a user control. It just gets loaded into an IFrame, the multipageview of radTabStrip on the main wrapper form. Your method also didn't appeal to me too much because there are over 200 forms that can be loaded into the main wrapper and there is only one of them that needs the auto-size RadAlert. I would prefer to leave the main wrapper form alone and only change this one loaded form. Otherwise, I'm afraid I'll lose the bottom border on all loaded forms, not just this one. I'm willing to try any other suggestions. Otherwise, we'll probably have to live with a missing bottom border for this form. 
  29. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 20 Jun in reply to Ruth Goldberg Link to this post

    Can you not put that line of code only in the aspx for the loaded form? You say you want auto sizing in only  one loaded form, so you could put that line in only that form. I am assuming your form is an aspx page.
  30. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 20 Jun in reply to Ruth Goldberg Link to this post

    If the loaded form is not an aspx, then what is it? Are you loading it dynamically from code-behind? Unless your situation is clear, it's very difficult to provide a solution. But the idea you should follow is to include the auto sizing script file only when the form being loaded is the one where you need it, and this can only be done if you follow  a dynamic approach using code-behind to include the script file.
Back to Top