Selection persist upon filtering

  1. #1

    Selection persist upon filtering

    Hello,

    I have a problem with a GridPanel with RowSelectionModel. I select one (or more) rows, then filter (string filter on any column) so that the selected rows are not displayed, then select one o more rows. At this point, clic a button that call a DirectEvent passing grid.getSelectionModel().getSelections().length and grid.getRowsValues({selectedOnly:true})

    The weird behaviuor is that grid.getRowsValues({selectedOnly:true}) contains all the selected rows, even those that are not displayed due to the filter applied, and grid.getSelectionModel().getSelections() contains only the selected rows that are currently displayed, the ones that I need. So I've tried to send grid.getSelectionModel().getSelections() but got "too much recursion" error (I've used Ext.Encode() method to send the parameter).

    Then, how can I send only the selected and displayed rows values to codebehind?
    Thanks in advance.
    Regards
  2. #2
    Hi,

    There is no such behavior in version 1.7. The filtered rows are nicely "removed" from the selection, instead. The following sample demonstrates:

    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <!DOCTYPE html>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = new List<Company> 
             { 
                 new Company("3m Co", 71.72, 0.02, 0.03),
                 new Company("Alcoa Inc", 29.01, 0.42, 1.47),
                 new Company("Altria Group Inc", 83.81, 0.28, 0.34),
                 new Company("American Express Company", 52.55, 0.01, 0.02),
                 new Company("American International Group, Inc.", 64.13, 0.31, 0.49),
                 new Company("AT&T Inc.", 31.61, -0.48, -1.54),
                 new Company("Boeing Co.", 75.43, 0.53, 0.71),
                 new Company("Caterpillar Inc.", 67.27, 0.92, 1.39),
                 new Company("Citigroup, Inc.", 49.37, 0.02, 0.04),
                 new Company("E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28),
                 new Company("Exxon Mobil Corp", 68.1, -0.43, -0.64),
                 new Company("General Electric Company", 34.14, -0.08, -0.23),
                 new Company("General Motors Corporation", 30.27, 1.09, 3.74),
                 new Company("Hewlett-Packard Co.", 36.53, -0.03, -0.08),
                 new Company("Honeywell Intl Inc", 38.77, 0.05, 0.13),
                 new Company("Intel Corporation", 19.88, 0.31, 1.58),
                 new Company("International Business Machines", 81.41, 0.44, 0.54),
                 new Company("Johnson & Johnson", 64.72, 0.06, 0.09),
                 new Company("JP Morgan & Chase & Co", 45.73, 0.07, 0.15),
                 new Company("McDonald\"s Corporation", 36.76, 0.86, 2.40),
                 new Company("Merck & Co., Inc.", 40.96, 0.41, 1.01),
                 new Company("Microsoft Corporation", 25.84, 0.14, 0.54),
                 new Company("Pfizer Inc", 27.96, 0.4, 1.45),
                 new Company("The Coca-Cola Company", 45.07, 0.26, 0.58),
                 new Company("The Home Depot, Inc.", 34.64, 0.35, 1.02),
                 new Company("The Procter & Gamble Company", 61.91, 0.01, 0.02),
                 new Company("United Technologies Corporation", 63.26, 0.55, 0.88),
                 new Company("Verizon Communications", 35.57, 0.39, 1.11),
                 new Company("Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63)
             };
    
    
    
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataBind();
                RowSelectionModel sm = this.GridPanel1.SelectionModel.Primary as RowSelectionModel;
                sm.SelectedRows.Add(new SelectedRow(1));
                sm.SelectedRows.Add(new SelectedRow("Caterpillar Inc."));
            }
        }
    
        protected void Button1_Click(object sender, DirectEventArgs e)
        {
            RowSelectionModel sm = this.GridPanel1.SelectionModel.Primary as RowSelectionModel;
    
            StringBuilder sb = new StringBuilder();
    
            foreach (SelectedRow row in sm.SelectedRows)
            {
                sb.AppendFormat("RecordID: {0}&nbsp;&nbsp;&nbsp;&nbsp;Row index: {1}<br/>", row.RecordID, row.RowIndex);
            }
            this.Label1.Html = sb.ToString();
        }
    
        protected void Clear_Click(object sender, DirectEventArgs e)
        {
            RowSelectionModel sm = this.GridPanel1.SelectionModel.Primary as RowSelectionModel;
            sm.SelectedRows.Clear();
            sm.UpdateSelection();
        }
    
        protected void SubmitSelection(object sender, DirectEventArgs e)
        {
            string json = e.ExtraParams["Values"];
    
            Dictionary<string, string>[] companies = JSON.Deserialize<Dictionary<string, string>[]>(json);
    
            StringBuilder sb = new StringBuilder();
            sb.Append("<table  cellspacing='15'>");
            bool addHeader = true;
    
            foreach (Dictionary<string, string> row in companies)
            {
                if (addHeader)
                {
                    sb.Append("<tr>");
                    foreach (KeyValuePair<string, string> keyValuePair in row)
                    {
                        sb.Append("<td style='white-space:nowrap;font-weight:bold;'>");
    
                        sb.Append(keyValuePair.Key);
    
                        sb.Append("</td>");
                    }
                    sb.Append("</tr>");
    
                    addHeader = false;
                }
    
                sb.Append("<tr>");
                foreach (KeyValuePair<string, string> keyValuePair in row)
                {
                    sb.Append("<td style='white-space:nowrap;'>");
    
                    sb.Append(keyValuePair.Value);
    
                    sb.Append("</td>");
                }
                sb.Append("</tr>");
            }
            sb.Append("</table>");
            this.Label1.Html = sb.ToString();
        }
    
        public class Company
        {
            public Company(string name, double price, double change, double pctChange)
            {
                this.Name = name;
                this.Price = price;
                this.Change = change;
                this.PctChange = pctChange;
            }
    
            public Company()
            {
            }
    
            public string Name { get; set; }
            public double Price { get; set; }
            public double Change { get; set; }
            public double PctChange { get; set; }
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></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 () {
                    #{PriceFilter}.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(#{PriceFilter}.getValue(), "Name", 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>
        <ext:ResourceManager runat="server" />
    
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:JsonReader IDProperty="Name">
                    <Fields>
                        <ext:RecordField Name="Name" />
                        <ext:RecordField Name="Price" />
                        <ext:RecordField Name="Change" />
                        <ext:RecordField Name="PctChange" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
    
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            StoreID="Store1"
            StripeRows="true"
            Title="Company List"
            AutoExpandColumn="Company"
            Collapsible="true"
            Width="600"
            Height="350">
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="Name" />
                    <ext:Column Header="Price" Width="75" DataIndex="Price">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column Header="Change" Width="75" DataIndex="Change" />
                    <ext:Column Header="Change" Width="75" DataIndex="PctChange" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
            <View>
                <ext:GridView runat="server">
                    <HeaderRows>
                        <ext:HeaderRow>
                            <Columns>
                                <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 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>
            <Buttons>
                <ext:Button ID="Button4" runat="server" Text="Submit with values">
                    <DirectEvents>
                        <Click OnEvent="SubmitSelection">
                            <ExtraParams>
                                <ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly:true}))" Mode="Raw" />
                            </ExtraParams>
                        </Click>
                    </DirectEvents>
                </ext:Button>
    
                <ext:Button ID="Button2" runat="server" Text="Clear">
                    <DirectEvents>
                        <Click OnEvent="Clear_Click" />
                    </DirectEvents>
                </ext:Button>
            </Buttons>
        </ext:GridPanel>
    
        <div style="width: 590px; border: 1px solid gray; padding: 5px;">
            <ext:Label ID="Label1" runat="server" />
        </div>
    </body>
    </html>
    If this is not your case then you can try one of the tricks provided in this post.

    Hope it helps.
    Last edited by Dimitris; Jun 14, 2016 at 11:58 AM. Reason: Additional information

Similar Threads

  1. Replies: 9
    Last Post: Feb 18, 2015, 5:44 AM
  2. Persist selection with pagination
    By testix in forum 1.x Help
    Replies: 6
    Last Post: May 21, 2014, 1:35 PM
  3. Replies: 5
    Last Post: Jul 12, 2013, 4:29 PM
  4. [CLOSED] Possible bug: Viewstate doesn't persist
    By drgw74 in forum 1.x Premium Help
    Replies: 2
    Last Post: Feb 03, 2009, 6:00 AM
  5. [CLOSED] Persist selection over pagination
    By methode in forum 1.x Premium Help
    Replies: 7
    Last Post: Nov 30, 2008, 12:38 PM

Tags for this Thread

Posting Permissions