Resize Radgrid Inside the Radpan of Master Page..

6 posts, 0 answers
  1. Abhishek
    Abhishek avatar
    45 posts
    Member since:
    Jul 2012

    Posted 22 Feb 2012 Link to this post

    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:
    1. When i resize the current window.
    2. When i collasps the Radsplitter to the Top and to the Right.
    I went through the demo 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"
                    <!-- 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:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" BackColor="Transparent">
                    <!--Ribbonbar ends-->
                <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"
                        <telerik:RadPane ID="rpLeftPane" runat="server" Scrolling="None" Width="250">
                            <telerik:RadTreeView ID="rpbLeftPaneSections" DataValueField="URL" DataTextField="DisplayName"
                                runat="server" Width="250">
                        <telerik:RadSplitBar ID="rsbMidSplitterDialog" runat="server" CollapseMode="Forward">
                        <telerik:RadPane ID="rpMiddlePane" runat="server" >
                            <asp:ContentPlaceHolder ID="cphDialogPlaceHolder" runat="server">
                <!--Middle Content ends-->

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

    Abhishek K

  2. Aditya
    Aditya avatar
    20 posts
    Member since:
    May 2011

    Posted 22 Feb 2012 Link to this post

    Hi Abhishek.

    Can u post a snapshot of ur issue..??

  3. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 11 Feb 2013 Link to this post

    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.
        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 

    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

  4. brian
    brian avatar
    36 posts
    Member since:
    Jul 2010

    Posted 23 Aug 2013 Link to this post

    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.
  5. brian
    brian avatar
    36 posts
    Member since:
    Jul 2010

    Posted 26 Aug 2013 Link to this post

  6. Vessy
    Vessy avatar
    1870 posts

    Posted 28 Aug 2013 Link to this post

    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?

    Veselina Raykova
    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.
Back to Top