Custom Gridpanel control - Header Row is blank

As a continuation on this post, I am trying to add header columns to the grid to perfom filtering. I add the header as follows (sorry its a bit long):

Code:

---

        Dim headerRow As New Ext.Net.HeaderRow

        headerRow.Columns.Add(CreateTextFieldHeaderColumn("NameFilter", "x-small-editor", "applyFilter(this);"))

        headerRow.Columns.Add(CreateMultiComboHeaderColumn("GradeLvl", "x-small-editor", "applyFilter(this);", _
                                                            "PK", _
                                                            "KG", _
                                                            "01", _
                                                            "02", _
                                                            "03", _
                                                            "04", _
                                                            "05", _
                                                            "06", _
                                                            "07", _
                                                            "08", _
                                                            "09", _
                                                            "10", _
                                                            "11", _
                                                            "12"))

        headerRow.Columns.Add(CreateMultiComboHeaderColumn("AYPFilter", "x-small-editor", "applyFilter(this);", _
                                                          "1", _
                                                            "2", _
                                                            "3", _
                                                            "4", _
                                                            "5"))

        headerRow.Columns.Add(CreateMultiComboHeaderColumn("RaceFilter", "x-small-editor", "applyFilter(this);", _
                                                          "ASIAN", _
                                                            "BLACK", _
                                                            "HISPANIC", _
                                                            "MULTI", _
                                                            "NATIVE", _
                                                            "WHITE"))

        headerRow.Columns.Add(CreateMultiComboHeaderColumn("ELLFilter", "x-small-editor", "applyFilter(this);", _
                                                          "No", _
                                                            "A1-LF", _
                                                            "A1-LY", _
                                                            "A1-LZ", _
                                                            "A2-LF", _
                                                            "A2-LY", _
                                                            "A2-LZ", _
                                                            "B1-LF", _
                                                            "B1-LY", _
                                                            "B1-LZ", _
                                                            "B2-LF", _
                                                            "B2-LY", _
                                                            "B2-LZ", _
                                                            "C1-LF", _
                                                            "C1-LY", _
                                                            "C1-LZ", _
                                                            "C2-LF", _
                                                            "C2-LY", _
                                                            "C2-LZ", _
                                                            "D-LF", _
                                                            "D-LY", _
                                                            "D-LZ", _
                                                            "E-LF", _
                                                            "E-LY", _
                                                            "E-LZ", _
                                                            "No-LF", _
                                                            "No-LY", _
                                                            "No-LZ", _
                                                            "T-LF", _
                                                            "T-LY", _
                                                            "T-LZ", _
                                                            "U-LF", _
                                                            "U-LY", _
                                                            "U-LZ"))

        headerRow.Columns.Add(CreateMultiComboHeaderColumn("SWDFilter", "x-small-editor", "applyFilter(this);", _
                                                                "(Clear)|", _
                                                                          "Yes", _
                                                                          "No"))

        headerRow.Columns.Add(CreateMultiComboHeaderColumn("FRLFilter", "x-small-editor", "applyFilter(this);", _
                                                                "(Clear)|", _
                                                                          "Yes", _
                                                                          "No"))

        headerRow.Columns.Add(CreateMultiComboHeaderColumn("AcademicIndFilter", "x-small-editor", "applyFilter(this);", _
                                                            String.Format("<img src='{0}' alt='' />&nbsp;0 - 5|{0}", ResolveClientUrl("~/images/IndicatorGreen.png")), _
                                                            String.Format("<img src='{0}' alt='' />&nbsp;5 - 10|{0}", ResolveClientUrl("~/images/IndicatorYellow.png")), _
                                                            String.Format("<img src='{0}' alt='' />&nbsp;10+|{0}", ResolveClientUrl("~/images/IndicatorRed.png"))))

        headerRow.Columns.Add(CreateMultiComboHeaderColumn("BehavioralIndFilter", "x-small-editor", "applyFilter(this);", _
                                                            String.Format("<img src='{0}' alt='' />&nbsp;0 - 5|{0}", ResolveClientUrl("~/images/IndicatorGreen.png")), _
                                                            String.Format("<img src='{0}' alt='' />&nbsp;5 - 10|{0}", ResolveClientUrl("~/images/IndicatorYellow.png")), _
                                                            String.Format("<img src='{0}' alt='' />&nbsp;10+|{0}", ResolveClientUrl("~/images/IndicatorRed.png"))))

        headerRow.Columns.Add(CreateMultiComboHeaderColumn("SocialIndFilter", "x-small-editor", "applyFilter(this);", _
                                                            String.Format("<img src='{0}' alt='' />&nbsp;0 - 5|{0}", ResolveClientUrl("~/images/IndicatorGreen.png")), _
                                                            String.Format("<img src='{0}' alt='' />&nbsp;5 - 10|{0}", ResolveClientUrl("~/images/IndicatorYellow.png")), _
                                                            String.Format("<img src='{0}' alt='' />&nbsp;10+|{0}", ResolveClientUrl("~/images/IndicatorRed.png"))))

        headerRow.Columns.Add(CreateMultiComboHeaderColumn("ReadLvlFilter", "x-small-editor", "applyFilter(this);", _
                                                            "1", _
                                                            "2", _
                                                            "3", _
                                                            "4", _
                                                            "5", _
                                                            "No"))

        headerRow.Columns.Add(CreateTextFieldHeaderColumn("fReadScaleScoreFilter", "x-small-editor", "applyFilter(this);"))
        '<ext:HeaderColumn Cls="x-small-editor">
        '    <Component>
        '        <ext:DropDownField ID="fReadScaleScoreFilter" runat="server" UnderlyingValue="sReadScaleScoreFilter" Text="0,3100"
        '            Editable="true" Width="300" TriggerIcon="SimpleArrowDown" Mode="ValueText" EnableKeyEvents="true" MaskRe="[0-9]+,[0-9]+" >
        '            <Component>
        '                <ext:Panel Width="200" runat="server">
        '                    <Items>
        '                        <ext:Slider runat="server" ID="sReadScaleScoreFilter" Width="200" Values="0,3100"
        '                            MinValue="0" MaxValue="3100">
        '                            <Plugins>
        '                                <ext:SliderTip ID="SliderTip1" runat="server" />
        '                            </Plugins>
        '                            <Listeners>
        '                                <ChangeComplete Buffer="1000" Handler="#{fReadScaleScoreFilter}.setValue(this.getValues(), this.getValues(), false);applyFilter(this);" />
        '                            </Listeners>
        '                        </ext:Slider>
        '                        <%--<ext:Checkbox runat="server" ID="ctest" BoxLabel="Include Missing Scores" />--%>
        '                    </Items>
        '                </ext:Panel>

        '            </Component>
        '            <Listeners>
        '                <KeyUp  Buffer="1000" Handler="slideHandlerFCAT(#{fReadScaleScoreFilter}, #{sReadScaleScoreFilter}, 0, 3100);" />
        '                <%--<KeyUp  Buffer="1000" Handler="try{var values=#{fReadScaleScoreFilter}.getText().split(','); #{sReadScaleScoreFilter}.setValue(0, parseInt(values[0]), true);#{sReadScaleScoreFilter}.setValue(1, parseInt(values[1]), true);applyFilter(this);} catch (ex) {}" />--%>
        '            </Listeners>
        '        </ext:DropDownField>
        '    </Component>
        '</ext:HeaderColumn>

        headerRow.Columns.Add(CreateTextFieldHeaderColumn("ReadFCATFilter", "x-small-editor", "applyFilter(this);"))
        '<ext:HeaderColumn Cls="x-small-editor">
        '    <Component>
        '        <ext:MultiCombo ID="ReadFCATFilter" runat="server" EnableKeyEvents="true" StoreID="LevelStore"
        '            Editable="false" DisplayField="name" ValueField="imgPath" Mode="Local" TriggerAction="All" ListWidth="125">
        '            <Listeners>
        '                <Select Handler="applyFilter(this);" Buffer="100" />
        '            </Listeners>
        '        </ext:MultiCombo>
        '    </Component>
        '</ext:HeaderColumn>

        headerRow.Columns.Add(CreateTextFieldHeaderColumn("Low30ReadFilter", "x-small-editor", "applyFilter(this);"))
        '<ext:HeaderColumn Cls="x-small-editor">
        '    <Component>
        '        <ext:ComboBox ID="Low30ReadFilter" runat="server" EnableKeyEvents="true">
        '            <Items>
        '                <ext:ListItem Text="(Clear)" Value="" />
        '                <ext:ListItem Text="Yes" Value="Yes" />
        '                <ext:ListItem Text="No" Value="No" />
        '            </Items>
        '            <Listeners>
        '                <Select Buffer="100" Handler="applyFilter(this);" />
        '            </Listeners>
        '        </ext:ComboBox>
        '    </Component>
        '</ext:HeaderColumn>

        headerRow.Columns.Add(CreateTextFieldHeaderColumn("ReadBAT1Filter", "x-small-editor", "applyFilter(this);"))
        '<ext:HeaderColumn Cls="x-small-editor">
        '    <Component>
        '        <ext:ComboBox ID="ReadBAT1Filter" runat="server" EnableKeyEvents="true">
        '            <Items>
        '                <ext:ListItem Text="(Clear)" Value="" />
        '                <ext:ListItem Text="Yes" Value="Yes" />
        '                <ext:ListItem Text="No" Value="No" />
        '            </Items>
        '            <Listeners>
        '                <Select Buffer="100" Handler="applyFilter(this);" />
        '            </Listeners>
        '        </ext:ComboBox>
        '    </Component>
        '</ext:HeaderColumn>

        headerRow.Columns.Add(CreateTextFieldHeaderColumn("ReadBAT2Filter", "x-small-editor", "applyFilter(this);"))
        '<ext:HeaderColumn Cls="x-small-editor">
        '    <Component>
        '        <ext:ComboBox ID="ReadBAT2Filter" runat="server" EnableKeyEvents="true">
        '            <Items>
        '                <ext:ListItem Text="(Clear)" Value="" />
        '                <ext:ListItem Text="Yes" Value="Yes" />
        '                <ext:ListItem Text="No" Value="No" />
        '            </Items>
        '            <Listeners>
        '                <Select Buffer="100" Handler="applyFilter(this);" />
        '            </Listeners>
        '        </ext:ComboBox>
        '    </Component>
        '</ext:HeaderColumn>

        headerRow.Columns.Add(CreateTextFieldHeaderColumn("MathLvlFilter", "x-small-editor", "applyFilter(this);"))
        '<ext:HeaderColumn Cls="x-small-editor">
        '    <Component>
        '        <ext:MultiCombo ID="MathLvlFilter" runat="server" EnableKeyEvents="true" >
        '            <Items>
        '                <ext:ListItem Text="1" Value="1" />
        '                <ext:ListItem Text="2" Value="2" />
        '                <ext:ListItem Text="3" Value="3" />
        '                <ext:ListItem Text="4" Value="4" />
        '                <ext:ListItem Text="5" Value="5" />
        '                <ext:ListItem Text="No Data" Value="-1" />                                 
        '            </Items>
        '            <Listeners>
        '                <Select Handler="applyFilter(this);" Buffer="100" />
        '            </Listeners>
        '        </ext:MultiCombo>
        '    </Component>
        '</ext:HeaderColumn>

        headerRow.Columns.Add(CreateTextFieldHeaderColumn("fMathScaleScoreFilter", "x-small-editor", "applyFilter(this);"))
        '<ext:HeaderColumn Cls="x-small-editor">
        '    <Component>
        '        <ext:DropDownField ID="fMathScaleScoreFilter" runat="server" UnderlyingValue="sMathScaleScoreFilter" Text="0,3100"
        '            Editable="true" Width="300" TriggerIcon="SimpleArrowDown" Mode="ValueText" EnableKeyEvents="true" MaskRe="[0-9]+,[0-9]+">
        '            <Component>
        '                <ext:Panel ID="Panel1" Width="200" runat="server">
        '                    <Items>
        '                <ext:Slider runat="server" ID="sMathScaleScoreFilter" Width="200" Values="0,3100" MinValue="0" MaxValue="3100">
        '                    <plugins>
        '                          <ext:SliderTip ID="SliderTip2" runat="server" />
        '                    </plugins>
        '                    <Listeners>
        '                        <ChangeComplete Buffer="100" Handler="#{fMathScaleScoreFilter}.setValue(this.getValues(), this.getValues(), false);applyFilter(this);" />
        '                    </Listeners>
        '                </ext:Slider>                                             
        '                    </Items>
        '                </ext:Panel>

        '            </Component>
        '            <Listeners>
        '                <KeyUp  Buffer="1000" Handler="slideHandlerFCAT(#{fMathScaleScoreFilter}, #{sMathScaleScoreFilter}, 0, 3100);" />
        '                <%--<KeyUp  Buffer="1000" Handler="try{var values=#{fMathScaleScoreFilter}.getText().split(','); var min; var max; if #{sMathScaleScoreFilter}.setValue(0, parseInt(values[0]), true);#{sMathScaleScoreFilter}.setValue(1, parseInt(values[1]), true);applyFilter(this);} catch (ex) {}" />--%>
        '            </Listeners>
        '        </ext:DropDownField>
        '    </Component>
        '</ext:HeaderColumn>

        headerRow.Columns.Add(CreateTextFieldHeaderColumn("MathFCATFilter", "x-small-editor", "applyFilter(this);"))
        '<ext:HeaderColumn Cls="x-small-editor">
        '    <Component>
        '        <ext:MultiCombo ID="MathFCATFilter" runat="server" EnableKeyEvents="true" StoreID="LevelStore"
        '            Editable="false" DisplayField="name" ValueField="imgPath" Mode="Local" TriggerAction="All" ListWidth="125">
        '            <Listeners>
        '                <Select Handler="applyFilter(this);" Buffer="100" />
        '            </Listeners>
        '        </ext:MultiCombo>
        '    </Component>
        '</ext:HeaderColumn>

        headerRow.Columns.Add(CreateTextFieldHeaderColumn("Low30MathFilter", "x-small-editor", "applyFilter(this);"))
        '<ext:HeaderColumn Cls="x-small-editor">
        '    <Component>
        '        <ext:ComboBox ID="Low30MathFilter" runat="server" EnableKeyEvents="true">
        '            <Items>
        '                <ext:ListItem Text="(Clear)" Value="" />
        '                <ext:ListItem Text="Yes" Value="Yes" />
        '                <ext:ListItem Text="No" Value="No" />
        '            </Items>
        '            <Listeners>
        '                <Select Buffer="100" Handler="applyFilter(this);" />
        '            </Listeners>
        '        </ext:ComboBox>
        '    </Component>
        '</ext:HeaderColumn>

        headerRow.Columns.Add(CreateTextFieldHeaderColumn("MathBAT1Filter", "x-small-editor", "applyFilter(this);"))
        '<ext:HeaderColumn Cls="x-small-editor">
        '    <Component>
        '        <ext:ComboBox ID="MathBAT1Filter" runat="server" EnableKeyEvents="true">
        '            <Items>
        '                <ext:ListItem Text="(Clear)" Value="" />
        '                <ext:ListItem Text="Yes" Value="Yes" />
        '                <ext:ListItem Text="No" Value="No" />
        '                <ext:ListItem Text="N/A" Value="N/A" />
        '            </Items>
        '            <Listeners>
        '                <Select Buffer="100" Handler="applyFilter(this);" />
        '            </Listeners>
        '        </ext:ComboBox>
        '    </Component>
        '</ext:HeaderColumn>

        headerRow.Columns.Add(CreateTextFieldHeaderColumn("algebrabat1", "x-small-editor", "applyFilter(this);"))
        '<ext:HeaderColumn Cls="x-small-editor">
        '    <Component>
        '        <ext:ComboBox ID="algebrabat1" runat="server" EnableKeyEvents="true">
        '            <Items>
        '                <ext:ListItem Text="(Clear)" Value="" />
        '                <ext:ListItem Text="Yes" Value="Yes" />
        '                <ext:ListItem Text="No" Value="No" />
        '                <ext:ListItem Text="N/A" Value="N/A" />
        '            </Items>
        '            <Listeners>
        '                <Select Buffer="100" Handler="applyFilter(this);" />
        '            </Listeners>
        '        </ext:ComboBox>
        '    </Component>
        '</ext:HeaderColumn>

        headerRow.Columns.Add(CreateTextFieldHeaderColumn("geometrybat1", "x-small-editor", "applyFilter(this);"))
        '<ext:HeaderColumn Cls="x-small-editor">
        '    <Component>
        '        <ext:ComboBox ID="geometrybat1" runat="server" EnableKeyEvents="true">
        '            <Items>
        '                <ext:ListItem Text="(Clear)" Value="" />
        '                <ext:ListItem Text="Yes" Value="Yes" />
        '                <ext:ListItem Text="No" Value="No" />
        '                <ext:ListItem Text="N/A" Value="N/A" />
        '            </Items>
        '            <Listeners>
        '                <Select Buffer="100" Handler="applyFilter(this);" />
        '            </Listeners>
        '        </ext:ComboBox>
        '    </Component>
        '</ext:HeaderColumn>

        headerRow.Columns.Add(CreateTextFieldHeaderColumn("MathBAT2Filter", "x-small-editor", "applyFilter(this);"))
        '<ext:HeaderColumn Cls="x-small-editor">
        '    <Component>
        '        <ext:ComboBox ID="MathBAT2Filter" runat="server" EnableKeyEvents="true">
        '            <Items>
        '                <ext:ListItem Text="(Clear)" Value="" />
        '                <ext:ListItem Text="Yes" Value="Yes" />
        '                <ext:ListItem Text="No" Value="No" />
        '            </Items>
        '            <Listeners>
        '                <Select Buffer="100" Handler="applyFilter(this);" />
        '            </Listeners>
        '        </ext:ComboBox>
        '    </Component>
        '</ext:HeaderColumn>

        headerRow.Columns.Add(CreateTextFieldHeaderColumn("HasPlanFilter", "x-small-editor", "applyFilter(this);"))
        '<ext:HeaderColumn Cls="x-small-editor">
        '    <Component>
        '        <ext:ComboBox ID="HasPlanFilter" runat="server" EnableKeyEvents="true">
        '            <Items>
        '                <ext:ListItem Text="(Clear)" Value="" />
        '                <ext:ListItem Text="Yes" Value="Yes" />
        '                <ext:ListItem Text="No" Value="No" />
        '            </Items>
        '            <Listeners>
        '                <Select Buffer="100" Handler="applyFilter(this);" />
        '            </Listeners>
        '        </ext:ComboBox>
        '    </Component>
        '</ext:HeaderColumn>

        Dim GridView As New Ext.Net.GridView
        GridView.HeaderRows.Add(headerRow)
        GridView.ID = "GridView1"

        View.Add(GridView)

---

Supporting functions:

Code:

---

Private Function CreateTextFieldHeaderColumn(ID As String, Cls As String, Handler As String) As Ext.Net.HeaderColumn
        Try
            Dim col As New Ext.Net.HeaderColumn With {.Cls = Cls}
            Dim txtFld As New Ext.Net.TextField

            With txtFld
                .ID = ID
                .Listeners.KeyUp.Buffer = 1000
                .Listeners.KeyUp.Handler = Handler
                .EnableKeyEvents = True
            End With

            col.Component.Add(txtFld)

            Return col
        Catch ex As Exception
            Return Nothing
        End Try
    End Function

    Private Function CreateMultiComboHeaderColumn(ID As String, Cls As String, Handler As String, ParamArray KeyValues() As String) As Ext.Net.HeaderColumn
        Try
            Dim col As New Ext.Net.HeaderColumn With {.Cls = Cls}
            Dim multiCombo As New Ext.Net.MultiCombo

            With multiCombo
                .ID = ID
                .Listeners.Select.Buffer = 100
                .Listeners.Select.Handler = Handler
                .EnableKeyEvents = True

                For Each ListItem As String In KeyValues
                    Dim item() As String = ListItem.Split("|")

                    If item.Count = 1 Then
                        .Items.Add(New Ext.Net.ListItem(item(0)))
                    Else
                        .Items.Add(New Ext.Net.ListItem(item(0), item(1)))
                    End If

                Next
            End With

            col.Component.Add(multiCombo)

            Return col
        Catch ex As Exception
            Return Nothing
        End Try
    End Function

    Private Function CreateComboHeaderColumn(ID As String, Cls As String, Handler As String, ParamArray KeyValues() As String) As Ext.Net.HeaderColumn
        Try
            Dim col As New Ext.Net.HeaderColumn With {.Cls = Cls}
            Dim combo As New Ext.Net.ComboBox

            With combo
                .ID = ID
                .Listeners.Select.Buffer = 100
                .Listeners.Select.Handler = Handler
                .EnableKeyEvents = True

                For Each ListItem As String In KeyValues
                    Dim item() As String = ListItem.Split("|")

                    If item.Count = 1 Then
                        .Items.Add(New Ext.Net.ListItem(item(0)))
                    Else
                        .Items.Add(New Ext.Net.ListItem(item(0), item(1)))
                    End If

                Next
            End With

            col.Component.Add(combo)

            Return col
        Catch ex As Exception
            Return Nothing
        End Try
    End Function

---

I dont get any errors but when the page comes up, it shows:
Attachment 3574

Is there something extra that needs to be defined for the row to show up properly?

Thanks,
Amit

Any ideas? The markup on the client is the exact same as when I create the grid in an aspx page (except for identifiers).

markup from ASPX Page:

Code:

---

new Ext.grid.GridView({proxyId:"ContentPlaceHolder1_cFCATGridTier1_GridView1",headerRows:[{columns:[{target:undefined,component:{id:"ContentPlaceHolder1_cFCATGridTier1_NameFilter",xtype:"textfield",enableKeyEvents:true,                            listeners:{keyup:{buffer:1000,fn:function(item,e){applyFilter(this);}}}}}]}]

---

markup from inherited control:

Code:

---

new Ext.grid.GridView({proxyId:"GridView1                                  ",headerRows:[{columns:[{target:undefined,component:{id:"                                  NameFilter",xtype:"textfield",width:100,name:"NameFilter",enableKeyEvents:true,listeners:{keyup:{buffer:1000,fn:function(item,e){applyFilter(this);}}}}}]}]

---