Custom Gridpanel control - Header Row is blank

  1. #1

    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):

            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:
    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:
    Click image for larger version. 

Name:	Capture2.PNG 
Views:	74 
Size:	4.9 KB 
ID:	3574

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

    Thanks,
    Amit
  2. #2

    Sorry to bump

    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:
    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:
    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);}}}}}]}]

Similar Threads

  1. Replies: 2
    Last Post: Dec 13, 2011, 5:40 AM
  2. [CLOSED] Custom Header in Grouping Gridpanel
    By deejayns in forum 1.x Premium Help
    Replies: 14
    Last Post: Feb 22, 2011, 1:23 PM
  3. Replies: 3
    Last Post: Jan 24, 2011, 4:11 PM
  4. Replies: 1
    Last Post: May 15, 2009, 4:51 AM
  5. [CLOSED] Custom header in GridPanel
    By Jurke in forum 1.x Premium Help
    Replies: 6
    Last Post: Oct 22, 2008, 3:23 AM

Tags for this Thread

Posting Permissions