How to customize a selected row programmatically in a Kendo + Angular 4 grid?

Question

I have an application on Angular 4 + TypeScript + Kendo user interface. I also have a page with a user table. After editing the user, I want to highlight the user using the ID that I edited.

users: Observable<Array<User>>; selectedId: number; gridView: GridDataResult; ngOnInit() { this.users = this.route.params .switchMap((params: Params) => { this.selectedId = +params['id']; return this.adminService.getUsers(); }); }); } 

I also found in the Kendo documentation document with the "index" and "selected" fields:

 selectionChange(event: SelectionEvent): void { //? } 

I tried calling selectionChange programmatically in the ngOnInit method:

 this.selectionChange({ index: 1, selected: true }); 

But I do not know what to do to set the selected row in the gridView in the body of the selectionChange method.

So what should I do with gridView to select a row? Or there might be a simpler method for selecting a row using ID .

Answer 1

You can select a row manually, as shown below, I tried Kendo in my grid, but this may require some polishing.

Define some required variables : (specify the missing variables from the code below)

 rowIndex : number =0; isSelectedRowChanged: boolean = false; selectedItem : any; 

Define a Function to set the selected line as shown below:

 public SetSelectedRow(index: number, isManualSelection, isSelected, isCellClick) { var grid = this.el.nativeElement.getElementsByClassName('k-grid-content')[0]; var rows = grid.getElementsByTagName('tr'); let dataRowIndex = -1; let selectedRow = grid.getElementsByClassName('k-state-selected')[0]; for (let i = 0; i < rows.length; i++) { if (rows[i].className.indexOf("k-grouping-row") < 0 && rows[i].className.indexOf("k-group-footer") < 0) { if (isManualSelection) { this.rowIndex = 1; if (selectedRow != null) { selectedRow.className = String(selectedRow.className).replace(" k-state-selected", '').replace("k-state-selected", ''); } if (rows[i].className.indexOf("k-state-selected") < 0) { rows[i].click(); } //Set selectedItem for (let k = 0; k < rows[i].children.length; k++) { if (rows[i].children[k].className.indexOf("k-group-cell") < 0 && rows[i].children[k].children[0] != null) { rows[i].children[k].children[0].click(); break; } } break; } else { if (this.isSelectedRowChanged) { this.rowIndex = index + 1; return; } if (selectedRow == null) { //Set selectedItem rows[i].className = rows[i].className + " k-state-selected"; for (let k = 0; k < rows[i].children.length; k++) { if (rows[i].children[k].className.indexOf("k-group-cell") < 0 && rows[i].children[k].children[0] != null) { rows[i].children[k].children[0].click(); break; } } break; } else { dataRowIndex++; if (!this.isSelectedRowChanged) { if (isSelected && !isCellClick) { selectedRow.click(); } break; } else { this.rowIndex = dataRowIndex + 1; } } } } } } 

The call function below to set the first row selected after assigning the data source to the grid:

  setTimeout(() => { this.rowIndex = 0; this.SetSelectedRow(0, true, false, false); }, 200); 

Write the function below in the Row Select Change Event :

  public OnSelection_Changed(item: any): void { if (!item.selected) { this.SetSelectedRow(item.index, false, true, false); } else { this.SetSelectedRow(item.index, false, false, false); } } 

Also define the Cell Click event :

 OnCellClick(dataItem, rowIndex, columnIndex) { if (this.selectedItem != dataItem) { this.isSelectedRowChanged = true; this.selectedItem = dataItem; } else { this.isSelectedRowChanged = false; } } 

Answer 2

My workaround:

Insert data-id attribute in html:

 <kendo-grid-column title="Actions"> <ng-template kendoGridCellTemplate let-user> <div class="btn-group"> <button class="btn btn-xs btn-default" type="button" data-toggle="tooltip" title="Edit User" [attr.data-id]="user.id"><i class="fa fa-pencil"></i></button> </div> </ng-template> </kendo-grid-column> 

And in ts:

 gridView: GridDataResult; selectedId: number; constructor(private route: ActivatedRoute, private adminService: AdminService) { } ngOnInit() { this.route.params .switchMap((params: Params) => { this.selectedId = +params['id']; return this.adminService.getUsers(); }) .subscribe((response: GridDataResult) => { this.gridView = response; this.selectRow(); }); } selectRow() { setTimeout(() => { if (this.selectedId) { let button = document.querySelector('[data-id="' + this.selectedId + '"]'); if (button) { let tr = button.parentElement.parentElement.parentElement; tr.className += " k-state-selected"; } } }, 200); }