Выполнить [kendoGridAddCommand] для компонента init - PullRequest
Новая
       57

Выполнить [kendoGridAddCommand] для компонента init

0 голосов
/ 17 сентября 2018

Поведение кендо по умолчанию

Событие add происходит при нажатии kendoGridAddCommand в kendoGridToolbarTemplate.

HTML: 

<kendo-grid 
(add)="addHandler($event)"
>
    <ng-template kendoGridToolbarTemplate>
        <button kendoGridAddCommand>Add new</button>
    </ng-template>
    <kendo-grid-column field="id" title="ID" width="120"></kendo-grid-column>
    <kendo-grid-column field="name" title="name" width="120"></kendo-grid-column>
</kendo-grid>

TS: 

protected addHandler({sender}) {
    // define all editable fields validators and default values
    const group = new FormGroup({
        'id': new FormControl(),
        'name': new FormControl()
    });

    // show the new row editor, with the `FormGroup` build above
    sender.addRow(group);
}

Требование

Запуск Событие addrow в компоненте init или вне Grid.По умолчанию одна строка должна отображаться с элементами управления формы без нажатия кнопки Add new.

Попробовал ниже решения, предоставленного в SO, но не получилось.

Внешняя команда KendoUI Angular Grid

Любая помощь будет ощутимой.Спасибо

1 Ответ

0 голосов
/ 17 сентября 2018

Вы можете обработать событие AfterViewInit и вызвать метод Grid addRow , например: 

ngAfterViewInit() {
  this.formGroup = new FormGroup({
        'ProductID': new FormControl(),
        'ProductName': new FormControl('', Validators.required),
        'UnitPrice': new FormControl(0),
        'UnitsInStock': new FormControl('', Validators.compose([Validators.required, Validators.pattern('^[0-9]{1,3}')])),
        'Discontinued': new FormControl(false)
  });

  this.grid.addRow(this.formGroup);
}

ПРИМЕР

...