This is a migrated thread and some comments may be shown as answers.

Scrolling Within RadWindow

6 Answers 483 Views
Window
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 06 May 2016, 05:52 PM

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.

 

 

6 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 10 May 2016, 07:22 AM

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.
0
Mike
Top achievements
Rank 1
answered on 10 May 2016, 10:37 PM
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.
0
Accepted
Marin Bratanov
Telerik team
answered on 12 May 2016, 09:47 AM

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.
0
Mike
Top achievements
Rank 1
answered on 12 May 2016, 08:48 PM
Thanks for the links, I managed to get it work now.
0
Marin Bratanov
Telerik team
answered on 13 May 2016, 07:04 AM

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.
0
Mike
Top achievements
Rank 1
answered on 13 May 2016, 10:22 PM

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.

 

Tags
Window
Asked by
Mike
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Mike
Top achievements
Rank 1
Share this question
or