RadGrid not extending to height=100% after being ajaxified

8 posts, 0 answers
  1. Felipe
    Felipe avatar
    33 posts
    Member since:
    Dec 2010

    Posted 28 Dec 2010 Link to this post

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


  2. Daniel
    Admin
    Daniel avatar
    4945 posts

    Posted 29 Dec 2010 Link to this post

    Hello Leland,

    I recommend that you examine the following link and the corresponding demo:
    How to Set 100% Height and Random Styles to a RadAjaxManager Update Panel

    Let me know if you need more information.

    Kind 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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Felipe
    Felipe avatar
    33 posts
    Member since:
    Dec 2010

    Posted 29 Dec 2010 Link to this post

    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.

  5. Daniel
    Admin
    Daniel avatar
    4945 posts

    Posted 04 Jan 2011 Link to this post

    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.
  6. Kristopher
    Kristopher avatar
    5 posts
    Member since:
    Feb 2011

    Posted 28 Mar 2011 Link to this post

    hi, is there any way to set the height of radgrid to 100% and ajafixy the radgrid? thanks!
  7. Felipe
    Felipe avatar
    33 posts
    Member since:
    Dec 2010

    Posted 29 Mar 2011 Link to this post

    Kristopher,

    This is possible and the solution posted last did work for me...

    if you are having trouble you could try posting your code and i (or someone else more likely) could try helping you out.
  8. Nicolaï
    Nicolaï avatar
    160 posts
    Member since:
    Apr 2008

    Posted 04 Jul 2013 Link to this post

    Not working in IE10..
    Not working in Firefox..
    Not working then..
    Somewhat ok in IE10 with compat...
    Any X browser updates on this?
    http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx
  9. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 08 Jul 2013 Link to this post

    Hello Nicolaï,

    I tried the code library in a different browsers(IE10, Firefox, Chrome) and it works properly in all of them. Could you please provide the exact steps in order to replicate the issue on my side?

    Best wishes,
    Kostadin
    the Telerik team
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017