Use CanopyX from JavaScript | CanopyX documentation

Install

npm install @evotecit/canopyx

The package includes ES modules, classic scripts, stylesheets and TypeScript declarations, with no runtime package dependencies.

Mount a tree grid

Add a container with a height to your page:

<div id="files" style="height: 360px"></div>

Then mount a view document on it. The document is the same canopyx/2 view the C# writer produces, so a server can send it as JSON instead of the page building it.

files.jsJavaScript

import { createTreeGrid } from "@evotecit/canopyx";
import "@evotecit/canopyx/styles.css";

const grid = createTreeGrid(document.getElementById("files"), {
  view: {
    protocol: "canopyx/2", type: "view", id: "files", label: "Project files",
    rowHeight: 28, pageSize: 100, selection: "single",
    search: { minLength: 1, maxResults: 50 },
    columns: [
      { id: "name", title: "Name", kind: "text", width: 300, sortable: true },
      { id: "owner", title: "Owner", kind: "text", width: 160 }
    ],
    source: { kind: "inline" },
    roots: [{
      id: "projects", label: "Projects", expanded: true,
      children: [
        { id: "plan", label: "Project plan.docx", cells: { owner: "anna.kowalska" } },
        { id: "report", label: "Quarterly report.pdf", cells: { owner: "chen.wei" },
          badges: [{ text: "new", tone: "info" }] }
      ]
    }]
  }
});

await grid.ready;

OutputcreateTreeGrid(host, { view })Mounted from the classic scriptOpen createTreeGrid(host, { view }) in its own page

This snippet running in a page that loads the classic script, which exposes the same createTreeGrid as window.CanopyX. Click a row, sort by Name or search for plan.

The stylesheet import uses your application's asset pipeline. For a page without a bundler, serve classic.js and styles.css from the installed package and load them with <script> and <link> elements; the script exposes window.CanopyX. Use one matching runtime and stylesheet per page.

Choose a runtime

Each entry point has its own stylesheet. A flat grid needs a grid-capable runtime; the reporting runtime adds grouping, facets, aggregates and presenters on top of the flat grid.

RenderedCanopyStaticHtml.RenderGrid(runtimes)Script-free HTML

Import	Use it for	Stylesheet
@evotecit/canopyx	Interactive tree grids	@evotecit/canopyx/styles.css
@evotecit/canopyx/grid	Flat data grids	@evotecit/canopyx/grid.css
@evotecit/canopyx/reporting	Flat grids with reporting controls	@evotecit/canopyx/reporting.css

The npm entry points, as a table the CanopyX static renderer drew for this page.

Module imports are safe on the server; mounting a view requires a browser. The included TypeScript declarations describe the view, data-source and event APIs. Flat grids mount with createDataGrid from @evotecit/canopyx/grid.

Translate the controls

Import labels from @evotecit/canopyx/locales/pl, /locales/de, /locales/es, /locales/fr or /locales/it and pass them as labels in your view definition. In C#, set the view's Labels before writing the page:

Program.csC#

files.Labels = CanopyLabels.Polish();
files.SaveHtmlPage("pliki.html");

Outputpliki.htmlPolish labelsOpen pliki.html in its own page

The file explorer from Getting started with the Polish labels: the search box, the Columns menu and the messages the runtime writes are translated, while your column titles and data stay as you wrote them.

CanopyLabels.German(), CanopyLabels.Spanish(), CanopyLabels.French() and CanopyLabels.Italian() work the same way.