[CLOSED] Header Checkbox is not working properly for Infinite Scroll Grid

  1. #1

    [CLOSED] Header Checkbox is not working properly for Infinite Scroll Grid

    Hi Team,

    Recently we have upgraded to Ext.Net 4.5 from Ext.Net 2.5, In 2.5 version we were using below override script to show header Checkbox for Infinite Scroll grid. But when we upgraded to new version, this override script is not working and also we are facing issues with select all option.
    Ext.selection.CheckboxModel.override({
            addCheckbox: function (view, initial) {
                var me = this,
                    checkbox = me.injectCheckbox,
                    headerCt = view.headerCt;
    
    
    
    
                if (checkbox !== false) {
                    if (checkbox == 'first') {
                        checkbox = 0;
                    } else if (checkbox == 'last') {
                        checkbox = headerCt.getColumnCount();
                    }
                    Ext.suspendLayouts();
                    headerCt.add(checkbox, me.getHeaderConfig());
                    Ext.resumeLayouts();
                }
    
    
                if (initial !== true) {
                    view.refresh();
                }
            },
    
    
            onHeaderClick: function (headerCt, header, e) {
                if (header.isCheckerHd) {
                    e.stopEvent();
                    var me = this,
                        isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
                    // Prevent focus changes on the view, since we're selecting/deselecting all records
                    me.preventFocus = true;
                    if (isChecked) {
                        me.deselectAll();
                        me.toggleUiHeader(false); // added
                        App.hdnIsSelectAllRows.setValue(0);
                    } else {
                        me.selectRange(0, me.getStore().getTotalCount() - 1)
                        me.toggleUiHeader(true); // added
                        App.hdnIsSelectAllRows.setValue(1);
                    }
                    delete me.preventFocus;
                }
            }
        });
    Please help me out.

    Thank you
    Last edited by fabricio.murta; Jul 28, 2018 at 3:40 AM. Reason: no feedback from the user in 7+ days
  2. #2
    Hello @iansriley!

    Can you provide a full test case, maybe based on the Infinite scrolling example, so that we may be sure we're dealing with the issue you're facing, before we try to get you a solution or updated override?
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello @fabricio.murta,


    Thank you for your quick reply.

    To display the header checkbox in grid panel we have used override script for checkbox selection model.

    Below code, is working fine if we check the header checkbox and slowly scroll down the grid panel then all rows are checked properly.
    Only the Problem if we drag the scroll bar to the down, then only all row's checkboxes are not checking in the grid panel.

    Below commented script code is working fine in Ext.Net 2.5

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InfiniteScroll.aspx.cs" Inherits="InfiniteScrollGrid.InfiniteScroll" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Infinite Scrolling - Ext.NET Examples</title>
        <script runat="server">
            protected void Store_ReadData(object sender, StoreReadDataEventArgs e)
            {
                Store store = (Store)sender;
                List<StockQuotation> data = new List<StockQuotation>();
    
    
                int start = e.Start,
                    limit = e.Limit;
                Random randow = new Random();
                DateTime now = DateTime.Now;
    
    
                for (int i = start + 1; i <= start + limit; i++)
                {
                    StockQuotation qoute = new StockQuotation()
                    {
                        Company = "Company " + i,
                        Price = randow.Next(0, 200),
                        LastUpdate = now
                    };
    
    
                    data.Add(qoute);
                }
                store.Data = data;
                e.Total = 5000;
            }
    
    
            class StockQuotation
            {
                public string Company { get; set; }
                public int Price { get; set; }
                public DateTime LastUpdate { get; set; }
            }
        </script>
        <script type="text/javascript">
            Ext.selection.CheckboxModel.override({
                // this code was using in Ext.Net 2.5
                //addCheckbox: function (view, initial) {
                //    var me = this,
                //        checkbox = me.injectCheckbox,
                //        headerCt = view.headerCt;
    
    
    
    
                //    if (checkbox !== false) {
                //        if (checkbox == 'first') {
                //            checkbox = 0;
                //        } else if (checkbox == 'last') {
                //            checkbox = headerCt.getColumnCount();
                //        }
                //        Ext.suspendLayouts();
                //        headerCt.add(checkbox, me.getHeaderConfig());
                //        Ext.resumeLayouts();
                //    }
    
    
                //    if (initial !== true) {
                //        view.refresh();
                //    }
                //},
                addCheckbox: function (view) {
                    var me = this,
                        checkboxIndex = me.injectCheckbox,
                        headerCt = view.headerCt;
    
    
                    // Preserve behaviour of false, but not clear why that would ever be done. 
                    if (checkboxIndex !== false) {
                        if (checkboxIndex === 'first') {
                            checkboxIndex = 0;
                        } else if (checkboxIndex === 'last') {
                            checkboxIndex = headerCt.getColumnCount();
                        }
                        Ext.suspendLayouts();
    
    
                        // Cannot select all in a buffered store. 
                        // We do not have all the records 
                        //if (view.getStore().isBufferedStore) {
                        //    me.showHeaderCheckbox = false;
                        //}
                        me.column = headerCt.add(checkboxIndex, me.column || me.getHeaderConfig());
                        Ext.resumeLayouts();
                    }
                },
                //this code was using in Ext.Net 2.5 application
                //onHeaderClick: function (headerCt, header, e) {
                //    if (header.isCheckerHd) {
                //        e.stopEvent();
                //        var me = this,
                //            isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
                //        // Prevent focus changes on the view, since we're selecting/deselecting all records
                //        me.preventFocus = true;
                //        if (isChecked) {
                //            me.deselectAll();
                //            me.toggleUiHeader(false); // added
                //            App.hdnIsSelectAllRows.setValue(0);
                //        } else {
                //            me.selectRange(0, me.getStore().getTotalCount() - 1)
                //            me.toggleUiHeader(true); // added
                //            App.hdnIsSelectAllRows.setValue(1);
                //        }
                //        delete me.preventFocus;
                //    }
                //}
                onHeaderClick: function (headerCt, header, e) {
                    var me = this,
                        store = me.store,
                        column = me.column,
                        isChecked, records, i, len,
                        selections, selection;
                    if (me.showHeaderCheckbox !== false && header === me.column && me.mode !== 'SINGLE') {
                        e.stopEvent();
                        isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
    
    
                        // selectAll will only select the contents of the store, whereas deselectAll 
                        // will remove all the current selections. In this case we only want to 
                        // deselect whatever is available in the view. 
                        if (isChecked) {
                            records = [];
                            selections = this.getSelection();
                            for (i = 0, len = selections.length; i < len; ++i) {
                                selection = selections[i];
                                if (store.indexOf(selection) > -1) {
                                    records.push(selection);
                                }
                            }
                            if (records.length > 0) {
                                me.deselect(records);
                            }
                            me.toggleUiHeader(false);
                            App.hdnIsSelectAllRows.setValue(0);
                        } else {
                            me.selectRange(0, me.getStore().data.getCount() - 1);
                            App.hdnIsSelectAllRows.setValue(1);
                            me.toggleUiHeader(true);
                        }
                    }
                },
                toggleUiHeader: function (isChecked) {
                    var view = this.views[0],
                        headerCt = view.headerCt,
                        checkHd = headerCt.child('gridcolumn[isCheckerHd]'),
                        cls = this.checkerOnCls;
    
    
                    if (checkHd) {
                        if (isChecked) {
                            checkHd.addCls(cls);
                        } else {
                            checkHd.removeCls(cls);
                        }
                    }
                }
            });
            function checkAllCheckBox(store, records, successful, eOpts) {
                if (App.hdnIsSelectAllRows.getValue() == 1) {
                    var orderIDs = App.hdnUnSelectedOrders.getValue();
                    App.GridPanel1.getSelectionModel().selectRange(0, App.GridPanel1.getStore().data.getCount() - 1);
                    if (orderIDs != undefined && orderIDs != '') {
                        Ext.each(orderIDs.split(','), function (item) {
                            App.GridPanel1.getSelectionModel().deselect(App.GridPanel1.store.findExact("ItemID", parseInt(item)));
                        });
                    }
                    else {
                        App.GridPanel1.getSelectionModel().toggleUiHeader(true);
                    }
    
    
                }
    
    
            }
            function selectionchange(records, isProposal, isSelectedAll) {
                var dtext = '';
                if (isSelectedAll == 1) {
                    var grid = App.GridPanel1
                    var selections = []
                    selections = grid.getSelectionModel().getSelection();
                    var records = [];
                    for (var i = 0; i <= grid.store.data.getArray().length; i++) {
                        if (records == undefined) {
                            records = grid.store.data.getArray()[i];
                        }
                        else {
                            records = records.concat(grid.store.data.getArray()[i]);
                        }
    
    
                    }
                    var nonSelectedRecords = [];
                    var orderIDs = '';
                    nonSelectedRecords = Ext.Array.difference(records, selections);
                    Ext.Array.forEach(nonSelectedRecords, function (item) {
                        if (item) {
                            orderIDs = orderIDs + item.data.ItemID + ',';
                        }
                    });
                    orderIDs = orderIDs.substring(0, orderIDs.length - 1);
                    App.hdnUnSelectedOrders.setValue(orderIDs);
                    return orderIDs;
                }
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
    
            <h1>Infinite Scrolling</h1>
    
    
            <p>Introduced with Ext.Net 2, the Infinite Scrolling support for GridPanels enables you to load any number of records into a grid without paging.</p>
            <p>The grid uses a virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.</p>
            <p>Also, a paging-aware Ext.data.BufferedStore makes the grid load only the required number of records to be shown in the grid view, respecting the leading and trailing records buffer for smoother scrolling..</p>
    
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Width="500"
                Height="500"
                Title="Stock Price">
                <Store>
                    <ext:Store
                        ID="Store1"
                        runat="server"
                        Buffered="true"
                        PageSize="50"
                        TrailingBufferZone="10"
                        LeadingBufferZone="10"
                        PurgePageCount="0"
                        OnReadData="Store_ReadData">
                        <Proxy>
                            <ext:PageProxy>
                                <Reader>
                                    <ext:JsonReader RootProperty="data" />
                                </Reader>
                            </ext:PageProxy>
                        </Proxy>
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="Company" />
                                    <ext:ModelField Name="Price" />
                                    <ext:ModelField Name="LastUpdate" />
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Listeners>
                            <Prefetch Handler="setTimeout(function () {checkAllCheckBox();},1000);"></Prefetch>
                        </Listeners>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:RowNumbererColumn
                            runat="server"
                            Width="50" />
                        <ext:Column
                            runat="server"
                            Text="Company"
                            DataIndex="Company"
                            Flex="1" />
                        <ext:Column
                            runat="server"
                            Text="Price, $"
                            DataIndex="Price"
                            Width="70"
                            Align="Center" />
                        <ext:Column
                            runat="server"
                            Text="Last Update"
                            DataIndex="LastUpdate"
                            Width="160">
                            <Renderer Format="Date" FormatArgs="'n/j/Y g:i:s A'" />
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:CheckboxSelectionModel ID="chkSelection" runat="server" Mode="Simple" ShowHeaderCheckbox="true" PruneRemoved="false">
                        <Listeners>
                            <SelectionChange Handler="setTimeout(function () {selectionchange(#{GridPanel1}.getSelectionModel().selected.items, 0, App.hdnIsSelectAllRows.getValue());},1000); "></SelectionChange>
                        </Listeners>
                    </ext:CheckboxSelectionModel>
                </SelectionModel>
                <ViewConfig TrackOver="false" />
            </ext:GridPanel>
        </form>
        <ext:Hidden runat="server" ID="hdnIsSelectAllRows" Text="0" />
        <ext:Hidden runat="server" ID="hdnUnSelectedOrders" Text="" />
    </body>
    </html>
  4. #4
    Hello @iansriley!

    I see the problem. Well, I get a clear javascript error thrown when I scroll fast in your example, so that helps in finding the issue.

    I'm not sure how it used to work back in 2.5 for you, but check this out:

    Change your line 173 to look like this:

    App.GridPanel1.getSelectionModel().selectRange(view.all.startIndex, view.all.endIndex);
    As the store has all records loaded -but- selectively shows them, then all you need is the current grid view's loaded items (what is consuming resources in the page's DOM). Oh, and I just added a line var view = App.GridPanel1.getView(); as the first line in the enclosing function.

    Let us know if this helps with the sample and with your actual scenario. At least as far as the javascript error it throws is concerned -- and effective view rows selection -- is concerned, this should do.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello @fabricio.murta,

    Thank you for your solution, Javascript error has been resolved but now we are facing another issue with header selection.
    The issue is when we are scrolling down after selecting the header checkbox, some of the records are not selecting and remaining records are selecting properly. Please see below image for your reference.

    Click image for larger version. 

Name:	InfiniteScrollGrid.PNG 
Views:	117 
Size:	50.7 KB 
ID:	25148

    Thank you
  6. #6
    Hello @iansriley!

    You have another call for the same selectRange() method within the onHeaderClick override. Have you tried to apply the same change therein? (to get the view from there, all you need is me.getView()).

    I hope this helps!

    EDIT: I tried scrolling around over and over, and couldn't reproduce the scenario you displayed. It always sits for a while, then selects all records.
  7. #7
    Hello again @iansriley!

    I could reproduce it if I paged down by clicking the scrollbar. So I came up with this alternative solution for you.

    Instead of handling selectionchange event from the CheckboxSelectionModel, why not just select the entries as they are added to the grid's view?

    With this you can also (and perhaps should) remove handling the prefetch store event.

    So, use a function to handle the view rows adding like to this:

    function handleRowAdding(records, position, dom_records) {
        var me = this,
            isCheckedAll = App.hdnIsSelectAllRows.getValue() === "1",
            selectionModel = me.getSelectionModel();
    
        if (isCheckedAll) {
            console.log("selecting " + records.length + " records.");
            selectionModel.select(records, true);
        }
    }
    Then, bind the handler to the ItemAdd event in your grid's view:

    <ViewConfig runat="server" TrackOver="false">
        <Listeners>
            <ItemAdd Fn="handleRowAdding" />
        </Listeners>
    </ViewConfig>
    You'll still need the overrides for the initial selection toggling, keeping the header checkbox and to work, and toggling the header checkbox respectively. Just the custom handlers for data prefetch and selection change that may be replaced by the solution above.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  8. #8
    Hello again @iansriley!

    Been a while we replied you here, and still no news about how the outcome went on your side with the suggestion we provided.

    Did it help you get your page working smoothly, or do you still need help on this matter? We're looking forward to your feedback.

    Just to let you know, we may mark this thread as closed if you don't post a follow-up in 7+ days from now. That's not going to prevent you from posting here afterwards, though.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 3
    Last Post: May 22, 2014, 4:12 PM
  2. Infinite scroll and scroll bar position
    By oooh in forum 2.x Help
    Replies: 2
    Last Post: Apr 14, 2014, 7:49 PM
  3. Replies: 6
    Last Post: Mar 31, 2014, 1:26 PM
  4. [CLOSED] GridPanel - Infinite scroll not working
    By Arohan in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 26, 2014, 3:26 AM
  5. Replies: 5
    Last Post: Feb 23, 2012, 8:00 AM

Posting Permissions