expand collapse issue

Question

 Below is my group click code when trying to select the group i am calling toggleGroupSelection and updateGroupCheckbox functions

<GroupClick Handler="
                                                            var checkbox = e.getTarget('input[type=checkbox]');
                                                            if (checkbox) {
                                                            var groupHeader = checkbox.closest('.x-grid-group-hd');
                                                            if (groupHeader) {
                                                            // Clicked on group header checkbox
                                                            e.stopEvent(); // Prevent event propagation
                                                            var groupId = groupHeader.getAttribute('data-groupname');
                                                            toggleGroupSelection(this, groupId, checkbox.checked);
                                                            return;
                                                            }
                                                            }
                                                            // Allow expand/collapse behavior to continue
                                                            e.stopPropagation();">
                                                        </GroupClick>

 

function toggleGroupSelection(grid, groupId, checked) {
    var sm = grid.getSelectionModel();
    var store = grid.getStore();

    // Check if the group exists
    var group = store.getGroups().get(groupId);
    if (group) {
        var records = group.items;
        var indexes = records.map(function (record) {
            return store.indexOf(record);
        });
        if (checked) {
            sm.selectRange(indexes[0], indexes[indexes.length - 1], true);
        } else {
            sm.deselect(indexes);
        }

        // Call updateGroupCheckbox after updating selection
        updateGroupCheckbox(grid.getView(), groupId);
    }
}

function updateGroupCheckbox(view, groupId) {
    var sm = view.getSelectionModel();
    var store = view.getStore();
    var records = store.getGroups().get(groupId).items;
    var allSelected = records.every(function (record) {
        return sm.isSelected(record);
    });
    var checkbox = view.el.down('.x-grid-group-hd[data-groupname="' + groupId + '"] input[type=checkbox]');
    if (allSelected) {
        checkbox.dom.checked = true;
        checkbox.up('div').down('span').update('Remove All');
    } else {
        checkbox.dom.checked = false;
        checkbox.up('div').down('span').update('Add All');
    }
}

<td class="x-group-hd-container" colspan="2"><div data-groupname="Primary" class="x-grid-group-hd x-grid-group-hd-collapsible" nottabindex="0" hidefocus="on"><div class="x-grid-group-title" style="" data-qtip="Click to collapse. CTRL/click collapses all others"><div class="group-header"><input type="checkbox" id="Primary-checkbox" style="vertical-align: middle; margin-right: 5px;" data-tabindex-value="none" tabindex="-1" data-tabindex-counter="1"><span id="Primary-label">Select All</span></div></div></div></td>

actually this input type="checkbox" id="Primary-checkbox" should not have the expand and collapse behaviour but getting that behaviour.Below is the html code which i am trying to use to bind Add all in the group

<ext:GroupingSummary runat="server" ID="GroupingSummary1" EnableNoGroups="true" HideGroupedHeader="true" EnableGroupingMenu="false" StartCollapsed="true" GroupHeaderTplString='<div class="group-header"><input type="checkbox" id="{name}-checkbox" style="vertical-align: middle; margin-right: 5px;" /><span id="{name}-label">Add All</span></div>'></ext:GroupingSummary>