付费授权Kendo Angular Grid 1.7.1中[Navigable]指令无法识别的咨询

Hey there! Let's work through this issue with your Kendo Angular Grid 1.7.1 (paid licensed version) where the navigable directive isn't being recognized. Here's what you need to check and implement:

1. Confirm You're Using the Correct Grid Feature (Not a Standalone Directive) #

First, a quick clarification: In Kendo Angular Grid 1.7.1, built-in keyboard navigation is enabled via a Grid input property, not a standalone navigable directive. If you're trying to use <div navigable></div> or similar, that's why it's unrecognized—this isn't how the Grid's native keyboard navigation works.

2. Enable Built-in Keyboard Navigation for the Grid #

To turn on the Grid's native keyboard navigation, use the navigable input property directly on the <kendo-grid> component:

<kendo-grid 
  [data]="yourGridData" 
  [navigable]="true"
>
  <!-- Your column definitions here -->
  <kendo-grid-column field="id" title="ID"></kendo-grid-column>
  <kendo-grid-column field="productName" title="Product Name"></kendo-grid-column>
</kendo-grid>

This will activate default keyboard controls (arrow keys for navigation, Enter to select rows, etc.).

3. Verify Grid Module is Properly Imported #

Make sure the GridModule from the Kendo package is imported in your Angular module (e.g., app.module.ts):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@progress/kendo-angular-grid'; // Import the Grid module

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, GridModule], // Add GridModule to imports
  bootstrap: [AppComponent]
})
export class AppModule { }

Without this import, Angular won't recognize any Kendo Grid components or their properties.

4. Check Version Compatibility #

Ensure your @progress/kendo-angular-grid version (1.7.1) is compatible with your Angular project version. Kendo Angular 1.x releases are designed to work with Angular 4.x-5.x. You can verify versions in your package.json:

{
  "dependencies": {
    "@progress/kendo-angular-grid": "1.7.1",
    "@angular/core": "^5.2.0", // Example compatible Angular version
    // Other dependencies...
  }
}

Mismatched versions can cause unexpected property/directive recognition issues.

5. If You Need a Custom navigable Directive #

If you're trying to build custom keyboard navigation logic (instead of using the Grid's native feature), you'll need to create and register your own directive:

Step 1: Create the Directive #

import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: '[navigable]' // This matches the selector you're trying to use
})
export class NavigableDirective {
  constructor(private el: ElementRef) {}

  @HostListener('keydown', ['$event'])
  handleKeyDown(event: KeyboardEvent): void {
    // Add your custom keyboard navigation logic here
    switch (event.key) {
      case 'ArrowDown':
        console.log('Navigate down');
        event.preventDefault(); // Prevent default browser behavior
        break;
      case 'ArrowUp':
        console.log('Navigate up');
        event.preventDefault();
        break;
      // Add more key handlers as needed
    }
  }
}

Step 2: Register the Directive in Your Module #

Add the directive to your module's declarations array:

@NgModule({
  declarations: [AppComponent, NavigableDirective], // Register the directive
  imports: [BrowserModule, GridModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now you can use [navigable] on elements in your template.

内容的提问来源于stack exchange，提问作者hil