Hi Adam,

As my teammate Georgi is currently out of office I will assist you in the meantime.

Hello,

Thank you for your prompt response and for providing additional details regarding your implementation of the collapsible column group within the tree-grid component. I appreciate your patience as we work through these challenges together.

I have been looking into your questions and:

Regarding the described behavior you encountered with the click event not firing on the igx-icon, I understand this can be frustrating. In the provided sample, the click event should indeed trigger the expandCollapse method. To troubleshoot this, I made some additional changes to observe the behavior more closely.

<igx-icon
    [attr.draggable]="false"
    #target="tooltipTarget"
    [igxTooltipTarget]="tooltipRef"
    [showDelay]="0"
    [hideDelay]="0"
    (click)="expandCollapse(column.expanded)">
    {{ column.expanded ? 'expand_more' : 'chevron_right' }}
</igx-icon>

And the corresponding TypeScript method:

public expandCollapse(expanded) {
    console.log('Icon clicked.');
    if (!expanded) {
        console.log('Column expanded.');
    } else {
        console.log('Column collapsed.');
    }
    this.isExpandOrCollapse = true;
}

With these changes, you can now observe in the console whether the icon is clicked and whether the column is expanded or collapsed. Additionally, you can utilize the expanded parameter passed to the expandCollapse method to check if the column is expanded or collapsed for your custom implementation and logic in your project.

The described scenario could be observed here:

Regarding your further explanations about using a tree grid, it's important to note that the same principle outlined in the grid sample I provided also applies to the tree-grid component. While the functionality may differ slightly due to the hierarchical nature of the tree-grid, the underlying concept remains consistent.

Currently, the rowEditExit event cannot be stopped or canceled outright. However, it can be approached with the proposed solution. Here's how it works:

1. Handling Editing State: Just like in the grid sample, we track the editing state of rows and cells within the tree-grid. When a user starts editing a cell, we capture the ID of the edited row and the edited column.
2. Detecting Expand/Collapse Events: Similarly, we set up event handlers to detect when a column group is expanded or collapsed within the tree-grid. Upon detecting these events, we set a boolean flag to indicate whether the grid is being expanded or collapsed.
3. Re-enabling Editing Mode: When the rowEditExit event is triggered and the grid is in the process of expanding or collapsing, we utilize a setTimeout function to re-enable the editing mode for the previously edited cell after a short delay. This ensures that the user's work is not lost, and they can seamlessly continue data entry.

In summary, while the tree-grid component may introduce additional complexity due to its hierarchical nature, the same approach can be applied to maintain edit mode consistency and ensure a seamless user experience.

The described scenario could be observed here: