如何在 Kendo Grid + Angular 4 中以编程方式设置选定的行? [英] How to set selected row programmatically in Kendo Grid + Angular 4?
问题描述
我在 Angular 4 + TypeScript + Kendo UI 上有应用程序.我还有一个包含用户表的页面.编辑用户后,我想通过我编辑的 ID 突出显示用户.
I have app on Angular 4 + TypeScript + Kendo UI. Also I have a page with table of users. After editing user I want to highlight user by 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();
});
});
}
我还在 Kendo 文档事件中发现了index"和selected"字段:
Also I found in Kendo documentation event with "index" and "selected" fields:
selectionChange(event: SelectionEvent): void {
//?
}
我尝试在 ngOnInit
方法中以编程方式调用 selectionChange
:
I tried to call selectionChange
programmatically in ngOnInit
method:
this.selectionChange({ index: 1, selected: true });
但我不知道如何在 selectionChange
方法的主体中的 gridView
中设置选定的行.
But I don't know what to do to set selected row in gridView
in body of selectionChange
method.
那么,我应该如何使用 gridView
来选择行?或者可能有更简单的方法来按 ID 选择行.
So, what should I do with gridView
to select row? Or may be there is a simpler method to select row by ID.
推荐答案
您可以如下手动选择行,我在我的 Kendo 网格中尝试过它可以工作,但可能需要一些改进.
You can select the row manually as below, I have tried in my Kendo grid it works but it may required some polishing.
定义一些必需的变量:(请从下面的代码中定义缺失的变量)
Define some required variables: (please define missing variables from below code)
rowIndex : number =0;
isSelectedRowChanged: boolean = false;
selectedItem : any;
定义功能来设置选中的行如下:
Define Function to set selected row as 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;
}
}
}
}
}
}
调用下面的函数来设置在将数据源分配给网格后选择的第一行:
Call below function to set first row selected after assign Data source to grid:
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);
}
}
同时定义单元格点击事件:
OnCellClick(dataItem, rowIndex, columnIndex) {
if (this.selectedItem != dataItem) {
this.isSelectedRowChanged = true;
this.selectedItem = dataItem;
}
else {
this.isSelectedRowChanged = false;
}
}
这篇关于如何在 Kendo Grid + Angular 4 中以编程方式设置选定的行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!