[英]How to set selected row programmatically in Kendo Grid + Angular 4?
我有關於Angular 4 + TypeScript + Kendo UI的應用程序。 我還有一個包含用戶表的頁面。 編輯用戶后,我想按照我編輯的ID突出顯示用戶。
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();
});
});
}
我還在Kendo文檔事件中找到了“ index ”和“ selected ”字段:
selectionChange(event: SelectionEvent): void {
//?
}
我試圖在ngOnInit
方法中以編程方式調用selectionChange
:
this.selectionChange({ index: 1, selected: true });
但我不知道如何在selectionChange
方法體中的gridView
中設置選定的行。
那么,我應該怎么做gridView
來選擇行? 或者可能有一種更簡單的方法來按ID選擇行。
您可以手動選擇行,如下所示,我已嘗試在我的Kendo網格中工作,但可能需要一些拋光。
定義一些必需的變量 :(請從下面的代碼中定義缺失的變量)
rowIndex : number =0;
isSelectedRowChanged: boolean = false;
selectedItem : any;
定義函數以設置所選行,如下所示:
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;
}
}
}
}
}
}
調用以下函數以在將數據源分配給網格后設置選擇的第一行:
setTimeout(() => {
this.rowIndex = 0;
this.SetSelectedRow(0, true, false, false);
}, 200);
在行選擇更改事件上寫下面的函數:
public OnSelection_Changed(item: any): void {
if (!item.selected) {
this.SetSelectedRow(item.index, false, true, false);
}
else {
this.SetSelectedRow(item.index, false, false, false);
}
}
還定義Cell Click事件 :
OnCellClick(dataItem, rowIndex, columnIndex) {
if (this.selectedItem != dataItem) {
this.isSelectedRowChanged = true;
this.selectedItem = dataItem;
}
else {
this.isSelectedRowChanged = false;
}
}
我的臨時解決方案是:
在html中插入屬性data-id :
<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>
在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);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.