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

[Solved] Resize Radgrid Inside the Radpan of Master Page..

5 Answers 141 Views

Splitter

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

Abhishek asked on 22 Feb 2012, 02:50 PM

Hi ALL,
I have issue with resizing Radgrid which inside the Radpan (rpMiddlePane) -> contetnplaceholder(cphDailogPlaceHolder).
I need to fit the grid in current page screen:

When i resize the current window.
When i collasps the Radsplitter to the Top and to the Right.

I went through the demo http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandsplitterresizing/defaultcs.aspx?product=splitter but didn't able solve the problem. I have posted sample code of my master page.

<div style="height: 100%;">

<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"

Orientation="Horizontal" >

<telerik:RadPane ID="TopPane" runat="server" Height="150" MinHeight="115" MaxHeight="150"

Scrolling="none">

<telerik:RadTabStrip ID="rtsActionMenuToolBar" runat="server" MultiPageID="RadMultiPage1"

SelectedIndex="0" Style="padding-left: 5px;" ShowBaseLine="true">

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" BackColor="Transparent">

</telerik:RadMultiPage>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" />

<telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500">

<telerik:RadSplitter ID="rsMainSplitter" runat="server" BorderSize="0" LiveResize="true"

ResizeWithBrowserWindow="true">

<telerik:RadPane ID="rpLeftPane" runat="server" Scrolling="None" Width="250">

<telerik:RadTreeView ID="rpbLeftPaneSections" DataValueField="URL" DataTextField="DisplayName"

runat="server" Width="250">

</telerik:RadTreeView>

</telerik:RadPane>

<telerik:RadSplitBar ID="rsbMidSplitterDialog" runat="server" CollapseMode="Forward">

</telerik:RadSplitBar>

<telerik:RadPane ID="rpMiddlePane" runat="server" >

<asp:ContentPlaceHolder ID="cphDialogPlaceHolder" runat="server">

</asp:ContentPlaceHolder>

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

</div>

I hope i can get the solution from you guys....

Thanks,
Abhishek K

5 Answers, 1 is accepted

answered on 11 Feb 2013, 08:46 AM

Hi Abhisek

The required things, which make the scenario work as expected include:

1) overflow:auto style for the <html> element - this will remove the browser scrollbar

2) zero margin and 100% height for the <html>, <body> and <form> elements - this will expand the three elements to occupy exactly 100% of the browser window height, e.g.

html,

body,

form

{

height: 100%;

margin: 0;

padding: 0;

}

3) 100% to the attributes width and height for RadGrid

4) border:0 style for RadGrid - since RadGrid is 100% high and border widths are not included in the height, they should be removed, otherwise the browser scrollbar will appear

5) outline:none style for RadGrid - disables dotted borders on RadGrid focus in Firefox, which will cause the browser scrollbar to appear.

5) fixed table layout for the grid's master table to make it expand automatically to 100%

6) since the browser scrolling is disabled, you need to use RadGrid scrolling. In addition, static headers are used for better usability

Finally, the most important thing here is if the RadGrid has Height="100%" and Width="100%" it will calculate its dimensions in regards with its container width and height. Therefore it is possible this container to have height dimension in percents, but in this case you should care about its wrapper (parent element) too. So you have take care of all parent elements and this can achieve only with CSS without any
scripts.

Also, the RadGrid behavior is exactly as any other regular HTML block element and I suggest you to achieve your goal with <div style="width: 100%; height:100; background: red;" />. Then you might replace it with the RadGrid.

Hope this helps

Thanks
Princy.

answered on 28 Aug 2013, 02:39 PM

Splitter.zip

Hi Brian,

By design RadSplitter does not resize its nested elements, until they are set to use size in percentages. Could you verify that this is not the case in your scenario?

For your convenience I am attaching a very simplified page, demonstrating the default RadSplitter behavior. Are you able to reproduce the undesired behavior with it? Could you modify the project up to a point where the problem occurs and send it for a further investigation?

Regards,
Veselina Raykova
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.