Add Dropdown and Input Date

Add Dropdown and Input Date

Posted by: hoang.nguyen on 31 May 2018, 8:48 am EST

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 31 May 2018, 8:48 am EST

  I have a Flexgrid with [autoGenerateColumns]=“true” with 10 columns

  How do I add a dropdown to column 2 and add wj-input-date to column 3

  Thank you very much.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 31 May 2018, 10:34 pm EST

  Hi Hoang,
  
  You need to use CustomEditor if you would like to add Controls for editing purpose in CellEdit mode.

  Please refer to the following demo sample:
  
  https://stackblitz.com/edit/angular-gns4uu?file=app%2Fapp.component.ts (CustomEditor.ts)

  In case, you would like to add Controls on cell level , you need to use formatItem/itemFormatter for the same.

  ~Manish

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy

  Posted 20 June 2018, 6:26 am EST

  Thank you for your help Manish,

  Since I have alternate row color on my flexgrid. How do I match the background of wj-input to current row?

  I have try style=“background: transparent !important;” but it does not work sir.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 20 June 2018, 10:27 pm EST

  Hi,
  
  For this, you need some changes in CustomGridEditor.ts file.

  /* In constructor add following code */
  wjcCore.addClass(this._ctl.hostElement,"wj-custom-editor");
  /* after this line  */
  this._ctl = new edtClass(document.createElement('div'), options);
  
  /* then in _beginningEdit method add following */
  if(args.row%2!=0){
  	wjcCore.addClass(this._ctl.hostElement,"wj-alt-custom-editor");
  }
  /* after the built-in editor has been canceled i.e after this line */
  args.cancel = true;
  
  /*now finally in _closeEditor method add following code in the last */
  wjcCore.removeClass(this._ctl.hostElement,"wj-alt-custom-editor");
  

  After making the required changes you may use classes wj-custom-editor and wj-alt-custom-editor to style the custom editor.

  Please refer to following updated sample:-
  
  https://stackblitz.com/edit/angular-zr9jce?file=app%2Fapp.component.css

  ~Manish

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy

  Posted 26 June 2018, 7:06 am EST

  Thank you sir very much