如何在Kendo Grid Angular 4中以编程方式设置选定的行？

发布时间：2020-12-17 07:02:05 所属栏目：安全来源：网络整理

导读：我有关于Angular 4 TypeScript Kendo UI的应用程序.我还有一个包含用户表的页面.编辑用户后,我想按照我编辑的ID突出显示用户. users: ObservableArrayUser;selectedId: number; gridView: GridDataResult;ngOnInit() { this.users = this.route.params .swit

我有关于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);
    }
    else {
        this.SetSelectedRow(item.index,false);
    }        
}

还定义Cell Click事件：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!