expand collapse issue

avair

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

Select All

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

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

avair3y ago
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
0
Rajkiran Swain3y ago
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.
0