Navigation is not working in grid

[n/a]

I tried to integrate the keyboard navigation in my code but i get the  activeRow, activeCell attributes as undefined( in incell-tab.directive.ts file)   as shown in attached image.please check out my code in plunker and suggest a solution.

https://next.plnkr.co/edit/1p2315uxx3OAuYcM1CpL?p=preview

[Dimiter Topalov]

Hello Suresh,

I will paste the answer from the private support thread that discusses the same question here so others can benefit too:

The Grid needs to be navigable for the discussed properties to be available:

https://www.telerik.com/kendo-angular-ui/components/grid/keyboard-navigation/#toc-keyboard-navigation

"By default, the keyboard navigation of the Grid is disabled. To enable keyboard navigation, set the navigable attribute to true."

It is also worth mentioning that in order to pass the createFormGroup function to the tabbing directive properly, it needs to be a class field/method as opposed to a declaration outside of the component class like in the following example:

https://www.telerik.com/kendo-angular-ui/components/grid/keyboard-navigation/#toc-controlling-the-focus

 

@Component({
  selector: 'my-app',
  template: `
      <kendo-grid
          [inCellTab]="createFormGroup"

          [kendoGridInCellEditing]="createFormGroup"
          [kendoGridBinding]="products"
          [height]="500"
          [pageSize]="10"
          [pageable]="true"
          [sortable]="true"
          [navigable]="true"
        >
        <ng-template kendoGridToolbarTemplate>
            <button kendoGridAddCommand>Add new</button>
        </ng-template>
        <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
        <kendo-grid-column field="UnitPrice" editor="numeric" title="Price"></kendo-grid-column>
        <kendo-grid-column field="Discontinued" editor="boolean" title="Discontinued"></kendo-grid-column>
        <kendo-grid-column field="UnitsInStock" editor="numeric" title="Units In Stock"></kendo-grid-column>
        <kendo-grid-command-column title="command" width="220">
            <ng-template kendoGridCellTemplate let-isNew="isNew">
                <button kendoGridRemoveCommand>Remove</button>
                <button kendoGridSaveCommand [disabled]="formGroup?.invalid">Add</button>
                <button kendoGridCancelCommand>Discard</button>
            </ng-template>
        </kendo-grid-command-column>
      </kendo-grid>
  `
})
export class AppComponent {
    public products: any[] = products;
    public formGroup: FormGroup;

    constructor(private formBuilder: FormBuilder) {
        this.createFormGroup = this.createFormGroup.bind(this);
    }

    public createFormGroup(args: any): FormGroup {
        const item = args.isNew ? new Product() : args.dataItem;

        this.formGroup = this.formBuilder.group({
            'ProductID': item.ProductID,
            'ProductName': [item.ProductName, Validators.required],
            'UnitPrice': item.UnitPrice,
            'UnitsInStock': [item.UnitsInStock, Validators.compose([Validators.required, Validators.pattern('^[0-9]{1,3}')])],
            'Discontinued': item.Discontinued
        });

        return this.formGroup;
    }
}

I will also close this thread as a duplicate and you can expect a response to your other inquiry in the private ticket.

Regards,
Dimiter Topalov
Progress Telerik