Remote filter for Header Filter

  1. #1

    Remote filter for Header Filter

    Dear All,

    I have applied PageProxy on my GridPanel and using the remote filter with GridFilter plugin at present. The filter condition has been return on the store refresh data event. Here is the code for filtering
    if (!string.IsNullOrEmpty(gridfilters))
              {
                  FilterConditions fc = new FilterConditions(gridfilters);
     
                  foreach (FilterCondition condition in fc.Conditions)
                  {
                      Comparison comparison = condition.Comparison;
                      string field = condition.Name;
                      FilterType type = condition.FilterType;
     
                      object value;
     
                      switch (condition.FilterType)
                      {
                          case FilterType.Date:
                                   switch(comparison)
                                   {
                                       case Comparison.Eq:
                                           sites = from c in sites where c.OnAirDate == DateTime.Parse(condition.Value, new System.Globalization.CultureInfo("en-US")) select c;
                                           break;
                                       case Comparison.Gt:
                                           sites = from c in sites where c.OnAirDate > DateTime.Parse(condition.Value, new System.Globalization.CultureInfo("en-US")) select c;
                                           break;
                                       case Comparison.Lt:
                                           sites = from c in sites where c.OnAirDate < DateTime.Parse(condition.Value, new System.Globalization.CultureInfo("en-US")) select c;
                                           break;                                   
                                   }
                              break;
     
                          case FilterType.String:
                              value = condition.Value;
                              value = value.ToString().Replace("'","''");
                              sites = sites.Where(string.Format("{0}.Contains(\"{1}\")",field,value));
                              break;
     
                          default:
                              throw new ArgumentOutOfRangeException();
                      }
     
                  }
              }
    Now i want header filter in my grid panel and want something like on this page https://examples1.ext.net/#/GridPane...Header/Filter/

    Now when i apply filter with Header Filter the filter is applied on Client side, instead i want to filter on the server side for which i have already returned the code.

    Can anyone turn me into right direction?

    Thanks,
    Huzefa
  2. #2
    After few research in GridFilter plugin i came to know that a array object is being made out of the filters applied and then deserialised as set to params of the grid which is then reloaded.

    I am writing this in applyfilter() function which will called after use moves out of editor.

    Can you please tell how to get the 'options' variable that have been used heavily in the code, like it is mentioned below
    onBeforeLoad : function (store, options) {
            options.params = options.params || {};
            this.cleanParams(options.params[this.paramPrefix] || {});		
            var params = this.buildQuery(this.getFilterData());
            var filterParams = {};
    
            if (!Ext.isEmptyObj(params)) {
                filterParams[this.paramPrefix] = store.proxy.isMemoryProxy ? params : Ext.encode(params);
            }
    
            Ext.apply(options.params, filterParams);
    
        }
    Regards,
    Huzefa
  3. #3
    Dear All,

    I have done few research and have come to know how to send header filter to remote filters.

    But when i am placing this GridPanel into a dropdownfield then i am not able to see the header filter column. Can you please tell what is the problem.

    Here is the code for inspection.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="System.Linq" %>
    <script runat="server">
        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" }
            };
        }
    
        protected void RefreshStore(object sender, StoreRefreshDataEventArgs e)
        {
            Store store = sender as Store;
            string filter = e.Parameters["query"];
            var gridfilters = e.Parameters["gridfilters"];
            if (!string.IsNullOrEmpty(gridfilters))
            {
                FilterConditions fc = new FilterConditions(gridfilters);
    
                foreach (FilterCondition condition in fc.Conditions)
                {
                    Comparison comparison = condition.Comparison;
                    string field = condition.Name;
                    FilterType type = condition.FilterType;
    
                    object value;
    
                    switch (condition.FilterType)
                    {
                        case FilterType.Date:
                            switch (comparison)
                            {
                                case Comparison.Eq:
                                    break;
                                case Comparison.Gt:
                                    break;
                                case Comparison.Lt:
                                    break;
                            }
                            break;
    
                        case FilterType.String:
                            value = condition.Value;
                            value = value.ToString().Replace("'", "''");
                            break;
    
                        default:
                            throw new ArgumentOutOfRangeException();
                    }
    
                }
            }
    
            if (string.IsNullOrEmpty(filter))
            {
                store.DataSource = GetData();
            }
            else
            {
                var filteredList = from x in GetData()
                                   where (x as object[])[0].ToString().StartsWith(filter)
                                   select x;
                store.DataSource = filteredList;
            }
            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 id="Head1" runat="server">
        <title>Ext.Net Example</title>
        <script type="text/javascript">
            this.encode = true;
            var applyFilter = function (field) {
                this.encode = false;
                var params = buildQuery(getFilterData(GridPanel1));
    
                GridPanel1.getStore().reload({
                    params: {
                        gridfilters: params
                    },
                    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);
                        }
                    }
                });
            };
    
            function getFilterData(grid) {
                var filters = [], i, len;
    
                if (grid.view !== null && grid.view.headerRows.length > 0) {
                    var headerRow = grid.view.headerRows[0];
    
                    for (i = 0, len = headerRow.columns.length; i < len; i++) {
                        var component = headerRow.columns[i].component;
                        if (component.xtype != 'button') {
                            var value = component.getValue();
                            if (value != "") {
                                filters.push({
                                    field: grid.colModel.columns[i].dataIndex,
                                    data: {
                                        type: "string",
                                        value: value
                                    }
                                });
                            }
                        }
                    }
                }
                return filters;
            }
    
            function buildQuery(filters) {
    
                var p = {}, i, f, root, dataPrefix, key, tmp,
                    len = filters.length;
    
                if (!this.encode) {
                    for (i = 0; i < len; i++) {
                        f = filters[i];
                        root = ['f_', i, '_'].join('');
                        p[root + 'field'] = f.field;
    
                        dataPrefix = root + 'data_';
                        for (key in f.data) {
                            p[[dataPrefix, key].join('')] = f.data[key];
                        }
                    }
                } else {
                    tmp = [];
                    for (i = 0; i < len; i++) {
                        f = filters[i];
                        tmp.push(Ext.apply(
                            {},
                            { field: f.field },
                            f.data
                        ));
                    }
    
                    if (tmp.length > 0) {
                        p[this.paramPrefix] = Ext.util.JSON.encode(tmp);
                    }
                }
                return p;
            }
    
            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>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:DropDownField ID="DropDownField1" runat="server" Editable="True" Width="400"
            TriggerIcon="SimpleArrowDown">
            <Component>
                <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                    <Store>
                        <ext:Store ID="Store1" runat="server" OnRefreshData="RefreshStore">
                            <Proxy>
                                <ext:PageProxy />
                            </Proxy>
                            <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>
                    <View>
                        <ext:GridView ID="GridView1" runat="server">
                            <HeaderRows>
                                <ext:HeaderRow>
                                    <Columns>
                                        <ext:HeaderColumn Cls="x-small-editor">
                                            <Component>
                                                <ext:TextField ID="txtCompany" 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="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 ID="ToolTip1" runat="server" Html="Clear filter" />
                                            </ToolTips>
                                            <Listeners>
                                                <Click Handler="clearFilter(null);" />
                                            </Listeners>
                                        </ext:Button>
                                    </Component>
                                </ext:HeaderColumn>--%>
                                    </Columns>
                                </ext:HeaderRow>
                            </HeaderRows>
                        </ext:GridView>
                    </View>
                    <ColumnModel ID="ColumnModel1" 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 ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                    </SelectionModel>
                </ext:GridPanel>
            </Component>
        </ext:DropDownField>
        </form>
    </body>
    </html>
    Regards,
    Huzefa

Similar Threads

  1. Remote Filter with HttpProxy
    By mkshields9w57 in forum 1.x Help
    Replies: 1
    Last Post: Oct 24, 2011, 2:50 PM
  2. Replies: 0
    Last Post: Mar 01, 2011, 12:09 PM
  3. Remote Filter always empty with DataContext
    By JIGSAW in forum 1.x Help
    Replies: 0
    Last Post: Feb 25, 2011, 12:38 PM
  4. Get filter string for Remote Filtering
    By peter.campbell in forum 1.x Help
    Replies: 2
    Last Post: Feb 15, 2011, 3:34 PM
  5. [CLOSED] Remote Filter using Httpproxy
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Dec 29, 2010, 8:08 AM

Tags for this Thread

Posting Permissions