<kendo-grid-column *ngFor="let c of myColumnsObjects"
        field="{{ c.name }}"
        title="{{ c.title }}"
    >
    <ng-template
          kendoGridFilterMenuTemplate
          let-column="column"
          let-filter="filter"
          let-filterService="filterService"
        >
          <app-mycolumn-filter
            [field]="column.field"
            [filterService]="filterService"
            [currentFilter]="filter"
            [distinctData1]="getDistinctData1(column.field)"
            [distinctData2]="getDistinctData2(column.field)"
            [distinctData3]="getDistinctData3(column.field)"
          ></app-mycolumn-filter>
        </ng-template>
    <ng-template 
      kendoGridCellTemplate 
      let-dataItem >
        <ng-container *ngIf="getObjectByColumnName(c.name, dataItem) as myItem">
          <div class="{{getClassByObject(myItem)}}">
            <div>{{myItem.dataOfField1}}</div>
            <div>{{myItem.dataOfField2}}</div>
            <div>{{myItem.dataOfField3}}</div>
          </div>
        </ng-container>
    </ng-template>
    </kendo-grid-column>

interface IMyDynamicallyColumn {
  name: string;
  title: string;
}

interface IMyData {
  id: number;
  name: string;
  somecomlexobject: any;
  ....
  myItems: IMyItem[];
  otheItems: IOtherItem[];
}

interface IMyItem {
  id: number;
  dataOfField1: string;
  dataOfField2: number;
  dataOfField3: EMyItemState;
}

const enum EMyItemState {
  State1 = 'state1',
  State2 = 'state2',
  ...
  State<N> = 'state<n>'
}

public pdfLoad(pdfViewerLoadEvent: PDFViewerLoadEvent)
  {
    this.pdfViewerContext = pdfViewerLoadEvent.context;
    this.pdfViewerContext.pdfDoc.getPage(1).then(async (page)=>{
      var scale = this.pdfViewerContext.zoom;
      var viewport = page.getViewport({scale});
      var canvas: HTMLCanvasElement  = document.getElementById('the-canvas') as HTMLCanvasElement;
      var context = canvas.getContext('2d')!;

      canvas.width = Math.floor(viewport.width * scale);
      canvas.height = Math.floor(viewport.height * scale);
      canvas.style.width = Math.floor(viewport.width) + "px";
      canvas.style.height =  Math.floor(viewport.height) + "px";

      context.beginPath();
      context.arc(300, 300, 100, 0, 2);
      context.stroke();

      var transform: number[] | undefined = scale !== 1
         ? [scale, 0, 0, scale, 0, 0]
         : undefined;
      var transform: number[] | undefined = [2,0,0]

      await page.render({
          canvasContext: context!,
          transform: transform,
          viewport: viewport
      });

      context.beginPath();
      context.arc(300, 300, 100, 0, 2);
      context.stroke();
    });
  }