How to handle the pop-up window scrollbar

2 posts, 0 answers
  1. vincent chen
    vincent chen avatar
    4 posts
    Member since:
    Apr 2010

    Posted 14 Jul 2010 Link to this post

    Hi,
    i use the radgrid and allows grid can have the scroll bar in the pop-up page, but pop-up window also have scroll bar. this is results in the two scroll bars.That is not what i want. 
    I don't want to have the window scroll bar,only grid scroll bar.
    Could you help me? Thank you!
    <!-- Parent page  -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title>Pop-up window scrollbar</title>
        <script language="javascript" type="text/javascript">
            function showPopUpWin()
            {
                window.radopen("PopWin.aspx","PopUp");
                return false;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
            <input type="button" value="..." onclick="return showPopUpWin();" />
             
        </div>
            <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
            <Windows>
                <telerik:RadWindow ID="PopUp" runat="server" Modal="false" Width="640px" Height="450px">
                </telerik:RadWindow>
            </Windows>
            </telerik:RadWindowManager>
        </form>
    </body>
    </html>
     
    <!-- Child page,page name:PopWin.aspx -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title>Pop Window</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
            <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" GridLines="None" Width="600px" Height="400px">
                <MasterTableView AutoGenerateColumns="False" DataKeyNames="CustomerID" DataSourceID="SqlDataSource1">
                    <RowIndicatorColumn>
                        <HeaderStyle Width="20px" />
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn>
                        <HeaderStyle Width="20px" />
                    </ExpandCollapseColumn>
                    <Columns>
                        <telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True"
                            SortExpression="CustomerID" UniqueName="CustomerID">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName"
                            UniqueName="CompanyName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName"
                            UniqueName="ContactName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle"
                            UniqueName="ContactTitle">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Address" HeaderText="Address" SortExpression="Address"
                            UniqueName="Address">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="City" HeaderText="City" SortExpression="City"
                            UniqueName="City">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Region" HeaderText="Region" SortExpression="Region"
                            UniqueName="Region">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode"
                            UniqueName="PostalCode">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Country" HeaderText="Country" SortExpression="Country"
                            UniqueName="Country">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Phone" HeaderText="Phone" SortExpression="Phone"
                            UniqueName="Phone">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Fax" HeaderText="Fax" SortExpression="Fax" UniqueName="Fax">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="bool" DataType="System.Byte" HeaderText="bool"
                            SortExpression="bool" UniqueName="bool">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings>
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                </ClientSettings>
            </telerik:RadGrid>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT TOP 10 *  FROM Customers"></asp:SqlDataSource>
        </div>
        </form>
    </body>
    </html>


  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 16 Jul 2010 Link to this post

    Hello vincent chen,

    To prevent a RadWindow from showing a scrollbar you should resize it to be as big as its content and this is expected and how things work not only with RadControls but also with all standard HTML elements.

    To achieve this you can try the following options:

    1) If you know the size of the content you can directly specify the Width and Height properties in the markup or use the client setSize method.

    2) If you do not know the size of the content you can use the AutoSize property which is demonstrated below:

    http://demos.telerik.com/aspnet-ajax/window/examples/autosize/defaultcs.aspx

    3) You can calculate the size of the content with some custom javascript and set the desired size with the setSize method.

    I hope that my reply is helpful, let me know how it goes.

    Best wishes,
    Svetlina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top