如何使用网格剑道和 ngx 正式创建自定义模板？答案

【问题标题】：How to create a custom template with grid kendo and ngx formly?如何使用网格剑道和 ngx 正式创建自定义模板？
【发布时间】：2020-08-28 21:36:21
【问题描述】：

我正在使用 kedo grid 和 ngx 来显示数据。

有 4 个文件。 kedo.ts 和 kedo.html 用于自定义模板和 component.html 和 component.ts 使用模板。我试图尽可能简化代码，但数据仍然未定义。

kedo.ts

<kendo-grid 
[kendoGridBinding]="gridData"
[formlyAttributes]="field">

  <kendo-grid-column 
  *ngFor="let column of columns" 
  [field]="to.columns">
      <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
      <span [class.special]="column.field === 'CompanyName'">  {{column.field}}({{columnIndex}})</span>
      </ng-template>
         <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
        <span [class.special]="column === 'CompanyName'">  {{dataItem[column]}}</span>
      </ng-template>
  </kendo-grid-column>
</kendo-grid>

kedo.ts

export class DatatableFormComponentKendo extends FieldArrayType implements OnInit { 

}

  private gridData: any[] //= sampleCustomers; if uncoment here in the grid data will be displayed. 
constructor() {
    super(); 
  }

组件.ts

  private gridData: any[] = sampleCustomers;
  public columns: any[] = [{ field: 'ProductName', title: 'Name'}, { }];


  fieldsTable: FormlyFieldConfig[] = [{
    key: 'gridData',
    type: 'datatable-kendo',
    templateOptions: {
      column: [
        { field: 'actions'},
        { field: 'id'},       

      ],
}

component.html

<form [formGroup]="form" (ngSubmit)="onSubmitForm(data)" class="py-3">
    <formly-form [model]="modelTable" [fields]="fieldsTable" [options]="options" [form]="form">
    </formly-form>
</form>

【问题讨论】：

很好，我正要启动这个组件，将尝试运行你的代码，看看我发现了什么
我无法让您的示例正常运行，您似乎省略了一些代码，您可以将您的示例放入 stackblitz 或类似的东西中吗？
已经不可能将 kendogrid 与 FormlyFieldConfig 一起使用。不知何故，剑道不可定制。非常感谢您的回复。
如果你设法让这个例子在堆栈闪电战中运行，我会帮助它工作

标签： angular kendo-ui grid kendo-grid ngx-formly

【解决方案1】：

我为formly创建了一个剑道网格和剑道树列表组件，刚刚发布在github上，你可以在github issue上给它一些时间和想法

https://github.com/ngx-formly/ngx-formly/issues/2371

但我认为这个组件可以解决你的问题

【讨论】：