Skip to content
RevoGrid [Pro]

How Server Data Works

Server-side Kanban loads card records from your application’s backend. Kanban places them into columns and handles interaction; your application decides how to save changes and enforce server-wide rules.

For example, the browser requests the first six cards, displays them, then requests more as needed. Moving a card changes its status and rank. An application event listener sends the changed records back to the server.

Interactive example · supplied HTTP demo backend

A board connected to a server

The supplied demo backend serves 24 cards through HTTP. The application saves moves from committed events.

Try it: Load another page, move a card, then refresh to verify the saved status.

Starting demo backend…

HTTP reads: 0 · writes: 0

What to notice: Reads and writes use separate application-owned endpoints.

TypeScript source

The supplied backend handlers use MSW simulation in the browser. Replace the transport with your application endpoint.

remote-board.ts
import type { KanbanConfig, KanbanCardMoveDetail } from '@revolist/kanban';
import type { WorkCard } from './first-board';
import { boardConfig, configureBoard } from './first-board';


// apiUrl is YOUR endpoint. The documentation supplies an isolated HTTP demo backend.
export function remoteBoard(apiUrl: string): KanbanConfig<WorkCard> {
  return { ...boardConfig, remote: {
    chunkSize: 6,
    query: { retry: false, refetchOnWindowFocus: false },
    async loadData(skip, limit, _order, _single, _multi, _quick, _temporal, _ast, _execution, context) {
      const response = await fetch(`${apiUrl}/cards?skip=${skip}&limit=${limit}`, { signal: context?.signal });
      if (!response.ok) throw new Error(`Card loading failed: HTTP ${response.status}`);
      return response.json(); // { data: Card[], total: number }
    },
  } };
}




// Read-only setup; add app-owned write handling before enabling moves.
export async function createServerBoard(container: HTMLElement, apiUrl: string) {
  const grid = document.createElement('revo-grid');
  grid.style.cssText = 'display:block;width:100%;height:360px';
  container.append(grid);
  try {
    // configureBoard waits for grid initialization before activating the remote loader.
    const kanban = await configureBoard(grid, { ...remoteBoard(apiUrl), readOnly: true }, []);
    return { grid, kanban, destroy() { grid.remove(); } };
  } catch (error) { grid.remove(); throw error; }
}


export async function saveMove(apiUrl: string, detail: KanbanCardMoveDetail, signal?: AbortSignal) {
  const response = await fetch(`${apiUrl}/moves`, {
    method: 'POST', signal, headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ changedCards: detail.changedCards }),
  });
  if (!response.ok) throw new Error(`Move save could not be confirmed: HTTP ${response.status}`);
  return response.json();
}
// grid.kanban = remoteBoard(apiUrl);
// grid.addEventListener('kanbancardmove', event => { void saveMove(apiUrl, event.detail); });
// In your app, pause conflicting moves while saving; on failure refresh before more edits.
// Pagination, refresh and Query policy belong to remote. There is no remote.commit method.
Download remote-board.ts

Live HTTP example

Section titled “Live HTTP example”

This example uses an isolated simulated backend implemented with the shared demo Service Worker. Requests use real fetch calls, but the data is in-memory demonstration state, not a deployed database. Each mounted example has its own session.

Try loading another page, moving a card and refreshing. The saved move should return from that example’s backend. Reset restores its seeded cards.

Read and save are separate

Section titled “Read and save are separate”
TaskOwnerGuide
Fetch pages of cardskanban.remote.loadDataLoad cards
Request later pages or indexed slotsKanban remote readerLoad pages
Reuse reads or refresh themremote.query read policyCaching and refresh
Submit changes and show pending/errorsYour application events/APISave card changes
Recover a failed readReader retry or application refreshLoading errors and retry

The read configuration has no commit method. The optional managed saving adapter is a separate complete-dataset integration and cannot be combined with paged remote loading.

Start small

Section titled “Start small”
  1. Make a local first board work with your field names.
  2. Replace its local records with the remote loader.
  3. Add saving only when your app is ready to persist changes.
  4. Add paging, cache settings and error recovery as your workflow needs them.

Counts, search and local WIP checks describe the records available to the board. The backend must enforce permissions, concurrency, full-board counts and capacity when the complete dataset is not present.

Next steps

Section titled “Next steps”

Continue with Load Cards and Save Card Changes. See the Kanban API for exact types.