Custom grid column renderer components do not work when used in frozen columns

Custom grid column renderer components do not work when used in frozen columns

Posted by: nilesh_nichal on 20 May 2019, 7:14 pm EST

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 20 May 2019, 7:14 pm EST

  Hello,
  
  We have a requirement in grid to create custom columns. We have created specialized columns renderers for these columns. Two of them are single/multiple selection columns. Out of these let us take case of single-selection renderer component.

  For this column, we have used HTML radio input button. This column is kept as frozen column. It works correctly in Chrome, however it is failing in Firefox and IE.
  
  This is how template of radio-btn-column-renderer file looks:

  
  <div class="select_radio">
    <input [id]="id$ | async"
           type="radio"
           name="radiogroup"
           value="id$ | async"
           [checked]="isSelected$ | async"
           (change)="onSelectionChange($event)" />
    <label [for]="id$ | async">&nbsp;</label>
  </div>
  

  If we do not add this column in frozenColumns collection, this renderer works perfectly fine across all browsers. We need your assistance and urgent attention to this as it has become a blocker for the release.

  Please assist.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 21 May 2019, 7:48 pm EST

  Hi Nilesh,
  
  Have you tried to set the cloneFrozenCells property to false for FlexGrid?

  Please try this, it should work for you!

  Regards,
  
  Manish Gupta

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 22 May 2019, 12:33 am EST

  Hi Manish,

  Thanks a bunch for quick attention to this issue. We tried the solution suggested and it works technically. However, while scrolling it is looking and performing extremely ugly in IE and Firefox. What is the best possible solution for this?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 23 May 2019, 12:18 am EST

  Hello,

  The performance issue is the expected behavior. The clonzeFrozenCells property, as the name suggests, creates a clone of the frozen cells to improve scrolling and performance and setting it to false degrades the performance.

  Please refer to the sample below that solves your issue where you do not set the cloneFrozenCells property.

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

  In this sample, we handle the mousedown event on the grid and change the checked state of the radio button accordingly.

  Regards,
  
  Manish Gupta