Focus on input element in kendo-window component

[Thibaut]

Hi, 

I'm using Kendo-UI with Angular 5 and I can't figure how to implement two things : 

1. How to force focus on a Kendo-UI input element (dropDownList, TextBox, ...) which is in a kendo-window component ? I see no documentation about this. I've read that I may have to wait for the window component to trigger the activate method but such method doesn't exist in the angular version. 

2. In the grid component, how can I activate the navigation with the arrow key ? More precisely, in single selection mode, I would like the selected row to change when I press the arrow key down or up. Is this possible ? Is this possible even if I use pagination with [data] being an observable of GridDataResult ? 

Thank you in advance for your help. 

[Ivan]

Hi Thibaut,

Regarding your questions:

1. This is perfectly doable by using ViewChild technique and calling focus() method of the component, please refer to this plunk sample, which demonstrates this behavior.
Please do note, that this technique does ​not depend on the Angular version.

2. This behavior is not supported out of the box, but you can achieve it with dev version of kendo-angular-grid, please refer to this plunk sample for implementation details. About retrieving development builds you can refer to this article of our docs.

Hope this helps.

Regards,
Ivan
Progress Telerik

 

[Thibaut]

Hi, 

Thanks a lot for your answers. 

However, I still have a few bugs : 

1. I was asking to get the focus on window initialization. It actually works on my side on button click like in your example but I can't figure out to make it work when the kendo-window is initialized. I want the focus to be on the first input field right after the window has been displayed. Without having to click on any button.

2. Thanks for this, it works great when [data] is a GridDataResult, however, when I use an Observable<GridDataResult>, the behavior is quite strange (on the very first arrowDown, the event is triggered but the selected line doesn't change. It start changing on the second arrowDown but then the selection is not aligned : index 3 is in mySelection but line with index 2 is selected). Is this because of the Observable<GridDataResult> datatype ? 

Thanks in advance.

 

[Dimiter Topalov]

Hi Thibaut,

You can focus the DropDownList programmatically when the Window is opened by calling its focus() method in the same place where opening the Window is performed, wrapped in a setTimeout():

https://plnkr.co/edit/zKO4mOEreM0N3WszhvlZ?p=preview

If the Window will be initially opened when the page loads, you can also initially focus the DropDownList in the AfterViewInit lifecycle hook event handler:

https://plnkr.co/edit/5VzYnQHKEx0go0qWtNMr?p=preview

I could not reproduce the described Grid behavior, but it seems that there is some mixup in the mechanics for determining which row should be selected (looks like an off-by-one type of error). This could be caused by the fact that the Grid row indexes are zero-based, while typically data items IDs start from 1.

Here is the same example, modified to retrieve the data from a remote service asynchronously and the Grid is bound directly to the Observable via the async pipe:

https://plnkr.co/edit/Y9jpVto3MkysurpwuLvN?p=preview

I hope this helps, but if any of the issues persist, please send us a similar isolated runnable project(s) where they can be observed, so we can inspect them further and try to provide the most suitable suggestions (if such are available) for the specific scenarios. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Thibaut]

Hi, 

Thanks again for your answers. 

1. Focus() works great now when using the setTimeout() method.

2. In order to have my selection on the gridComponent work correctly, I have to manually trigger a SelectionChange() event like below

 public gridKeydown(grid: GridComponent, e: KeyboardEvent): void {
    setTimeout(() => this.selectActiveRow(grid));
  }
  private selectActiveRow(grid: GridComponent): void {
    // Select the currently focused row
    if (grid.activeRow && grid.activeRow.dataItem) {
      this.rowSelection = [grid.activeRow.dataItem[this.selectionAttribute]]
      //Force emission of dummy selectionChange event to force refresh of grid selected rows
      const selectionEvent: SelectionEvent = {ctrlKey: false, deselectedRows: [], index: grid.activeRow.index, selected: true, selectedRows: [grid.activeRow], shiftKey: false}
      this.grid.selectionChange.emit(selectionEvent);
    }
  }

I should also mention that, every time new data is received by the server, I automatically select the first row displayed in the grid with 

setTimeout(() => (<HTMLElement>document.getElementsByTagName('td')[0]).focus());

 

Thanks again for your replies