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

Question

我有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(); 
     }); 
    }); 
} 

此外，我在剑道文档事件发现 “指数” 和 “选择” 字段：

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

我试图在ngOnInit方法编程方式调用selectionChange：

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

但我不知道该怎么做在0123设置选定的行体内selectionChange方法。

那么，我应该怎么做与gridView选择行？或者可能有一个更简单的方法来选择行ID。

Answer 1

您可以按照以下方式手动选择行，我尝试过我的剑道网格，但它可能需要一些打磨。

定义一些需要变量：（请定义从下面的代码缺少变量）

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); 
    }   
} 

还要定义细胞Click事件：

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

Answer 2

我的临时解决方案是：

插入属性数据-id 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> 

而在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); 
}