[CLOSED] CheckboxSelectionModel - checkbox deselect not fired on group deselect

[ATLAS]

Continuing work on my grid, I've hit an issue with CheckboxSelectionModel checkbox selection/deselection functions. Using the following code as an example, if I use the group select, I will get 'n' alerts from the fnCheckboxSelect function. If I use the group deselect, the fnCheckboxDeselect is not called. Both functions are correctly called if I individually select/deselect a checkbox and also if I use the CheckboxSelectionModel "master" select/deselect checkbox. I've used your MVC example code to reproduce. I suspect that it may be an ExtJS issue though!

Controller action code :-

        public StoreResult GetData()
        {
            var data = new List<object>();
            for (int i = 0; i < 10; i++)
            {
                
                data.Add( new { group = "Group 1", test = "Test " + i.ToString(), selected = (i % 2 == 0) ? true : false });
            }

            for (int i = 0; i < 8; i++)
            {

                data.Add(new { group = "Group 2", test = "Test " + i.ToString(), selected = (i % 2 == 0) ? true : false });
            }

            var responsive = new StoreResult();
            responsive.Total = data.Count;
            responsive.Data = data;
            return responsive;
        }

View code is :-

<script>
    var onLoad = function(store, records, successful) {
        var grid = App.GridPanel1,
            view = grid.getView(),
            sm = grid.getSelectionModel(),
            recordsToSelect = Ext.Array.filter(records, function (r) { return r.data.selected; });
                if (view.viewReady) {
                    sm.select(recordsToSelect);
                } else {
                    view.on("viewready", function () { sm.select(recordsToSelect); });
                }
    };
    

    function fnCheckboxSelect(e, record) {

        alert("fnCheckboxSelect");
    }

    function fnCheckboxDeselect(e, record) {
        alert("fnCheckboxDeselect");
    }


    var onGroupCommand = function (column, command, group) {
        if (command === 'SelectGroup') {
            column.grid.getSelectionModel().select(group.children, true);
            return;
        }
        else if (command === 'DeselectGroup') {
            column.grid.getSelectionModel().deselect(group.children, true);
            return;
        }

        Ext.Msg.alert(command, 'Group name: ' + group.name + '<br/>Count - ' + group.children.length);
    };


</script>




@(Html.X().GridPanel()
                .ID("GridPanel1")        
                .Height(500)        
                .Store(Html.X().Store()            
                .GroupField("group")
                            
                .Model(model => model.Add(Html.X().Model()
                        .Fields(f =>
                            {
                                f.Add(Html.X().ModelField().Name("group"));
                                f.Add(Html.X().ModelField().Name("test"));
                                f.Add(Html.X().ModelField().Name("selected").Type(ModelFieldType.Boolean));
                            })))
                            
                            
                            
                        .Proxy(Html.X().AjaxProxy()                
                                .Url(Url.Action("GetData"))                
                                .Reader(Html.X().JsonReader().Root("data"))
                              )            
                       .Listeners(events => events.Load.Fn = "onLoad")
               )

               .SelectionModel(
                        Html.X().CheckboxSelectionModel()
                        .CheckOnly(true)
                        .Listeners(l =>
                          {
                              l.Select.Fn = "fnCheckboxSelect";
                              l.Deselect.Fn = "fnCheckboxDeselect";
                          })
                        
                        )
                       
               .ColumnModel(            
                    Html.X().Column()
                            .Text("Test")
                            .DataIndex("test"),            
                            
                    Html.X().CheckColumn()
                            .Text("Selected")
                            .DataIndex("selected"),
                            
                   Html.X().CommandColumn()
                      .Hidden(true)
                      .GroupCommands(
                          Html.X().CommandFill(),

                          Html.X().GridCommand()
                              .Icon(Icon.TableRowInsert)
                              .CommandName("SelectGroup"),

                          Html.X().GridCommand()
                              .Icon(Icon.TableRowDelete)
                              .CommandName("DeselectGroup")
                          )
                  .Listeners(ls =>
                         ls.GroupCommand.Fn = "onGroupCommand"
                    )
              )
                            
              .Features(
                  Html.X().Grouping()
                      .ID("TestGrouping")
                      .GroupHeaderTplString("{name} ({rows.length} Element{[values.rows.length > 1 ? 's' : '']})")
                      .HideGroupedHeader(true)
                      .EnableGroupingMenu(false)
                      .StartCollapsed(true),

                  Html.X().RowWrap()
              )
                                                       
 )

[Daniil]

Hi @ATLAS.

The select and deselect method don't suppress events by default. It is why the Select event does fire in your select call.

However, you pass true as the second argument of your deselect call, it suppresses the event.

Please look at:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.selection.Model-method-select
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.selection.Model-method-deselect

[ATLAS]

Hi @ATLAS.

The select and deselect method don't suppress events by default. It is why the Select event does fire in your select call.

However, you pass true as the second argument of your deselect call, it suppresses the event.

Please look at:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.selection.Model-method-select
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.selection.Model-method-deselect

Thanks Daniil. Please close thread.