Hi ,
I am using the Kendo Grid to display some data with checkboxes , I am trying to checked the item checkbox if the item is already selected , the selected item id is store on a separate sql table .
The process is ; load items , load selected items , add selected items to selectedKeys.
for some reason the first time the page is loaded selectedKeys is empty , but if a navigate to another page and back to the page the selected items are checked.
I can only assume the selectedKeys are not populated on time for the grid to update the checkboxes , I have try NgOnInit , ngAfterViewInit.
Any Ideas ?
HTML
<kendo-grid [data]="gridData"
(dataStateChange)="dataStateChange($event)"
[filterable]="true"
[filter]="state.filter"
[sortable]="true"
[sort]="state.sort"
[pageSize]="20"
[pageable]="true"
kendoGridSelectBy="codeNumber"
[selectedKeys]="selectedCodes"
(selectionChange)="onSelect($event)"
[selectable]="selectableSettings">
<kendo-grid-column field="codeNumber" title="Code Number"> </kendo-grid-column>
<kendo-grid-checkbox-column title="Use on Project"></kendo-grid-checkbox-column>
</kendo-grid>
TS
export class PackageCodesMasterListComponent implements OnInit, AfterViewInit {
public gridData: GridDataResult;
packageCodes: PackageCode[] = [];
item: PackageCode;
packageCodeTypes: PackageCodeType[];
public selectedCodes: string[] = [];
projectPackageCodes: ProjectPackageCode[] = [];
public mode: SelectableMode = "multiple";
constructor(private store: Store<IPackageCodeState>, private coreStore: Store<AppState>, private router: Router) {
combineLatest(this.store.pipe(select(selectPackageCodes)), this.store.pipe(select(selectProjectPackageCodes)), this.store.pipe(select(selectPackageCodeTypes))).subscribe(([packageCodes, projectPackageCodes, packageCodeTypes]) => {
if (packageCodes && projectPackageCodes && packageCodeTypes) {
this.packageCodes = packageCodes;
this.projectPackageCodes = projectPackageCodes;
this.packageCodeTypes = packageCodeTypes;
if (this.projectPackageCodes.length > 0) {
this.findSelectedItems();
}
this.gridData = process(this.packageCodes, this.state);
}
})
}
ngOnInit(): void {
this.store.dispatch(getPackageCodes())
this.store.dispatch(getPackageCodeTypes())
this.store.dispatch(getProjectPackageCodes())
}
public ngAfterViewInit() {
//Custom logic could be added here, to be executed once the grid and the selection are loaded
this.findSelectedItems();
}
public state: State = {
sort: [{ field: "codeNumber", dir: "asc" }],
group: [],
filter: {
logic: "and",
filters: [],
},
};
public selectableSettings: SelectableSettings = {
enabled: true,
mode: this.mode
};
public dataStateChange(state: DataStateChangeEvent): void {
this.state = state;
this.gridData = process(this.packageCodes, this.state);
}
findSelectedItems() {
if (this.projectPackageCodes.length > 0) {
this.projectPackageCodes.forEach(item => {
let code = this.packageCodes.find(x => x.packageCodeId === item.packageCodeId)
let y = this.selectedCodes.includes(code.codeNumber)
if (y === false) {
this.selectedCodes.push(code.codeNumber);
console.log(this.selectedCodes.length)
}
})
}
}