[CLOSED] Buffered Scrolling With Check box selection model - PrunedRemove. Get selected Records Across Pages

  1. #1

    [CLOSED] Buffered Scrolling With Check box selection model - PrunedRemove. Get selected Records Across Pages

    Hi,

    I have a gridpanel that uses the buffered scrolling feature with check box selection model. see my sample below. The problem is the selected records are not accessible in the selection model selected property when they are scrolled a few pages out of the view.

    Test case:

    Load Sample
    Select record 1
    scrolll and select record 30 and start scrolling again.
    Notice the selected count changes.
    If I continue selecting and scrolling you realize that the selcted count continues to change.

    Is there a way to know exactly all the selected records. Because if I scroll up the gridpanel still selects the prevously selected records. but some of the records selected on other pages are not available.

    How can I get a list of all the selected records across pages?

    I am using Ext.NET 2.1.1 ,Includes Ext JS 4.1.1. I am not able to upgrade and we will be releasing at the end of this month. Initial testing with the latest SVN shows alot of issues that we don't have the time to try and resolve.

    Please advise.



    <%@ 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)
            {
                this.Store1.DataSource = this.TestData(5000);
                this.Store1.DataBind();
            }
        }
    
        private object[] TestData(int count)
        {
            string[] firstNames = new string[] { "Ed", "Tommy", "Aaron", "Abe", "Jamie", "Adam", "Dave", "David", "Jay", "Nicolas", "Nige" };
            string[] lastNames = new string[] { "Spencer", "Maintz", "Conran", "Elias", "Avins", "Mishcon", "Kaneda", "Davis", "Robinson", "Ferrero", "White" };
            int[] ratings = new int[] { 1, 2, 3, 4, 5 };
            int[] salaries = new int[] { 100, 400, 900, 1500, 1000000 };
    
            object[] data = new object[count];
            Random rnd = new Random();
    
            for (int i = 0; i < count; i++)
            {
                int ratingId = rnd.Next(ratings.Length);
                int salaryId = rnd.Next(salaries.Length);
                int firstNameId = rnd.Next(firstNames.Length);
                int lastNameId = rnd.Next(lastNames.Length);
    
                int rating = ratings[ratingId];
                int salary = salaries[salaryId];
                string name = String.Format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
                string id = "rec-" + i;
    
                data[i] = new object[] { id, name, rating, salary };
            }
    
            return data;
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Buffered Scrolling - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <script>
            var go = function () {
                var me = this,
                    field = me.up('toolbar').down('#gotoLine');
    
                if (field.isValid()) {
                    me.up('grid').verticalScroller.scrollTo(field.getValue() - 1, true);
                }
            };
    
            var selectionChanged = function (grid, selected, eOpts) {
                App.txtSelected.setValue(selected.length.toString());
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <h1>
            Buffered Scrolling</h1>
        <p>
            Ext.Net 2's brand new grid supports infinite scrolling, which enables you to load
            any number of records into a grid without paging.</p>
        <p>
            The new grid uses a virtualized scrolling system to handle potentially infinite
            data sets without any impact on client side performance.</p>
        <p>
            This example illustrates loading of all the records up front and buffering the rendering.</p>
        <ext:GridPanel ID="GridPanel1" runat="server" Title="Bufffered Grid of 5,000 random records"
            Width="700" Height="500">
            <Store>
                <ext:Store ID="Store1" runat="server" PageSize="5000" Buffered="true">
                    <Model>
                        <ext:Model ID="Model1" runat="server">
                            <Fields>
                                <ext:ModelField Name="id" />
                                <ext:ModelField Name="name" />
                                <ext:ModelField Name="rating" Type="Int" />
                                <ext:ModelField Name="salary" Type="Float" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <View>
                <ext:GridView ID="GridView1" runat="server" TrackOver="false" />
            </View>
            <SelectionModel>
                <ext:CheckboxSelectionModel  ShowHeaderCheckbox ="false"  runat="server" PruneRemoved="false">
                    <Listeners>
                        <SelectionChange Fn="selectionChanged" />
                    </Listeners>
                </ext:CheckboxSelectionModel>
            </SelectionModel>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="40" Sortable="false" />
                    <ext:Column ID="Column1" runat="server" Text="Name" Flex="1" DataIndex="name" />
                    <ext:Column ID="Column2" runat="server" Text="Rating" Width="125" DataIndex="rating" />
                    <ext:Column ID="Column3" runat="server" Text="Salary" Width="125" DataIndex="salary"
                        Align="Right">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <BottomBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:NumberField ID="NumberField1" runat="server" FieldLabel="Jump to row" MinValue="1"
                            MaxValue="5000" AllowDecimals="false" ItemID="gotoLine" />
                        <ext:Button ID="Button1" runat="server" Text="Go">
                            <Listeners>
                                <Click Fn="go" />
                            </Listeners>
                        </ext:Button>
                        <ext:TextArea IDMode ="Static" runat="server" ID="txtSelected" FieldLabel="Selected" />
                    </Items>
                </ext:Toolbar>
            </BottomBar>
        </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by Baidaly; Mar 12, 2013 at 1:13 AM. Reason: [CLOSED]
  2. #2
    Hello!

    We are investigating.
  3. #3
    thanks, hope you guys can find a fix soon.
  4. #4
    Hello,

    The issue appears to be fixed in ExtJS 4.2 (SVN trunk) if use a BufferedRender plugin instead of a buffered Store.

    Unfortunately, we can't provide a permanent fix for the v2.1 release.

    But there should be a possibility to organize a persistent store to keep selected records across all pages.

    Here is a possible workaround based on this one.
    http://www.sencha.com/forum/showthre...l=1#post873092

    The selectedRowIds property should keep selected records' ids across all pages.

    Workaround
    <ext:CheckboxSelectionModel runat="server" PruneRemoved="false" ShowHeaderCheckbox="false">
        <CustomConfig>
            <ext:ConfigItem Name="selectedRowIds" Value="new Ext.util.HashMap()" Mode="Raw" />
        </CustomConfig>
        <Listeners>
            <SelectionChange Handler="App.txtSelected.setValue(this.selectedRowIds.getCount().toString());" />
            <Select Handler="this.selectedRowIds.add(record.getId(), true);" />
            <Deselect Handler="if (App.Store1.getById(record.getId())) {
                                   this.selectedRowIds.removeAtKey(record.getId(), true);
                               }" />
        </Listeners>
    </ext:CheckboxSelectionModel>
  5. #5
    Hi,

    Thanks for the workaround. Works OK for now. this can be marked as resolved.

Similar Threads

  1. Replies: 11
    Last Post: Mar 14, 2012, 10:12 AM
  2. Replies: 2
    Last Post: Aug 09, 2011, 10:38 AM
  3. Replies: 10
    Last Post: Nov 01, 2010, 11:33 AM
  4. Replies: 0
    Last Post: Sep 01, 2010, 2:35 PM
  5. Replies: 2
    Last Post: Mar 21, 2010, 1:18 PM

Posting Permissions