kendo-ui-vue
Installation
SKILL.md
Kendo UI for Vue — Development Guidelines
Architecture Decisions
Native Grid vs. Wrapper Grid
There are two Grid packages — use the Native Grid for all new work:
| Package | Import | When to use |
|---|---|---|
@progress/kendo-vue-grid |
import { Grid } from '@progress/kendo-vue-grid' |
New code — Vue 3 Composition API, full TypeScript, all modern features |
@progress/kendo-vue-grid (wrapper) |
import { Grid } from '@progress/kendo-vue-grid/dist/esm/main' |
Legacy wrapper — avoid |
The wrapper API uses <kendo-grid> and DataSource; the Native Grid uses :data-items and event-driven state. All samples below use the Native Grid.
Client-Side vs. Server-Side Operations
- Client-side (< ~5,000 rows): use the
process()function from@progress/kendo-data-query. Pass your raw array + the currentDataStateand bind the result directly. - Server-side (large datasets or slow data): handle
@datastatechange, send the state to your API, and bind the returned{ data: T[], total: number }to the grid. Set:totalto the server-reported count so the pager is accurate.