Jqxbutton inside jqxWindow focus is not working

[govi-pParticipant]

Hi,

I am using jqxbuttons ok and cancel inside jqxWindow.

I am trying to set focus to ‘ok button’.
@viewChild(‘ok’) okButton: jqxButtonComponent;
this.okButton.focus();

Focus is not setting in the corresponding button.

Kindly provide any solution.

Thenkas & Regards,
Govi

[MartinParticipant]

Hello Govi,

Here is a simple Demo that shows how to set focus to the button.
Your selection with ViewChild is correct. You should just move the ‘focus’ method in ngAfterViewInit lifecycle hook because the elements are not created before that.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[govi-pParticipant]

Hi Martin,

Thanks for ur response.
I tried your solution. Focus is setting in the button.On ok button click I written code to close the window. But When I press Enter, Window is not closing.
Guess focus is in window.

<jqxWindow #window
[width]=”500″
[height]=”400″
[minHeight]=”300″ [minWidth]=”300″
[isModal]=”true” [autoOpen]=”false”>
<jqxButton #okButton (click)=”closeWindow($event)” [width]=”100″>OK</jqxButton>
<jqxButton #cancelButton [width]=”100″>Cancel</jqxButton>
</jqxWindow>

TS:
export class AppComponent {
@ViewChild(‘okButton’) onButton: jqxButtonComponent;
@ViewChild(‘window’) windowRef: jqxWindowComponent

openWindow(e){
this.onButton.focus();
e.stopPropagation();
this.windowRef.open();
}
closeWindow(e){
this.windowRef.close();
}
}

Thanks & Regards,
Govi

[MartinParticipant]

Hello Govi,

I’ve updated the Demo , adding the closeWindow function.

When opening the window you should call the button’s focus method after this.windowRef.open(); and also put it in a setTimeout with 100 or more miliseconds, so it is executed after the window is opened.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts