Angular Wijmo FlexGrid custom pop-out editor

Angular Wijmo FlexGrid custom pop-out editor

Posted by: kamil.zainal.abidin on 21 April 2021, 4:27 am EST

• 

  kamil.zainal.abidin

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 21 April 2021, 4:27 am EST

  Hi,

  I’m looking to build a custom editor which ‘pops out’ of the cell, similar to the WjInputDate component.

  I’ve tried the simple path of nesting an Angular component in a CellEdit type FlexGridCellTemplate, but there seems to be an unused input element being rendered and the row height seems to be increased to fit the content of the editor.

  see: https://stackblitz.com/edit/angular-wijmo-celltemplate-editor-zopgpz?file=src/app/app.component.html

  I’m aware that one way to mitigate this is to set autoRowHeights to false https://www.grapecity.com/wijmo/demos/Grid/Sizing/Auto-sizeRows, but I would like to allow users to resize the row height freely as well.

  Is this the right way to go about building such a custom editor?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 21 April 2021, 11:32 pm EST

  Hi,

  CellTemplates are used to add templates/editor within the cell. If you need to add pop editors I suggest you handle the beginningEdit event, cancel the default edit event and then create and display your custom editor. Please refer to the following sample which demonstrates the same:

  https://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/CustomGridEditors/PureJS/Code

  Refer to the scripts/CustomGridEditor.js. The sample is written for an older version but the basic concept is the same.
  
  Also, to fix the height issue in your sample you may handle the cellEditEnding event and set the default row height. The following updates sample demonstrates the same:
  
  https://stackblitz.com/edit/angular-wijmo-celltemplate-editor-tuv93y?file=src%2Fapp%2Fapp.component.ts

  Regards

• 

  kamil.zainal.abidin

  • Post Options:
  • Link
    Copy

  Posted 28 April 2021, 1:53 am EST

  Thanks for your reply Ashwin.

  I’ve decided to try going down the route of building a custom cell template editor as recommended, and the most natural control to extend is a Popup (WjPopup). However, similar to my initial example, I want the popup to cover the original cell.

  Looking at the documentation, it looks like the positions available only put the popup around the cell perimeter https://www.grapecity.com/wijmo/api/classes/wijmo_input.popup.html#position. I’ve tried to change the position by hooking into the ‘refreshed’ event, but the moment I try resizing the page or similar activities, the position seems to be extremely buggy/unreliable as it looks like the underlying wijmo code is misinterpreting my new translated position.

  Is there any way to change the underlying position used to render the popup such that it pops up on top of the cell (and takes into account flip up/down logic that wijmo automatically does if it doesn’t fit in the browser viewport)? I can only imagine applying my transformations after-the-fact will always be buggy since it’s reliant on me guessing what wijmo does to re-render the component.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 29 April 2021, 8:14 pm EST

  Hi Kamil,

  We can update the position of the popup when displayed initially but resizing will cause some unexpected behaviors. Therefore, I would suggest you use the position property with the value which suits your requirements the most. Please refer to the sample below for reference:

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

  ~regards