source

Pour des lignes trop nombreuses pour être envoyées d’un coup : la grille demande à votre serveur ce dont elle a besoin, au fil du travail de l’utilisateur.

Type	SourceBinding<T>
Par défaut	non défini
Modifiable en direct (update())	Oui
Angular	l’entrée [source]
<dz-grid>	la propriété source
Déclaré dans	packages/dom/src/settings.ts

Ce qu’il fait

Une liaison faite de votre fonction de chargement, à la place de rows :

• sourceRows(data, options) de @dzgrid/core/server : une requête par changement de filtre, de recherche, de tri ou de page, chacune avec tout ce qu’il faut au serveur (le filtre sous une forme transmissible, le tri, la page, le fuseau et vos params). Avec pagination et la fonction pagination(), une pagination.
• infiniteRows(data, options) de @dzgrid/core/infinite : des blocs de lignes demandés à mesure que l’utilisateur fait défiler une longue liste.

Avec une source, les filtres, la recherche, le tri et les pages se font sur le serveur, sauf si operations dit autrement (avec infiniteRows, toujours le serveur, en une seule liste). La grille s’occupe seule du reste : le message de chargement, la fine barre pendant que des lignes à l’écran se rechargent, une erreur avec « Réessayer », les réponses qui arrivent dans le désordre (seule la dernière compte), une sélection sur toutes les pages. Une nouvelle source donnée par update() redemande depuis le début. Pour redemander les mêmes lignes (après un enregistrement), appelez reload() — grid.api.reload(), ctrl.reload() d’Angular, el.reload() de <dz-grid> ; refresh() ne fait que redessiner (Données du serveur).

Exemple

TypeScript

import { createGrid, type GridMessages } from '@dzgrid/dom';
import { sourceRows, type DataRequest, type DataResponse } from '@dzgrid/core/server';
import { pagination } from '@dzgrid/dom/pagination';
import { FR } from '@dzgrid/dom/locales/fr';
import { FR_PAGINATION } from '@dzgrid/dom/locales/fr-pagination';

type Asteroid = { id: string; name: string; diameter: number };

async function page(req: DataRequest): Promise<DataResponse<Asteroid>> {
  const answer = await fetch('/api/asteroids', {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({ filter: req.filter, sort: req.sort, page: req.page }),
    signal: req.signal as AbortSignal,
  });
  return answer.json();   // { rows, total }
}

const messages: GridMessages = { ...FR, text: { ...FR.text, ...FR_PAGINATION.text } };

createGrid<Asteroid>(document.getElementById('asteroides')!, {
  source: sourceRows<Asteroid>({ fetch: page }),
  columns: [{ id: 'name', header: 'Astéroïde' }, { id: 'diameter', header: 'Diamètre (km)', type: 'number' }],
  getRowId: (a) => a.id,
  messages,
  pagination: { pageSize: 100 },
  features: [pagination()],
});

Les versions Angular et Web Component, et chaque partie de la requête : Données du serveur et défilement infini.

Démo

Un serveur inventé dans cette page : chaque tri ou page est une requête, servie après une courte attente.

Voir aussi

• operations — ce qui se fait sur le serveur, ce qui se fait dans le navigateur.
• pagination — la taille des pages.
• Données du serveur et défilement infini.