All column headers empty after setting single column visible=false

Posted by: moritz.neugebauer on 23 June 2020, 5:46 pm EST

  • Posted 23 June 2020, 5:46 pm EST

    Dear Wijmo Team,

    I'm rendering grouped columns which basically works fine. But I'm running into an issue where all column headers except the ones from subcolumns become empty after I set a any single comlumn to visible=false.

    It's really difficult to debug as I have no idea where and why this would happen.

    Before:


    After:


    How I set column visible=false:
    Click on the blue settings wheel opens a dialog that shows a transfer window with two lists side by side. List on the left contains all visible columns, list on the right contains all invisble columns and is empty by default. Dragging a column from the left to the right lists triggers a function that sets column.visible = false;

    What I already found out:
    When setting visible to false, the textContent of all affected column cells is empty:

    this.flexdata.formatItem.addHandler((s: wjcGrid.FlexGrid, e: wjcGrid.FormatItemEventArgs) => {
    // Zentrierung Header Gruppen Zellen (Bei FS und AA Gruppierung)
    if (e.panel == this.flexdata.columnHeaders) {
    console.log("e.cell.textContent: ", e.cell.textContent);
    e.cell.innerHTML = '<div>' + e.cell.innerHTML + '</div>';
    }
    }


    But the textContent from the subcolumns isn't empty. I dont understand that either.

    Here's how I render grouped column cells and normal columns (including sub columns):
    Grouped column headers

    {
    dataType: Datatype[attribute.datentyp],
    header: this.getAttributHeader(attribute, columnLevel),
    columns: this.calculateSubColumns(attribute),
    binding: 'attributWerte.' + attribute.id + '.content',
    visible: visible,
    format: pattern,
    isReadOnly: attribute.isReadOnly,
    isRequired: false,
    align: GridColumns.GRID_COLUMN_ALIGNMENT_CENTER,
    }


    Sub columns and regular columns:

    {
    dataType: Datatype[attribute.datentyp],
    header: this.getAttributHeader(attribute, columnLevel),
    binding: bindingName,
    visible: visible,
    format: pattern,
    isReadOnly: attribute.isReadOnly,
    isRequired: false,
    align: align,
    };


    It has to be something regarding the grouped columns, because when the dataset doesn't include hierarchical data and the grid therefore only shows regular columns, setting column.visible = false in the dailog works just fine.

    Do you have an idea why this happens?

    Best regards
    Moritz
  • Replied 23 June 2020, 5:47 pm EST

    Before:


    After:
  • Replied 24 June 2020, 3:32 pm EST

    Hi Moritz,

    We are sorry but we were unable to replicate the issue at our end. Please refer to the sample link below that we used to replicate the issue:

    https://stackblitz.com/edit/angular-gwbruv

    Can you please let us know whether we are missing something in order to replicate the issue? You may also modify the sample accordingly so that it replicates the issue.

    Regards,
    Ashwin
  • Replied 24 June 2020, 5:12 pm EST

    Hi Ashwin,

    thank you for the sample. I was able to narrow down the behaviour.

    I'm rendering a Transfer Component (https://ng.ant.design/components/transfer/en) instead of the wj-list-box from your sample.

    In the Transfer Component, the change method is called when an entry is moved from the left to the right

    @Output() layout = new EventEmitter<any>();
    columns = JSON.parse(this.flexdata.columnLayout).columns

    change(ret: any): void {
    if (ret.from==='left'){
    ret.list.forEach(entry=>{
    let col = this.columns.find(c=>c.header===entry.title);
    if (col){
    col.visible=false;
    }
    })
    this.layout.emit(this.columns);
    }
    }


    The component that responds to the EventEmitter sets the columnLayout

    onColunmTransferLayoutChanged(layout){
    this.flexdata.columnLayout=JSON.stringify({columns:layout});
    }


    When I comment out

    this.flexdata.columnLayout=JSON.stringify({columns:layout});


    The headers don't get cleared, but - of course - the selected columns don't get hidden.

    So to me, the main difference between my code and the sample is, that I'm working with columnLayout, while the sample is using grid.columns?

    Best regards
    Moritz
  • Marked as Answer

    Replied 25 June 2020, 5:27 pm EST

    Hi Moritz,

    Please do not use columnLayout to change the column properties. If you need to update a property of a column, set it directly. The columnLayout is basically use to save the layout so that you can apply the same later on.
    Also, as I said in the previous case (https://www.grapecity.com/forums/wijmo/grouped-columns-setting-fl), there is bug in grouped column layout. So more reason to not use it.

    I would suggest you to convert all of your code that uses the columnLayout to use the properties.

    ~regards
  • Replied 25 June 2020, 10:16 pm EST

    Dear Ashwin,

    thank you for your reply. I switched from using columnLayout to columns to hide and show columns. It's working now as expected.

    Do you have any new information about the bug with tracking id 441883? I still need to persist grouped columns to localStorage.

    Best regards
    Moritz
  • Replied 28 June 2020, 7:29 pm EST

    Hi Moritz,

    We are sorry but this issue is still with the dev team.

    ~regards
Need extra support?

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

Learn More

Forum Channels