Intersoft Community - WebGrid Enterprise - Strange problems in IE11 when WebGrid in a WebDialogBox

Strange problems in IE11 when WebGrid in a WebDialogBox

yudi — Wed, 12 Aug 2015 03:05:05 GMT

Yes, we need to specify the height of container if the grid height/width is set using percentage.

Glad to hear the good news.

Should you need further assistance or run into any problems regarding our controls, feel free to post it into our community site. We would be happy to assist you again.

Strange problems in IE11 when WebGrid in a WebDialogBox

tj@domesticsoft.com — Tue, 11 Aug 2015 16:48:18 GMT

Ohhhhh found the problem. The Grid is within a table and divs in the form. IE11 is very sensitive that all those specify style="height:100%" (table, tr, td and div) in HTML5 files. After I took care of this it works in IE11.
How stupid can IE11 be.

Strange problems in IE11 when WebGrid in a WebDialogBox

tj@domesticsoft.com — Tue, 11 Aug 2015 16:36:43 GMT

Yes as you can se in my code above AutoHeight="true". If I change it to "false" and set Height="250px" instead of "100%" then it works. ... but that is not really what I want. I want it to fill the height of the parent dialog. Therefore I put height to 100% and AutoHeight to true.
That works fine in Chrome and FireFox, but not IE11.

Strange problems in IE11 when WebGrid in a WebDialogBox

yudi — Tue, 11 Aug 2015 02:27:20 GMT

I found no issues when loading WebGrid with client-binding inside WebDialogBox. I set the content url of WebDialogBox to WebGrid's client-binding samples and found no issues with rendering on IE 11. All rows are loaded (not collapsed hidden).

Could you please provide me with more information about the problem so that I can assist you further?

Does the grid renders correctly (all rows are not collapsed hidden) if not reside inside WebDialogBox?
What kind of client-binding that used by your grid? (is it client-binding to: ADO data service; or client data source; or server data source; or WCF service; or Web service?)
What are the settings of your grid's layout? (for example: Height; or Width; does AutoHeight or AutoWidth enabled?, etc.)

Look forward to hearing back from you.

Strange problems in IE11 when WebGrid in a WebDialogBox

tj@domesticsoft.com — Mon, 10 Aug 2015 16:42:38 GMT

After a lot of struggle I found out that the content page may not have the name detail.aspx. After I changed the name to something else, it worked.
But there is still a problem. I use Client binding (BindingOperationMode="ClientBinding"). It works fine in other browsers than IE11. in IE 11, the rows are retrieved but the grid is shown with all rows collpased hidden (se screenshot, where 169 rows have been populated for both IE11 and Chrome)

I'm really starting hate IE11.

TJ

Strange problems in IE11 when WebGrid in a WebDialogBox

yudi — Mon, 10 Aug 2015 03:02:30 GMT

A simple sample is created based on your description and snippet code. However, I was unable to reproduce the reported problem, "Unable to get property 'Tables' of undefined or null reference" , using the sample.

I enclose the sample for your reference. Please have the sample evaluated on your end and feel free to let me know if there is anything that I might miss in the sample.

Strange problems in IE11 when WebGrid in a WebDialogBox

tj@domesticsoft.com — Fri, 07 Aug 2015 14:39:32 GMT

Hi, In our web applicatoin we have been showing WebGrid ina WebDesktop.WebDialogBox. In the last version of WebGrid (version v9_0_7200) this work fine for both Chrome and FireFox, BUT IE11 shows this error:
Line: 1
Error: Unable to get property 'Tables' of undefined or null reference

Here is the code for the web-dialog:

  :
  :
<script>
       function ShowPopUpDialog(url, w, h) {
            // Flag set to avoid hiding the CommentButton (se usage in SetPerformanceTiming) 
            m_wdbPopupVisible = true;

            var uniwin = {
                width: window.innerWidth || document.documentElement.clientWidth
				    || document.body.offsetWidth,
                height: window.innerHeight || document.documentElement.clientHeight
				    || document.body.offsetHeight
            };

            if (uniwin.height < 1024)
                h = h * uniwin.height / 1024;
            if (uniwin.width < 1280 && w > uniwin.width - 20)
                w = uniwin.width - 20;

            var wdb = ISGetObject("c_wdbPopup");
            wdb.SetContentURL(url);
            wdb.ShowDialog();
            wdb.Window.ResizeTo(w, h);

            var x = (uniwin.width - 10 - w) / 2;
            if (x < 10)
                x = 10;
            var y = (uniwin.height - 100 - w) / 2
            if (y < 10)
                y = 10;
            wdb.Window.MoveTo(x, y);
        }

    </script>
 
  :
  :
<ISWebDesktop:WebDialogBox ID="c_wdbPopup" runat="server" Width="835px" Height="871px" Text="Control2Net Profiler" ContentScrollable="true" DialogBoxImage="None" AnimationStyle="VistaStyleZoom" ShadowColor="Black" RenderingMode="HTML5">
	        <WindowSettings AllowResize="Yes" ContentMode="UseIFrame">
</ISWebDesktop:WebDialogBox>

And here is the web page displayed ("url" in the script above):

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Details.aspx.cs" Inherits="WPages_Profiler_Details" %>

<%@ Register Assembly="ISNet.WebUI.WebGrid" Namespace="ISNet.WebUI.WebGrid" TagPrefix="ISWebGrid" %>
<%@ Register Assembly="dotnetCHARTING" Namespace="dotnetCHARTING" TagPrefix="dotnetCHARTING" %>

<!DOCTYPE HTML>
<html>
<head id="Head1" runat="server">
	<title>Details</title>
    <style type="text/css">
		.normal
		{font-family: arial, verdana, sans serif; font-size: 9pt; font-weight: normal; text-decoration: none}
		.footer
		{font-family: arial, verdana, sans serif; font-size: 8pt; font-weight: normal; color: gray; text-decoration: none}
		.table {
			width: 634px;
			border: 1px solid #B4B4B4;
			margin: 0px;
			padding: 0px;
		}
	</style>
</head>
<body id="body" runat="server">
    <script type="text/javascript" src="../../JSFiles/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../JSFiles/C2NetDesktop.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            C2NetPerformance(parent);
        })
    </script>

    <form id="form1" runat="server">
        <div>
		    <table style="width:100%; height:100%">
		        <tr>
		            <td>
						<div id="c_reportTitle" class="normal" align="center" runat="server">
							<asp:Label ID="c_reportTitleLabel" runat="server" Height="19px" Text="- Title -" Width="100%" >
							</asp:Label>
						</div>
		                <dotnetCHARTING:Chart ID="Chart1" runat="server" Height="400px" TempDirectory="~/Temp" Width="800px" OnLoad="Chart1_Load">
                        </dotnetCHARTING:Chart>
		            </td>
		        </tr>
		        <tr>
		            <td>
					    <iswebgrid:webgrid id="WebGrid1" runat="server" 
				            usedefaultstyle="True" 
				            DefaultStyleMode="Elegant"
				            width="100%" height="100%"
                            BindingOperationMode="ClientBinding"
				            EnableManagedTheming="False"
				            EnableTheming="False"
				            OnInitializeDatasource="WebGrid1_InitializeDataSource" 
				            OnPrepareDatabinding="WebGrid1_PrepareDataBinding" 
                            Onload="WebGrid1_Load"
				            OnInitializeRow="WebGrid1_InitializeRow"
				            OnInitializeTable="WebGrid1_InitializeTable" 
				            OnInitializeLayout="WebGrid1_InitializeLayout" 
				            OnExport="WebGrid1_Export">
						    <LayoutSettings HierarchicalMode="Preload" 
                                AutoHeight="true" 
                                Hierarchical="False" ShowRefreshButton="False" 
                                AllowExport="Yes" AllowSorting="Yes">
							    <ClientSideEvents OnButtonClick="Wg1_OnButtonClick" />
						    </LayoutSettings>
					    </iswebgrid:webgrid>
		            </td>
		        </tr>
		    </table>
        </div>
    </form>
</body>
</html>

The parent window containing the WebDialog is HTML5 rendered too:
<!DOCTYPE HTML>
<html>

I'm becoming an IE11/Microsoft hater :-)
Regards
TJ