Kendo UI Angular Grid, in cell editing with Keyboard Navigation couldn't open dropdown list via Keyboard

[Zaw]

Hello 

I apply keyboard navigation from below url to control the Tab key. 
https://www.telerik.com/kendo-angular-ui/components/grid/keyboard-navigation/

In my grid, there is a column with kendo-dropdownlist as kendoGridEditTemplate. 
Usually we can open dropdown-list by press Enter key or Alt+Down Arrow key. 
But within the grid in cell editing, these key press do not open the dropdown. 
Is there any easy way to open dropdown with keyboard in grid?

The requirement is the user need to fill up the grid editing with keyboard only without mouse click. 
Is there any keyboard shortcut key for Add New row in grid?

[Martin Bechev]

Hello Zaw,

In order to open the DropDownList popup with Enter key, when using inside a kendoGridEditTemplate, set the FocusableDirective to the dropdown. This will help to control the way focusable elements receive focus in a navigable Grid. Then the developer can handle the focus event of the DropDownList and manually toggle the popup:

 <kendo-grid-column field="testColumn" title="Column">
        <ng-template kendoGridEditTemplate let-dataItem="dataItem">
          <kendo-dropdownlist
            kendoGridFocusable
            #dropdown
            [data]="data"
            (focus)="onFocus(dropdown)"
             ...
          >
          </kendo-dropdownlist>
        </ng-template>
      </kendo-grid-column>

 public onFocus(dropdown) {
    dropdown.toggle(true);
  }

Please check the following example where I added it to the DropDownList element within the UnitsInStock column kendoGridEditTemplate:

https://stackblitz.com/edit/angular-ywiusn

I hope this helps.

Regards,
Martin
Progress Telerik

[Zaw]

Hello Martin

Your solution is working well.
Thanks for your support. 

Could you also reply below question from my post?
"The requirement is the user need to fill up the grid editing with keyboard only without mouse click. 
Is there any keyboard shortcut key for Add New row in grid?" 


Thanks

[Martin Bechev]

Hello Zaw,

I am afraid that there is no available keyboard shortcut for adding new rows in Grid.

In general, a new row is added when a button with kendoGridAddCommand directive is clicked, or when using addRow method in a custom button click handler.

In order to accomplish the desired functionality, the developer can add a button responsible for adding a new row, in a cell template. Thus the user will be able to focus it:

 <kendo-grid-column title="Add Row">
        <ng-template kendoGridCellTemplate let-isNew="isNew">
          <button kendoGridFocusable class="k-button" (click)="addRow()">Add Row</button>
        </ng-template>
      </kendo-grid-column>

 

Regards,

Martin
Progress Telerik

[Zaw]

Hi Martin

 

Well noted. 

 

Thanks.