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

RadGrid not extending to height=100% after being ajaxified

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadGrid not extending to height=100% after being ajaxified

7 Answers, 1 is accepted