[CLOSED] gridpanel filter query

[schellappa]

I am trying to implement a filter for gridpanel and need some help. The query is case sensitive and searches from the beginning of the string. How do I incorporate a search like '%filed.getValue%' and case insensitive ?

var applyFilter = function (field) {
            
            grdContact.getStore().reload({
                params: {
                    query: field.getValue()
                },
                callback: function () {
                    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;
                            });
                        task.delay(100);
                    }
                }
            });
        };

    <ext:GridPanel ID="grdContact" runat="server" StripeRows="true" Title="" Header="false"
            AutoWidth="true" Height="450" AnchorVertical="True" Layout="Fit" AutoScroll="true"
            Border="false" EnableDragDrop="true">
            <Store>
                <ext:Store ID="AddressStore" runat="server" OnRefreshData="RefreshStore">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="ID" Mapping="ID" Type="Int" />
                                <ext:RecordField Name="AddressInfo" Mapping="BriefInfo" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column Header="Select All" Sortable="false" DataIndex="AddressInfo">
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <View>
                <ext:BufferView ID="BufferView1" runat="server" RowHeight="20" ScrollDelay="0" ForceFit="true"
                    EmptyText="No Addresses in Group">
                    <HeaderRows>
                        <ext:HeaderRow>
                            <Columns>
                                <ext:HeaderColumn Cls="x-small-editor">
                                    <Component>
                                        <ext:Label runat="server" EnableKeyEvents="false">
                                        </ext:Label>
                                    </Component>
                                </ext:HeaderColumn>
                                <ext:HeaderColumn Cls="x-small-editor">
                                    <Component>
                                        <ext:TextField ID="personFilter" EmptyText="Filter by Name..." runat="server" EnableKeyEvents="true">
                                            <Listeners>
                                                <KeyUp Handler="applyFilter(this);" Buffer="250" />
                                            </Listeners>
                                        </ext:TextField>
                                    </Component>
                                </ext:HeaderColumn>
                                
                            </Columns>
                        </ext:HeaderRow>
                    </HeaderRows>
                </ext:BufferView>
            </View>
            <SelectionModel>
                <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1222" runat="server" MoveEditorOnEnter="false">
                </ext:CheckboxSelectionModel>
            </SelectionModel>
        </ext:GridPanel>

[Daniil]

Hi,

To search case insensitive please use .ToLower() method.

To search '%filed.getValue%' please use .Contains() method.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    public List<object> MyData = new List<object>
    { 
        new { test = "Test1" },
        new { test = "test1" },
        new { test = "tEst1" },
        new { test = "test2" },
        new { test = "tesT2" },
        new { test = "test3" }
    };

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = MyData;
            store.DataBind();
        }
    }

    protected void Store_RefreshData(object sender, StoreRefreshDataEventArgs e)
    {
        List<object> data = MyData;
        string s = e.Parameters["query"].ToLower();
        object value;

        if (!string.IsNullOrEmpty(s))
        {
            data.RemoveAll(
                item =>
                {
                    value = item.GetType().GetProperty("test").GetValue(item, null);
                    return !value.ToString().ToLower().Contains(s);
                }
            );
        }
        e.Total = data.Count;
        this.GridPanel1.GetStore().DataSource = data;
    }
</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>

    <script type="text/javascript">
        var applyFilter = function (field) {
            GridPanel1.getStore().reload({
                params : {
                    query : field.getValue()
                },
                callback : function () {
                    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;
                            });
                        task.delay(100);
                    }
                }
            });
        }
    </script>

</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server" OnRefreshData="Store_RefreshData">
                <Reader>
                    <ext:JsonReader>
                        <Fields>
                            <ext:RecordField Name="test" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Test" DataIndex="test" />
            </Columns>
        </ColumnModel>
        <View>
            <ext:GridView runat="server">
                <HeaderRows>
                    <ext:HeaderRow>
                        <Columns>
                            <ext:HeaderColumn Cls="x-small-editor">
                                <Component>
                                    <ext:TextField runat="server" EnableKeyEvents="true">
                                        <Listeners>
                                            <KeyUp Handler="applyFilter(this);" Buffer="250" />
                                        </Listeners>
                                    </ext:TextField>
                                </Component>
                            </ext:HeaderColumn>
                        </Columns>
                    </ext:HeaderRow>
                </HeaderRows>
            </ext:GridView>
        </View>
    </ext:GridPanel>
    </form>
</body>
</html>