Dec 15, 2011, 5:02 PM
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):
I dont get any errors but when the page comes up, it shows:
Is there something extra that needs to be defined for the row to show up properly?
Thanks,
Amit
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='' /> 0 - 5|{0}", ResolveClientUrl("~/images/IndicatorGreen.png")), _
String.Format("<img src='{0}' alt='' /> 5 - 10|{0}", ResolveClientUrl("~/images/IndicatorYellow.png")), _
String.Format("<img src='{0}' alt='' /> 10+|{0}", ResolveClientUrl("~/images/IndicatorRed.png"))))
headerRow.Columns.Add(CreateMultiComboHeaderColumn("BehavioralIndFilter", "x-small-editor", "applyFilter(this);", _
String.Format("<img src='{0}' alt='' /> 0 - 5|{0}", ResolveClientUrl("~/images/IndicatorGreen.png")), _
String.Format("<img src='{0}' alt='' /> 5 - 10|{0}", ResolveClientUrl("~/images/IndicatorYellow.png")), _
String.Format("<img src='{0}' alt='' /> 10+|{0}", ResolveClientUrl("~/images/IndicatorRed.png"))))
headerRow.Columns.Add(CreateMultiComboHeaderColumn("SocialIndFilter", "x-small-editor", "applyFilter(this);", _
String.Format("<img src='{0}' alt='' /> 0 - 5|{0}", ResolveClientUrl("~/images/IndicatorGreen.png")), _
String.Format("<img src='{0}' alt='' /> 5 - 10|{0}", ResolveClientUrl("~/images/IndicatorYellow.png")), _
String.Format("<img src='{0}' alt='' /> 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:
Is there something extra that needs to be defined for the row to show up properly?
Thanks,
Amit