Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Grid not occupying entire panel

1 Answer 90 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bailey Everitt
Top achievements
Rank 1
Bailey Everitt asked on 19 Dec 2008, 12:27 AM
Hi Everyone,

I have a Splitter, that has a three sections.  The top panel is a sliding panel (top), a middle panel contains a grid, and the bottom panel will contain various controls.  My problem is that when the grid is populated with data, through a button click on the sliding panel, the grid is only occupying about half of the middle panel.  The thing is, when I dock the sliding panel, then undock it, the grid will resize and then occupy the entire middle section.  Below is my code.  Any help is greatly appreciated!

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Trips.aspx.cs" Inherits="Web.Trips" %> 
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
    <title>Untitled Page</title> 
    <style type="text/css"> 
        .RadPicker_WebBlue 
        { 
            vertical-align: middle; 
        } 
        .RadPicker_WebBlue .rcInputCell 
        { 
            padding: 0 4px 0 0; 
        } 
        .RadInput_Default 
        { 
            font: 12px arial,sans-serif; 
        } 
        .RadInput_Default 
        { 
            vertical-align: middle; 
        } 
        .RadPicker_WebBlue .rcCalPopup 
        { 
            background-position: 0 -200px; 
        } 
        .RadPicker_WebBlue td a 
        { 
            display: block; 
            overflow: hidden; 
            position: relative; /*FF*/ 
            outline: none; /*FF*/ 
            z-index: 2; /*Opera*/ 
            width: 16px; 
            height: 16px; 
            margin: 0 2px; 
            background: url(               'mvwres://Telerik.Web.UI, Version=2008.3.1125.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.WebBlue.Calendar.sprite.gif' ) no-repeat; 
            text-indent: -1111px; 
            text-align: center; 
            text-decoration: none; 
        } 
        .filterControls 
        { 
            font-family: Calibri; 
            font-size: medium; 
            padding: 5px; 
        } 
        .tripDetailsTop 
        { 
            font-family: Calibri; 
            margin-left: auto; 
            margin-right: auto; 
            width: 108%; 
        } 
        .tripDetailsNested 
        { 
            font-family: Calibri; 
            border: 1px solid #333; 
        } 
        html, body, form 
        { 
            height: 100%; 
            padding: 0px; 
            margin: 0px; 
            overflow: hidden; 
        } 
        .filterColumns 
        { 
            width: 1%; 
            white-space: nowrap; 
        } 
    </style> 
 
<script type="text/javascript"> 
   function centerUpdatePanel() 
   { 
    centerElementOnScreen(document.getElementById("uxRadAjaxLoadingPanel")); 
   } 
   function centerElementOnScreen(element) 
   { 
    var scrollTop = document.body.scrollTop; 
    var scrollLeft = document.body.scrollLeft; 
    var viewPortHeight = document.body.clientHeight; 
    var viewPortWidth = document.body.clientWidth; 
    if (document.compatMode == "CSS1Compat") 
    { 
     viewPortHeight = document.documentElement.clientHeight; 
     viewPortWidth = document.documentElement.clientWidth; 
     scrollTop = document.documentElement.scrollTop; 
     scrollLeft = document.documentElement.scrollLeft; 
    } 
    var topOffset = Math.ceil(viewPortHeight/2 - element.offsetHeight/2); 
    var leftOffset = Math.ceil(viewPortWidth/2 - element.offsetWidth/2); 
    var top = scrollTop + topOffset - 40; 
    var left = scrollLeft + leftOffset - 70; 
       element.style.position = "absolute"; 
    element.style.top = top + "px"; 
    element.style.left = left + "px"; 
} 
</script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <telerik:RadScriptManager ID="uxRadScriptManager" runat="server" /> 
    <telerik:RadAjaxLoadingPanel IsSticky="true" ID="uxRadAjaxLoadingPanel" runat="server" Height="75px" 
        Width="75px"> 
        <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading1.gif") %>' 
            style="border: 0px;" /> 
    </telerik:RadAjaxLoadingPanel> 
    <telerik:RadFormDecorator ID="uxRadFormDecorator" runat="server" Skin="Web20" /> 
    <telerik:RadWindowManager ID="uxRadWindowManager" runat="server" Skin="Web20"> 
    </telerik:RadWindowManager> 
    <telerik:RadSplitter ID="uxRadSplitter" runat="server" LiveResize="True" Skin="Inox" 
        Height="100%" Width="100%" SplitBarsSize="10px" BorderSize="0" BorderStyle="None" 
        Orientation="Horizontal" FullScreenMode="True" PanesBorderSize="0" VisibleDuringInit="False"> 
        <telerik:RadPane ID="uxRadPaneFilter" runat="server" Height="0px" Width="243px" MaxWidth="400" 
            MinWidth="200" MaxHeight="0" Scrolling="None" MinHeight="0"> 
            <telerik:RadSlidingZone ID="uxRadSlidingZone" runat="server" ClickToOpen="True"> 
                <telerik:RadSlidingPane ID="uxRadSlidingPanel" runat="server" 
                    IconUrl="UIComponents/Images/filter.gif" Title="Filter" CssClass="filterControls" 
                    Height="350px" Scrolling="None" BackColor="White"> 
                    <div class="filterControls"> 
                        <table cellpadding="0" cellspacing="5" width="100%"> 
                            <tr> 
                                <td class="filterColumns"> 
                                    Trips Dates: 
                                </td> 
                                <td class="filterColumns"> 
                                    <telerik:RadDatePicker ID="uxRadDatePickerFrom" runat="server" Skin="WebBlue"> 
                                        <Calendar runat="server" Skin="WebBlue" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" 
                                            ViewSelectorText="x"> 
                                        </Calendar> 
                                        <DatePopupButton HoverImageUrl="" ImageUrl="" /> 
                                    </telerik:RadDatePicker> 
                                    &#160; To&#160; 
                                    <telerik:RadDatePicker ID="uxRadDatePickerTo" runat="server" Skin="WebBlue"> 
                                        <Calendar runat="server" Skin="WebBlue" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" 
                                            ViewSelectorText="x"> 
                                        </Calendar> 
                                        <DatePopupButton HoverImageUrl="" ImageUrl="" /> 
                                    </telerik:RadDatePicker> 
                                </td> 
                                <td> 
                                    &#160; 
                                </td> 
                            </tr> 
                            <tr> 
                                <td class="filterColumns"> 
                                    Division: 
                                </td> 
                                <td> 
                                    <telerik:RadComboBox ID="uxRadComboBoxDivision" runat="server" Skin="WebBlue" Width="330px"> 
                                        <CollapseAnimation Duration="200" Type="OutQuint" /> 
                                    </telerik:RadComboBox> 
                                </td> 
                                <td> 
                                    <asp:Button ID="uxButtonClearDivision" runat="server" Text="Clear" /> 
                                </td> 
                            </tr> 
                            <tr> 
                                <td class="filterColumns"> 
                                    Route: 
                                </td> 
                                <td> 
                                    <telerik:RadComboBox ID="uxRadComboBoxRoute" runat="server" Skin="WebBlue" Width="330px"> 
                                        <CollapseAnimation Duration="200" Type="OutQuint" /> 
                                    </telerik:RadComboBox> 
                                </td> 
                                <td> 
                                    <asp:Button ID="uxButtonClearRoute" runat="server" Text="Clear" /> 
                                </td> 
                            </tr> 
                            <tr> 
                                <td class="filterColumns"> 
                                    Direction: 
                                </td> 
                                <td> 
                                    <telerik:RadComboBox ID="uxRadComboBoxDirection" runat="server" Skin="WebBlue" Width="330px"> 
                                        <CollapseAnimation Duration="200" Type="OutQuint" /> 
                                    </telerik:RadComboBox> 
                                </td> 
                                <td> 
                                    <asp:Button ID="uxButtonClearDirection" runat="server" Text="Clear" /> 
                                </td> 
                            </tr> 
                            <tr> 
                                <td class="filterColumns"> 
                                    Trip Status: 
                                </td> 
                                <td> 
                                    <telerik:RadComboBox ID="uxRadComboBoxTripStatus" runat="server" Skin="WebBlue" Width="330px"> 
                                        <CollapseAnimation Duration="200" Type="OutQuint" /> 
                                    </telerik:RadComboBox> 
                                </td> 
                                <td> 
                                    <asp:Button ID="uxButtonClearTripStatus" runat="server" Text="Clear" /> 
                                </td> 
                            </tr> 
                            <tr> 
                                <td class="filterColumns"> 
                                    Origin: 
                                </td> 
                                <td> 
                                    <telerik:RadComboBox ID="uxRadComboBoxOrigin" runat="server" Skin="WebBlue" Width="330px"> 
                                        <CollapseAnimation Duration="200" Type="OutQuint" /> 
                                    </telerik:RadComboBox> 
                                </td> 
                                <td> 
                                    <asp:Button ID="uxButtonClearOrigin" runat="server" Text="Clear" /> 
                                </td> 
                            </tr> 
                            <tr> 
                                <td class="filterColumns"> 
                                    Destination: 
                                </td> 
                                <td> 
                                    <telerik:RadComboBox ID="uxRadComboBoxDestination" runat="server" Skin="WebBlue" 
                                        Width="330px"> 
                                        <CollapseAnimation Duration="200" Type="OutQuint" /> 
                                    </telerik:RadComboBox> 
                                </td> 
                                <td> 
                                    <asp:Button ID="uxButtonClearDestination" runat="server" Text="Clear" /> 
                                </td> 
                            </tr> 
                            <tr> 
                                <td class="filterColumns"> 
                                    Train #: 
                                </td> 
                                <td> 
                                    <telerik:RadComboBox ID="uxRadComboBoxTrainNumber" runat="server" Skin="WebBlue" 
                                        Width="330px"> 
                                        <CollapseAnimation Duration="200" Type="OutQuint" /> 
                                    </telerik:RadComboBox> 
                                </td> 
                                <td> 
                                    <asp:Button ID="uxButtonClearTrainNumber" runat="server" Text="Clear" /> 
                                </td> 
                            </tr> 
                            <tr> 
                                <td class="filterColumns"> 
                                    &#160; 
                                </td> 
                                <td> 
                                    <asp:RadioButtonList ID="uxOptRevenueType" runat="server" RepeatDirection="Horizontal"> 
                                        <asp:ListItem Selected="True">Revenue</asp:ListItem> 
                                        <asp:ListItem>Non-Revenue</asp:ListItem> 
                                        <asp:ListItem>Both</asp:ListItem> 
                                    </asp:RadioButtonList> 
                                </td> 
                                <td> 
                                    &#160; 
                                </td> 
                            </tr> 
                            <tr> 
                                <td class="filterColumns"> 
                                    &nbsp;</td> 
                                <td> 
                                    &nbsp;</td> 
                                <td> 
                                    &nbsp;</td> 
                            </tr> 
                            <tr> 
                                <td class="filterColumns"> 
                                    &nbsp;</td> 
                                <td> 
                                    <asp:Button ID="uxButtonOK" runat="server" Text="OK"  
                                        onclick="uxButtonOK_Click" /> 
                                    &nbsp;&nbsp; 
                                    <asp:Button ID="uxButtonNew" runat="server" Text="New" /> 
                                    &nbsp;&nbsp; 
                                    <asp:Button ID="uxButtonClearFilter" runat="server" Text="Clear" /> 
                                </td> 
                                <td> 
                                    &nbsp;</td> 
                            </tr> 
                        </table> 
                    </div> 
                </telerik:RadSlidingPane> 
            </telerik:RadSlidingZone></telerik:RadPane> 
        <telerik:RadPane ID="uxRadPaneList" runat="server" Height="" Scrolling="Y"> 
            <telerik:RadGrid ID="uxRadGridList" runat="server" GridLines="None" 
                Skin="WebBlue" AllowSorting="True"  
                oncolumncreated="uxRadGridList_ColumnCreated"  
                onneeddatasource="uxRadGridList_NeedDataSource" Height="100%" Width="100%"> 
                <HeaderContextMenu EnableTheming="True"> 
                    <CollapseAnimation Duration="200" Type="OutQuint" /> 
                </HeaderContextMenu> 
                <MasterTableView> 
                    <RowIndicatorColumn> 
                        <HeaderStyle Width="20px" /> 
                    </RowIndicatorColumn> 
                    <ExpandCollapseColumn> 
                        <HeaderStyle Width="20px" /> 
                    </ExpandCollapseColumn> 
                </MasterTableView> 
                <ClientSettings> 
                    <Selecting AllowRowSelect="True" /> 
                </ClientSettings> 
                <FilterMenu EnableTheming="True"> 
                    <CollapseAnimation Duration="200" Type="OutQuint" /> 
                </FilterMenu> 
            </telerik:RadGrid></telerik:RadPane> 
        <telerik:RadSplitBar ID="uxRadSplitBarListDetail" runat="server" CollapseExpandPaneText="" /> 
        <telerik:RadPane ID="uxRadPaneDetail" runat="server" Height=""> 
        </telerik:RadPane> 
    </telerik:RadSplitter> 
    <telerik:RadAjaxManager runat="server" ClientEvents-OnRequestStart="centerUpdatePanel();"> 
        <AjaxSettings> 
            <telerik:AjaxSetting AjaxControlID="uxButtonOK"> 
                <UpdatedControls> 
                    <telerik:AjaxUpdatedControl ControlID="uxRadGridList" LoadingPanelID="uxRadAjaxLoadingPanel" /> 
                </UpdatedControls> 
            </telerik:AjaxSetting> 
            <telerik:AjaxSetting AjaxControlID="uxRadGridList"> 
                <UpdatedControls> 
                    <telerik:AjaxUpdatedControl ControlID="uxRadGridList"  
                        LoadingPanelID="uxRadAjaxLoadingPanel" /> 
                </UpdatedControls> 
            </telerik:AjaxSetting> 
        </AjaxSettings> 
    </telerik:RadAjaxManager> 
    </form> 
</body> 
</html> 
 

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 20 Dec 2008, 08:20 AM
Hello Matthew,

Thanks for providing a sample page.

The problem is caused by the fact that RadGrid is ajaxified. In this case it is surrounded by an update panel with no height and as a result, the RadGrid's 100% height cannot be applied properly by the browser.

Please refer to the following code library example for more information and a solution to your problem:

How to Set 100% Height and Random Styles to a RadAjaxManager Update Panel


Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Grid
Asked by
Bailey Everitt
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or