septembre 10, 2025

Commencer avec Kendo UI pour Angular Grid

L’interface utilisateur Kendo pour la grille de données angulaires est une solution robuste pour afficher et gérer les données dans les applications angulaires, y compris des capacités avancées comme la virtualisation, l’accessibilité et l’intégration.

La construction d’applications angulaires modernes nécessite souvent d’afficher et de gérer de grands ensembles de données dans un format convivial. Alors que les tables HTML de base peuvent gérer une présentation de données simples, les applications d’entreprise exigent généralement des fonctionnalités plus sophistiquées comme le tri, le filtrage, la pagination et les mises à jour en temps réel. C’est là qu’un composant de réseau de données robuste devient important.

Dans cet article, nous explorerons les progrès pour l’interface utilisateur Grille angulaire conçu spécifiquement pour les applications angulaires. Nous allons expliquer comment la liaison des données fonctionne avec la grille et comment activer certaines opérations de données essentielles.

Kendo UI pour Angular Grid fait partie de Kendo UI pour Angular, une bibliothèque d’interface utilisateur de qualité professionnelle avec plus de 110 composants pour créer des applications modernes et riches en fonctionnalités. Pour l’essayer, inscrivez-vous à un essai gratuit de 30 jours.

Kendo ui pour la grille angulaire

Le Kendo ui pour la grille angulaire Composant fournit un ensemble complet de fonctionnalités prêtes à l’emploi. Il est conçu pour être hautement personnalisable et performant, ce qui facilite la gestion efficace de grands ensembles de données.

Commençons par un exemple de base:

import { Component } from '@angular/core';
import { KENDO_GRID } from '@progress/kendo-angular-grid';

interface Employee {
  EmployeeID: number;
  FirstName: string;
  LastName: string;
  Title: string;
  Department: string;
  Salary: number;
  HireDate: Date;
}

@Component({
  standalone: true,
  imports: [KENDO_GRID],
  selector: 'my-app',
  template: `
    <kendo-grid [data]="employees" [height]="400">
      <kendo-grid-column field="EmployeeID" title="ID" [width]="80"></kendo-grid-column>
      <kendo-grid-column field="FirstName" title="First Name" [width]="120"></kendo-grid-column>
      <kendo-grid-column field="LastName" title="Last Name" [width]="120"></kendo-grid-column>
      <kendo-grid-column field="Title" title="Job Title" [width]="200"></kendo-grid-column>
      <kendo-grid-column field="Department" title="Department" [width]="150"></kendo-grid-column>
      <kendo-grid-column field="Salary" title="Salary" [width]="120" format="{0:c}"></kendo-grid-column>
      <kendo-grid-column field="HireDate" title="Hire Date" [width]="120" format="{0:d}"></kendo-grid-column>
    </kendo-grid>
  `
})
export class AppComponent {
  public employees: Employee[] = [
    {
      EmployeeID: 1,
      FirstName: 'Sarah',
      LastName: 'Chen',
      Title: 'Senior Developer',
      Department: 'Engineering',
      Salary: 95000,
      HireDate: new Date('2022-03-15')
    },
    {
      EmployeeID: 2,
      FirstName: 'Marcus',
      LastName: 'Johnson',
      Title: 'Product Manager',
      Department: 'Product',
      Salary: 110000,
      HireDate: new Date('2021-08-22')
    },
    {
      EmployeeID: 3,
      FirstName: 'Elena',
      LastName: 'Rodriguez',
      Title: 'UX Designer',
      Department: 'Design',
      Salary: 78000,
      HireDate: new Date('2023-01-10')
    },
    {
      EmployeeID: 4,
      FirstName: 'David',
      LastName: 'Kim',
      Title: 'DevOps Engineer',
      Department: 'Engineering',
      Salary: 88000,
      HireDate: new Date('2022-11-05')
    }
  ];
}

Dans l’exemple ci-dessus, nous avons créé une grille de base des employés qui affiche les informations du personnel de l’entreprise. La grille rend automatiquement des colonnes en fonction de notre structure de données, et nous avons appliqué la mise en forme des colonnes salariales (devises) et de date d’embauche (date) pour une meilleure lisibilité.

Formatage des devises dans une grille angulaire

Options de liaison des données

L’un des aspects les plus importants du travail avec n’importe quelle réseau de données est la façon dont nous lui lions les données. L’interface utilisateur Kendo pour la grille angulaire prend en charge plusieurs approches de liaison de données, chacune adaptée à différents scénarios et exigences.

Liaison des données locales

La liaison des données locales est idéale lorsque nous avons un ensemble de données disponible sur le côté client et que nous voulons effectuer des opérations localement. Cette approche fournit l’expérience utilisateur la plus rapide car toutes les opérations de données se produisent en mémoire.

Comme nous l’avons vu dans l’exemple ci-dessus, le moyen le plus simple de lier les données est en définissant le data propriété directement:

import { Component } from '@angular/core';
import { KENDO_GRID } from '@progress/kendo-angular-grid';

@Component({
  standalone: true,
  imports: [KENDO_GRID],
  selector: 'my-app',
  template: `
    <kendo-grid [data]="productData" [height]="300">
      <kendo-grid-column field="ProductID" title="ID" [width]="80"></kendo-grid-column>
      <kendo-grid-column field="ProductName" title="Product" [width]="200"></kendo-grid-column>
      <kendo-grid-column field="Category" title="Category" [width]="150"></kendo-grid-column>
      <kendo-grid-column field="Price" title="Price" [width]="100" format="{0:c}"></kendo-grid-column>
      <kendo-grid-column field="InStock" title="In Stock" [width]="100"></kendo-grid-column>
    </kendo-grid>
  `,
})
export class AppComponent {
  public productData = [
    {
      ProductID: 1,
      ProductName: 'Laptop Pro 15"',
      Category: 'Electronics',
      Price: 1299.99,
      InStock: 45,
    },
    {
      ProductID: 2,
      ProductName: 'Wireless Mouse',
      Category: 'Accessories',
      Price: 29.99,
      InStock: 120,
    },
    {
      ProductID: 3,
      ProductName: 'Mechanical Keyboard',
      Category: 'Accessories',
      Price: 89.99,
      InStock: 67,
    },
    {
      ProductID: 4,
      ProductName: 'Monitor 27" 4K',
      Category: 'Electronics',
      Price: 399.99,
      InStock: 23,
    },
    {
      ProductID: 5,
      ProductName: 'USB-C Hub',
      Category: 'Accessories',
      Price: 49.99,
      InStock: 89,
    },
  ];
}

Utilisation de la directive de liaison des données

Pour des scénarios plus avancés avec des opérations de données intégrées, nous pouvons utiliser le kendoGridBinding directif. Cette approche gère automatiquement les opérations de tri, de filtrage, de pagination et de regroupement:

import { Component } from '@angular/core';
import { KENDO_GRID } from '@progress/kendo-angular-grid';

@Component({
  standalone: true,
  imports: [KENDO_GRID],
  selector: 'my-app',
  template: `
    <kendo-grid 
      [kendoGridBinding]="salesData"
      [pageable]="true"
      [pageSize]="5"
      [sortable]="true"
      [filterable]="true"
      [groupable]="true"
      [height]="400">
      <kendo-grid-column field="SaleID" title="Sale ID" [width]="100"></kendo-grid-column>
      <kendo-grid-column field="CustomerName" title="Customer" [width]="180"></kendo-grid-column>
      <kendo-grid-column field="Product" title="Product" [width]="200"></kendo-grid-column>
      <kendo-grid-column field="Amount" title="Amount" [width]="120" format="{0:c}"></kendo-grid-column>
      <kendo-grid-column field="SaleDate" title="Date" [width]="120" format="{0:d}"></kendo-grid-column>
      <kendo-grid-column field="Region" title="Region" [width]="100"></kendo-grid-column>
    </kendo-grid>
  `,
})
export class AppComponent {
  public salesData = [
    {
      SaleID: 1001,
      CustomerName: 'Acme Corp',
      Product: 'Enterprise Software License',
      Amount: 15000,
      SaleDate: new Date('2024-01-15'),
      Region: 'North',
    },
    {
      SaleID: 1002,
      CustomerName: 'Tech Solutions Inc',
      Product: 'Cloud Storage Plan',
      Amount: 2400,
      SaleDate: new Date('2024-01-18'),
      Region: 'South',
    },
    {
      SaleID: 1003,
      CustomerName: 'Global Industries',
      Product: 'Security Suite',
      Amount: 8500,
      SaleDate: new Date('2024-01-20'),
      Region: 'East',
    },
    {
      SaleID: 1004,
      CustomerName: 'StartUp Innovations',
      Product: 'Development Tools',
      Amount: 1200,
      SaleDate: new Date('2024-01-22'),
      Region: 'West',
    },
    {
      SaleID: 1005,
      CustomerName: 'Mega Retail Chain',
      Product: 'POS System',
      Amount: 25000,
      SaleDate: new Date('2024-01-25'),
      Region: 'North',
    },
    {
      SaleID: 1006,
      CustomerName: 'Healthcare Partners',
      Product: 'Patient Management System',
      Amount: 18000,
      SaleDate: new Date('2024-01-28'),
      Region: 'South',
    },
    {
      SaleID: 1007,
      CustomerName: 'Education District',
      Product: 'Learning Platform',
      Amount: 12000,
      SaleDate: new Date('2024-02-01'),
      Region: 'East',
    },
    {
      SaleID: 1008,
      CustomerName: 'Finance Group',
      Product: 'Trading Software',
      Amount: 35000,
      SaleDate: new Date('2024-02-03'),
      Region: 'West',
    },
  ];
}

Avec kendoGridBinding Directive, les utilisateurs peuvent désormais trier les colonnes en cliquant sur des en-têtes, en filtrez les données à l’aide de la ligne de filtre, en groupes de groupes en faisant glisser les en-têtes de colonnes vers la zone de regroupement et parcourez les pages.

Faire glisser les colonnes, le filtrage, etc. dans une grille angulaire

Dans le prochain Opérations de données Section, nous passerons plus de temps à discuter de certaines de ces opérations de données.

Liaison de données distantes

Lorsque vous travaillez avec de grands ensembles de données ou un traitement côté serveur, la liaison à distance des données devient importante. Cette approche récupère les données d’un serveur et peut gérer les opérations de données sur le backend pour des performances plus optimales.

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { Observable } from 'rxjs';
import { KENDO_GRID, GridDataResult } from '@progress/kendo-angular-grid';
import { State } from '@progress/kendo-data-query';

@Component({
  standalone: true,
  imports: [CommonModule, HttpClientModule, KENDO_GRID],
  selector: 'my-app',
  template: `
    <kendo-grid 
      [data]="gridData | async"
      [loading]="loading"
      [pageable]="true"
      [pageSize]="state.take"
      [skip]="state.skip"
      [sortable]="true"
      [sort]="state.sort"
      (dataStateChange)="dataStateChange($event)"
      [height]="500">
      <kendo-grid-column field="CustomerID" title="Customer ID" [width]="120"></kendo-grid-column>
      <kendo-grid-column field="CompanyName" title="Company" [width]="200"></kendo-grid-column>
      <kendo-grid-column field="ContactName" title="Contact" [width]="150"></kendo-grid-column>
      <kendo-grid-column field="City" title="City" [width]="120"></kendo-grid-column>
      <kendo-grid-column field="Country" title="Country" [width]="120"></kendo-grid-column>
    </kendo-grid>
  `
})
export class AppComponent implements OnInit {
  public gridData: Observable<GridDataResult>;
  public state: State = {
    skip: 0,
    take: 10
  };
  public loading = false;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.loadData();
  }

  public dataStateChange(state: any): void {
    this.state = state;
    this.loadData();
  }

  private loadData(): void {
    this.loading = true;
    
    
    const queryParams = `?skip=${this.state.skip}&take=${this.state.take}`;
    
    this.gridData = this.http.get<GridDataResult>(`/api/customers${queryParams}`);
    
    
    setTimeout(() => this.loading = false, 1000);
  }
}

Cet exemple de liaison à distance montre comment gérer la pagination et le tri côté serveur. Le dataStateChange L’événement tire chaque fois que les utilisateurs interagissent avec la grille, nous permettant d’envoyer l’état mis à jour à notre API backend. Gardez à l’esprit que l’exemple ci-dessus fait un appel API simulé, donc aucune donnée n’est réellement affichée pour le moment.

Opérations de données

L’interface utilisateur Kendo pour le réseau angulaire excelle à fournir des opérations de données intégrées qui améliorent l’expérience utilisateur et les capacités de gestion des données. Nous avons vu quelques exemples de cela dans l’un des exemples ci-dessus, mais explorons plus loin certaines de ces opérations clés.

Pagination

La pagination est essentielle lorsqu’il s’agit de grands ensembles de données. Au lieu de charger des milliers d’enregistrements à la fois, la pagination divise les données en morceaux gérables:

import { Component } from '@angular/core';
import { KENDO_GRID } from '@progress/kendo-angular-grid';

@Component({
  standalone: true,
  imports: [KENDO_GRID],
  selector: 'my-app',
  template: `
    <kendo-grid 
      [kendoGridBinding]="orders"
      [pageable]="pageSettings"
      [height]="400">
      <kendo-grid-column field="OrderID" title="Order ID" [width]="100"></kendo-grid-column>
      <kendo-grid-column field="CustomerName" title="Customer" [width]="180"></kendo-grid-column>
      <kendo-grid-column field="OrderDate" title="Order Date" [width]="120" format="{0:d}"></kendo-grid-column>
      <kendo-grid-column field="ShipCity" title="Ship City" [width]="120"></kendo-grid-column>
      <kendo-grid-column field="Total" title="Total" [width]="100" format="{0:c}"></kendo-grid-column>
    </kendo-grid>
  `,
})
export class AppComponent {
  public pageSettings = {
    buttonCount: 5,
    info: true,
    type: 'numeric',
    pageSizes: [5, 10, 20, 50],
    previousNext: true,
  };

  public orders = [
    {
      OrderID: 10248,
      CustomerName: 'Vins et alcools Chevalier',
      OrderDate: new Date('2024-01-15'),
      ShipCity: 'Reims',
      Total: 440.0,
    },
    {
      OrderID: 10249,
      CustomerName: 'Toms Spezialitäten',
      OrderDate: new Date('2024-01-16'),
      ShipCity: 'Münster',
      Total: 1863.4,
    },
    {
      OrderID: 10250,
      CustomerName: 'Hanari Carnes',
      OrderDate: new Date('2024-01-17'),
      ShipCity: 'Rio de Janeiro',
      Total: 1552.6,
    },
    
  ];
}

Le téléavertisseur peut être personnalisé avec diverses options, y compris les sélecteurs de taille de page, les boutons de navigation et les affichages d’informations sur la page actuelle et les enregistrements totaux.

Tri

Le tri permet aux utilisateurs de commander des données par n’importe quelle colonne dans l’ordre ascendant ou descendant. La grille prend en charge le tri de colonnes simple et multiple:

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

@Component({
  standalone: true,
  imports: [KENDO_GRID],
  selector: 'my-app',
  template: `
    <kendo-grid 
      [kendoGridBinding]="inventory"
      [sortable]="sortSettings"
      [sort]="initialSort"
      [height]="350">
      <kendo-grid-column field="ProductName" title="Product" [width]="200"></kendo-grid-column>
      <kendo-grid-column field="Category" title="Category" [width]="150"></kendo-grid-column>
      <kendo-grid-column field="UnitsInStock" title="Stock" [width]="100"></kendo-grid-column>
      <kendo-grid-column field="UnitPrice" title="Price" [width]="100" format="{0:c}"></kendo-grid-column>
      <kendo-grid-column field="LastUpdated" title="Last Updated" [width]="120" format="{0:d}"></kendo-grid-column>
    </kendo-grid>
  `,
})
export class AppComponent {
  public sortSettings = {
    allowUnsort: true,
    mode: 'multiple', 
  };

  public initialSort: SortDescriptor[] = [
    { field: 'Category', dir: 'asc' },
    { field: 'UnitsInStock', dir: 'desc' },
  ];

  public inventory = [
    {
      ProductName: 'Gaming Laptop',
      Category: 'Electronics',
      UnitsInStock: 25,
      UnitPrice: 1499.99,
      LastUpdated: new Date('2024-01-20'),
    },
    {
      ProductName: 'Office Chair',
      Category: 'Furniture',
      UnitsInStock: 50,
      UnitPrice: 299.99,
      LastUpdated: new Date('2024-01-18'),
    },
    {
      ProductName: 'Smartphone',
      Category: 'Electronics',
      UnitsInStock: 75,
      UnitPrice: 799.99,
      LastUpdated: new Date('2024-01-22'),
    },
    {
      ProductName: 'Desk Lamp',
      Category: 'Furniture',
      UnitsInStock: 30,
      UnitPrice: 59.99,
      LastUpdated: new Date('2024-01-19'),
    },
  ];
}

Les utilisateurs peuvent cliquer sur les en-têtes de colonne à trier, et avec un tri multiple activé, ils peuvent maintenir Ctrl / CMD tout en cliquant sur des colonnes supplémentaires pour trier par divers critères.

Filtration

Le filtrage permet aux utilisateurs d’afficher uniquement les données qui répondent aux critères spécifiques. La grille prend en charge divers types de filtres, y compris les filtres en texte, numérique, date et booléen:

import { Component } from '@angular/core';
import { KENDO_GRID } from '@progress/kendo-angular-grid';

@Component({
  standalone: true,
  imports: [KENDO_GRID],
  selector: 'my-app',
  template: `
    <kendo-grid 
      [kendoGridBinding]="transactions"
      [filterable]="true"
      [height]="400">
      <kendo-grid-column field="TransactionID" title="ID" [width]="80" filter="numeric"></kendo-grid-column>
      <kendo-grid-column field="Description" title="Description" [width]="250" filter="text"></kendo-grid-column>
      <kendo-grid-column field="Amount" title="Amount" [width]="120" filter="numeric" format="{0:c}"></kendo-grid-column>
      <kendo-grid-column field="TransactionDate" title="Date" [width]="120" filter="date" format="{0:d}"></kendo-grid-column>
      <kendo-grid-column field="IsProcessed" title="Processed" [width]="100" filter="boolean"></kendo-grid-column>
      <kendo-grid-column field="Category" title="Category" [width]="120" filter="text"></kendo-grid-column>
    </kendo-grid>
  `,
})
export class AppComponent {
  public transactions = [
    {
      TransactionID: 1,
      Description: 'Office Supplies Purchase',
      Amount: 245.5,
      TransactionDate: new Date('2024-01-15'),
      IsProcessed: true,
      Category: 'Expense',
    },
    {
      TransactionID: 2,
      Description: 'Client Payment Received',
      Amount: 1500.0,
      TransactionDate: new Date('2024-01-16'),
      IsProcessed: true,
      Category: 'Income',
    },
    {
      TransactionID: 3,
      Description: 'Equipment Maintenance',
      Amount: 320.75,
      TransactionDate: new Date('2024-01-17'),
      IsProcessed: false,
      Category: 'Expense',
    },
    {
      TransactionID: 4,
      Description: 'Software License Renewal',
      Amount: 899.99,
      TransactionDate: new Date('2024-01-18'),
      IsProcessed: true,
      Category: 'Expense',
    },
    {
      TransactionID: 5,
      Description: 'Consulting Services',
      Amount: 2250.0,
      TransactionDate: new Date('2024-01-19'),
      IsProcessed: false,
      Category: 'Income',
    },
  ];
}

Chaque colonne peut avoir son propre type de filtre et la grille fournit automatiquement des contrôles de filtre appropriés en fonction du type de données.

Filtrage de la grille angulaire

Regroupement

Le regroupement permet aux utilisateurs d’organiser des données en groupes pliants en fonction des valeurs de colonne, ce qui facilite l’analyse et la compréhension de grands ensembles de données:

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

@Component({
  standalone: true,
  imports: [KENDO_GRID],
  selector: 'my-app',
  template: `
    <kendo-grid 
      [kendoGridBinding]="projectData"
      [groupable]="true"
      [group]="initialGrouping"
      [height]="450">
      <kendo-grid-column field="ProjectName" title="Project" [width]="200"></kendo-grid-column>
      <kendo-grid-column field="Department" title="Department" [width]="150"></kendo-grid-column>
      <kendo-grid-column field="Status" title="Status" [width]="120"></kendo-grid-column>
      <kendo-grid-column field="Priority" title="Priority" [width]="100"></kendo-grid-column>
      <kendo-grid-column field="Budget" title="Budget" [width]="120" format="{0:c}"></kendo-grid-column>
      <kendo-grid-column field="DueDate" title="Due Date" [width]="120" format="{0:d}"></kendo-grid-column>
    </kendo-grid>
  `,
})
export class AppComponent {
  public initialGrouping: GroupDescriptor[] = [
    { field: 'Department' },
    { field: 'Status' },
  ];

  public projectData = [
    {
      ProjectName: 'Website Redesign',
      Department: 'Marketing',
      Status: 'In Progress',
      Priority: 'High',
      Budget: 25000,
      DueDate: new Date('2024-03-15'),
    },
    {
      ProjectName: 'Mobile App Development',
      Department: 'Engineering',
      Status: 'Planning',
      Priority: 'High',
      Budget: 75000,
      DueDate: new Date('2024-06-30'),
    },
    {
      ProjectName: 'Security Audit',
      Department: 'Engineering',
      Status: 'Completed',
      Priority: 'Critical',
      Budget: 15000,
      DueDate: new Date('2024-01-31'),
    },
    {
      ProjectName: 'Brand Guidelines Update',
      Department: 'Marketing',
      Status: 'In Progress',
      Priority: 'Medium',
      Budget: 8000,
      DueDate: new Date('2024-02-28'),
    },
    {
      ProjectName: 'Database Migration',
      Department: 'Engineering',
      Status: 'Planning',
      Priority: 'High',
      Budget: 40000,
      DueDate: new Date('2024-05-15'),
    },
    {
      ProjectName: 'Customer Survey Campaign',
      Department: 'Marketing',
      Status: 'Completed',
      Priority: 'Low',
      Budget: 5000,
      DueDate: new Date('2024-01-15'),
    },
  ];
}

Les utilisateurs peuvent faire glisser des en-têtes de colonne vers la zone de regroupement pour créer des groupes, et la grille affiche des en-têtes de groupe extensibles / pliables avec des informations agrégées.

Groupe de grille angulaire

Conclure

L’interface utilisateur Kendo pour la grille de données angulaires est une solution complète pour afficher et gérer les données dans les applications angulaires. Dans cet article, nous avons exploré certaines de ses capacités de base, comme la liaison des données et les opérations de données prises en charge.

Au-delà de ces opérations de données de base, le réseau offre des capacités avancées, notamment virtualisation pour l’optimisation des performancesmises à jour de données en temps réel, conformité à l’accessibilité et l’intégration transparente avec d’autres internes d’interface utilisateur Kendo pour les composants angulaires.

Pour plus de détails sur les fonctionnalités avancées et les options de configuration, assurez-vous de consulter le fonctionnaire Kendo UI pour la documentation de la grille angulaire! Et rappelez-vous, vous pouvez essayer l’interface utilisateur de Kendo pour la bibliothèque angulaire gratuitement pendant 30 jours!

Essayer maintenant

Source link

Blog ARC Optimizer

septembre 10, 2025

Commencer avec Kendo UI pour Angular Grid

Kendo ui pour la grille angulaire

Options de liaison des données

Liaison des données locales

Utilisation de la directive de liaison des données

Liaison de données distantes

Opérations de données

Pagination

Tri

Filtration

Regroupement

Conclure

Articles similaires

Blog ARC Optimizer

Kendo ui pour la grille angulaire

Options de liaison des données

Liaison des données locales

Utilisation de la directive de liaison des données

Liaison de données distantes

Opérations de données

Pagination

Tri

Filtration

Regroupement

Conclure

Partager :

Articles similaires