[CLOSED] Lost Focus in filter field when DataBind with GridPanel (every 3 secunds)

  1. #1

    [CLOSED] Lost Focus in filter field when DataBind with GridPanel (every 3 secunds)

    I have a DataBind GridPanel running every 3 seconds (TaskManager). In GridPanel have filters (Local Type). When entering data in the field of filter the filter control lost the focus (DataBind every 3 seconds). How do I keep the focus on the filter control when entering data?
    Thanks
    Last edited by Daniil; Jul 02, 2011 at 7:41 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Do you use MultiHeader filters?

    The note for Ext.Net team and others: the thread is related to:
    http://forums.ext.net/showthread.php?14391
  3. #3
    Yes, following exemple (In GridPanel):

    <View>
                                <ext:GridView ID="GridView1" runat="server">
                                    <HeaderRows>
                                        <ext:HeaderRow>
                                            <Columns>
                                                <ext:HeaderColumn Cls="x-small-editor">
                                                    <Component>
                                                        <ext:TextField ID="FilterDS_REQ_SERVAPL" runat="server" EnableKeyEvents="true">
                                                            <Listeners>
                                                                <KeyUp Handler="applyFilter(this, #{ClearFilterButton});" Buffer="250" />
                                                            </Listeners>
                                                        </ext:TextField>
                                                    </Component>
                                                </ext:HeaderColumn>
                                                <ext:HeaderColumn Cls="x-small-editor">
                                                    <Component>
                                                        <ext:TextField ID="FilterIN_SERVICO_APL" runat="server" EnableKeyEvents="true">
                                                            <Listeners>
                                                                <KeyUp Handler="applyFilter(this, #{ClearFilterButton});" Buffer="250" />
                                                            </Listeners>
                                                        </ext:TextField>
                                                    </Component>
                                                </ext:HeaderColumn>
                                                <ext:HeaderColumn Cls="x-small-editor">
                                                    <Component>
                                                        <ext:DateField ID="FilterDT_PROCESSO" runat="server" Editable="false" EnableKeyEvents="true"
                                                            ValidateOnEvent="False">
                                                            <Listeners>
                                                                <KeyUp Handler="applyFilter(this, #{ClearFilterButton});" Buffer="250" />
                                                            </Listeners>
                                                            <Listeners>
                                                                <Select Handler="applyFilter(this, #{ClearFilterButton});" />
                                                            </Listeners>
                                                        </ext:DateField>
                                                    </Component>
                                                </ext:HeaderColumn>
                                                <ext:HeaderColumn Cls="x-small-editor">
                                                    <Component>
                                                        <ext:TextField ID="FilterHR_PROCESSO" runat="server" EnableKeyEvents="true">
                                                            <Listeners>
                                                                <KeyUp Handler="applyFilter(this, #{ClearFilterButton});" Buffer="250" />
                                                            </Listeners>
                                                        </ext:TextField>
                                                    </Component>
                                                </ext:HeaderColumn>
                                                <ext:HeaderColumn Cls="x-small-editor">
                                                    <Component>
                                                        <ext:DateField ID="FilterDT_CONCLUSAO" runat="server" Editable="true" EnableKeyEvents="true"
                                                            ValidateOnEvent="False">
                                                            <Listeners>
                                                                <KeyUp Handler="applyFilter(this, #{ClearFilterButton});" Buffer="250" />
                                                            </Listeners>
                                                            <Listeners>
                                                                <Select Handler="applyFilter(this, #{ClearFilterButton});" />
                                                            </Listeners>
                                                        </ext:DateField>
                                                    </Component>
                                                </ext:HeaderColumn>
                                                <ext:HeaderColumn Cls="x-small-editor">
                                                    <Component>
                                                        <ext:TextField ID="FilterHR_CONCLUSAO" runat="server" EnableKeyEvents="true">
                                                            <Listeners>
                                                                <KeyUp Handler="applyFilter(this, #{ClearFilterButton});" Buffer="250" />
                                                            </Listeners>
                                                        </ext:TextField>
                                                    </Component>
                                                </ext:HeaderColumn>
                                                <ext:HeaderColumn Cls="x-small-editor">
                                                    <Component>
                                                        <ext:ComboBox ID="FilterAN_REQ_STATUS" runat="server" Editable="false">
                                                            <Items>
                                                                <ext:ListItem Text="Agendado" />
                                                                <ext:ListItem Text="ConcluĂ­do" />
                                                                <ext:ListItem Text="Em andamento" />
                                                                <ext:ListItem Text="Erro" />
                                                            </Items>
                                                            <Listeners>
                                                                <Select Handler="applyFilter(this, #{ClearFilterButton});" Buffer="250" />
                                                            </Listeners>
                                                        </ext:ComboBox>
                                                    </Component>
                                                </ext:HeaderColumn>
                                                <ext:HeaderColumn />
                                                <ext:HeaderColumn />
                                                <ext:HeaderColumn />
                                                <ext:HeaderColumn />
                                                <ext:HeaderColumn AutoWidthElement="false">
                                                    <Component>
                                                        <ext:Button ID="ClearFilterButton" runat="server" IconCls="CssExtClearFilterButton-d"
                                                            ToolTip="Limpa os filtros" Disabled="true">
                                                            <Listeners>
                                                                <Click Handler="clearFilter(null);" />
                                                            </Listeners>
                                                        </ext:Button>
                                                    </Component>
                                                </ext:HeaderColumn>
                                            </Columns>
                                        </ext:HeaderRow>
                                    </HeaderRows>
                                </ext:GridView>
                            </View>
    Last edited by Daniil; Jun 30, 2011 at 4:14 PM. Reason: Please use [CODE] tags
  4. #4
    I can suggest you to not update the grid when one of filters is focused.


    See Before handler of Update DirectEvent.

    Example

    <%@ Page Language="C#" %>
      
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
      
    <script runat="server">
        protected void Refresh(object sender, DirectEventArgs e)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1", DateTime.Now.ToLongTimeString() },
                new object[] { "test2", DateTime.Now.ToLongTimeString() },
                new object[] { "test3", DateTime.Now.ToLongTimeString() }
            };
            store.DataBind();
        }
    </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>Ext.Net Example</title>
        
          <ext:XScript runat="server">
            <script type="text/javascript">
                             
                var applyFilter = function (field) {                
                    var store = #{GridPanel1}.getStore();
                    store.suspendEvents();
                    store.filterBy(getRecordFilter());                                
                    store.resumeEvents();
                    #{GridPanel1}.getView().refresh(false);
                };
                 
                var clearFilter = function () {
                    #{Filter1}.reset();
                    #{Filter2}.reset();
                     
                    #{Store1}.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 getRecordFilter = function () {
                    var f = [];
     
                    f.push({
                        filter: function (record) {                         
                            return filterString(#{Filter1}.getValue(), "test1", record);
                        }
                    });
                     
                    f.push({
                        filter: function (record) {                         
                            return filterString(#{Filter2}.getValue(), "test2", 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:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test1" />
                                    <ext:RecordField Name="test2" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1" />
                        <ext:Column Header="Test2" DataIndex="test2" />
                         <ext:Column 
                            Width="28"
                            DataIndex="test1"
                            Sortable="false" 
                            MenuDisabled="true" 
                            Header="&nbsp;" 
                            Fixed="true">
                            <Renderer Handler="return '';" />
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView runat="server">
                        <HeaderRows>
                            <ext:HeaderRow>
                                <Columns>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="Filter1" 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="Filter2" runat="server" EnableKeyEvents="true">
                                                <Listeners>
                                                    <KeyUp Handler="applyFilter(this);" Buffer="250" />
                                                </Listeners>
                                            </ext:TextField>
                                        </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>
                <Plugins>
                    <ext:GridFilters ID="GridFilters1">
                        <Filters>
                            <ext:StringFilter DataIndex="test1" />
                            <ext:StringFilter DataIndex="test2" />
                        </Filters>
                    </ext:GridFilters>
                </Plugins>
            </ext:GridPanel>
            <ext:TaskManager runat="server">
                <Tasks>
                    <ext:Task Interval="3000" AutoRun="true">
                        <DirectEvents>
                            <Update
                                OnEvent="Refresh"
                                Before="return !(#{Filter1}.hasFocus || #{Filter2}.hasFocus);"
                                Success="#{GridPanel1}.store.filterBy(getRecordFilter());" />
                        </DirectEvents>
                    </ext:Task>
                </Tasks>
            </ext:TaskManager>
        </form>
    </body>
    </html>
  5. #5
    Ok, thanks

Similar Threads

  1. Replies: 1
    Last Post: Dec 01, 2011, 11:34 AM
  2. Replies: 1
    Last Post: Nov 28, 2011, 2:40 PM
  3. How to get row focus/selection lost event?
    By reezvi in forum 1.x Help
    Replies: 10
    Last Post: Jul 31, 2011, 8:41 PM
  4. [CLOSED] Filter focus lost after grid refresh
    By yobnet in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 15, 2010, 9:36 AM
  5. Data in control not stored when focus lost
    By hansweber2 in forum Bugs
    Replies: 1
    Last Post: Jul 07, 2009, 9:12 AM

Posting Permissions