[CLOSED] Multiheader Filter – Backspace key problem

Page 2 of 2 FirstFirst 12
  1. #11
    Please try the following KeyMap.

    Example
    <ext:KeyMap runat="server" Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}">
        <ext:KeyBinding>
            <Keys>
                <ext:Key Code="BACKSPACE" />
            </Keys>
            <Listeners>
                <Event Handler="if (store.filtering) { e.preventDefault(); };" />
            </Listeners>
        </ext:KeyBinding>
    </ext:KeyMap>
    Set
    store.filtering = true;
    before store.filterBy()
    and reset it after field.focus()
    store.filtering = false;
  2. #12
    Hi Daniil,

    I tried the solution with the <ext:KeyMap> you gave me and I have the same bug.

    But, I have notice something.


    When I tested the example of Ext.Net before (https://examples1.ext.net/#/GridPane...Header/Filter/), I used Firefox 4 instead of Internet Explorer 8. I tried the example of Ext.net with IE8 and I got the same bug as the one of my project.


    So I tried my Ext.Net project on Firefox4 and it worked without the bug.

    It seems the bug must be related to Internet Explorer 8 (version: 8.0.7600.16385). Unfortunately the users of my application are on Internet Explorer 8.



    To reproduce it on your side with Internet Explorer 8:

    1. Open a random page
    2. Go to the ext.Net example (https://examples1.ext.net/#/GridPane...Header/Filter/),
    3. Click on a Text field and do some backspace until it?s empty,
    4. Click on the Combo Box and do some back space until its empty, the IE8 browser should go back to the previous page.

    I don't know if all those information can give you a hint about that bug.



    Yours truly,

    ________________________________________
    INSPQ
    National Institute of Public Healthcare of
    Québec (Canada)
    http://www.inspq.qc.ca


    Quote Originally Posted by Daniil View Post
    Please try the following KeyMap.

    Example
    <ext:KeyMap runat="server" Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}">
        <ext:KeyBinding>
            <Keys>
                <ext:Key Code="BACKSPACE" />
            </Keys>
            <Listeners>
                <Event Handler="if (store.filtering) { e.preventDefault(); };" />
            </Listeners>
        </ext:KeyBinding>
    </ext:KeyMap>
    Set
    store.filtering = true;
    before store.filterBy()
    and reset it after field.focus()
    store.filtering = false;
  3. #13
    Thanks for the exact steps, I have reproduced the issue now.

    But I was able to fix it using the KeyMap I suggested.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                var data = this.GetData();
                var store1 = this.GridPanel1.GetStore();
                var store2 = this.ComboBox1.GetStore();
     
                store1.DataSource = data;
                store1.DataBind();
                
                store2.DataSource = data;
                store2.DataBind();
            }
        }
    
        public object[] GetData()
        {
            return new object[] {
                new object[] { "3m Co", 71.72, 0.02, 0.03, "01/01/2008" },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "02/01/2008" },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "03/01/2008" },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, "10/01/2008" },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "09/01/2008" },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "01/03/2008" },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "01/04/2008" },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "01/01/2008" },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "02/02/2008" },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "03/05/2008" },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "01/01/2008" },
                new object[] { "General Electric Company", 34.14, -0.08, -0.23, "01/01/2008" },
                new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "01/01/2008" },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "01/01/2008" },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "01/01/2008" },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "01/01/2008" },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, "01/01/2008" },
                new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "01/01/2008" },
                new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "01/01/2008" },
                new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "01/01/2008" },
                new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "01/01/2008" },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "01/01/2008" },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "01/01/2008" },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "01/01/2008" },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "01/01/2008" },
                new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "01/01/2008" },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "01/01/2008" },
                new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "01/01/2008" },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "01/01/2008" }
            };
        }
    </script>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
         
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>GridPanel with MultiHeader Row Filters - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />    
     
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
     
            var change = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value);
            };
     
            var pctChange = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
         
        <ext:XScript runat="server">
            <script type="text/javascript">
                             
                var applyFilter = function (field) {
                    if(field){
                        var id = field.id,
                            task = new Ext.util.DelayedTask(function(){
                                var f = Ext.getCmp(id);
                                f.focus();
                                f.el.dom.value = f.el.dom.value;
                                #{GridPanel1}.getStore().filtering = false;
                            });
                        task.delay(100);
                    }
                    #{GridPanel1}.getStore().filtering = true;
                    #{GridPanel1}.getStore().filterBy(getRecordFilter());                                
                };
                 
                var clearFilter = function () {
                    #{ComboBox1}.reset();
                    #{PriceFilter}.reset();
                    #{ChangeFilter}.reset();
                    #{PctChangeFilter}.reset();
                    #{LastChangeFilter}.reset();
                     
                    #{GridPanel1}.getStore().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(#{ComboBox1}.getValue(), 'company', record);
                        }
                    });
                     
                    f.push({
                        filter: function (record) {                         
                            return filterNumber(#{PriceFilter}.getValue(), 'price', record);
                        }
                    });
                     
                    f.push({
                        filter: function (record) {                         
                            return filterNumber(#{ChangeFilter}.getValue(), 'change', record);
                        }
                    });
                     
                    f.push({
                        filter: function (record) {                         
                            return filterNumber(#{PctChangeFilter}.getValue(), 'pctChange', record);
                        }
                    });
                     
                    f.push({
                        filter: function (record) {                         
                            return filterDate(#{LastChangeFilter}.getValue(), 'lastChange', 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>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />        
            <ext:KeyMap runat="server" Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}">
                <ext:KeyBinding>
                    <Keys>
                        <ext:Key Code="BACKSPACE" />
                    </Keys>
                    <Listeners>
                        <Event Handler="if (#{GridPanel1}.getStore().filtering) { e.preventDefault(); };" />
                    </Listeners>
                </ext:KeyBinding>
            </ext:KeyMap>
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                StripeRows="true"
                Title="Array Grid"
                TrackMouseOver="true"
                Width="600"
                Height="350"
                AutoExpandColumn="Company">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="company" />
                                    <ext:RecordField Name="price" Type="Float" />
                                    <ext:RecordField Name="change" Type="Float" />
                                    <ext:RecordField Name="pctChange" Type="Float" />
                                    <ext:RecordField Name="lastChange" Type="Date" DateFormat="MM/dd/yyyy" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company" />
                        <ext:Column Header="Price" Width="75" DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column Header="Change" Width="75" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column Header="Change" Width="75" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:DateColumn Header="Last Updated" Width="95" DataIndex="lastChange" />
                        <ext:Column Width="28" DataIndex="company" Sortable="false" MenuDisabled="true" Header="&nbsp;" Fixed="true">
                            <Renderer Handler="return '';" />
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                 
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" SingleSelect="true" />
                </SelectionModel>
                 
                <View>
                    <ext:GridView runat="server">
                        <HeaderRows>
                            <ext:HeaderRow>
                                <Columns>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:ComboBox 
                                                ID="ComboBox1" 
                                                runat="server"
                                                TriggerAction="All"
                                                Mode="Local"
                                                DisplayField="company"
                                                ValueField="company">
                                                <Store>
                                                    <ext:Store runat="server">
                                                        <Reader>
                                                            <ext:ArrayReader>
                                                                <Fields>
                                                                    <ext:RecordField Name="company" />
                                                                </Fields>
                                                            </ext:ArrayReader>
                                                        </Reader>
                                                    </ext:Store>
                                                </Store>
                                                <Listeners>
                                                    <Select Handler="applyFilter(this);" />
                                                </Listeners>     
                                            </ext:ComboBox>
                                        </Component>
                                    </ext:HeaderColumn>
                                     
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="PriceFilter" runat="server" EnableKeyEvents="true">
                                                <Listeners>
                                                    <KeyUp Handler="applyFilter(this);" Buffer="250" />                                                
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                     
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="ChangeFilter" runat="server"  EnableKeyEvents="true">
                                                <Listeners>
                                                    <KeyUp Handler="applyFilter(this);" Buffer="250" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                     
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="PctChangeFilter" runat="server"  EnableKeyEvents="true">
                                                <Listeners>
                                                    <KeyUp Handler="applyFilter(this);" Buffer="250" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                     
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:DateField ID="LastChangeFilter" runat="server" Editable="false">
                                                <Listeners>
                                                    <Select Handler="applyFilter(this);" />
                                                </Listeners>
                                            </ext:DateField>
                                        </Component>                                    
                                    </ext:HeaderColumn>
                                                                   
                                    <ext:HeaderColumn AutoWidthElement="false">
                                        <Component>
                                            <ext:Button ID="ClearFilterButton" runat="server" Icon="Cancel">
                                                <ToolTips>
                                                    <ext:ToolTip runat="server" Html="Clear filter" />
                                                </ToolTips>
                                                 
                                                <Listeners>
                                                    <Click Handler="clearFilter(null);" />
                                                </Listeners>                                            
                                            </ext:Button>
                                        </Component>
                                    </ext:HeaderColumn>
                                </Columns>
                            </ext:HeaderRow>
                        </HeaderRows>
                    </ext:GridView>
                </View>
            </ext:GridPanel>  
        </form>
    </body>
    </html>
  4. #14
    Hi Daniil,

    I achieved to add the KeyMap suggestion, I realized I didn?t had the property ?SingleSelect="true"? in the <ext:RowSelectionModel>.

    The bug is still there but happens really less often, so thank you for that. Nevertheless, one thing remind with this solution:

    1. The user cannot use the arrow key to go change a letter in the TextField.

    For now, you can close this tread and mark it as resolve for me, but if there is any update about this issues can you update that thread about it ?

    Thanks,

    Yours faithfully,


    Quote Originally Posted by Daniil View Post
    Thanks for the exact steps, I have reproduced the issue now.

    But I was able to fix it using the KeyMap I suggested.
  5. #15
    Quote Originally Posted by inspq View Post
    The bug is still there but happens really less often, so thank you for that.
    I guess it's related to
    task.delay(100);
    100 ms before field is focused again. If backspace is pressed during this period, the error can occurs. Well, I can suggest to try less value of delay. If the issue still appears, I could suggest the mask a grid or a whole page during filtering.

    Also you could experiment with Buffer of KeyUp.

    Quote Originally Posted by inspq View Post
    The user cannot use the arrow key to go change a letter in the TextField. For now, you can close this tread and mark it as resolve for me, but if there is any update about this issues can you update that thread about it ?
    Please apply the following changes:
    var applyFilter = function (field, e, key) {
        if (key == 37 || key == 39) { // left and right arrows
            return;
        }
        // the rest part of function
    and
    <KeyUp Handler="applyFilter(this, e, e.getKey());" Buffer="250" />
  6. #16
    Hi Daniil,


    If I use the mask, it makes the grid flash a lot of time for all half second filters, so I will not use that. For the key filter, it?s working fine for those 2 keys thanks.

    I played with the buffer of the KeyUp, It helps also for reducing the bug apparition when I put the value around 450.

    Please let me know if there?s a fix that would make the filtering more transparent to the user and lighter in code like in the previous version, in the upcoming version of Ext.Net.

    Thanks again for your help Daniil,

    Yours faithfully,


    Quote Originally Posted by Daniil View Post
    I guess it's related to
    task.delay(100);
    100 ms before field is focused again. If backspace is pressed during this period, the error can occurs. Well, I can suggest to try less value of delay. If the issue still appears, I could suggest the mask a grid or a whole page during filtering.

    Also you could experiment with Buffer of KeyUp.



    Please apply the following changes:
    var applyFilter = function (field, e, key) {
        if (key == 37 || key == 39) { // left and right arrows
            return;
        }
        // the rest part of function
    and
    <KeyUp Handler="applyFilter(this, e, e.getKey());" Buffer="250" />
  7. #17
    We will try to resolve it at all.
  8. #18
    Vladimir (another team's member) is preparing the example for you how to solve the problem.

    He will post the example tomorrow or day after tomorrowю
  9. #19
    Hi,

    Try the following applyFilter method
    var applyFilter = function (field) {                
                    var store = #{GridPanel1}.getStore();
                    store.suspendEvents();
                    store.filterBy(getRecordFilter());                                
                    store.resumeEvents();
                    #{GridPanel1}.getView().refresh(false);
                };
  10. #20
    Hi Vladimir and Daniil,

    I have no problem anymore. Vladimir script solved the problem of keys and lost focus on IE8. You can mark this tread as resolved.

    Спасибо / Thank you !

    Quote Originally Posted by Vladimir View Post
    Hi,

    Try the following applyFilter method
    var applyFilter = function (field) {                
                    var store = #{GridPanel1}.getStore();
                    store.suspendEvents();
                    store.filterBy(getRecordFilter());                                
                    store.resumeEvents();
                    #{GridPanel1}.getView().refresh(false);
                };
Page 2 of 2 FirstFirst 12

Similar Threads

  1. [CLOSED] Multiheader filter error..
    By ilanga in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Mar 08, 2011, 4:13 AM
  2. [CLOSED] Missing filter column using MultiHeader Filter.
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 12, 2010, 1:07 PM
  3. [CLOSED] Multiheader Filter
    By CMA in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 26, 2009, 11:03 AM
  4. MultiHeader - Filter
    By mono in forum 1.x Help
    Replies: 4
    Last Post: Apr 22, 2009, 8:13 AM
  5. Replies: 2
    Last Post: Feb 11, 2009, 7:04 AM

Tags for this Thread

Posting Permissions