Как настроить представление DatePicker внутри шаблона визуализации ячейки сетки? - PullRequest
Новая
       92

Как настроить представление DatePicker внутри шаблона визуализации ячейки сетки?

0 голосов
/ 27 марта 2020

Я использую рендеринг ячейки в своей ag-сетке для редактирования поля даты. Внутри этой ячейки добавляется datePicker, как показано

представление моей ячейки

Но когда Я щелкаю на значке даты. Представление выбора даты похоже на то, что оно полностью расположено внутри ячейки и не отображается должным образом. на следующем рисунке показана моя проблема 

@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, это тоже не работает ..

Может кто-нибудь помочь мне решить эту проблему?

Заранее спасибо

Ответы [ 2 ]

1 голос
/ 29 марта 2020

Как упоминалось ранее, чтобы иметь возможность использовать DatePicker в ячейке, вам нужно создать cellEditor вместо cellRenderer, однако cellEditor как расширение для cellRenderer.

Так что для angular вам необходимо использовать ICellEditorAngularComp интерфейс и позаботиться о 

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

и 

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

, не забудьте вернуть true в isPopup(): boolean метод - для правильной видимости.

Теперь, что касается самого DatePicker, я использую @danielmoncada/angular-datetime-picker

(но наверняка вы можете использовать что угодно)

И есть несколько вещей, о которых вам нужно позаботиться:

  1. , какой тип значения есть в библиотеке datepicker, использующей
  2. , какой тип значение, которое вы будете использовать для просмотра и для базы данных

, и оно может быть обработано с помощью getValue и valueFormatter методов

Это все для теории, посмотрите мою демонстрацию ниже и не стесняйтесь чтобы спросить что-нибудь связанное, постараюсь помочь.

DEMO

1 голос
/ 27 марта 2020

Две вещи ...

Во-первых, если вы действительно используете средство выбора даты в устройстве визуализации ячеек, не делайте этого. Это должно быть сделано в редакторе ячеек, а не в редакторе.

Во-вторых, если вы хотите иметь редактор, который не ограничен ячейкой, вы должны указать, что редактор - это всплывающий редактор: реализуя isPopup() в вашем редакторе и возвращая true.

Документация для этого на https://www.ag-grid.com/javascript-grid-cell-editing/#popup

...