The below is the code I have used to populate the Kendo-Grid with Observable<GridDataResult>
<kendo-grid [data]="usersDataView | async" [height]="425" [pageSize]="pageSize" [skip]="skip"
[pageable]="true" [kendoGridBinding]="data" (pageChange)="onPageChange($event)" [sort]="state.sort"
(selectionChange)="selectionChanged($event)" [groupable]="false" [group]="state.group" [columnMenu]="true"
[resizable]="true">
<kendo-grid-column showSelectAll="true" [width]="60" [minResizableWidth]="60">
<ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
<input type="checkbox" (click)="SetAllSelected($event)" />
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.selected"
[attr.disabled]="dataItem.deviceName !== null ? true : null" (click)=SetSelectedItem(dataItem) />
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="userName" title={{translations.USER_NAME}} filter="text" [filterable]="true"
headerClass="kendoColumn">
<ng-template kendoGridCellTemplate let-dataItem>
<a *ngIf="dataItem.userStatus === 0"
[routerLink]="['/users/details/'+dataItem.userd]">{{dataItem.userName}}</a>
<span *ngIf="dataItem.userStatus === 1">{{dataItem.userName}}</span>
</ng-template>
</kendo-grid-column>
</kendo-grid>
When I run the App, it populates the Grid with Empty rows but equals to the no. of records in the data. I am finding difficulty in mapping the columns to the Grid.
What change I have to do with usersDataView collection and populate the data in the Grid?