EXT-NET: Uncaught TypeError: Cannot read property 'type' of null

Question

I am trying to implement this example: Dynamic_GridPanels

But when I click to expand the outer grid I receive this error:

Uncaught TypeError: Cannot read property 'type' of null

By using breakpoints I found out that the error occurred after returning from the DirectMethod. I don't post the code for the outer grid (misArtStore) because is working correctly.

Here is my code:

MarkUp

<ext:GridPanel
                                    runat="server"
                                    Title="Expander Rows with GridPanel"
                                    Collapsible="true"
                                    AnimCollapse="true"
                                    Icon="Table"
                                    Width="600"
                                    Height="450"
                                    DisableSelection="true">
                                    <Store>
                                        <ext:Store ID="misArtStore" runat="server">
                                            <Model>
                                                <ext:Model runat="server" IDProperty="Id">
                                                    <Fields>
                                                        <ext:ModelField Name="Id" />
                                                        <ext:ModelField Name="missing" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                                    <ColumnModel runat="server">
                                        <Columns>
                                            <ext:Column runat="server" Text="Artifacts" DataIndex="missing" Flex="1" Hideable="false" />
                                        </Columns>
                                    </ColumnModel>
                                    <Plugins>
                                        <ext:RowExpander runat="server">
                                            <Loader runat="server" DirectMethod="#{DirectMethods}.GetGrid" Mode="Component">
                                                <LoadMask ShowMask="true" />
                                                <Params>
                                                    <ext:Parameter Name="id" Value="this.record.getId()" Mode="Raw" />
                                                </Params>
                                            </Loader>
                                        </ext:RowExpander>
                                    </Plugins>
                                </ext:GridPanel>

Code Behind

[DirectMethod]
        public string GetGrid(Dictionary<string, string> parameters)
        {
            string id = parameters["id"];
            DALP.PDBDataContext dc = new DALP.PDBDataContext();
            DAL.AdminDataContext ds = new DAL.AdminDataContext();

            string uname = HttpContext.Current.User.Identity.Name;

            var clientid = (from u in ds.ClientUsers            
                            where u.UserName == uname
                            select u.ClientId);

            var sites = (from mc in dc.TMFCategories //sites is populated correctly
                        join mat in dc.TMFTemplateCts on mc.Id equals mat.Catid
                        join st in dc.Sites on mat.ctid equals st.CTid
                        where ( (!dc.TMFFiles.Any(x=>x.SiteId==st.Siteid)) && mat.Required == true && mat.Clientid == int.Parse(clientid.First().ToString()) && mat.ctid == ctid && mc.Id == Convert.ToInt32(id)) 
                        select new { Siteid = st.Siteid, Site = st.FullName });
            

            GridPanel grid = new GridPanel
            {
                Height = 200,
                EnableColumnHide = false,
                Store =
            {
                new Store
                {
                    Model = {
                        new Model {
                            IDProperty = "Siteid",
                            Fields =
                            {
                                new ModelField("Siteid"),
                                new ModelField("Site")
                            }
                        }
                    },
                    DataSource = sites
                }
            },
                ColumnModel =
                {
                    Columns =
                {
                    new Column { Text = "Site", DataIndex = "Site", Width = 150 }
                }
                }
            };

            return ComponentLoader.ToConfig(grid);
        }

Chrome Console:

Uncaught TypeError: Cannot read property 'type' of null

at F.setLayout (ext.axd:19)
at F.getLayout (ext.axd:19)
at F.add (ext.axd:19)
at g.Ext.ComponentLoader.Renderer.Component (ext.axd:445)
at g.onComplete (ext.axd:495)
at Object.complete (ext.axd:463)
at Object.userSuccess (ext.axd:268)
at F.executeScriptDelay (ext.axd:256)
at F.executeScript (ext.axd:255)
at F.requestSuccessHandler (ext.axd:248)

EDIT

(Error in image solved by using the solution provided by @Przemek)

Answer 1

This is a problem with a linq query, not Grid. Try to use:

DataSource = sites.ToList()

Or create list of your own custom objects:

public class CustomObject
{
    public string Siteid {get; set; }
    public string Site {get; set; }
}

(...)

select new CustomObject() { Siteid = st.Siteid, Site = st.FullName });

EDIT

Working example without database connection:

*.aspx:

<ext:GridPanel runat="server" Title="Expander Rows with GridPanel"
    Collapsible="true" AnimCollapse="true" Icon="Table"
    Width="600" Height="450" DisableSelection="true">
    <Store>
        <ext:Store ID="misArtStore" runat="server">
            <Model>
                <ext:Model runat="server" IDProperty="Id">
                    <Fields>
                        <ext:ModelField Name="Id" />
                        <ext:ModelField Name="missing" />
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>
    </Store>
    <ColumnModel runat="server">
        <Columns>
            <ext:Column runat="server" Text="Artifacts" DataIndex="missing" 
                Flex="1" Hideable="false" />
        </Columns>
    </ColumnModel>
    <Plugins>
        <ext:RowExpander runat="server">
            <Loader runat="server" DirectMethod="#{DirectMethods}.GetGrid" Mode="Component">
                <LoadMask ShowMask="true" />
                <Params>
                    <ext:Parameter Name="id" Value="this.record.getId()" Mode="Raw" />
                </Params>
            </Loader>
        </ext:RowExpander>
    </Plugins>
</ext:GridPanel>

*.aspx.cs:

protected void Page_Load(object sender, EventArgs e)
{
    if (Page.IsPostBack || X.IsAjaxRequest)
        return;

    misArtStore.DataSource = new object[] 
    { 
        new { Id = "1", missing = "missing 1" },
        new { Id = "2", missing = "missing 2" },
        new { Id = "3", missing = "missing 3" }
    };

    misArtStore.DataBind();
}

[DirectMethod]
public string GetGrid(Dictionary<string, string> parameters)
{
    GridPanel grid = new GridPanel
    {
        Height = 200,
        EnableColumnHide = false,
        Store =
        {
            new Store
            {
                Model = 
                {
                    new Model 
                    {
                        IDProperty = "Siteid",
                        Fields = { new ModelField("Siteid"), new ModelField("Site") }
                    }
                },
                DataSource = new object[] 
                { 
                    new { Siteid = "1", Site = "Site 1" },
                    new { Siteid = "2", Site = "Site 2" }
                }
            }
        },
        ColumnModel =
        {
            Columns = { new Column { Text = "Site", DataIndex = "Site", Width = 150 } }
        }
    };

    return ComponentLoader.ToConfig(grid);
}