[SOLVED] How to create a custom template with grid kendo and ngx formly?

How to create a custom template with grid kendo and ngx formly?

Im using kedo grid and ngx formly to display data.

There are 4 files. kedo.ts and kedo.html for custom template and the component.html and component.ts to use the template. Im have tried to simplify as much as possible the code but still data are undefined.

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(); 
  }

component.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>

Solution

I started a kendo grid and kendo tree list component for formly, just posted it on github, you can give some time and ideas for it on the github issue

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

but I think that this component solve your problem