Flexgrid / Transposed - share the same source

Posted by: mary431982 on 13 February 2026, 1:44 pm EST

  • Posted 13 February 2026, 1:44 pm EST

    Hello,

    I have flexgrid and transposed grid, both in its own ngIf, toggled by clicking the button

    They both share the same data source.

    When I switch from grid to transposed - I get error: ERROR TypeError: Cannot read properties of null (reading ‘hasColumnGroups’), and for example filter stops working in transposed grid etc.

    It didnt use to behave like that.

    I think it is happening since we have updated out versions of Angular etc.

    What could be the problem? And solution?

    public toggleTransposedGrid(): void {
        this.dbgClassic.currentRowCol = { row: this.currentGrid.selection.row, col: this.currentGrid.selection.col };
        this.dbgClassic.showTransposedGrid = !this.dbgClassic.showTransposedGrid;
    }
    

    Base Class of both flexgrid and transposed grid:

    public ngOnDestroy(): void {

    this.subscription.unsubscribe();

        this.wjGridFilter && this.wjGridFilter.filterApplied.removeHandler(this.onFilterApplied);
        this.wjGridFilter && this.wjGridFilter.filterChanged.removeHandler(this.onFilterChanged);
    
        this.dataSrc.collectionChanged.removeHandler(this.onCollectionChanged);
        this.dataSrc && this.dataSrc.collectionChanged.removeHandler(this.onCollectionChanged);
    
        this.slideshowIntervalPromise && clearInterval(this.slideshowIntervalPromise);
    }
    

    Flexgrid class:

    public ngOnDestroy(): void {

    super.ngOnDestroy();

        this.flexGrid.selectionChanging.removeAllHandlers();
        this.flexGrid.selectionChanged.removeAllHandlers();
        this.flexGrid.scrollPositionChanged.removeAllHandlers();
        this.dataSrc.groupDescriptions.collectionChanged.removeHandler(this.onGroupDescriptionsCollectionChanged);
        this.flexGrid.resizedColumn.removeAllHandlers();
        this.flexGrid.updatedLayout.removeAllHandlers();
    
        if (this.gridHostElement) {
            this.gridHostElement.removeEventListener('keydown', this.onKeydown);
            this.gridHostElement.removeEventListener('keyup', this.onKeyup);
        }
    }
    

    Transposed class:

    public ngOnInit(): void {
        this.currentGrid = this.transposedGrid;
    
        super.ngOnInit();
    }
    
    public ngAfterViewInit() {
        this.transposedGrid.columns.defaultSize = this.globalService.isMobile ? 150 : Enumerable.From(this.tableSettings.Fields).Max((item: Field) => { return item.sirina });
        this.gridHostElement = this.transposedGrid.hostElement;
        this.dbgClassic.currentRowCol && this.currentGrid.select(this.dbgClassic.currentRowCol.col, this.dbgClassic.currentRowCol.row);
        this.dbgClassic.currentRowCol = undefined;
    }
    
    
    public onCollectionChanged = (e: any, args: any) => {
        this.forceRefreshGridDisplay();
    }
    
    private forceRefreshGridDisplay(): void { //To achieve the required functionality you may handle the collectionChanged event and update the itemsSource of the transposed grid inside the handler. (https://www.grapecity.com/forums/wijmo/transposed-grid---filter-d)
        this.transposedGrid.itemsSource = null;
        this.transposedGrid.itemsSource = this.dataSrc;
        this.transposedGrid.invalidate();
    }
    

    Best regards,

    Mary

  • Posted 16 February 2026, 3:26 am EST

    Hi Mary,

    We tried to replicate the issue as per your description, but the issue is not replicable on our end. It might be possible that some other factors in your application might be causing this issue, could you please share a small sample in which the issue can be replicated, so that we can investigate the issue further and assist you accordingly?

    Please refer to the attached sample in which we tried to replicate the issue. You can also modify the attached sample to replicate the issue and share it with us.

    Please note that, no issue was observed when we switched from FlexGrid to TransposedGrid. However, an issue was observed when we switched from TransposedGrid to Flexgrid, which seems to be a different issue from what you mentioned. However, we have prepared a workaround for this issue for now. Uncomment line 15 in the ‘transposedGrid.component.ts’ file in the sample to apply the workaround in the sample.

    Regarding the FlexGridFilter not working issue, this is expected because FlexGridFilter is not supported in the TransposedGrid due to its structural differences from the normal Flexgrid. Please refer to the following link for information about the unsupported features in TransposedGrid - https://developer.mescius.com/wijmo/api/classes/Wijmo_Grid_Transposed.Transposedgrid.html#:~:text=The%20list%20of%20disabled%20properties%20includes%20the%20following

    In case, if there is something we missed, please let us know.

    Regards

    transposedGrid sample.zip

  • Posted 20 February 2026, 9:11 am EST

    Hello, thank you!!

    Error happens when I have sorting in my collection view,

    ERROR TypeError: Cannot read properties of null (reading ‘hasColumnGroups’) at FlexGrid2._hasColumnGroups (es5-esm.js:14:181652) at FlexGrid2.getColumn (es5-esm.js:14:122437) at es5-esm.js:14:157666 at ObservableArray2.forEach () at FlexGrid2._sortConverter (es5-esm.js:14:157637) at es5-esm.js:14:101643 at Array.sort () at CollectionView2._performSort (es5-esm.js:14:101363) at CollectionView2._performRefresh (es5-esm.js:14:100531) at CollectionView2.refresh (es5-esm.js:14:99931)

    When I toggle from flexgrid to transposed grid and I do this.dataSrc.sortDescriptions.clear(); there is no more error, but then my transposed grid is out of Sort.

  • Posted 23 February 2026, 1:25 am EST

    Hi Mary,

    It seems you are using the same CollectionView object in both the grids, which is not the correct approach. We are able to replicate the issue after using the same collectionView in both grids. The grid’s collectionView should be disposed along with the grid; using the same collectionView again might cause such issues. So, we suggest using a different collectionView reference for Flexgrid and transposedGrid.

    Regarding the sorting issue, sorting is not officially supported in the Transposed grid due to its structural differences. However, if you still need to keep the sorting, then you can directly manage the ‘sortDescriptions’ in the transposedGrid’s collectionView. You can also keep the sorting in sync with the Flexgrid by storing a separate reference of the sorting state in FlexGrid and passing it to the transposedGrid component. Please refer to the attached sample for a better understanding.

    In case, you still face any issues, please let us know.

    Regards

    transposedGrid sample updated.zip

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels