component - ¿Cómo establecer la fila seleccionada programáticamente en Kendo Grid+Angular 4?

kendo ui angular 2+

Question

Tengo una aplicación en Angular 4 + TypeScript + Kendo UI. También tengo una página con tabla de usuarios. Después de editar al usuario, quiero resaltar usuario por ID que he editado.

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

También encontré en el evento de documentación de Kendo con los campos " índice " y " seleccionado ":

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

Traté de llamar a selectionChange programmatically en el método ngOnInit :

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

Pero no sé qué hacer para establecer la fila seleccionada en gridView en el cuerpo del método selectionChange .

Entonces, ¿qué debo hacer con gridView para seleccionar la fila? O puede haber allí es un método más simple para seleccionar fila por ID .

Answer 1

Mi solución temporal es:

Inserte el atributo data-id en 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>

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

Answer 2

Puede seleccionar la fila manualmente como se muestra a continuación, he intentado en mi red Kendo funcionar, pero puede requerir cierto pulido.

Definir algunas variables requeridas: (por favor, defina las variables faltantes del código siguiente)

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

Definir la función para establecer la fila seleccionada de la siguiente manera:

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

Llame a la función siguiente para establecer la primera fila seleccionada después de asignar Fuente de datos a la grilla:

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

Escriba la función siguiente en el evento de cambio de selección de fila :

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

También defina el evento Cell Click :

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