[OPEN] [#471] The problem of automatically selecting checkbox in datagrid [Ext.Net]

[WojciechK]

Hello, in the attached picture, I have a grid which has-pages. On the first page I select all the items and some event which automatically selects me to select all checkbox. However, if you go to the next page, none of the elements is not already selected.

Question: How can I dispose event selecting checbox all, when you select last item in the list on the page.

[Daniil]

Hi @WojciechK,

Welcome to the Ext.NET forums!

Do you use remote or local paging?

[WojciechK]

Hi Thanks for help

I set Pagging inside Grid

<ext:GridPanel ID="gridName">
    ....
    <BottomBar>
        <ext:PagingToolbar ID="Pagger_ED" HideRefresh="true" />
    </BottomBar>
</ext:GridPanel>

*To show you code I don't use [CODE] because it's make a mess

[Daniil]

I've edited your post, it looks good now.

Please post the Store's configuration.

[WojciechK]

            
<Store>
   <ext:Store ID="gridName" PageSize="9">
      <Model>
         <ext:Model IDProperty="Code">
            <Fields>
               <ext:ModelField Name="Id" Type="Int" />
               <ext:ModelField Name="Code" Type="String" />
            </Fields>  
         </ext:Model>
      </Model>
   </ext:Store>
</Store>

[Daniil]

So, you use locale paging. Please follow this thread:
http://forums.ext.net/showthread.php?26559

[WojciechK]

Thanks a lot. I did not mean impossibility select all checkbox at a time, it does not have a problem. But selecting all the elements on one page, it automatically selects the checkbox in the header, and it should not do that, because on the following pages are not yet checked checkboxes. The same problem occurs in the example: https://examples2.ext.net/#/GridPane...box_Selection/

[Daniil]

Got it.

It needs to override the updateHeaderState method as well.

Please try this:

Ext.selection.CheckboxModel.override({
    // selectAll and deselectAll overrides

    updateHeaderState: function() {
        // check to see if all records are selected
        var me = this,
            store = me.store,
            storeCount = store.getTotalCount(),
            views = me.views,
            hdSelectStatus = false,
            selectedCount = 0,
            selected, len, i;
            
        if (!store.buffered && storeCount > 0) {
            selected = me.view.panel.getSelectionMemory().selectedIds;
            hdSelectStatus = true;
            for (s in selected) {
                ++selectedCount;
            }

            hdSelectStatus = storeCount === selectedCount;
        }
            
        if (views && views.length) {
            me.toggleUiHeader(hdSelectStatus);
        }
    }
});

I've updated the online sample.
https://examples2.ext.net/#/GridPane...box_Selection/

[WojciechK]

Many thanks for your help. There is just a tiny problem. And it occurs also in the example. Well, if you select items on the first page, then go to another and return to the first, is again header checkbox is selected.

[Daniil]

One more override is required.

Ext.grid.plugin.SelectionMemory.override({
    memoryRestoreState : function (records) {
        if (this.store !== null && !this.store.buffered && !this.grid.view.bufferedRenderer) {
            var i = 0,
                ind,
                sel = [],
                len,
                all = true,
                cm = this.headerCt;

            if(!records){
                records = this.store.getAllRange(); // instead of getRange
            }

            if (!Ext.isArray(records)) {
                records = [records];
            } 

            if (this.selModel.isLocked()) {
                this.wasLocked = true;
                this.selModel.setLocked(false);
            }
            
            if (this.selModel instanceof Ext.selection.RowModel) {    
                for (ind = 0, len = records.length; ind < len; ind++ ) {
                    var rec = records[ind],
                        id = rec.getId();

                    if ((id || id === 0) && !Ext.isEmpty(this.selectedIds[id])) {
                        sel.push(rec);
                    } else {
                        all = false;
                    }

                    ++i;
                }                
               
                if (sel.length > 0) {                
                    this.surpressDeselection = true;
                    this.selModel.select(sel, false, !this.grid.selectionMemoryEvents);
                    this.surpressDeselection = false;
                }
            } else {
                    for (ind = 0, len = records.length; ind < len; ind++ ) {
                    var rec = records[ind],
                        id = rec.getId();

                    if ((id || id === 0) && !Ext.isEmpty(this.selectedIds[id])) {
                        if(this.selectedIds[id].dataIndex) 
                        {
                            var colIndex = cm.getHeaderIndex(cm.down('gridcolumn[dataIndex=' + this.selectedIds[id].dataIndex  +']'))
                            this.selModel.setCurrentPosition({
                                row : i,
                                column : colIndex
                            });
                        }
                        return false;
                    }

                    ++i;
                }
            }

            if (this.selModel instanceof Ext.selection.CheckboxModel) {
                if (all) {
                    this.selModel.toggleUiHeader(true);
                } else {
                    this.selModel.toggleUiHeader(false);
                }
            }

            if (this.wasLocked) {
                this.selModel.setLocked(true);
            }
        }
    }
});

It would be nice to have this functionality built-in. Maybe, we will be able to include it to v3 at some point. Created an Issue.
https://github.com/extnet/Ext.NET/issues/471