I have a page where i want to set the Radpageview height to grow automatically depending on the page i'm loading.I have tried setting the height to 100% but that did not work.I dont want to set the height to pixel cause there are items inside the page which makes the page height grows.Is there a way to set this up dynamically.I have attached the code.If you check the page i have currently set the height as 600px but i dont want to do that.Instead the Radpageview height will automatically grow depending on the page i'm loading.Please have a look.Thanks.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="InstrumentSetupContainer.aspx.cs" Inherits="BusinessSettingsSetup_InstrumentSetupContainer" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="../Styles/Form.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" ></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" >
<ContentTemplate>
<fieldset>
<asp:UpdateProgress ID="progress1" runat="server">
<ProgressTemplate>
<img alt="" src="../Images/loader.gif" />
Please Wait...
</ProgressTemplate>
</asp:UpdateProgress>
<div>
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Black"
MultiPageID="RadMultiPage1" SelectedIndex="0" >
<Tabs>
<telerik:RadTab Text="Instrument"></telerik:RadTab>
<telerik:RadTab Text="Instrument Catagories"></telerik:RadTab>
<telerik:RadTab Text="Instrument Exchange Listing"></telerik:RadTab>
<telerik:RadTab Text="Instrument Margin"></telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">
<telerik:RadPageView ID="RadPageView1" runat="server" Height="600px" ContentUrl="InstrumentSetup.aspx">
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView2" runat="server" Height="600px" ContentUrl="InstrumentCategoryDatewiseSetup.aspx">
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView3" runat="server" Height="600px" ContentUrl="InstrumentExchangeListingSetup.aspx">
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView4" runat="server" Height="600px" ContentUrl="InstrumentMarginDatewiseSetup.aspx">
</telerik:RadPageView>
</telerik:RadMultiPage>
</div>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
20 Answers, 1 is accepted
Unfortunately this is not possible as the ContentUrl is rendered to iframe and you can not change the size of this iframe dynamically.
Kind regards,
Veronica Milcheva
the Telerik team
Andy
You can try this as a workaround to set the height of the pageview to 100% :
<
head
id
=
"Head1"
runat
=
"server"
>
<
title
></
title
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
asp:scriptmanager
id
=
"ScriptManager1"
runat
=
"server"
>
</
asp:scriptmanager
>
<
telerik:RadTabStrip
ID
=
"RadTabStrip1"
runat
=
"server"
MultiPageID
=
"MultiPage1"
>
<
Tabs
>
<
telerik:RadTab
Text
=
"Telerik"
Selected
=
"true"
PageViewID
=
"RadPageView1"
>
</
telerik:RadTab
>
<
telerik:RadTab
Text
=
"Microsoft"
PageViewID
=
"RadPageView2"
>
</
telerik:RadTab
>
</
Tabs
>
</
telerik:RadTabStrip
>
<
telerik:RadMultiPage
ID
=
"MultiPage1"
runat
=
"server"
>
<
telerik:RadPageView
ID
=
"RadPageView1"
runat
=
"server"
Selected
=
"true"
ContentUrl
=
"http://www.telerik.com"
Height
=
"100%"
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"RadPageView2"
runat
=
"server"
ContentUrl
=
"http://www.Microsoft.com"
Height
=
"100%"
>
</
telerik:RadPageView
>
</
telerik:RadMultiPage
>
<
script
type
=
"text/javascript"
>
function pageLoad() {
var $ = $telerik.$;
var height = $(window).height();
var multiPage = $find("<%=MultiPage1.ClientID %>");
var totalHeight = height - 42;
multiPage.get_element().style.height = totalHeight + "px";
}
</
script
>
</
form
>
</
body
>
Hope this helps.
Regards,
Veronica Milcheva
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
I have to say that, even if it had worked, that seems to me like a hack and not an actual solution. The RadPageView should automatically adjust its size to whatever dimmensions the contents are, unless a width/height is specified. That is the way it works when you load a User Control into the RadPageView... It works just fine. The problem only seems to occur when loading a page via the ContentUrl property.
I would like to know if Telerik is looking at correcting this undesirable behavior in the near future, and when we may expect the fix.
Thanks.
Not the desired outcome, but we were running late and this was the simple fix.
Andy
Currently it is a limitation of the implementation of the RadMultiPage control. However, I would suggest that you open a support ticket and attach a simple runnable project which we can explore locally and help you out with a suitable solution.
All the best,
Kate
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
Telerik support,
Replicating this behavior is pretty simple. Not sure why opening individual support cases would be needed since this behavior appears to be the same in any environment, and there are a number of us who need this issue corrected.
Here is a sample code where Views 1 and 2 work just fine (page height automatically adjusts to the full height of the user control without scrollbars,) but views 3, 4, and 5 do not. Views 3, 4, and 5 open in full width, but the height defaults to about 100px or so (just a guess.) The contents are chopped vertically, and are only visible by scrolling up/down. Setting a height of "100%" on either the RadTab or RadPageView has no effect. The only way we have been able to override that is by setting the RadPageView height in pixels (i.e. "800px".) Needless to say, this is undesireable since different pages will require varying content heights.
The javascript function suggested by Veronica (included below) only works partially. Depending on the page being loaded, the scrollbars are still present in most cases, and in some cases even producing double scrollbars.
<telerik:RadTabStrip ID="RadTabStrip_ClientProfile" runat="server" SelectedIndex="0" MultiPageID="RadMultipage_ClientProfile">
<Tabs>
<telerik:RadTab runat="server" Text="View 1" />
<telerik:RadTab runat="server" Text="View 2" />
<telerik:RadTab runat="server" Text="View 3" />
<telerik:RadTab runat="server" Text="View 4" />
<telerik:RadTab runat="server" Text="View 5" />
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultipage_ClientProfile" runat="server" SelectedIndex="0">
<telerik:RadPageView runat="server" ID="PV1">
<uc1:ucView1 ID="UserControlPage1" runat="server"></uc1:ucView1>
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="PV2">
<uc1:ucView2 ID="UserControlPage2" runat="server"></uc1:ucView2>
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="PV3" ContentUrl="TestPage3.aspx" />
<telerik:RadPageView runat="server" ID="PV4" ContentUrl="TestPage4.aspx" />
<telerik:RadPageView runat="server" ID="PV5" ContentUrl="TestPage5.aspx" />
</telerik:RadMultiPage>
<script type="text/javascript">
function pageLoad() {
var $ = $telerik.$;
var height = $(window).height();
var multiPage = $find("<%= RadMultipage_ClientProfile.ClientID %>");
var totalHeight = height - 42;
multiPage.get_element().style.height = totalHeight + "px";
}
</script>
I just discovered that loading large user controls in the RadPageView breaks when using the javascript provided by Veronica. The following does not occur if we don't use that javascript...
Our RadMultiPage control loads inside a master page which has a navigation menu at the top and bottom of the main container. When a large user control is loaded into the RadPageView, the contents of the user control overflow past the bottom menu with a see-through effect, instead of growing the container size and pushing down the navigation menu as it would be expected.
Any ideas?
Thanks for the markup, it gave us a clear idea for you current scenario. Here I have attached a simple page that uses a RadTabStrip control with RadMultiPage and ContentUrl as well. Using the code below you can set the height to 100% when using the ContentUrl property in both cases - when you have a user control and in case you use a simple PageView:
<script type=
"text/javascript"
>
var
$ = $telerik.$;
$(document).ready(
function
(e) {
var
height = $(document).height();
$(
".content"
, window.top.document).height(height);
});
</script>
Please note that when ContentUrl is set to a website in another domain (like google.com) the mentioned approach may not be used due to cross site scripting - http://en.wikipedia.org/wiki/Cross-site_scripting.
Regards,
Kate
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Unfortunately, that javascript code produces an error right away when the page loads and attempts to instantiate the $telerik variable outside a function:
'$telerik' is undefined
This would happen If there are no telerik controls on the page. Using $telerik.$ we obtain reference to jQuery. Do you have jQuery loaded on that page? If there is no jQuery loaded and there are no telerik controls on the page please use the following JavaScript instead:
<form id=
"form1"
runat=
"server"
>
<asp:ScriptManager runat=
"server"
ID=
"ScriptManager1"
>
</asp:ScriptManager>
<script type=
"text/javascript"
>
window.onload =
function
() {
var
height = getDocHeight();
var
elements = window.top.document.getElementsByTagName(
"div"
);
for
(
var
i = 0; i < elements.length; i++) {
if
(elements[i].className ==
"content"
) {
elements[i].style.height = height;
}
}
}
function
getDocHeight() {
var
D = document;
return
Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
</script>
If you have telerik controls on the page but $telerik is still undefined please make sure that the script provided is placed after the script manager declaration.
For reference and convenience I'm attaching my modified sample project.
Regards,
Genady Sergeev
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
I managed to get rid of the "undefined" error by following your advice. However, the newly suggested function did not do anything for pages loaded via the ContentUrl attribute. They still load in a small iframe.
The only way I have been able to half-way correct this behavior for both user controls and whole pages, is by using the previously suggested script, with a small addition of my own. I still consider this entire approach to be a hack, and not a real solution:
function pageLoad() {
var multiPage = $find("<%= RadMultipage_ClientProfile.ClientID %>");
var $ = $telerik.$;
var totalHeight = $(window).height() - 42;
if (totalHeight < 850) totalHeight = 850;
multiPage.get_element().style.height = totalHeight + "px";
}
Looking forward to a more robust solution...
This is weird, the function is working fine on my side. Are you sure that you are placing it in the Content page, not in the page which contains the TabStrip? Can you confirm that the attached in the previous replay project fails to load the pages in the full size?
If so, please specify the exact browser that you use, because the test project is working fine on my side as this video shows.
edit: I've just noticed that the sample is failing in firefox. The fix is to change the following line from:
elements[i].style.height = height;
to
elements[i].style.height = height + "px";
I hope that this helps.
Greetings,
Genady Sergeev
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
I have the script in the same page that contains the RadTabStrip, which is exactly how Veronica's example does it. I did not see any instructions directing us to place the script in the content pages. I would like to try that, but the issue becomes, how do I access the RadTabStrip from within the content pages?
Obviously, this line will not work from the content page:
var multiPage = $find("<%= RadMultipage_ClientProfile.ClientID %>");
Do I need to walk up the DOM tree with FindControl? Can you post an example?
Thanks!
Here is a more universal way to find a Telerik's control client object, regardless of the site's infrastructure (master page, user control, etc)
var
$ = $telerik.$;
var
multiPageJQueryObject = $(
"[id$='RadMultipage_ClientProfile']"
);
var
multiPageClientObject = $find(multiPageJQueryObject.attr(
'id'
));
Let me know how it goes.
Regards, Peter
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
hi,
I am using following java script .But height is assigned with the default max height "816" .so i am still having the vertical scroll bar displayed, if the multipage height greater than 816. Can any one help me to sort this ....
<
script type="text/javascript"> 
var $ = $telerik.$;
$(document).ready(
function (e) {
var height = $(document).height();
$(
".content", window.top.document).height(height);
});
</
script>
Please help me on below issue regarding Telerik tabstrip scroll bar .
The below javascript is not working as expected when grid grows in the tadstrip in IE8.
<
script type="text/javascript">
var $ = $telerik.$;
$(document).ready(
function (e) {
var height = $(document).height();
alert(
"height=" + height);
$(
".content", window.top.document).height(height/2);
});
</script>
Please refer to our help article here, demonstrating the approach for setting the height to 100% when using ContentUrl in PageView. Please give it a try and if it does not help, please provide us with your implementation, so we could get a closer look of it.
Regards,
Nencho
Telerik
The RadWindow does not send a message for maximize after the radwindow is maximized.
The RadWindow does not send resize messages if the browser size changes if the RadWindow is maximized.
I did get things to work, however, it took several days to figure out.
Things that would have helped:
1) Have a flag set on the multipage to resize to parent rather than resize to content.
2) have the RadWindow send a message for maximized AFTER the maximize occurs.
3) Have the RadWindow forward resize message if it is maximized and the browser window changes size.