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

RadGrid not extending to height=100% after being ajaxified

7 Answers 418 Views

Ajax

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

Felipe asked on 28 Dec 2010, 10:56 PM

Screenshot_1.png

Hello,

I have been working on incorporating a radgrid with hierarchical data, among other controls, into an asp.net page.

I am declaring the structure of the grid programmatically in the code-behind and it has been working pretty well so far.

I am also using a master page, and have an ajaxscriptmanager on the masterpage, with a proxy on the content page.

What I would like to accomplish is have a textbox / input button which will rebind the grid via AJAX depending on what is typed into the textbox.

so far I have the following code. it looks like the binding is working and is ajaxified correctly, but for some reason since I started using AJAX, the grid will not expand to be 100% height in its radpane. I have tried to cut out as much code as possible to make it as bare-bones as a page as i can to find the issue, but I can't seem to find the culprit. any help is appreciated!

The screenshot of the grid is attached. the markup that i believe to be relevant is also pasted below:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="DataView.Master.cs" Inherits="plsProductionData.Site1" %>

<%@ Register Assembly="Infragistics35.Web.v10.3, Version=10.3.20103.1013, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"

Namespace="Infragistics.Web.UI.NavigationControls" TagPrefix="ig" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" tagprefix="ajaxToolkit"%>

<!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 runat="server">

<title></title>

<style type="text/css">

html

{

overflow:hidden;

}

html,

body,

form

{

margin:0;

height:100%;

background-color:#f8f8f8;

}

</style>

<style type="text/css">

#gridAreaContent

{

position: absolute;

width: 100%;

}

</style>

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

</asp:ContentPlaceHolder>

</head>

<body>

<telerik:RadSkinManager ID="_radSkinMan" Runat="server" Skin="WebBlue">

</telerik:RadSkinManager>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="_radScriptMan" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="_radAjaxMan" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:RadAjaxLoadingPanel

ID="RadAjaxLoadingPanel1"

runat="server"

BackColor="White"

Transparency="50"

ScrollBars="None"

Height="100%" />

<telerik:RadSplitter ID="mainSplitter" runat="server" Height="100%" Width="100%" Orientation="Horizontal" >

<telerik:RadPane ID="RadPane1" runat="server" CssClass="ApplyOverflow" Width="100%" Height="100px" Scrolling="None">

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

<telerik:RadMenu ID="_mainMenu" runat="server" Width="100%" style="position:absolute; border-width: 0px;">

</telerik:RadMenu>

</div>

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

<div style="width:300px; margin-top:20px; float:right;">

<asp:ContentPlaceHolder ID="loginArea" runat="server" />

</div>

<asp:ContentPlaceHolder ID="SearchArea" runat="server" />

</div>

</telerik:RadPane >

<telerik:RadPane ID="RadPane2" runat="server" Width="100%" Height="100%" Scrolling="None" >

<telerik:RadSplitter ID="RadSplitter2" runat="server" Height="100%" Width="100%" Orientation="Vertical" >

<telerik:RadPane ID="RadPane3" runat="server" Height="100%" Scrolling="None">

<asp:ContentPlaceHolder ID="gridAreaContent" runat="server" />

</telerik:RadPane>

<telerik:RadSplitBar ID="Radsplitbar1" runat="server" CollapseMode="Backward" EnableResize="false"/>

<telerik:RadPane ID="RadPane4" runat="server" Height="100%" Width="320px" Scrolling="None">

<asp:ContentPlaceHolder ID="navPanel" runat="server" />

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

</html>

Content Page:

<%@ Page Title="" Language="C#" MasterPageFile="~/DataView.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

<style type="text/css">

#<%= _GridPanelClientID %>

{

margin:0;

height:500px;

}

#_Grid_GridData

{

overflow-x:hidden !important;

}

/*.bigModuleBottom td{padding:0}

div.RadToolBar_Vista { float: none !important; }

div.RadToolBar_Vista .rtbOuter { border: 0; } */

div.RadToolBar .rtbUL {

width: 100%;

}

div.SeparatedButtons .rtbItem {

float: left;

}

div.SeparatedButtons .rightAlignedWrapper {

text-align:center;

float: right !important;

}

</style>

<telerik:RadCodeBlock id="RadCodeBlock1" runat="server">

<script type="text/javascript">

</script>

</telerik:RadCodeBlock>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="SearchArea" runat="server">

<telerik:RadAjaxPanel ID="RadAjaxPanel12" runat="server">

<div style="margin-left:20px; margin-top:33px; width:100%;">

<img src="Images/Search/pls.jpg" alt="PLS" />

<img src="Images/Search/researchandanalysis.jpg" alt="Research & Analysis" />

<h1 style="font-size:18 pt; font-weight:bold; font-family:Tahoma; position:absolute; top:10px; left:150px;">PLS Production Data</h1>

<div style="position:absolute; top:65px; left:150px;">

<asp:TextBox ID="_searchText" runat="server" Width="322px" ></asp:TextBox>

<telerik:RadButton ID="_searchButton" runat="server" Text="Search" OnClick="_searchButton_Click" />

<%--<telerik:RadButton ID="_searchButton" runat="server" Text="Search" OnClientClicked="RefreshGrid" OnClick="_searchButton_Click" />--%>

</div>

</telerik:RadAjaxPanel>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="gridAreaContent" runat="server">

<telerik:RadAjaxManagerProxy ID="_radAjaxProxy" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="_GridContextMenu">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="_Grid" LoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="_GridContextMenu" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="_searchButton">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="_Grid" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadAjaxPanel ID="RadAjaxPanel5" runat="server">

<telerik:RadGrid ID="_Grid"

runat="server"

Width="100%"

Height="100%"

style="border:0;"

AutoGenerateColumns="False"

GridLines="None" >

<MasterTableView CommandItemDisplay="Top">

<CommandItemTemplate>

</CommandItemTemplate>

</MasterTableView>

<ClientSettings>

<ClientEvents OnRowSelected="RecordSelected"

OnRowDeselected="RecordSelected"

OnRowContextMenu="RowContextMenu"></ClientEvents>

</ClientSettings>

</telerik:RadGrid>

</telerik:RadAjaxPanel>

</asp:Content>

I used to have the OnClientClicked function for the _searchButton control scripted to correctly bind the grid, but i thought the error was coming from there and apparently it wasnt, since now with it set how it is, I am still experiencing the same problem.

Please let me know if there is any other information that I can provide that will help.

Thanks.

7 Answers, 1 is accepted

answered on 29 Dec 2010, 05:16 PM

Hello Daniel,

Thank you for your reply. I have mimicked the article referenced, but am still having a bit of a problem...

in my codebehind i have:

protected void Page_Load(object sender, EventArgs e)

{

RadAjaxManager _radAjaxMan = RadAjaxManager.GetCurrent(Page);

_radAjaxMan.AjaxSettingCreated += new RadAjaxControl.AjaxSettingCreatedDelegate(contentpagecs_aspx_AjaxSettingCreated);

}

void contentpagecs_aspx_AjaxSettingCreated(object sender, AjaxSettingCreatedEventArgs e)

{

if (e.Updated.ID == "_Grid")

{

this._GridPanelClientID = e.UpdatePanel.ClientID;

}

and the css

<style type="text/css">

#<%= _GridPanelClientID %>

{

margin:0;

height:100%;

}

</style>

and the radgrid

<telerik:RadAjaxPanel ID="RadAjaxPanel5" runat="server">

<telerik:RadGrid ID="_Grid"

runat="server"

Width="100%"

Height="100%"

style="border:0;"

AutoGenerateColumns="False"

GridLines="None" >

//stuff

</telerik:RadGrid>

</telerik:RadAjaxPanel>

and it is still doing the same thing. On the other hand, I can change the height:100% to height:800px and it goes to the correct height.... but does not adjust to the window changing heights etc.

answered on 04 Jan 2011, 11:29 AM

Hello Leland,

The problem is that your RadAjaxPanel does not have 100% height. You can sidestep this behavior by setting the aforementioned height manually however I suggest that you remove the ajax panel and use your RadAjaxManager. Generally we do not recommend that you use RadAjaxManager and RadAjaxPanel at the same time.

Regards,
Daniel
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.