expand collapse issue

Question

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

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);
}
}

<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>

avair · Answer

by making these changes also i still see it has expand and collapse behaviour more over with the previous code i used to face only one issue i.e Clicking on Add all all the child records were not selected vice versa i.e clicking on child records has allowed me to check Add All checkbox dynamically which is not working now

Rajkiran Swain · Answer

Based on the provided code snippets it appears that you are using Ext.NET framework for building your web application. In order to modify the behavior of the checkbox in the group header you can make the following changes: 1. Remove the event handling code that causes the expand/collapse behavior when the checkbox is clicked. In the `GroupClick` handler remove the following lines: e.stopEvent(); // Prevent event propagation return; This will allow the checkbox to be clicked without triggering the expand/collapse behavior. 2. Add an event listener to the checkbox to handle its click event separately. You can use the `addEventListener` method to bind a click event listener to the checkbox element. Modify the `updateGroupCheckbox` function to include the event listener code: function updateGroupCheckbox(view groupId) { var checkbox = view.el.down('.x-grid-group-hd[data-groupname=' + groupId + '] input[type=checkbox]'); checkbox.dom.addEventListener('click' function (event) { // Handle checkbox click event here event.stopPropagation(); // Prevent event propagation }); // ... } By adding this event listener you can handle the checkbox click event separately and prevent its propagation allowing you to perform custom actions without triggering the expand/collapse behavior. With these changes the checkbox in the group header should no longer exhibit the expand/collapse behavior when clicked.