DOCSEARCHbyAlgolia
Submit Docs

DHTMLX Spreadsheet Documentation

website·Indexed 35 days ago

https://docs.dhtmlx.com/diagram/

Developer documentation for DHTMLX Spreadsheet, featuring guides on cell manipulation, configuration of toolbars and menus, and TypeScript integration starting from v4.0. Includes API references for sheet management, a declarative state model for React integration via @dhx/react-spreadsheet, Vue.js integration, and MCP server endpoints for AI assistant connectivity.

Tokens
5.9M
Snippets
31.5K
Records
43.7K
Agent score
61%

What's inside DHTMLX Spreadsheet

  1. Overview of DHTMLX Scheduler utility modules

    DHTMLX Scheduler provides several specialized utility modules for extending functionality beyond basic scheduling. Key modules include:

    • ajax: Handles asynchronous data communication.
    • config: Defines configuration options for dates, scales, and controls.
    • date: Provides a set of date formatting methods.
    • env: Contains flags representing the current environment.
    • i18n: Provides localization methods.
    • ical: Handles serialization and parsing of iCalendar (ICal) data.
    • json: Handles JSON serialization and parsing.
    • keys: Allows setting keyboard shortcuts for the scheduler.
    • locale: An object containing region-specific labels for the scheduler.
    • matrix: Stores timeline configuration objects for the page.
    • skin: Provides information about the current scheduler skin/theme.
    • templates: Defines format styles for dates, titles, and tooltips.
    • tooltip: Manages the display of event tooltips.
    • version: Provides the current version of dhtmlxScheduler.
    • xy: Defines the dimensions of various scheduler elements.

  2. Overview of DHTMLX MCP Server

    The DHTMLX MCP Server implements the Model Context Protocol (MCP) to provide AI assistants with real-time, up-to-date context from DHTMLX documentation via a RAG (Retrieval-Augmented Generation) system. This prevents AI tools from generating outdated or inaccurate code based on stale training data. The server is a shared service covering all major DHTMLX products, including Gantt, Scheduler, Suite (Grid, Form, TreeGrid), Kanban, Pivot, Spreadsheet, Diagram, and RichText.
    Server URL: https://docs.dhtmlx.com/mcp

  3. Overview of DHTMLX Spreadsheet for React

    DHTMLX Spreadsheet for React is an official declarative wrapper that allows developers to build spreadsheet UIs using a component-based API. It follows React patterns by passing data via props and responding to changes through event callbacks. For advanced scenarios, developers can access the underlying widget instance using a ref.

  4. Overview of the Vue Gantt Wrapper

    Vue Gantt is the official Vue wrapper for the DHTMLX Gantt engine. It allows developers to use Vue-friendly composition patterns while maintaining full access to the underlying Gantt engine. The wrapper handles the Gantt instance lifecycle (initialization and destruction), synchronizes Vue props into the Gantt instance, and provides specific extension points for events, custom lightboxes, and inline editors.

  5. Overview of the DHTMLX Vue Scheduler wrapper

    The Vue Scheduler is the official wrapper for DHTMLX Scheduler targeting Vue 3. It provides a declarative way to integrate the scheduler into Vue applications while maintaining full access to the underlying Scheduler API. Key features include:

    • Declarative setup via props (e.g., events, date, view, config, templates, plugins, theme, locale, markers, views, xy, and filter).
    • Automatic data synchronization for events.
    • Event wiring using on<EventName> props.
    • Access to the scheduler instance via component refs.
    • A @ready event for Vue lifecycle integration.
    • Typed helper factories and composables for common workflows.
    <script setup lang="ts">
import VueScheduler from "@dhtmlx/trial-vue-scheduler";
import "@dhtmlx/trial-vue-scheduler/dist/vue-scheduler.css";
</script>

<template>
  <div :style="{ height: 600px; }">
    <VueScheduler :events="events" />
  </div>
</template>

  6. Overview of DHTMLX DataCollection

    DataCollection is an invisible helper component used to store and manage non-hierarchical data sets. It is used by components such as Chart, Combobox, DataView, Grid, and List. A single DataCollection instance can be used to provide the same data set to multiple different components.

    Key constraint: If id fields are specified in the data, they must be unique. If omitted, IDs are generated automatically.

  7. Overview of Vue Scheduler Wrapper

    Vue Scheduler is the official Vue wrapper for the DHTMLX Scheduler engine. It provides a declarative Vue component API while maintaining full access to the underlying imperative Scheduler engine. The wrapper manages the Scheduler instance lifecycle (initialization and destruction), synchronizes Vue props into the engine, and provides Vue-specific extension points such as on<EventName> listeners and the @ready hook.

  8. Overview of DHTMLX Message component helper boxes

    The DHTMLX Message component provides a set of configurable helper message boxes used for user interaction and application notifications. The available types include:

    • Message: A simple box used to inform users about current processes in the application.
    • Alert: A warning box used to caution users against actions that may lead to undesirable results.
    • Confirm: A modal dialog used to ask for user confirmation before proceeding with an action.
    • Tooltip: A small informational popup that appears when a user hovers over a specific element.

  9. Overview of DHTMLX Kanban component structure

    The DHTMLX Kanban is a JavaScript-based widget for visualizing workflows. It consists of three primary interface sections:

    1. Toolbar: Contains search functionality, sorting controls, undo/redo history management, and buttons to add new columns and rows (swimlanes).
    2. Board: The main area where cards are organized into columns and swimlanes. It supports custom card templates and flexible layout configurations.
    3. Editor: A modal panel that opens when a card is clicked, allowing users to edit the card's data via configurable fields and controls.

  10. Overview of dhtmlxScheduler utility modules

    dhtmlxScheduler provides several utility modules and configuration objects for managing the scheduler's behavior, localization, and data handling. Key modules include:

    • ajax: Handles AJAX requests for data loading and saving.
    • config: Manages configuration for dates, scales, and controls.
    • date: Provides date formatting methods.
    • env: Contains flags describing the current environment.
    • i18n and locale: Handle localization and region-specific labels.
    • ical and json: Manage serialization and parsing for ICal and JSON formats.
    • keys: Defines keyboard shortcuts (hot keys).
    • matrix: Stores configuration for timelines on the page.
    • skin: Manages the visual skin of the scheduler.
    • templates: Defines formatting for dates, titles, and tooltips.
    • tooltip: Controls the display of event tooltips.
    • version: Provides the current version of dhtmlxScheduler.
    • xy: Manages the dimensions and sizes of scheduler elements.

  11. Overview of Vue Scheduler Wrapper

    Vue Scheduler is the official Vue wrapper for the DHTMLX Scheduler engine. It allows developers to use Vue-friendly composition patterns and declarative props while maintaining full access to the underlying imperative Scheduler engine. The wrapper manages the Scheduler instance lifecycle (initialization and destruction), syncs Vue props into the engine, and provides specific extension points for listeners and custom components.

  12. Overview of the React Scheduler Lovable Starter

    The React Scheduler Lovable Starter is a resource booking application designed for the Lovable stack. It features a routed shell (Dashboard, Calendar, Resources, Reports, Settings), a Scheduler Timeline for resource booking, and a Supabase backend for persistent CRUD operations.

    Key features include:

    • Location-scoped resources and bookings.
    • Support for recurring bookings (series rows, exception rows, and deleted-occurrence tombstones).
    • Status, resource, and type filters.
    • Undo/redo functionality for create, update, and delete operations.
    • Business-hour highlighting and conflict blocking for overlapping bookings.
    • A demo role model (viewer, scheduler, admin).

    Tech Stack: React 19, TypeScript, Vite, TanStack Start, TanStack Router, Tailwind, shadcn/ui, TanStack Query, Zustand, Supabase, and DHTMLX React Scheduler.