Kendo-ui-angular2 grid: how to force the grid to redraw?

Question

I'm using Kendo-ui-angular 2 grid on a site for mobile devices. My goal is to display different number of columns, depends on device orientation (more columns in landscape mode than portrait).

I am able to detect device orientation already and I am binding the kendo-grid-column components to an array of columns using *ngFor and change number of columns in the array based on device orientation. Everything works fine but my only issue is that when change the device orientation and change number of columns, grid does not update the columns until I tap or click on the grid.

Is there a way to programmatically force the grid to re-draw when number of columns change?

Answer 1

Tried to reproduce the same but with no luck:

<template ngFor [ngForOf]="columns" let-column>
        <kendo-grid-column
          *ngIf="!column.hidden"
          field="{{column.name}}"
        >
          <template kendoHeaderTemplate let-dataItem>
              {{dataItem.field}}
          </template>
        </kendo-grid-column>
      </template>

see this plunkr and let me know if you are able to reproduce the problem there.