Scrolling Within RadWindow

7 posts, 1 answers
  1. Mike
    Mike avatar
    74 posts
    Member since:
    Mar 2013

    Posted 06 May Link to this post

    I have a page with a RadGrid, and on each row there is a link which opens a RadWindow.  The window is opened via client side scripting below:

    function ShowSecurityForm(id, rowIndex) {
        var size = 80;
        var browserWidth = $telerik.$(window).width();
        var browserHeight = $telerik.$(window).height();
        var width = Math.ceil(browserWidth * size / 100);
        var height = Math.ceil(browserHeight * size / 100);
        var grid = $find("<%= rgGroups.ClientID %>");
        var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
        grid.get_masterTableView().selectItem(rowControl, true);
        var oWnd = window.radopen("DocumentSecurity/" + id, "radSecurity");
        oWnd.setSize(width, height);
        oWnd.center();
        return false;
    }

    The data in the window is also in a RadGrid and sometimes scrolls off the bottom of the RadWindow (based on the number of rows), is there a way to enable vertical scrolling in the RadWindow?  I've applied CSS to have "overflow: scroll !important" on both the RadWindow and on the RadGrid and it doesn't work.

    I've also set the AutoSize property of the RadWindow (before I had the window size calculation in the above JS) and it only displays a RadWindow that is about an inch by an inch and I can't see anything.

     

     

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 10 May Link to this post

    Hi Mike,

    You load an entire page in the RadWindow which means it is actually loaded in an iframe: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/common-issues#general-troubleshooting. Thus, the overflow CSS rules need to be in the DocumentSecurity page and not in the page where the RadWindow is declared (opened).

    If you are not successful in fixing the overflow in the content page when it is loaded in a simple iframe, I suggest the following:

    Regards,

    Marin Bratanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mike
    Mike avatar
    74 posts
    Member since:
    Mar 2013

    Posted 10 May in reply to Marin Bratanov Link to this post

    I wasn't aware of the Scroll Height property, and it seems to be working.  Is there a way I can dynamically set the height?  In my JS function, I set the width/height to 80% of the browsers size.  I'm wondering if there is a way I can dynamically set the scroll height based on the size of the RadWindow.
  5. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 12 May Link to this post

    Hello Mike,

    You can try the approaches shown here and here but I cannot guarantee they will always work and will be suitable for your setup. You can also try the approach from this demo where an AJAX request is fired and the available dimensions are passed as arguments, so the values are changed on the server.

    If the grid is the only thing in the RadWindow, you can also try setting its width and height to 100% and using the OnClientResizeEnd event of the RadWindow to call the grid's repaint() client-side method to see if this will let it recalculate its dimensions.

    Regards,

    Marin Bratanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  6. Mike
    Mike avatar
    74 posts
    Member since:
    Mar 2013

    Posted 12 May Link to this post

    Thanks for the links, I managed to get it work now.
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 13 May Link to this post

    Hi Mike,

    I am glad to hear you have managed to resolve the situation. I will appreciate it if you share your solution with the community so everyone can see a real-life example of how you did it.

    Regards,

    Marin Bratanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  8. Mike
    Mike avatar
    74 posts
    Member since:
    Mar 2013

    Posted 13 May in reply to Marin Bratanov Link to this post

    Sure, here's what I came up with for a solution.

    I had an issue with this solution as the height was being calculated off of the div that held my ContentPlaceHolder and thus was quite a bit too large (scrolled off the bottom of the RadWindow).

    But what I ended up doing is setting the ScrollHeight to 100% in the ClientSettings and then in the code behind I did this in my LoadData method

    private const int MaxItemsBeforeScroll = 20;
    private const int ScrollHeight = 600;
     
    private void LoadInfo()
    {
      var types = LoadSecurityGroups(_groupId);
      radSecurityGroups.DataSource = types;
     
      if (types.Count > MaxItemsBeforeScroll)
      {
        radSecurityGroups.ClientSettings.Scrolling.ScrollHeight = new Unit(ScrollHeight);
      }
    }

    and thus my opening JS function had to change to this:

    function ShowSecurityForm(id, rowIndex) {
        var size = 80;
        var browserWidth = $telerik.$(window).width();
        //var browserHeight = $telerik.$(window).height();
        var width = Math.ceil(browserWidth * size / 100);
        var height = 800;
        //var height = Math.ceil(browserHeight * size / 100);
        var grid = $find("<%= rgGroups.ClientID %>");
        var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
        grid.get_masterTableView().selectItem(rowControl, true);
        var oWnd = window.radopen("DocumentSecurity/" + id, "radSecurity");
        oWnd.setSize(width, height);
        oWnd.center();
        return false;
    }

    Based on the above, this page falls under "admin functionality" of the system, and generally only administered by my department (directed by the business, but we do the work) and we all have the same sized monitors.

    I wish I could have fully implemented the dynamic sizing though.

     

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