All column headers empty after setting single column visible=false

All column headers empty after setting single column visible=false

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

• 

  moritz.neugebauer

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 23 June 2020, 5:46 pm EST - Updated 3 October 2022, 7:04 am 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:
  
  

  

  2224×368 43 KB

  After:
  
  

  

  2224×368 43 KB

  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

• 

  moritz.neugebauer

  • Post Options:
  • Link
    Copy

  Posted 23 June 2020, 5:47 pm EST - Updated 3 October 2022, 7:04 am EST

  Before:
  
  

  

  2224×368 43 KB

  After:
  
  

  

  1880×344 33.3 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  moritz.neugebauer

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  moritz.neugebauer

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 28 June 2020, 7:29 pm EST

  Hi Moritz,

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

  ~regards