Làm thế nào để đặt hàng đã chọn theo lập trình trong Kendo Grid + Angular 4?

Question

Tôi có ứng dụng trên giao diện người dùng + 4 + TypeScript + Kendo. Ngoài ra tôi có một trang với bảng người dùng. Sau khi chỉnh sửa người dùng, tôi muốn đánh dấu người dùng theo số ID mà tôi đã chỉnh sửa.

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

Ngoài ra tôi tìm thấy trong trường hợp tài liệu Kendo với "index" và "chọn" lĩnh vực:

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

Tôi cố gắng để gọi selectionChange lập trình trong ngOnInit phương pháp:

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

Nhưng tôi không biết phải làm gì để đặt hàng đã chọn trong gridView trong phần thân của phương pháp selectionChange.

Vì vậy, tôi nên làm gì với gridView để chọn hàng? Hoặc có thể có một phương pháp đơn giản hơn để chọn hàng theo số ID.

Answer 1

Bạn có thể chọn hàng thủ công như dưới đây, tôi đã thử trong lưới Kendo của tôi nó hoạt động nhưng nó có thể yêu cầu một số đánh bóng.

Xác định một số yêu cầu biến: (xin vui lòng xác định thiếu biến từ bên dưới đang)

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

Xác định Chức năng để thiết lập hàng đã chọn như sau:

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

Gọi bên dưới chức năng để thiết lập hàng đầu tiên được chọn sau khi chỉ định Nguồn dữ liệu cho lưới:

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

Viết dưới chức năng trên Row Lựa chọn Thay đổi tổ chức sự kiện:

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

Cũng xác định di động sự kiện Click:

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

Answer 2

giải pháp tạm thời của tôi là:

Chèn thuộc tính dữ liệu -id bằng 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> 

Và trong 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); 
}