Resizing grid height problem after partial postback in IE8

3 posts, 0 answers
  1. RichJ
    RichJ avatar
    83 posts
    Member since:
    Aug 2006

    Posted 20 Jan 2012 Link to this post

    Hi all!  I hope someone can help me with this...

    I have a radgrid within a tab/pageview displaying a list of records.
    I'm using the pageLoad() function to calculate the window height and resize the grid accordingly:

    function pageLoad() {
                 var $ = $telerik.$;
                 var height = $(window).height();
                 if (height == 0) {
                     alert('0 height');
                 } else {
                     var totalHeight = height - 118;
                     document.getElementById('rGrid_GridData').style.height = totalHeight + "px";

    This works fine when first loaded.  When clicking a record in the grid, another tab is opened for viewing and editing the record.
    When the record is saved, I'm trying to refresh the grid in the "opener" tab by calling a function that essentially causes a postback.
    (openerTabIndex is a variable I pass around to keep track of the correct tab).
    function doRefreshOpener(openerTabIndex) {
        var openerPageView =;
        $telerik.getChildrenByTagName(openerPageView.get_element(), "iframe")[0].contentWindow.refreshPage();

    function refreshPage() {
         __doPostBack('btnHiddenRefresh', '');

    The problem is that the window height is being returned as 0 in IE8 when the pageLoad() function is called again, which is resulting in a javascript bomb.

    Can anyone help me resolve this, or suggest a better way of achieving the same results?

  2. Kaushal
    Kaushal avatar
    47 posts
    Member since:
    Sep 2010

    Posted 21 Jan 2012 Link to this post

    Hi VaticNZ,

    I tested this code and have did some modification at my end. 


    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <head runat="server">
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <style type="text/css">
    #<%= RadGrid1PanelClientID %>
    .p{margin:0;padding:20px;font:12px/1.8 verdana,sans-serif}
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <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" />
          <script type="text/javascript">
              function ClientResized(sender, eventArgs) {
                  $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest('ChangePageSize');
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
        <asp:XmlDataSource ID="XmlDataSource2" runat="server" DataFile="~/App_Data/XML/XmlDataSourceExampleTemp.xml">
        <telerik:RadSplitter ID="RadSplitter1" Width="700px" runat="server" Orientation="Horizontal">
            <telerik:RadPane ID="gridPane" runat="server" Height="307px" OnClientResized="ClientResized"
                <telerik:RadGrid AllowPaging="true" PageSize="40" Width="100%" Height="100%" Style="border: 0;
                    outline: none" ID="RadGrid1" runat="server" DataSourceID="XmlDataSource2">
                    <MasterTableView AllowPaging="true" TableLayout="Fixed" />
                    <PagerStyle Mode="NumericPages" />
                    <ClientSettings EnableRowHoverStyle="true">
                        <Selecting AllowRowSelect="true" />
                        <Scrolling AllowScroll="true" UseStaticHeaders="true" />


    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
    public partial class Default4 : System.Web.UI.Page
        public string RadGrid1PanelClientID;
        protected void Page_Load(object sender, EventArgs e)
        protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
            switch (e.Argument.ToString())
                case "ChangePageSize":
                    //Calculate the number of rows that fit in the RadPane.
                    //In this case 23 is the sum of the height of a single row and its upper border width.
                    //Depending on the paticular scenario this value may vary.
                    int rows = (Int32.Parse(this.gridPane.Height.Value.ToString()) - 60) / 23;
                    if (rows >= 1)
                        RadGrid1.PageSize = rows;
                        // Check whether the CurrentPageIndex is correct.
                        if (Session["itemsCount"] != null)
                            int itemsCount = (int)Session["itemsCount"];
                            int pageCount = (int)Math.Ceiling(((double)itemsCount / rows));
                            if (RadGrid1.MasterTableView.CurrentPageIndex > pageCount - 1)
                                RadGrid1.MasterTableView.CurrentPageIndex = pageCount - 1;
        protected void RadAjaxManager1_AjaxSettingCreated(object sender, AjaxSettingCreatedEventArgs e)
            if (e.Initiator.ID == "RadGrid1")
                RadGrid1PanelClientID = e.UpdatePanel.ClientID;

    Hope It may helps you.

    Thanks & Regards,

    Kaushal Jani
  3. DevCraft R3 2016 release webinar banner
  4. RichJ
    RichJ avatar
    83 posts
    Member since:
    Aug 2006

    Posted 22 Jan 2012 Link to this post

    Hi Kaushal!

    Thanks so much for taking the time to reply to my question.
    I actually ended up going with another simpler solution which was to set a JS variable on the first load, then use this for subsequent scaling after postbacks.  So far seems to be working well!

    Thanks again, much appreciated!
Back to Top