[CLOSED] this.innerHd.firstChild.InnerHTMl is null or not an object in IE

[rbarr]

Hey Guys,

I have a gridpanel in a partial view and a store on the main view. On the main view I have a treepanel with 5 child nodes. The store which is on the main view contains the data for the nodes. When a user clicks on a node depending on which node they click i filter the store and send it to the gridpanel which loaded into the mainview and is then reloaded everytime the user clicks a different node, this works great for the first and second clicks, but as soon as i click for the third time it comes up with this (this.innerHd.firstChild.InnerHTML is null or not an object) error. (this in all in IE8)

I have tried my code in both Firefox and Chrome and it fires as expected and reloads the grid with the filtered data for that node. Each node contains the same Headers and Data-indexes. I also can't send requests for the store to be loaded only for each node because I need the store to be saved as a oner.

Any help would be amazing
Cheers

[nocland]

Try to activate the compatibility mode in IE8

[Daniil]

Hi,

It's hard to say what can be wrong.

Please provide a sample to reproduce.

[rbarr]

Heres the Controller code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace TestTemplate.Controllers
{
    public class TestController : Controller
    {
        public ActionResult Save(string containerId, string parentNode, string node)
        {
            switch (parentNode)
            {
                case "Test":
                    {
                        Ext.Net.MVC.PartialViewResult p = new Ext.Net.MVC.PartialViewResult(containerId);
                        p.ViewName = "TestPartial";
                        p.ViewData.Model = new TestTemplate.ViewModel.TestViewModel();
                        return p;

                    }
                default: return null;
            }

        }

    }
}

Heres the MainView code

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {

                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();



                Ext.Net.TreeNode root = new Ext.Net.TreeNode("Fact Find");
                root.Expanded = true;
                this.FactFindTreePanel.Root.Add(root);

                var Test = new Ext.Net.TreeNode("Test");
                Test.AllowChildren = true;
                Test.NodeID = "Test";
                root.Nodes.Add(Test);

                var Test1 = new Ext.Net.TreeNode("Test1");
                Test1.AllowChildren = false;
                Test1.Listeners.Click.Handler = "treeNodeSelect(node);";
                Test1.NodeID = "Test1";
                Test.Nodes.Add(Test1);

                var Test2 = new Ext.Net.TreeNode("Test2");
                Test2.Listeners.Click.Handler = "treeNodeSelect(node);";
                Test2.AllowChildren = false;
                Test2.NodeID = "3m Co";
                Test.Nodes.Add(Test2);


            }

        }
        private object[] Data
        {
            get
            {
                return new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
            
            };
            }
        }
        
        
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <ext:Store ID="Store1" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="company" />
                    <ext:RecordField Name="price" Type="Float" />
                    <ext:RecordField Name="change" Type="Float" />
                    <ext:RecordField Name="pctChange" Type="Float" />
                    <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>
    <ext:Viewport ID="FactFindViewport" runat="server" Layout="BorderLayout">
        <Items>
            <ext:TreePanel ID="FactFindTreePanel" runat="server" Title="Fact Find" Region="West"
                Width="200">
                <DirectEvents>
                    <Click CleanRequest="true" Url="~/Test/Save" Before="mainPanel.update()">
                        <ExtraParams>
                            <ext:Parameter Name="containerId" Value="mainPanel.body.id" Mode="Raw" />
                            <ext:Parameter Name="node" Value="node.id" Mode="Raw" />
                            <ext:Parameter Name="parentNode" Value="node.parentNode.id" Mode="Raw" />
                        </ExtraParams>
                    </Click>
                </DirectEvents>
            </ext:TreePanel>
            <ext:Panel runat="server" Width="700" Region="Center" ID="mainPanel" Layout="FitLayout">
            <BottomBar>
              <ext:Toolbar runat="server">
                <Items>
                  <ext:Button Icon="Bug">
                     <Listeners>
                        <Click Handler="debugger" />

                     </Listeners>
                  </ext:Button>

                </Items>
              </ext:Toolbar>
            </BottomBar>
            </ext:Panel>
        </Items>

    </ext:Viewport>
    <script src="<%=Url.Content("~/Scripts/view/Test.js") %>" type="text/javascript">
    
       
     
    </script>
    
</asp:Content>

heres the partial

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<TestTemplate.ViewModel.TestViewModel>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">

    protected void Page_Load(object sender, EventArgs e)
    {



    }


</script>
<ext:Checkbox ID="Checkbox1" runat="server" FieldLabel="Not Disclosed" />
<ext:GridPanel ID="Test" BufferResize="500" Title="Bank & Building Society" runat="server"
    StoreID="Store1">
    <ColumnModel>
        <Columns>
            <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
            <ext:Column Header="Price" DataIndex="price" />
            <ext:Column ColumnID="Change" Header="Change" DataIndex="change" />
        </Columns>
    </ColumnModel>
    <View>
        <ext:GridView ForceFit="true" />
    </View>
</ext:GridPanel>

heres the js

/// <reference name="Ext.Net.Build.Ext.Net.extjs.adapter.ext.ext-base.js" assembly="Ext.Net" />
/// <reference name="Ext.Net.Build.Ext.Net.extjs.ext-all-debug.js" assembly="Ext.Net" />
/// <reference name="Ext.Net.Build.Ext.Net.extnet.extnet-core-debug.js" assembly="Ext.Net" />
/// <reference name="Ext.Net.Build.Ext.Net.extnet.extnet-data-debug.js" assembly="Ext.Net" />
/// <reference path="site_master.js" />


var treeNodeSelect = function (node) {
    node.select();

    if (node.parentNode.id == "Test") {

        ids = node.id;
        Store1.clearFilter();
        Store1.filter('company', ids);


}    
}

Thanks again guys

[Daniil]

Is the MasterPage required to reproduce the problem?

[rbarr]

Hey heres the sitemaster

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <style type="text/css">
        .my-grid .x-grid3-cell-inner { white-space: normal; }
        .ext-ie .button-fix table.x-btn, .ext-gecko .button-fix table.x-btn { top: 0px; }
        .ext-ie .button-fix .x-form-text, .ext-gecko .button-fix .x-form-text { margin-top: 1px; }
        .list-item { font: normal 11px tahoma, arial, helvetica, sans-serif; padding: 3px 10px 3px 10px; border: 1px solid #fff; border-bottom: 1px solid #eeeeee; white-space: normal; color: #555; }
        .list-item h3 { display: block; font: inherit; font-weight: bold; color: #222; }
        .ext-el-mask { filter: alpha(opacity=80) !important; width: 100% !important; -moz-opacity: 0.8 !important; opacity: 0.8 !important; }
        .x-fieldset-no-padding { padding-left: 0px !important; padding-right: 0px !important; }
    </style>
    <title>
        <asp:ContentPlaceHolder ID="TitleContent" runat="server" />
    </title>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" IDMode="Explicit" Theme="Default"
        GZip="true" CleanResourceUrl="true" ScriptMode="Debug" SourceFormatting="true" />
    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>
</html>

but its unchanged from stock expect for the resource manager

[Daniil]

Please apply the following changes:

1. DirectEvent:

<DirectEvents>
    <Click CleanRequest="true" Url="~/Test/Save">
        <ExtraParams>
            <ext:Parameter Name="containerId" Value="#{mainPanel}.id" Mode="Raw" />
            <ext:Parameter Name="node" Value="node.id" Mode="Raw" />
            <ext:Parameter Name="parentNode" Value="node.parentNode.id" Mode="Raw" />
        </ExtraParams>
    </Click>
</DirectEvents>

2. Partial view:

<ext:Container ID="Container1" runat="server">
    <Items>
        <ext:Checkbox ... />
        <ext:GridPanel ... />
    </Items>
</ext:Container>

3. Controller action:

public ActionResult Save(string containerId, string parentNode, string node)
{
    switch (parentNode)
    {
        case "Test":
            {
                Ext.Net.MVC.PartialViewResult p = new Ext.Net.MVC.PartialViewResult(containerId, RenderMode.AddTo);
                p.ViewName = "TestPartial";
                p.SingleControl = true;
                p.ViewData.Model = new TestTemplate.ViewModel.TestViewModel();
                return p;

            }
        default: return null;
    }
}

[rbarr]

Hey Daniil,

Thanks for the reply i've applied the changes you said, expect I need the panel to be updated on each node click so only the information for that node is displayed so I had to leave the panel update in . The problem is still occurring after 2 clicks.

Thanks

[Daniil]

I had to leave the panel update in .

No, you have not to leave it.

According to my changes a Container in the PartialView is destroyed and rendered again automatically.

So, please remove it.

[rbarr]

Daniil your solution works great thank you very much :) been stuck on this for days