I have resolved the issue using a little help from the folks at Telerik, they’ve instructed me to use the kendoGridCellTemplate instead of the kendoGridEditTemplate directive. But doing this, the cells will always be editable even if you are not editing the line. You have to have a isEditing property in your view model (which I already had) and use this boolean value to enable or disable the text-box containing the values like so:

HTML

    <kendo-grid-column field="quantity" title="{{column.ticker}}" *ngFor="let column of tickerColumns;">
      <ng-template kendoGridCellTemplate let-dataItem>
          <input *ngIf="dataItem.ticker == column.ticker"
                 [disabled]="!dataItem.isEditing"
                 [(ngModel)]="dataItem.quantity"
                 [ngModelOptions]="{standalone: true}" class="k-textbox" required />
      </ng-template>
    </kendo-grid-column>

When in edit mode (that is when you click the edit button next to a single line) just toggle the isEditing value for that dataItem. When you cancel or save and end editing, toggle it again. You now have a custom pivot grid for Kendo Angular:

I’m trying to get to generate a Kendo Grid with dynamically generated columns using Angular. However, I want to match the right ticker symbol corresponding with the column. Here is my code:

<kendo-grid-column *ngFor="let column of tickerColumns" field="quantity" title="{{column.ticker}}">
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
    <input *ngIf="dataItem.ticker == column.ticker"
           [(ngModel)]="dataItem.quantity"
           [ngModelOptions]="{standalone: true}" class="k-textbox" required />
</ng-template>
</kendo-grid-column>

The tickerColumns array is simply an array that contains the three ticker symbols. The main data structure looks like this:

However, the result isn’t what I expected, as if the ngIf clause isn’t acting as it should.