FlexGrid: updatedView / autoSizeColumns() fails after being called several times

FlexGrid: updatedView / autoSizeColumns() fails after being called several times

Posted by: alignsoft on 14 September 2017, 12:01 pm EST

• 

  alignsoft

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 12:01 pm EST

  This is an Angular2 project. I’ve have a flex-grid defined with the following parameters:

      <wj-flex-grid #flex
      [itemsSource]="data" 
      [headersVisibility]="1"
      (updatedView)="viewUpdatedFlex($event)" 
      [allowResizing]="'Columns'"
      [autoSizeMode] = "'Both'">

  And on updatedView, the function I’m calling is this:

  viewUpdatedFlex() {
      var self = this;
      setTimeout(function() {
          self.flex.autoSizeColumns();
      },300);
  }
  

  I’m calling autoSizeColumns() on the grid when the view has changed, and I have a set of radio buttons that conditionally shows/hides some of the column in the grid. When the grid loads, it works fine and the column resizes, when I toggle the columns on and off, the resize works for a few times, then stops responding completely.

  Is ‘updatedView’ the best hook to leverage for this?

  Should I be able to call this function more than once without it becoming unresponsive?

• 

  alignsoft

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:01 pm EST

  It’s also worth noting that I attached the ‘viewUpdatedFlex’ function to a button, so that I can manually fire the autoSizeColumns function for testing purposes, but once the autoResize stops responding to updatedView, I can’t fire it manually either.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:01 pm EST

  Hello,
  
  updatedView event gets execute multiple time on resizing column/row inside it. For this, you need to put a condition so that it got executed once.

  For your reference, please see the plunker that implements the same.

  If issue persists, please modify the attached sample depicting your issue so that we can assist you accordingly.

  Regarding autoSizeCoumns method,
  
  It can be executed when needed but it does not show effect once it gets called.

  Thanks,
  
  Manish Kumar Gupta

• 

  alignsoft

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:01 pm EST

  Thank you - that’s really useful and seems to solve the problem.

  I am noticing that on resize the grid seems to make space for horizontal and vertical scrollbars but doesn’t draw them, so there’s a thin white row at the bottom of the grid and a thin white column at the right side of the grid. (See attached screen shot).

  Do you know what causes that, and how I can prevent / clear it?
  
  

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:01 pm EST

  Hello Steve,
  
  We are sorry, we are unable to replicate issue at our end.
  
  As per screenshot, it may be possible this issue is raised due to customized CSS in your project.
  
  We could not say a word without replicating the issue at our end.

  Please share a sample depicting your issue so that so that we can debug and assist you accordingly.

  Thanks,
  
  Manish Kumar Gupta

• 

  alignsoft

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:01 pm EST

  What seems to happen is the flex-grid auto-sizes all the columns, but doesn’t fill the entire width of the container it’s in, so there’s some white space left at the right edge. I expect the same is true with it’s resizing rows, if there’s not room for a full row, there’s whitespace left at the bottom between the last full row and the container.

  If I’ve assigned relative widths to the columns (, 2 etc.), does that interfere with the autoresizing? Should I remove those [width] attributes and let auto-sizing handle it instead?

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:01 pm EST

  Hello,
  
  For the columns, please use one of the method either set width using [width] property or call autoSizeColumns() method for resizing column according to the cell content.
  
  For rows, if rows is less then height of FlexGrid, there will be white space in the FlexGrid.

  Just for your information, if you use autoSizeColumns method, it will resize according to the content and no wrapping will be performed in desired columns.

  Hope it clears !

  Thanks,
  
  Manish Kumar Gupta

• 

  alignsoft

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:01 pm EST

  Thanks! I appreciate the help!