There is no example on how to create a custom editor to use in FlexGrid in Angu

There is no example on how to create a custom editor to use in FlexGrid in Angu

Posted by: kayvanbree on 23 May 2018, 9:26 am EST

• 

  kayvanbree

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 23 May 2018, 9:26 am EST - Updated 3 October 2022, 8:29 pm EST

  lar 2+. Short titles here.

  So I am trying to create a custom editor for FlexGrid, but on http://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Search?q=grid there is no sample to be found. Could you provide me with a sample on how to do this?

  Also, I already have an Angular component that works. I added it to my FlexGrid like this:

  

  563×543 22.4 KB

  This doesn’t work because the activeEditor is never set. How can I set the activeEditor to be my input? This is my ct-input component:

  <div class="wj-input-group">
    <input
      #inputRef
      wj-part="input"
      class="search wj-form-control"
      type="text"
      value=""
      (focus)="onFocus($event)"
      [ngModelOptions]="{standalone: true}"
      [(ngModel)]="value"
      (ngModelChange)="onInputChange($event)"
    />
  </div>
  
  

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 24 May 2018, 12:04 am EST

  Hi,

  Please refer to the following sample for creating custom editors:-

  http://demos.wijmo.com/5/Angular2/Explorer/Explorer/#/grid/celledittempl

  Please let me know if you are facing issues.

• 

  kayvanbree

  • Post Options:
  • Link
    Copy

  Posted 24 May 2018, 8:27 am EST

  Your link was only an example without code, so I’m still confused. I’m still facing one issue. The activeEditor is never set. I hacked something together to get a value into my onCellEditEnding method.

  I now have a normal Angular component in my grid, like in the picture above. This component is not a Wijmo component. What is the minimal I have to do to get my component to be recognized as an editor by FlexGrid? I need the activeEditor to be set.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 25 May 2018, 9:48 am EST

  Hi,
  
  If CellTemplate is used in FlexGrid, it hides default editor and placed Angular component/HTML element within cell.

  To get this component, you may use Angular Reference feature. Please refer to the following sample for the same:
  
  https://stackblitz.com/edit/angular-9u6b3e?file=app/app.component.ts

  ~Manish