Wijmo grid distortion at first rendering

Wijmo grid distortion at first rendering

Posted by: reeshabh.choudhary on 31 October 2019, 7:52 pm EST

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy

  Posted 31 October 2019, 7:52 pm EST

  Whenever a wijmo grid is rendered, it is in shrink form and then takes the normal form.
  
  Please find video link attached.

  https://drive.google.com/open?id=1IIJ1O7Yp5Mj7TMP0n10358_BBe3gYInL

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy

  Posted 31 October 2019, 8:13 pm EST - Updated 3 October 2022, 9:49 am EST

  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 3 November 2019, 2:33 pm EST

  Hi Reeshabh,

  From looking at the video, it seems that you are calling the autoSizeRows or any other similar method. Could you please confirm this?
  
  If you are calling this method, could you please let me know in which event handler you are calling the method?

  Regards,
  
  Ashwin

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy

  Posted 3 November 2019, 5:46 pm EST

  Yes, you are right about it Ashwin. I am calling this method in initialized event → defer update → autoSizeRows

  onFlexSheetInit(flexSheet) {
      console.log('On Flex sheet init.');
      const self = this;
      flexSheet.deferUpdate(() => {
        flexSheet.itemsSource = self.itemSourceObj.dataSource;
        flexSheet.autoGenerateColumns = false;
        flexSheet.columnLayout = JSON.stringify({ columns: self.itemSourceObj.columnLayout });
        // Set Other Options
        flexSheet.headersVisibility = 0;
        flexSheet.showFilterIcons = false;
        flexSheet.isTabHolderVisible = false;
        flexSheet.showAlternatingRows = false;
        flexSheet.validateEdits = false;
        flexSheet.frozenColumns = 1;
        flexSheet.frozenRows = 1;
  
        flexSheet.columns[0].width = '*';
        flexSheet.columns[0].minWidth = 350;
        flexSheet.rows[0].wordWrap = true;
  
        flexSheet.columns.defaultSize = 125;
        // flexSheet.scrollTo(0, 0);
        flexSheet.autoSizeRows();
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 4 November 2019, 3:40 pm EST

  Hi Reeshabh,

  The code in defer update is causing the issue. We are sorry but this is expected behavior since the FlexSheet will be refreshed many times before completely updating the layout. We can reduce the lag but it cannot be completely removed.

  To reduce the lag, you could define most of the properties in the HTML template only. Also, try updating the FlexSheet in the ngAfterViewInit lifecycle hook.

  Please refer to the sample below:

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

  ~regards

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy

  Posted 12 November 2019, 6:21 pm EST

  Hi

  I am facing this issue in wijmo grid(wj-flex-grid) as well. However, I am not calling autoresize or any similar methods in code. On initialization, following process is happening:

  
  flexGrid.rows.defaultSize = 15;
      flexGrid.columnHeaders.rows.defaultSize = 25;
      flexGrid.columnHeaders.rows[0].wordWrap = true;
  
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 13 November 2019, 2:35 pm EST

  Hi Reeshabh,

  When we set the defaultSize property of the rows, it causes the FlexGrid to refresh. This is also the same for the wordWrap property. Therefore, the refresh method is called multiple times after initialization. To avoid this, you may use the workaround provided earlier.
  
  Also, you can initialize the FlexGrid in the deferUpdate callback:

  grid.deferUpdate(() => {
        grid.rows.defaultSize = 15;
        grid.columnHeaders.rows.defaultSize = 25;
        grid.columnHeaders.rows[0].wordWrap = true;
  });
  

  ~regards