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:
I hope i can get the solution from you guys....
Thanks,
Abhishek K
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.
<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"> <!-- Place the content of the pane here --> <!--Ribbonbar starts--> <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> <!--Ribbonbar ends--> </telerik:RadPane> <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" /> <!--Middle Content starts--> <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> <!--Middle Content ends--> </telerik:RadSplitter> </div>I hope i can get the solution from you guys....
Thanks,
Abhishek K
5 Answers, 1 is accepted
0
Aditya
Top achievements
Rank 1
Rank 1
answered on 22 Feb 2012, 02:59 PM
Hi Abhishek.
Can u post a snapshot of ur issue..??
Regards,
Aditya
0
Princy
Top achievements
Rank 2
Rank 2
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.
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.
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;}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.
0
brian
Top achievements
Rank 1
Rank 1
answered on 23 Aug 2013, 02:47 PM
I want the exact opposite behavior. When a radPane is resized, I dont want the radGrid to be resized. I want it to stay exactly as it was. I have radPane scrolling off.
0
brian
Top achievements
Rank 1
Rank 1
answered on 26 Aug 2013, 08:38 PM
Anyone?
0
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
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.