TreeView — General

A small example of labels, subtitles, selection and aligned start glyphs. Start accepts icons; pills belong at the near or far end. Adaptive alignment is the default.

Notices
- Maintenance Reviewing the deployment plan Ready
- Policy update Waiting for approval

Select an entry with the mouse or keyboard.

Razor

aspnet

<bs-treeview id="general-demo" search="false" selection-mode="single" event-selected="generalExample.selected">
    <bs-treeview-node node-id="notices" label="Notices" expanded="true">
        <bs-treeview-node node-id="maintenance" label="Maintenance" subtitle="Reviewing the deployment plan" bound-value="NOTICE-001">
            <bs-start-icon class="bi bi-file-text" intent="decorative" />
            <bs-end-near-pill text="Ready" variant="success" />
        </bs-treeview-node>
        <bs-treeview-node node-id="policy" label="Policy update" subtitle="Waiting for approval" bound-value="NOTICE-002" />
    </bs-treeview-node>
</bs-treeview>

Shared selection status and reset markup

aspnet

@model string
<section id="view-general" data-kind="@Model">
    @await Html.PartialAsync(Model == "treeview" ? "~/Views/Docs/_TreeViewGeneralControl.cshtml" : "~/Views/Docs/_ListViewGeneralControl.cshtml")
    <p id="general-selection" role="status">Select an entry with the mouse or keyboard.</p>
    <button type="button" id="general-reset" class="btn btn-outline-secondary">Reset this example</button>
</section>
<script type="module" src="/js/view-general-example.js"></script>

Selection callback and reset

javascript

import { TreeView } from '/_content/CopelandSyst.BootstrapComponents/lib/Bootstrap/dist/treeview/bs-treeview.js';
import { ListView } from '/_content/CopelandSyst.BootstrapComponents/lib/Bootstrap/dist/listview/bs-listview.js';

const output = document.getElementById('general-selection');
window.generalExample = {
    selected(event, view) {
        const selection = view.getSnapshot().snapshot.state.selection;
        output.textContent = `Selected: ${selection.values.join(', ') || 'none'}`;
    }
};
const kind = document.getElementById('view-general').dataset.kind;
const view = (kind === 'treeview' ? TreeView : ListView).getOrCreateInstance(document.getElementById('general-demo'));
document.getElementById('general-reset').addEventListener('click', () => {
    view.resetChanges();
    output.textContent = 'Select an entry with the mouse or keyboard.';
});

The Ajax pages under TreeView each demonstrate one server operation. Navigation parity, 100-item scrolling and model-merging diagnostics have their own examples.