Can't change FlexGrid Column Header text dynamically

Can't change FlexGrid Column Header text dynamically

Posted by: jason.brandt on 21 January 2019, 3:32 pm EST

• 

  jason.brandt

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 21 January 2019, 3:32 pm EST

  I am using FlexGrid with Angualr 6 , When the user clicks a button i want to change the header values.

  this does not appear to work =

  this.columns.find(i => i.binding == 'RelatedEntityName').header = 'Owner Name';
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 22 January 2019, 2:47 am EST

  Hi,

  We are sorry but we are unable to replicate the issue at our end.
  
  Could you please have a look at the following sample and let us know if we are missing something to replicate the issue: https://stackblitz.com/edit/angular-rjxkpe?file=src%2Fapp%2Fapp.component.ts
  
  Also please let us know the wijmo build version you are using so that we may also test on the same build.

  ~Sharad

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 22 January 2019, 2:14 pm EST

  I am using Wijmo version 5.20182.524

  I see no functional difference in my code, and still it does not work.

  I even tried using a ng-template in the grid html and it works in your example, but not in my code…

  Any ideas what would cause this to not update?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 23 January 2019, 1:37 am EST

  We tested again with the version 5.20182.524 and everything seems to be working fine.
  
  If you are facing issues at your end,then please try to invalidate grid after updating the header.

  this.columns.find(i => i.binding == 'RelatedEntityName').header = 'Owner Name';
  this.grid.invalidate();
  

  You may also try to directly assign the header to the column object like:

  let col = this.grid.columns.getColumn('RelatedEntityName');
  if(col){
  	col.header = 'Owner name';
  	this.grid.invalidate(); // just in case
  }
  

  If none of the above works for you, can you please share a stripped down sample replicating the issue so that we may investigate the issue, it is really hard to comment on what could be causing the issue without actually replicating it.

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 23 January 2019, 3:21 pm EST

  Thank you for the two extra options. I have tried them both and the grid is still not updating the header text.

  I am going to try to build a example where I can duplicate the issue.

  Thank you!

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 23 January 2019, 5:33 pm EST

  Ok, i got it working. Here was the issue =

  I was creating a temp object to map the headers dynamically so I can send a generic object.

  var headers = {};
  for (var x = 0; x < this.columns.length; x++) {
  	headers[this.columns[x].binding] = this.columns[x].header;
  }
  
  //insert row
  grid.columnHeaders.rows.insert(0, new wjcGrid.Row(headers));
  

  The var headers object is what was populating the grid, not the this.columns. So making changes to this.columns did nothing.

  If I edit the grid.columHeaders.row[0].dataItem.headerName
  
  the grid updates correctly.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 24 January 2019, 12:17 am EST

  We are glad to hear that you were able to resolve the issue and thank you for notifying us about the same.