kendo grid does not hightlight seleted row / missing ui refresh

Question

I have a Kendo-grid:

<kendo-grid 
[data]="gridData"
[pageSize]="state.take"
[skip]="state.skip"
[sort]="state.sort"
[filter]="state.filter"
[sortable]="true"
[pageable]="true"
[filterable]="true"
[kendoGridSelectBy]="'guid'"
[selectable]="true"
[selectedKeys]="selectionCustomer"
(dataStateChange)="dataStateChange($event)"
>
  <kendo-grid-checkbox-column></kendo-grid-checkbox-column>
  <kendo-grid-column field="name" title="Name"></kendo-grid-column>
  <kendo-grid-column field="prename" title="Prename"></kendo-grid-column>
  <kendo-grid-column field="companyName" title="CompnayName"></kendo-grid-column>
  <kendo-grid-column field="number" title="number"></kendo-grid-column>
  <kendo-grid-column field="fullname" title="Fullname"></kendo-grid-column>
</kendo-grid>`

With the Component loading data from the API (as array because no Odata available)

export class CustomerKendoComponent implements OnInit {

  private state: State = {
    skip: 0,
    take: 10,
  };

  private customers: Customer[] = [];
  private gridData: GridDataResult = null;
  private selectionCustomer: number[] = [];

  constructor(
    private customerApi: CustomerApi,
    private ref: ChangeDetectorRef,
  ) {  }

  ngOnInit() {

    this.customerApi.apiCustomerGet().subscribe(response => {
      this.customers = response.customers;
      this.gridData = process(this.customers, this.state);
      this.ref.detectChanges();
    })
  }

  printSelection() {
    console.log(this.selectionCustomer);
  }
}

If I click on a row, nothing happens. No error, no selection.

To find the problem I added a button to the UI which prints out the selected row guid.

<button md-raised-button color="primary" (click)="printSelection()">print</button>

If I press the button, the console prints the correct GUID and the row gets higlighted! but only if I press the button.

I can not see anything more in the documentation here https://www.telerik.com/kendo-angular-ui/components/grid/selection/ I have also tried it with the selectableSetting, but no change at all.

Why does my Grid selection not trigger a "UI refresh"?

Version

"@progress/kendo-angular-grid": "^1.4.2",

"@angular/core": "~4.3.1",

Sorry for reusing angular2 tag, I'm not allowed to create a new tag for kendo-ui-angular4

Andre Andre · Accepted Answer · 2017-10-24T12:00:00

it seems that the problem was:

changeDetection: ChangeDetectionStrategy.OnPush,

another copy past issue without checking the documentation what it really does...

kendo grid does not hightlight seleted row / missing ui refresh

1 Answers