This is a migrated thread and some comments may be shown as answers.

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

4 Answers 119 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Zaw
Top achievements
Rank 1
Veteran
Zaw asked on 11 Apr 2021, 04:24 PM

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?

4 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 13 Apr 2021, 03:36 PM

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

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

0
Zaw
Top achievements
Rank 1
Veteran
answered on 13 Apr 2021, 04:30 PM
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
0
Martin
Telerik team
answered on 15 Apr 2021, 09:24 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Zaw
Top achievements
Rank 1
Veteran
answered on 16 Apr 2021, 03:37 AM

Hi Martin

 

Well noted. 

 

Thanks.

 

 

 

Tags
Grid
Asked by
Zaw
Top achievements
Rank 1
Veteran
Answers by
Martin
Telerik team
Zaw
Top achievements
Rank 1
Veteran
Share this question
or