[CLOSED] Missing filter column using MultiHeader Filter.

  1. #1

    [CLOSED] Missing filter column using MultiHeader Filter.

    I have the following code to use a grid with MultiHeader filter. My problem is that it does not show the filter for DESCRIPTIONFilter when the page is loaded.

    Could you tell me please what I am doing wrong?


     
        <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript">
                var applyFilter = function () {
                    #{StoreHotTopics}.filterBy(getRecordFilter());
                };
                
                var clearFilter = function () {
                    #{DESCRIPTIONFilter}.reset();
                    #{STARTDATEFilter}.reset();
                    #{ENDDATEFilter}.reset();
                    #{DISPLAYORDERFilter}.reset();
                    #{ACTIVEFilter}.reset();
                    
                    #{StoreHotTopics}.clearFilter();
                }
                var filterString = function (value, dataIndex, record) {
                    var val = record.get(dataIndex);
                    if (typeof val != "string") {
                        return value.length == 0;
                    }
                    return val.toLowerCase().indexOf(value.toLowerCase()) > -1;
                };
                var filterDate = function (value, dataIndex, record) {
                    var val = record.get(dataIndex).clearTime(true).getTime();
                    if (!Ext.isEmpty(value, false) && val != value.clearTime(true).getTime()) {
                        return false;
                    }
                    return true;
                };
                var filterNumber = function (value, dataIndex, record) {
                    var val = record.get(dataIndex);       
                    if (!Ext.isEmpty(value, false) && val != value) {
                        return false;
                    }
                    return true;
                };
                var getRecordFilter = function () {
                    var f = [];
                    f.push({
                        filter: function (record) {                         
                            return filterString(#{DESCRIPTIONFilter}.getValue(), 'DESCRIPTION', record);
                        }
                    });
                    
                    f.push({
                        filter: function (record) {                         
                            return filterDate(#{STARTDATEFilter}.getValue(), 'STARTDATE', record);
                        }
                    });
                    
                    f.push({
                        filter: function (record) {                         
                            return filterDate(#{ENDDATEFilter}.getValue(), 'ENDDATE', record);
                        }
                    });
                    
                    f.push({
                        filter: function (record) {                         
                            return filterNumber(#{DISPLAYORDERFilter}.getValue(), 'DISPLAYORDER', record);
                        }
                    });
                    
                    f.push({
                        filter: function (record) {                         
                            return filterString(#{ACTIVEFilter}.getValue(), 'ACTIVE', record);
                        }
                    });
                    var len = f.length;
                    
                    return function (record) {
                        for (var i = 0; i < len; i++) {
                            if (!f[i].filter(record)) {
                                return false;
                            }
                        }
                        return true;
                    };
                };
            </script>
        </ext:XScript>
    
          <ext:Store ID="StoreHotTopics" runat="server" DataSourceID="ObjectDataSourceHotTopics"
                       OnBeforeRecordInserted="StoreHotTopics_BeforeRecordInserted"
                       OnAfterRecordInserted="StoreHotTopics_AfterRecordInserted"
                       ShowWarningOnFailure="false"
                       OnAfterDirectEvent="StoreHotTopics_AfterDirectEvent"
                       OnBeforeDirectEvent="StoreHotTopics_BeforeDirectEvent"
                       > 
                <Reader>
                    <ext:JsonReader IDProperty="ID">
                      <Fields>
                            <ext:RecordField Name="ID"/>
                            <ext:RecordField Name="DESCRIPTION"/>
                            <ext:RecordField Name="CULTURE"/>
                            <ext:RecordField Name="STARTDATE" Type="Date"/>                         
                            <ext:RecordField Name="ENDDATE" Type="Date"/>                         
                            <ext:RecordField Name="DISPLAYORDER" Type="Int"/>   
                            <ext:RecordField Name="ACTIVE" Type="Boolean"/>                     
                        </Fields>
                    </ext:JsonReader>          
                </Reader>        
                <AutoLoadParams>
                  <ext:Parameter Name="start" Value="0" Mode="Raw" />
                  <ext:Parameter Name="limit" Value="14" Mode="Raw" /> 
                </AutoLoadParams>                     
            </ext:Store>
    
                        <ext:Panel ID="TabPanelHotTopics" runat="server" Height="500px" Title="Hot Topics"
                                    Cls="panelTabGroupContainer" Border="false" EnableViewState="true">
                            <Content>
                                <ext:GridPanel ID="GridPanelHotTopics" runat="server" Height="400px" Width="666px" Title="Hot Topics" 
                                               StoreID="StoreHotTopics" Cls="formGroupListing" BodyCssClass="formContentGroupListing"
                                               Border="false">
                                    <TopBar>
                                      <ext:Toolbar ID="ToolbarGridPanelHotTopics" runat="server"
                                        >
                                        <Items>
                                            <ext:ToolbarFill ID="ToolbarFill1" runat="server" MaxWidth="20px"  />
                                            <ext:Button ID="Button1" runat="server"  
                                                        Text="<%$ Resources:Resource, btnSave %>"
                                                        Icon="Disk" Cls="btnMenuGroupListing">
                                                <Listeners>
                                                    <Click Handler="#{GridPanelHotTopics}.save();" />
                                                </Listeners>
                                            </ext:Button>
                                            <ext:Button ID="btnDeleteHotTopic" runat="server"  Text="<%$ Resources:Resource, btnDelete %>"
                                                        Icon="Delete">
                                                <Listeners>
                                                    <Click Handler="#{GridPanelHotTopics}.deleteSelected();" />
                                                </Listeners>
                                            </ext:Button>
                                            <ext:Button ID="btnInsertHotTopic" runat="server"  Text="<%$ Resources:Resource, btnInsert %>" Icon="Add">
                                                <Listeners>
                                                    <Click CausesValidation="true" Handler="#{GridPanelHotTopics}.insertRecord(0, {});#{GridPanelHotTopics}.getView().focusRow(0);#{GridPanelHotTopics}.startEditing(0, 1);" />
                                                </Listeners>
                                            </ext:Button>
                                            <ext:Button ID="btnRefreshHotTopic" runat="server"  Text="<%$ Resources:Resource, btnRefresh %>" 
                                                        Icon="ArrowRefresh">
                                                <Listeners>
                                                    <Click Handler="#{GridPanelHotTopics}.reload();" />
                                                </Listeners>
                                            </ext:Button>
                                                </Items>
                                            </ext:Toolbar>
                                    </TopBar>
                                
                                    <ColumnModel>
                                        <Columns>
                                            <ext:Column ColumnID="ColumnID" DataIndex="ID" Hidden="true"/>
                                            
                                            <ext:Column ColumnID="DESCRIPTIONcolumn" 
                                                        Header="<%$ Resources: GridPanelHotTopics.DESCRIPTIONcolumn %>"
                                                        DataIndex="DESCRIPTION" Width="380px">
                                                <Editor>
                                                    <ext:TextField ID="TextFieldDESCRIPTION" runat="server" MaxLength="50" AllowBlank="false">
                                                    </ext:TextField>
                                                </Editor>
                                            </ext:Column>
                                            
                                            <ext:Column ColumnID="STARTDATEcolumn" 
                                                        Header="<%$ Resources: GridPanelHotTopics.STARTDATEcolumn %>"
                                                        DataIndex="STARTDATE" Width="80px">
                                                <Renderer Fn="Ext.util.Format.dateRenderer('M/d/Y')" />
                                                <Editor>
                                                    <ext:DateField ID="DateFieldSTARTDATE" runat="server" AllowBlank="false">
                                                    </ext:DateField>
                                                </Editor>
                                            </ext:Column>
                                            <ext:Column ColumnID="ENDDATEcolumn" 
                                                        Header="<%$ Resources: GridPanelHotTopics.ENDDATEcolumn %>" 
                                                        DataIndex="ENDDATE" Width="80px">
                                                <Renderer Fn="Ext.util.Format.dateRenderer('M/d/Y')" />
                                                <Editor>
                                                    <ext:DateField ID="DateFieldENDDATE" runat="server" AllowBlank="false">
                                                    </ext:DateField>
                                                </Editor>
                                            </ext:Column>
                                            <ext:Column ColumnID="DISPLAYORDERcolumn" DataIndex="DISPLAYORDER"
                                                        Header="<%$ Resources: GridPanelHotTopics.DISPLAYORDERcolumn %>"
                                                        Width="41">
                                                <Editor>
                                                    <ext:NumberField ID="DISPLAYORDERcolumn" runat="server">
                                                    </ext:NumberField>
                                                </Editor>
                                            </ext:Column>
                                            <ext:CheckColumn ColumnID="ACTIVEcolumn" 
                                                         DataIndex="ACTIVE" 
                                                         Align="Center" 
                                                         Editable="true"
                                                         Css="checkBox"
                                                         Header="<%$ Resources: GridPanelHotTopics.ACTIVEcolumn %>" Width="46px"/>                                        
                                        </Columns>
                                    </ColumnModel>
                                    <SelectionModel>
                                        <ext:RowSelectionModel ID="RowSelectionModel3" runat="server">
                                            <DirectEvents>
                                                <RowSelect OnEvent="GroupRowSelect" Buffer="250">
                                                    <ExtraParams>
                                                        <ext:Parameter Name="ID" Value="this.getSelected().id" Mode="Raw" />
                                                    </ExtraParams>
                                            </RowSelect>
                                        </DirectEvents>
                                    </ext:RowSelectionModel>
                                </SelectionModel>     
    
                              <View>
                                    <ext:GridView ID="GridViewHotTopicsFilter" runat="server">
                                        <HeaderRows>
                                            <ext:HeaderRow>
                                                <Columns>
                                                
                                                   <ext:HeaderColumn Cls="x-small-editor">
                                                        <Component>
                                                            <ext:TextField ID="DESCRIPTIONFilter" runat="server" EnableKeyEvents="true">
                                                                <Listeners>
                                                                    <KeyUp Handler="applyFilter();"/>                                                
                                                                </Listeners>
                                                            </ext:TextField>
                                                        </Component>
                                                    </ext:HeaderColumn>
                                         
                                                    
                                                    <ext:HeaderColumn Cls="x-small-editor">
                                                        <Component>
                                                            <ext:DateField ID="STARTDATEFilter" runat="server" Editable="false">
                                                                <Listeners>
                                                                    <Select Handler="applyFilter();" />
                                                                </Listeners>
                                                            </ext:DateField>
                                                        </Component>                                    
                                                    </ext:HeaderColumn>
                                                    
                                                    <ext:HeaderColumn Cls="x-small-editor">
                                                        <Component>
                                                            <ext:DateField ID="ENDDATEFilter" runat="server" Editable="false">
                                                                <Listeners>
                                                                    <Select Handler="applyFilter();" />
                                                                </Listeners>
                                                            </ext:DateField>
                                                        </Component>                                    
                                                    </ext:HeaderColumn>
                                                    
                                                   <ext:HeaderColumn Cls="x-small-editor">
                                                        <Component>
                                                            <ext:TextField ID="DISPLAYORDERFilter" runat="server" EnableKeyEvents="true">
                                                                <Listeners>
                                                                    <KeyUp Handler="applyFilter();"/>                                                
                                                                </Listeners>
                                                            </ext:TextField>
                                                        </Component>
                                                    </ext:HeaderColumn>
                                                    <ext:HeaderColumn Cls="x-small-editor">
                                                    <Component>
                                                    <ext:TextField ID="ACTIVEFilter" runat="server" EnableKeyEvents="true">
                                                        <Listeners>
                                                            <KeyUp Handler="applyFilter();" />                                                
                                                        </Listeners>
                                                    </ext:TextField>
                                                    </Component>
                                                </ext:HeaderColumn>
                                                  </Columns>
                                            </ext:HeaderRow>
                                        </HeaderRows>
                                    </ext:GridView>
                                </View>
    
                                </ext:GridPanel>
                                <div class="groupBackBottom"/>
                                <div class="paginationToolBarGroupListing">
                                          <ext:PagingToolBar ID="PagingToolBar1" 
                                                runat="server" 
                                                StoreID="StoreHotTopics" 
                                                PageSize="14" 
                                                DisplayInfo="false"/>
                                </div> 
                                
                                  
                            </Content>
                        </ext:Panel>
  2. #2
    Hi,

    My problem was that I am hidding the ID and the filter for DESCRIPTIONFilter was asingned for the ID which is the second column and I had to create a filter also for this colum and hidde it to solve the problem.


    Is it there a better way to solve the problem?. It is not good to have create filter headers for hidden columns also.
  3. #3
    Hi!

    Please try to put ColumnID at the last position (i.e. after ACTIVEcolumn)
  4. #4
    Hi,

    Header columns must be synchronized with columns. Therefore just add to the begin of the header row (will be empty header column)
    <ext:HeaderColumn />
    P.S. Why do you need hidden ID column? May be just remove it, in this case empty header column is not required
    Vladimir Shcheglov
    Sr. Developer
  5. #5
    Hi Vladimir,

    Your suggestion solved my problem.

    Thanks for your help.

Similar Threads

  1. Replies: 4
    Last Post: May 16, 2012, 8:14 AM
  2. Replies: 1
    Last Post: May 11, 2012, 3:46 AM
  3. Replies: 2
    Last Post: May 01, 2012, 4:57 PM
  4. [CLOSED] Multiheader Filter
    By CMA in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 26, 2009, 11:03 AM
  5. MultiHeader - Filter
    By mono in forum 1.x Help
    Replies: 4
    Last Post: Apr 22, 2009, 8:13 AM

Posting Permissions