2017-02-27 9 views
0

보기 init (ngAfterViewInit)?보기 후 어떻게 kendoui multiselect 요소에 포커스를 설정할 수 있습니까? 정상 입력 요소에서kendoui multiselect에 포커스 설정

내가 좋아하는 포커스를 설정 :

HTML :

<input #setFocus type="text" class="form-control" formControlName="code" id="code" /> 

구성 요소 : 도움을

@ViewChild('setFocus') focusElement: any; 
... 
ngAfterViewInit() { 
    if (this.focusElement) { 
     this.focusElement.nativeElement.focus(); 
    } 
} 

감사합니다!

+0

초점 흐림 지원의 개선이 계획되어 있습니다 (https://github.com/telerik/kendo-angular/issues/335 ). 구현이 완료 될 때까지이 제안에서 몇 가지 제안을 사용해야합니다 실. –

+1

답변 해 주셔서 감사합니다! 나는 초점/흐림 지원을 기다릴 것이다. –

답변

0

자신의 documentation 보면, 당신은 당신은 템플릿 입력으로 [open]를 사용하여, 예를 들어이를 전환 할 수있는 open 입력을

@Component({ 
    selector: 'tester', 
    template: ` 
     <kendo-multiselect #setFocus [data]="items"></kendo-multiselect> 
    ` 
}) 
class TesterComponent { 

    @ViewChild('setFocus') 
    focusElement: MultiSelectComponent; 

    ngAfterViewInit() { 
     this.focusElement.open = true; 
    } 
} 

를 사용할 수 있습니다.

0

답변 해 주셔서 감사합니다.

입력을 [open]="true"으로 설정하면 다중 선택 컨트롤에서 팝업이 열립니다.

하지만 뷰를로드 한 후에 다중 선택 컨트롤에서 텍스트 입력 필드로 커서를 설정해야합니다. 따라서 사용자는 컨트롤을 처음 클릭 할 필요없이 데이터 입력과 필터링을 시작할 수 있습니다.

0

언제든지 HTML이 어떻게 제어가 렌더링되고 사용할 수 있는지 살펴볼 수 있습니다.

let el = this.focusElement.nativeElement; 

if (el.className.indexOf("k-multiselect") != -1) { // kendo multiselect 
    el.children[0].children[1].children[0].focus(); 
} 

또는 JQuery와

let el = this.focusElement.nativeElement; 
$(el).find(".k-input").focus(); 

는 검도가 제대로이 구현 될 때까지.