Angular2+TypeScript下Kendo Grid与AutoComplete配置问题求助

Hey Venkat, welcome to Kendo UI for Angular! Let's break down your two questions with practical, beginner-friendly examples that fit right into your Angular 2 + TypeScript workflow.

Kendo Grid has a built-in kendo-grid-messages component that lets you override every default message—from empty state prompts to pagination text. You just need to nest this component inside your grid tag, and set the corresponding properties for the messages you want to customize.

Example Code #

First, don't forget to import the required module in your Angular module (easy to miss for new users!):

// app.module.ts
import { GridModule, GridMessagesModule } from '@progress/kendo-angular-grid';

@NgModule({
  imports: [
    // Your other modules (BrowserModule, etc.)
    GridModule,
    GridMessagesModule
  ]
})
export class AppModule {}

Then update your grid template:

<kendo-grid [data]="gridData" [loading]="isGridLoading">
  <!-- Custom grid messages -->
  <kendo-grid-messages
    noRecords="No data available right now" <!-- Empty state message -->
    loading="Loading grid data..." <!-- Loading state message -->
    pagerFirst="First Page"
    pagerLast="Last Page"
    pagerPrevious="Prev"
    pagerNext="Next"
  ></kendo-grid-messages>

  <!-- Your existing column definitions -->
  <kendo-grid-column field="name" title="Name"></kendo-grid-column>
  <kendo-grid-column field="type" title="Type"></kendo-grid-column>
</kendo-grid>

Key Notes #

• Use noRecords to set the message when the grid has no data
• Pair the loading message with a boolean isGridLoading property in your component to toggle it while fetching data
• You can also customize sorting, filtering, and other grid-related messages here—adjust based on your needs.

Your issue is that the AutoComplete shows "no data found" immediately, before the user even starts searching. We can fix this by using the kendo-auto-complete-messages component and pairing it with a loading state to control when messages appear.

Step 1: Import Required Modules #

Add the message module to your Angular module first:

// app.module.ts
import { AutoCompleteModule, AutoCompleteMessagesModule } from '@progress/kendo-angular-dropdowns';

@NgModule({
  imports: [
    // Your other modules
    AutoCompleteModule,
    AutoCompleteMessagesModule
  ]
})
export class AppModule {}

Step 2: Update Component Logic #

In your component, add a boolean to track the searching state, and modify your filterChange method to toggle it:

// your-component.component.ts
import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  gridData: any[] = [];
  isSearching = false;

  filterChange(filterValue: string, field: string) {
    this.isSearching = true;
    // Replace this with your actual API call
    this.fetchFilteredData(filterValue, field).subscribe(data => {
      this.gridData = data;
      this.isSearching = false;
    });
  }

  // Simulate an async data fetch (replace with your real logic)
  private fetchFilteredData(filter: string, field: string): Observable<any[]> {
    const mockData = [
      { name: 'Family Type A', type: 'Match Type 1' },
      { name: 'Family Type B', type: 'Match Type 2' },
      { name: 'Family Type C', type: 'Match Type 1' }
    ];
    const filtered = filter 
      ? mockData.filter(item => item.name.toLowerCase().includes(filter.toLowerCase())) 
      : [];
    return of(filtered).pipe(delay(500)); // Simulate network delay
  }

  // Your existing onValueChange method
  onValueChange(event: any, field: string) {
    // Your logic here
  }
}

Step 3: Update AutoComplete Template #

Add the messages component and bind the loading property to your isSearching boolean:

<kendo-autoComplete
  [data]="gridData"
  [valueField]="'name'" <!-- Fixed: added quotes around 'name' since it's a string -->
  [loading]="isSearching"
  (valueChange)="onValueChange($event, 'family.type')"
  (filterChange)="filterChange($event, 'match.type')"
>
  <!-- Custom AutoComplete messages -->
  <kendo-auto-complete-messages
    noData="No matching records found" <!-- Only shows when search completes with no results -->
    loading="Searching..." <!-- Shows while data is being fetched -->
  ></kendo-auto-complete-messages>
</kendo-auto-complete>

Quick Fixes for Your Worst-Case Scenarios #

• Remove initial "no data found" entirely: The setup above ensures no message shows until the user starts searching. If you want to hide the no-data message for empty search inputs, you can conditionally set noData to an empty string based on the filter value length.
• Set empty message: Just change noData to an empty string: <kendo-auto-complete-messages noData=""></kendo-auto-complete-messages>

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