How do I set focus on page load to wijmo input

How do I set focus on page load to wijmo input

Posted by: jason.brandt on 25 September 2018, 12:48 pm EST

• 

  jason.brandt

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 25 September 2018, 12:48 pm EST

  I have roughly the following code =

  
  @Component({
      selector: 'grid-globalfilter',
      template: `
       <input type="text" [(ngModel)]="globalFilter" (ngModelChange)="globalUpdate($event)" placeholder="Search..." class="inline" am-reset-field focus="true" />
    `,
      inputs: ['_filter', 'itemsSource' ]
  })
  export class GridGlobalFilter implements OnInit {
      _filter: wjcGridFilter.FlexGridFilter;
  
  

  How do set focus to this input field on page load? Does Wijmo have .focus() method?

  Note I am using Angualr 4

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 26 September 2018, 12:37 am EST

  Hi,

  Yes, all Wijmo controls have a focus() method, so you may use wijmoControlInstance.focus() to focus a Wijmo control.
  
  For input fields, you may use the focus() method provided by HTMLElement.

  Regards
  
  Sharad

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 28 September 2018, 4:09 pm EST

  I was able to set focus using the HTMLElement but i was not able to use wijmoControlInstance on _filter: wjcGridFilter.FlexGridFilter;

  How is this done?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 1 October 2018, 1:14 am EST

  The .focus() method doesn’t work for filter since it isn’t a focusable control in itself but divided into column filter for each column. So if you want to display filterEditor for a particular column then you may use filter.editColumnFilter() method.
  
  Please refer to the following sample:
  
  https://stackblitz.com/edit/angular-24aujn?file=app%2Fapp.component.ts

  ~Sharad