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

Resizing grid height problem after partial postback in IE8

2 Answers 132 Views
Grid
This is a migrated thread and some comments may be shown as answers.
RichJ
Top achievements
Rank 1
RichJ asked on 21 Jan 2012, 03:29 AM
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 = window.top.getTabPageView(openerTabIndex);
    $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?

Cheers
Rich

2 Answers, 1 is accepted

Sort by
0
Kaushal
Top achievements
Rank 1
answered on 21 Jan 2012, 07:09 AM
Hi VaticNZ,

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

HTML:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
 
<!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>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <style type="text/css">
 
html
{
    overflow:auto;
}
 
html,
body,
 
#<%= RadGrid1PanelClientID %>
{
    margin:0;
    height:100%;
}
 
.p{margin:0;padding:20px;font:12px/1.8 verdana,sans-serif}
 
</style>
    </telerik:RadCodeBlock>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--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" />
        </Scripts>
    </telerik:RadScriptManager>
      <script type="text/javascript">
          function ClientResized(sender, eventArgs) {
              $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest('ChangePageSize');
          }
        </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"
        OnAjaxSettingCreated="RadAjaxManager1_AjaxSettingCreated">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <asp:XmlDataSource ID="XmlDataSource2" runat="server" DataFile="~/App_Data/XML/XmlDataSourceExampleTemp.xml">
    </asp:XmlDataSource>
    <telerik:RadSplitter ID="RadSplitter1" Width="700px" runat="server" Orientation="Horizontal">
        <telerik:RadPane ID="gridPane" runat="server" Height="307px" OnClientResized="ClientResized"
            Scrolling="None">
            <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" />
                </ClientSettings>
            </telerik:RadGrid>
        </telerik:RadPane>
    </telerik:RadSplitter>
    </form>
</body>
</html>

Code-Behind:

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;
                        }
                    }
 
                    RadGrid1.Rebind();
                }
                break;
        }
    }
    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
0
RichJ
Top achievements
Rank 1
answered on 22 Jan 2012, 08:51 PM
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!
Rich
Tags
Grid
Asked by
RichJ
Top achievements
Rank 1
Answers by
Kaushal
Top achievements
Rank 1
RichJ
Top achievements
Rank 1
Share this question
or