Angular 4下Kendo UI Angular表格全局搜索实现方案咨询

Hey there! Since you've already got this working with Kendo jQuery, let's translate that logic over to Kendo UI Angular (for Angular 4) with an external search input. Here's a straightforward, production-ready implementation:

First, add your external search input and Kendo Grid to your component's HTML. We'll bind the input to a component property and trigger a search on input changes:

<!-- External Global Search Input -->
<input 
  type="text" 
  placeholder="Search all columns..." 
  [(ngModel)]="searchTerm"
  (input)="handleSearch()"
  class="k-input mb-2"
/>

<!-- Kendo UI Angular Grid -->
<kendo-grid
  [data]="filteredGridData"
  [pageSize]="10"
  [skip]="currentPageOffset"
  [pageable]="true"
>
  <!-- Define your grid columns as usual -->
  <kendo-grid-column field="id" title="ID" width="80"></kendo-grid-column>
  <kendo-grid-column field="fullName" title="Full Name"></kendo-grid-column>
  <kendo-grid-column field="department" title="Department"></kendo-grid-column>
  <kendo-grid-column field="email" title="Email"></kendo-grid-column>
</kendo-grid>

In your Angular 4 component, we'll use Kendo's process utility from @progress/kendo-data-query to handle filtering across all desired columns. We'll keep a copy of the original dataset to avoid modifying source data directly:

import { Component } from '@angular/core';
import { process } from '@progress/kendo-data-query';

@Component({
  selector: 'app-global-search-grid',
  templateUrl: './global-search-grid.component.html'
})
export class GlobalSearchGridComponent {
  // Original unfiltered dataset (replace with your API data)
  private originalDataset = [
    { id: 1, fullName: 'Alice Johnson', department: 'Engineering', email: 'alice.j@company.com' },
    { id: 2, fullName: 'Bob Williams', department: 'Marketing', email: 'bob.w@company.com' },
    { id: 3, fullName: 'Charlie Davis', department: 'Engineering', email: 'charlie.d@company.com' },
    // Add more sample data as needed
  ];

  // Filtered data bound to the grid
  filteredGridData: any[] = this.originalDataset;
  // Search term bound to the input
  searchTerm = '';
  // Pagination offset (reset on search)
  currentPageOffset = 0;

  handleSearch(): void {
    // Use Kendo's process function to apply global filter across columns
    this.filteredGridData = process(this.originalDataset, {
      filter: {
        logic: 'or', // Match any column that contains the search term
        filters: [
          { field: 'id', operator: 'contains', value: this.searchTerm },
          { field: 'fullName', operator: 'contains', value: this.searchTerm },
          { field: 'department', operator: 'contains', value: this.searchTerm },
          { field: 'email', operator: 'contains', value: this.searchTerm }
          // Add a filter object for every column you want to include in the search
        ]
      }
    }).data;

    // Reset pagination to first page after search
    this.currentPageOffset = 0;
  }
}

Make sure your Angular module includes the necessary dependencies for two-way binding and the Kendo Grid:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // Required for [(ngModel)]
import { GridModule } from '@progress/kendo-angular-grid';

import { GlobalSearchGridComponent } from './global-search-grid.component';

@NgModule({
  imports: [BrowserModule, FormsModule, GridModule],
  declarations: [GlobalSearchGridComponent],
  bootstrap: [GlobalSearchGridComponent]
})
export class AppModule { }

• API Data Integration: If your grid data comes from an API, just replace originalDataset with the data you fetch from your service. The search logic remains identical.
• Column-Specific Operators: For numeric fields like id, you might want to switch the operator from contains to eq (equals) or startswith if that makes more sense for your use case.
• Version Compatibility: Ensure your Kendo UI Angular package version is compatible with Angular 4. At the time of Angular 4's release, Kendo UI Angular was in version 3.x, so double-check your package.json dependencies.

内容的提问来源于stack exchange，提问作者Fai Zal Dong