CODEWITHSUNDEEP
angular8ag-grid
lekshmi
lekshmi

Reputation: 348

How to adjust datepicker view inside ag grid cell render template?

I use cell rendering in my ag-grid for editing a date field.Inside that cell datePicker is added as shown

view of my cell

But when i am clicking the date icon date picker view is like it is fully mounded inside the cell and not visible properly.the below picture shows my issue

@Component({
  selector: 'app-gender-renderer',
  template: `  `
  <input type="text" id="recording_date_to" [(ngModel)]="changedRecDateTo" (change)="edit()"
  ngbDatepicker #d="ngbDatepicker" style="z-index: 0;"
  class="form-control input-sm" />
  <button class="glyphicon glyphicon-calendar" (click)="d.toggle()" type="button"></button>
})

Tried z index , it is also not working..

Can anyone please help me to solve this ?

Thank You in advance

Upvotes: 0

Views: 4284

Answers (2)

un.spike
un.spike

Reputation: 5123

As mentioned before, to be able to use DatePicker in cell you need to create cellEditor instead of cellRenderer, however, cellEditor just like an extension for cellRenderer.

So for angular, you need to use ICellEditorAngularComp interface and take care of

agInit(params: any): void // for init value which would be used in DatePicker

and 

getValue(): any // for passing value back to the grid (and update the cell)

don't forget to return true in isPopup(): boolean method - for correct visibility.

Now, about DatePicker itself, I'm using @danielmoncada/angular-datetime-picker

(but for sure you can use anything)

And there are a few things that you need to take care :

  1. what type of value is the datepicker library using
  2. what type of value you will use for view and for database

and it could be handled with getValue and valueFormatter methods

That's all for theory, check my demo below and feel free to ask anything related, will try to help.

DEMO

Upvotes: 1

GreyBeardedGeek
GreyBeardedGeek

Reputation: 30088

Two things...

First, if you are really using a date picker in a cell renderer, don't. That should be done in a cell editor, not a renderer.

Second, if you want to have an editor that is not constrained by the cell, you have to specify that the editor is a 'popup' editor by implementing isPopup() in your editor, and returning true.

The documentation for this is at https://www.ag-grid.com/javascript-grid-cell-editing/#popup

Upvotes: 1

Related Questions