[CLOSED] Columns BooleanFilter, problem !!

  1. #1

    [CLOSED] Columns BooleanFilter, problem !!

    Hi Community !

    Please check the code sample below:

    
    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store1.DataSource = new object[]
                        {
                            new {Text = "America", Value = "Am"},
                            new {Text = "Europe", Value = "Eu"}
                        };
                Store1.DataBind();
            }
       }
    
        protected void ComboBox1_Select(object sender, DirectEventArgs e)
        {
            try
            {
                switch (ComboBox1.SelectedItem.Value)
                {
                    case "Am":
                        this.Store2.DataSource = new object[]
                        {
                            new object[] { 1, "Argentina", "LightBlue/White", "S", "N"},
                            new object[] { 2, " Bolivia", "Yellow/Green/Red", "N", "S"},
                            new object[] { 3, "Brazil", "Yellow/Green/Blue", null, "S"},
                            new object[] { 4, "Chile", "Red/White/Blue", "N", null},
                             new object[]{ 5, "Colombia", "Red/White/Blue", "S", null},
                             new object[]{ 6, "Peru", "Red/White", null, "N"}
                        };
    
                        this.Store2.DataBind();
                        break;
    
                    case "Eu":
                        this.Store2.DataSource = new object[]
                        {
                            new object[] { 1, "Spain", "Yellow/Red", "S", "N"},
                            new object[] { 2, "France", "Blue/White/Red", null, "S"},
                            new object[] { 3, "Italy", "Green/White/Red", "N", "S"},
                            new object[] { 4, "Germany", "Black/Red/Yellow", null, "N"},
                            new object[] { 5, "Greece", "Blue/White", "S", null},
                            new object[] { 6, "Polonia", "Blue/Red", "N", null}
                        };
    
                        this.Store2.DataBind();
                        break;
                }
    
                Store2.ClearFilter();
                Store2.Filters.Clear();
                Store2.Sorters.Clear();
            }
            catch (Exception)
            {
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    
    <head id="Head1" runat="server">
        <title>GridPanel with Local Filtering, Sorting and Paging - Ext.NET Examples</title>
        
        <script>
            var getFilters = function () {
                var out = [],
                    filters = this.up('grid').store.getFilters().items,
                    length = filters.length,
                    i;
    
                for (i = 0; i < length; i++) {
                    out[i] = filters[i].serialize();
                }
    
                Ext.Msg.alert('Filters', Ext.encode(out));
            };
    
            Ext.grid.filters.filter.List.override({
                // That is overridden only to support #1287
                getOptionsFromStore: function (store) {
                    var me = this,
                        data = store.isPagingStore ? store.allData : store.getData(),
                        map = {},
                        ret = [],
                        dataIndex = me.dataIndex,
                        labelIndex = me.labelIndex,
                        items, i, length, recData, idValue, labelValue;
    
                    if (store.isFiltered() && !store.remoteFilter) {
                        if (store.isPagingStore) {
                            data = store.getData().getSource();
                        } else {
                            data = data.getSource();
                        }
                    }
    
                    items = data.items;
                    length = items.length;
    
                    for (i = 0; i < length; ++i) {
                        recData = items[i].data;
                        idValue = recData[dataIndex];
                        labelValue = recData[labelIndex];
    
                        if (labelValue === undefined) {
                            labelValue = idValue;
                        }
    
                        if (!map[idValue]) {
                            map[idValue] = 1;
                            ret.push([
                                idValue,
                                labelValue
                            ]);
                        }
                    }
    
                    return ret;
                }
            });
        </script>
    </head>
    
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Viewport ID="ViewPort1" runat="server" Layout="BorderLayout">
                <Items>
    
                <ext:FormPanel ID="FormPanelTools" runat="server" 
                            Region="North"
                            BodyPadding="5"
                            Frame="true">
                        <DockedItems>
                            <ext:Toolbar ID="Toolbar1" runat="server" Dock="Top" >
                                <Items>
                                    <ext:FieldContainer runat="server" Layout="HBoxLayout" AnchorHorizontal="100%">
                                        <Items>
                                            <ext:ComboBox ID="ComboBox1" runat="server"
                                                    MsgTarget="Side" 
                                                    AllowBlank="false"
                                                    ValueField="Value"    
                                                    DisplayField="Text"
                                                    FieldLabel="Field ComboBox1" >
                                                <Store>
                                                    <ext:Store ID="Store1" runat="server" AutoLoad="false" >               
                                                        <Model>
                                                            <ext:Model ID="Model1" runat="server">
                                                                <Fields>
                                                                    <ext:ModelField Name="Value"/>
                                                                    <ext:ModelField Name="Text" />
                                                                </Fields>
                                                            </ext:Model>
                                                        </Model>
                                                    </ext:Store>
                                                </Store>
                                                <DirectEvents>
                                                    <Select OnEvent="ComboBox1_Select" >
                                                    </Select>
                                                </DirectEvents>
                                                <Triggers>
                                                    <ext:FieldTrigger Icon="Clear" Hidden="true" QTip="Limpia Selección" />
                                                </Triggers>
                                                <Listeners>
                                                    <BeforeQuery Handler="this.getTrigger(0)[this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                                                    <Change Handler="this.getTrigger(0).show();" />
                                                    <Select Handler="#{GridPanel1}.filters.clearFilters(); #{Column1}.filter.filter.setValue(''); #{Column2}.filter.filter.setValue('');"></Select>
                                                    <TriggerClick Handler="if (index == 0) 
                                                                                        { 
                                                                                            this.reset();
                                                                                            this.getTrigger(0).hide();
                                                                                        }
                                                                                        "/>
                                                </Listeners>
                                            </ext:ComboBox>
                                        </Items>
                                    </ext:FieldContainer>
                                    <ext:ToolbarSpacer />
                                    <ext:ToolbarFill />
                                </Items>
                            </ext:Toolbar>
                        </DockedItems>
                    </ext:FormPanel>
                    
                    <ext:GridPanel ID="GridPanel1" runat="server"
                            Title="Country List"
                            LockText="Bloquear"
                            UnlockText="Desbloquear"
                            MarginSpec="0 5 5 0"
                            SelectionMemory="false"
                            ForceFit="true"
                            Region="Center"
                            Border="False"
                            Frame="true"
                            EnableColumnHide="true">
                        <Store>
                            <ext:Store ID="Store2" runat="server" PageSize="10">
                                <Model>
                                    <ext:Model ID="Model2" runat="server" IDProperty="ID">
                                        <Fields>
                                            <ext:ModelField Name="ID" />
                                            <ext:ModelField Name="Country" />
                                            <ext:ModelField Name="Colour" />
                                            <ext:ModelField Name="Option1" />
                                            <ext:ModelField Name="Option2" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
    
                        <Plugins>
                            <ext:GridFilters ID="GridFilters1" runat="server" />
                        </Plugins>
    
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:Column ID="Column1" runat="server" Text="Country" Width="160" DataIndex="Country" Flex="1">
                                    <Filter>
                                        <ext:StringFilter DataIndex="Country" />
                                    </Filter>
                                </ext:Column>
    
                                <ext:Column ID="Column2" runat="server" Text="Flag's Colour" DataIndex="Colour" Flex="1" >
                                    <Filter>
                                        <ext:StringFilter DataIndex="Colour" />
                                    </Filter>
                                </ext:Column>
    
                                <ext:Column ID="Column3" runat="server" Text="Option 1" DataIndex="Option1" >
                                    <Renderer Handler="return ((value) == 'S') ? 'Si': ((value) == 'N' ? 'No': value);" />
                                    <Filter>
                                        <ext:BooleanFilter DataIndex="Option1" />
                                    </Filter>
                                </ext:Column>
    
                                <ext:Column ID="Column4" runat="server" Text="Option 2" DataIndex="Option2" >
                                    <Renderer Handler="return ((value) == 'S') ? 'Si': ((value) == 'N' ? 'No': value);" />
                                    <Filter>
                                        <ext:BooleanFilter DataIndex="Option2" />
                                    </Filter>
                                </ext:Column>
    
                            </Columns>
                        </ColumnModel>
    
                    </ext:GridPanel>
    
                </Items>
            </ext:Viewport>
        </form>
      </body>
    </html>
    I have troubles with the columns whose filter is equal to "BooleanFilter", it's not filtering correctly.

    And how can I recover the rows whose value is equal to Null

    I accept suggestions ideas or comments

    Thanks in advance!
    Last edited by fabricio.murta; Jan 20, 2018 at 4:55 AM.
  2. #2
    Hello @opendat2000!

    Well, as I can see the column is rather a "tri-state", "enum" or something like that, as it can assume either "S", "N", or be null.

    In this case, you shouldn't be using the boolean filter but a custom one. Probably a custom to match 'true' when it is not null and 'false' when it is null, maybe?

    In the thread below, the user went thru the trouble of making a custom filter to fit his special needs. While not supported by us (you are extending an Ext.NET functionality) this still may be the best choice if you have a very specific filtering needs that none of the current existing filtering types do support.
    - How can I filter a GridPanel that has a mapped editor field?

    In his case, he customized his StringFilter. In your case you probably can just go ahead and customize in a similar way your BooleanFilter, a good starting point would be to pull the original FilterFn from the boolean filter code and then edit it to (say) assume S and N as true and null as false (so, just explore javascript's "truthy" concept).

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabricio

    Thanks for your quickly answer, i've checking what you indicate, and is correct, it was forcing the BooleanFilter filter for string values

    Please close the thread

    Thank you for your help!

    Saludos
    Mauricio
  4. #4
    Hello Mauricio!

    Cool, glad it helped! Closing.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Problem with adding columns to a grid panel
    By msavery in forum 1.x Help
    Replies: 0
    Last Post: Sep 19, 2012, 8:26 PM
  2. add columns on a treegrid PROBLEM
    By hzhan11 in forum 1.x Help
    Replies: 0
    Last Post: Jun 13, 2012, 1:22 AM
  3. [CLOSED] BooleanFilter and BooleanColumn
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 12, 2012, 5:09 PM
  4. GridPanel BooleanFilter - YesText/NoText properties
    By Skizzot223 in forum 1.x Help
    Replies: 0
    Last Post: Apr 16, 2012, 8:19 PM
  5. [1.0] RowEditor and columns width problem
    By tdracz in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 07, 2010, 1:56 AM

Posting Permissions