Scrolling Within RadWindow

[Mike]

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.

 

 

[Marin Bratanov]

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:

• ensure the grid has Width and Height set in pixels. You may find useful this articles on controlling its height and scrolling:
  • http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/functionality/scrolling/overview
  • http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/functionality/scrolling/height-vs.-scrollheight.
• another approach is to prepare the content accordingly to enable the AutoSize feature to work. This article explains how to do that: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/autosizing-issues.

Regards,

Marin Bratanov
Telerik

[Mike]

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.

[Marin Bratanov]

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

[Mike]

Thanks for the links, I managed to get it work now.

[Marin Bratanov]

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

[Mike]

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.