/*! * * Wijmo Library 5.20251.40 * https://developer.mescius.com/wijmo * * Copyright(c) MESCIUS inc. All rights reserved. * * Licensed under the End-User License Agreement For MESCIUS Wijmo Software. * us.sales@mescius.com * https://developer.mescius.com/wijmo/licensing * */ /** * {@module wijmo.nav} * Defines navigation controls including the #see:TabPanel, {@link TreeView}, * and associated classes. */ /** * */ export declare var ___keepComment: any; import { Binding, EventArgs, CancelEventArgs, Control, Event, ObservableArray } from 'wijmo/wijmo'; import * as selfModule from 'wijmo/wijmo.nav'; export declare const AccordionClsNames: { header: string; hostElement: string; showIcons: string; }; export declare const TabPanelClsNames: { hostElement: string; tabHeader: string; tabHeaders: string; tabPane: string; tabPanes: string; screenReaderOnly: string; }; export declare const TreeViewClsNames: { dragFeedback: string; dragItemCount: string; hostElement: string; largerDragItemCount: string; marker: string; node: string; nodeCheck: string; nodeList: string; nodeText: string; }; /** * The {@link TabPanel} enables content organization at a high level, * such as switching between views, data sets, or functional aspects * of an application. * * Tabs are presented as a single row above their associated content. * Tab headers succinctly describe the content within. * * Tabs can be selected with the mouse or keyboard, and automatically * update the content to reflect the current selection. * * The example below shows how you can use a {@link TabPanel} to organize * content into pages: * * {@sample Nav/TabPanel/Overview Example} */ export declare class TabPanel extends Control { private _tabs; private _selectedIndex; private _toAnim; private _eAnim; private _animated; private _autoSwitch; _isInitialized: boolean; private _dRoot; private _dTabHeaders; private _dTabPanes; private _tabStatus; static _ctrlTemplate: string; /** * Gets or sets the template used to instantiate {@link TabPanel} controls. */ static controlTemplate: string; /** * Initializes a new instance of the {@link TabPanel} class. * * @param element The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl'). * @param options The JavaScript object containing initialization data for the control. * @param keepChildren Whether to keep child elements. If set to true, the caller becomes responsible for * populating the {@link tabs} array based on the DOM). */ constructor(element: any, options?: any, keepChildren?: boolean, removeChildren?: boolean); /** * Gets an array of {@link Tab} objects whose {@link Tab.header} and * {@link Tab.pane} properties determine the content of the * {@link TabPanel} control. */ readonly tabs: ObservableArray; /** * Gets or sets the index of the currently selected (active) tab. */ selectedIndex: number; /** * Gets or sets the {@link Tab} object that is currently selected. */ selectedTab: Tab; /** * Gets or sets a value that determines whether tab changes should be animated * with a fade-in effect. * * The default value for this property is **true**. */ isAnimated: boolean; /** * Gets or sets a value that determines whether the control should switch * tabs automatically when the user selects a tab using the arrow keys. * * The default value for this property is **true**, which causes the * control to switch tabs when the user presses the arrow keys. * In this mode, the Tab key selects the next element in the tab sequence, * which excludes non-selected tab headers. * * When {@link autoSwitch} is set to **false**, pressing the arrow keys * or the Tab key moves the focus to the next or previous tab header, * but does not switch tabs. Pressing the **Enter** or **Space** keys * is required to activate the tab that has the focus. * * In most cases, the default value provides adequate (accessible) * behavior, but some users may prefer to set {@link autoSwitch} to false. * For a more detailed discussion of this topic, please see the * W3C ARIA practices * and * SimplyAccessible articles. */ autoSwitch: boolean; /** * Gets a {@link Tab} by id or by header content. * * @param id Id of the {@link Tab} to retrieve. */ getTab(id: string): Tab; /** * Occurs when the value of the {@link selectedIndex} property changes. */ readonly selectedIndexChanged: Event; /** * Raises the {@link selectedIndexChanged} event. */ onSelectedIndexChanged(e?: EventArgs): void; _populateControl(): void; _validateSelection(): void; private _updateContent; private _removeChildren; private _click; private _keydown; private _getTabIndex; private _getNextIndex; _setIsDisabled(value: boolean): void; _setTabOrder(value: number): void; _updateTabIndex(): void; } /** * Represents a tab within a {@link TabPanel} control. * * Tabs have two elements: a header and a pane. The header displays * the tab title and the pane represents the tab content. */ export declare class Tab { private _hdr; private _pane; private _p; /** * Initializes a new instance of the {@link Tab} class. * * @param header Element or CSS selector for the element that contains the Tab header. * @param pane Element or CSS selector for the element that contains the Tab content. */ constructor(header: any, pane: any); /** * Gets a reference to the {@link TabPanel} that contains this Tab. */ readonly tabPanel: TabPanel; /** * Gets the tab's header element. */ readonly header: HTMLElement; /** * Gets the tab's content element. */ readonly pane: HTMLElement; /** * Gets or sets a value that determines whether this {@link Tab} is disabled. */ isDisabled: boolean; /** * Gets or sets a value that determines whether this {@link Tab} is visible. */ isVisible: boolean; _setParts(header: HTMLElement, pane: HTMLElement): void; _setPanel(panel: TabPanel): void; } /** * The {@link Accordion} control is a vertically stacked set of * interactive headings that each contain a title. * * The headings function as controls that enable users to reveal * or hide their associated sections of content. * * Accordions are commonly used to reduce the need to scroll when * presenting multiple sections of content on a single page. */ export declare class Accordion extends Control { private _panes; private _selectedIndex; private _animated; private _autoSwitch; private _alCollapseAll; private _alExpandMany; private _autoSwitching; private _hidePane; /** * Initializes a new instance of the {@link Accordion} class. * * @param element The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl'). * @param options The JavaScript object containing initialization data for the control. * @param keepChildren Whether to keep child elements. If set to true, the caller becomes responsible for * populating the {@link tabs} array based on the DOM). */ constructor(element: any, options?: any, keepChildren?: boolean); /** * Gets an array of {@link AccordionPane} objects whose {@link AccordionPane.header} and * {@link AccordionPane.content} properties determine the content of the * {@link Accordion} control. */ readonly panes: ObservableArray; /** * Gets or sets the index of the currently selected (active) pane. */ selectedIndex: number; /** * Gets or sets the {@link AccordionPane} object that is currently selected. */ selectedPane: AccordionPane; /** * Gets or sets a value that determines whether collapsing or * expanding panes should be animated. * * The default value for this property is **true**. */ isAnimated: boolean; /** * Gets or sets a value that determines whether the {@link Accordion} * shows collapsed/expanded icons in the pane headers. * * The default value for this property is **true**. */ showIcons: boolean; /** * Gets or sets a value that determines whether the control should switch * panes automatically when the user selects a tab using the arrow keys. * * When {@link autoSwitch} is set to true (the default value), pressing the * arrow keys automatically switches panes. Pressing the tab key selects * the next element in the tab sequence, which excludes non-selected * pane headers. * * When {@link autoSwitch} is set to false, pressing the arrow keys or the * tab key moves the focus to the next or previous pane header, but does * not switch panes. Pressing the Enter or Space keys is required to * activate the pane that has the focus. * * In most cases, the default value provides adequate (accessible) * behavior, but some users may prefer to set {@link autoSwitch} to false. * For a more detailed discussion of this topic, please see the * W3C ARIA practices * and * SimplyAccessible articles. */ autoSwitch: boolean; /** * Gets or sets a value that determines whether users should be allowed * to collapse all the items. * * The default value for this property is **false**, which ensures * one item is always expanded. */ allowCollapseAll: boolean; /** * Gets or sets a value that determines whether users should be allowed * to expand multiple panes at a time. * * The default value for this property is **false**, which ensures * only one pane is expanded at a time. */ allowExpandMany: boolean; /** * Gets an {@link AccordionPane} by id or by header content. * * @param id Id of the {@link AccordionPane} to retrieve. */ getPane(id: string): AccordionPane; /** * Occurs when the value of the {@link selectedIndex} property changes. */ readonly selectedIndexChanged: Event; /** * Raises the {@link selectedIndexChanged} event. */ onSelectedIndexChanged(e?: EventArgs): void; _populateControl(): void; _validateSelection(): void; private _updateContent; private _updatePanesTabIndex; protected _setTabOrder(value: number): void; private _click; private _keydown; private _getPaneIndex; private _getNextIndex; private _getIndexOfPane; private _getNextActiveIndex; _togglePane(pane: AccordionPane, collapse: boolean): void; } /** * Represents a pane in an {@link Accordion} control. * * Panes have two elements: header and content. * The header displays the pane title and the content is a * collapsible element that shows the pane content. */ export declare class AccordionPane { private _hdr; private _content; private _acc; /** * Initializes a new instance of the {@link AccordionPane} class. * * @param header Element or CSS selector for the element that contains the pane header. * @param content Element or CSS selector for the element that contains the pane content. */ constructor(header: any, content: any); /** * Gets a reference to the {@link Accordion} that contains this Tab. */ readonly accordion: Accordion; /** * Gets the pane's header element. */ readonly header: HTMLElement; /** * Gets the panes's content element. */ readonly content: HTMLElement; /** * Gets or sets a value that determines whether this {@link AccordionPane} is disabled. */ isDisabled: boolean; /** * Gets or sets a value that determines whether this {@link AccordionPane} is visible. */ isVisible: boolean; /** * Gets or sets a value that determines whether this {@link AccordionPane} is expanded or collapsed. */ isCollapsed: boolean; _setParts(header: HTMLElement, content: HTMLElement): void; _setAccordion(accordion: Accordion): void; } /** * Provides arguments for the {@link TreeView.formatItem} event. */ export declare class FormatNodeEventArgs extends EventArgs { _data: any; _e: HTMLElement; _level: number; /** * Initializes a new instance of the {@link FormatNodeEventArgs} class. * * @param dataItem Data item represented by the node. * @param element Element that represents the node being formatted. * @param level The outline level of the node being formatted. */ constructor(dataItem: any, element: HTMLElement, level: number); /** * Gets the data item being formatted. */ readonly dataItem: any; /** * Gets a reference to the element that represents the node being formatted. */ readonly element: HTMLElement; /** * Gets the outline level of the node being formatted. */ readonly level: number; } /** * Provides arguments for {@link TreeNode}-related events. */ export declare class TreeNodeEventArgs extends CancelEventArgs { _node: TreeNode; /** * Initializes a new instance of the {@link TreeNodeEventArgs} class. * * @param node {@link TreeNode} that this event refers to. */ constructor(node: TreeNode); /** * Gets the {@link TreeNode} that this event refers to. */ readonly node: TreeNode; } /** * Provides arguments for {@link TreeNode} drag-drop events. */ export declare class TreeNodeDragDropEventArgs extends CancelEventArgs { _src: TreeNode; _tgt: TreeNode; _pos: DropPosition; /** * Initializes a new instance of the {@link TreeNodeEventArgs} class. * * @param dragSource {@link TreeNode} being dragged. * @param dropTarget {@link TreeNode} where the source is being dropped. * @param position {@link DropPosition} that this event refers to. */ constructor(dragSource: TreeNode, dropTarget: TreeNode, position: DropPosition); /** * Gets a reference to the {@link TreeNode} being dragged. */ readonly dragSource: TreeNode; /** * Gets a reference to the current {@link TreeNode} target. */ readonly dropTarget: TreeNode; /** * Gets or sets the {@link DropPosition} value that specifies where * the {@link TreeNode} will be dropped. */ position: DropPosition; } /** * Specifies the position where a {@link TreeNode} is being dropped during * a drag and drop operation. */ export declare enum DropPosition { /** The node will become the previous sibling of the target node. */ Before = 0, /** The node will become the next sibling of the target node. */ After = 1, /** The node will become the last child of the target node. */ Into = 2 } /** * Class that represents a node in a {@link TreeView}. */ export declare class TreeNode { static CacheKey: string; _t: TreeView; _e: HTMLElement; /** * Initializes a new instance of a {@link TreeNode}. * * @param treeView {@link TreeView} that contains the node. * @param nodeElement HTML element that represents the node on the {@link TreeView}. */ constructor(treeView: TreeView, nodeElement: HTMLElement); /** * Gets the data item that this node represents. */ readonly dataItem: any; /** * Gets the HTML element that represents this node on the {@link TreeView}. */ readonly element: HTMLElement; /** * Gets a reference to the {@link TreeView} that contains this node. */ readonly treeView: TreeView; /** * Ensures that a node is visible by expanding any collapsed * ancestors and scrolling the element into view. */ ensureVisible(): void; /** * Checks whether this node refers to the same element as another node. * * @param node @TreeNode to compare with this one. */ equals(node: TreeNode): boolean; /** * Gets a value that determines whether this node is selected or not. */ readonly isSelected: boolean; /** * Selects this node. * @param isSilent, whether to fire selected node change event or not */ select(isSilent?: boolean): void; /** * Deselects this node * @param isSilent, whether to fire selected node change event or not */ deSelect(isSilent?: boolean): void; /** * Gets this node's index within the parent's node collection. */ readonly index: number; /** * Gets this node's parent node. * * This property returns null for top-level nodes. */ readonly parentNode: TreeNode; /** * Gets this node's level. * * Top-level nodes have level zero. */ readonly level: number; /** * Gets a value that indicates whether this node has child nodes. */ readonly hasChildren: boolean; /** * Gets a value that indicates whether this node has pending child nodes * that will be lazy-loaded when the node is expanded. */ readonly hasPendingChildren: boolean; /** * Gets an array containing this node's child nodes. * * This property returns null if the node has no children. */ readonly nodes: TreeNode[]; /** * Gets the HTMLInputElement that represents the checkbox associated * with this node. */ readonly checkBox: HTMLInputElement; /** * Gets or sets a value that determines whether this node is expanded or collapsed. */ isCollapsed: boolean; /** * Gets or sets a value that determines whether this node is checked. * * When the value of this property changes, child and ancestor nodes * are automatically updated, and the parent {@link TreeView}'s * {@link TreeView.checkedItemsChanged} event is raised. */ isChecked: boolean; /** * Gets or sets a value that determines whether this node is disabled. * * Disabled nodes cannot get mouse or keyboard events. * * If the {@link collapseWhenDisabled} proprety is set to true, disabling * a node also collapses it. */ isDisabled: boolean; /** * Gets a reference to the previous node in the view. * * @param visible Whether to return only visible nodes (whose ancestors are not collapsed). * @param enabled Whether to return only enabled nodes (whose ancestors are not disabled). */ previous(visible?: boolean, enabled?: boolean): TreeNode; /** * Gets a reference to the next node in the view. * * @param visible Whether to return only visible nodes (whose ancestors are not collapsed). * @param enabled Whether to return only enabled nodes (whose ancestors are not disabled). */ next(visible?: boolean, enabled?: boolean): TreeNode; /** * Gets a reference to the previous sibling node in the view. */ previousSibling(): TreeNode; /** * Gets a reference to the next sibling node in the view. */ nextSibling(): TreeNode; /** * Sets the collapsed state of the node. * * @param collapsed Whether to collapse or expand the node. * @param animate Whether to use animation when applying the new state. * @param collapseSiblings Whether to collapse sibling nodes when expanding * this node. */ setCollapsed(collapsed: boolean, animate?: boolean, collapseSiblings?: boolean): void; /** * Sets the checked state of this node and its children. * * @param checked Whether to check or uncheck the node and its children. * @param updateParent Whether to update the checked state of this node's * ancestor nodes. */ setChecked(checked: boolean, updateParent?: boolean): void; /** * Removes this {@link TreeNode} from a {@link TreeView}. */ remove(): void; /** * Adds a child node at a specific position. * * @param index Index of the new child node. * @param dataItem Data item used to create the new node. * @return The {@link TreeNode} that was added. */ addChildNode(index: number, dataItem: any): TreeNode; /** * Refreshes a node to reflect data changes. * * @param dataItem New node data. If not provided, the node is refreshed * based on its original data item (which presumably has been updated). */ refresh(dataItem?: any): void; /** * Moves this {@link TreeNode} to a new position on the {@link TreeView}. * * @param refNode Reference {@link TreeNode} that defines the location * where the node will be moved. * @param position Whether to move the node before, after, or into * the reference node. * @return True if the node was moved successfully. */ move(refNode: any, position: DropPosition): boolean; /** * Gets the array that contains the items for this {@link TreeNode}. * * This property is read-only. It returns an array that is a * member of the parent {@link TreeView}'s {@link TreeView.itemsSource} array. */ readonly itemsSource: any[]; _pse(e: HTMLElement): HTMLElement; _contains(node: TreeNode): boolean; _getArray(): any[]; _moveElements(refNode: any, position: DropPosition): void; _updateState(): void; _updateEmptyState(): void; _updateCheckedState(): void; static _getChildNodes(treeView: TreeView, nodeList: HTMLElement): TreeNode[]; static _isNode(e: HTMLElement): boolean; static _isNodeList(e: HTMLElement): boolean; static _isEmpty(node: HTMLElement): boolean; static _isCollapsed(node: HTMLElement): boolean; static _assertNode(node: HTMLElement): void; static _assertNodeList(nodeList: HTMLElement): void; } /** * Class that handles hierarchical (multi-level) bindings. */ export declare class _BindingArray { _path: any; _bindings: Binding[]; _maxLevel: number; /** * Initializes a new instance of a _BindingArray. * * @param path String or array of strings to create bindings from. */ constructor(path?: any); /** * Gets or sets the names of the properties used for binding. */ path: any; /** * Gets the binding value for a given data item at a given level. * * @param dataItem Object that contains the data. * @param level Binding level to use for retrieving the data. */ getValue(dataItem: any, level: number): any; /** * Sets the binding value on a given data item at a given level. * * @param dataItem Object that contains the data. * @param level Binding level to use for retrieving the data. * @param value Value to apply to the data item. */ setValue(dataItem: any, level: number, value: any): void; } /** * Represents a function used to load child nodes asynchronously (lazy-load). */ export interface ILazyLoad { /** * @param node {@link TreeNode} being opened and populated. * @param callback {@link ILazyLoadCallback} to be invoked when the node data becomes available. */ (node: TreeNode, callback: ILazyLoadCallback): void; } /** * Represents a callback method used to add lazy-loaded nodes to a {@link TreeNode}. */ export interface ILazyLoadCallback { /** * @param items Array containing child items for the node being lazy-loaded. */ (items: any[]): void; } /** * The {@link TreeView} control displays a hierarchical list of {@link TreeNode} * objects which may contain text, checkboxes, images, or arbitrary HTML * content. * * A {@link TreeView} is typically used to display the headings in a document, * the entries in an index, the files and directories on a disk, or any other * kind of information that might usefully be displayed as a hierarchy. * * After creating a {@link TreeView}, you will typically set the following * properties: * *
    *
  1. * {@link itemsSource}: an array that contains the data to be displayed on the * tree.
    2. *
  2. * {@link displayMemberPath}: the name of the data item property that contains * the text to display on the nodes (defaults to 'header'), and
    3. *
  3. * {@link childItemsPath}: the name of the data item property that contains the * node's child items (defaults to 'items').
    4. *
* * The {@link TreeView} control supports the following keyboard commands: * * * * * * * * * * * * * *
Key CombinationAction
Up/DownSelect the previous/next visible node
LeftCollapse the selected node if it has child nodes, select the parent node otherwise
RightExpand the selected node if it has child nodes
Home/EndSelect the first/last visible nodes
SpaceToggle the checkbox in the current node (see the {@link showCheckboxes} property)
Other charactersSearch for nodes that contain the text typed (multi-character auto-search)
* * The example below builds a simple tree and allows you to see the effect * of the TreeView's main properties: * * {@sample Nav/TreeView/Behavior/purejs Example} */ export declare class TreeView extends Control { static _DATAITEM_KEY: string; static _AS_DLY: number; static _AN_DLY: number; static _CND: string; static _CNDL: string; static _CEMP: string; static _CNDT: string; static _CNDC: string; static _CSEL: string; static _CMSEL: string; static _CCLD: string; static _CCLG: string; static _CLDG: string; _root: HTMLElement; private _items; _selNode: TreeNode; _selNodes: ObservableArray; _itmPath: selfModule._BindingArray; _chkPath: selfModule._BindingArray; private _prevSel; private _dspPath; private _imgPath; private _dd; private _html; private _animated; private _chkOnClick; private _collOnClick; private _xpndOnClick; private _xpndOnLoad; private _autoColl; private _showChk; private _collapseWhenDisabled; private _chkItems; private _ldLvl; private _srch; private _toSrch; private _lazyLoad; private _isDirty; private _srcChanged; private _isReadOnly; private _edtNode; private _toItemsChanged; private _prevDragState; private options; private _preserveSelNode; private _allowMultiSelect; static _ctrlTemplate: string; /** * Gets or sets the template used to instantiate {@link TreeView} controls. */ static controlTemplate: string; /** * Initializes a new instance of the {@link TreeView} class. * * @param element The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl'). * @param options The JavaScript object containing initialization data for the control. */ constructor(element: any, options?: any); /** * Gets or sets the array that contains the {@link TreeView} items. * * {@link TreeView} #see:itemsSource arrays usually have a hierarchical * structure with items that contain child items. There is no fixed * limit to the depth of the items. * * For example, the array below would generate a tree with three * top-level nodes, each with two child nodes: * * ```typescript * import { TreeView } from 'wijmo/wijmo.nav'; * var tree = new TreeView('#treeView', { * displayMemberPath: 'header', * childItemsPath: 'items', * itemsSource: [ * { header: '1 first', items: [ * { header: '1.1 first child' }, * { header: '1.2 second child' }, * ] }, * { header: '2 second', items: [ * { header: '3.1 first child' }, * { header: '3.2 second child' }, * ] }, * { header: '3 third', items: [ * { header: '3.1 first child' }, * { header: '3.2 second child' }, * ] } * ] * }); * ``` */ itemsSource: any[]; /** * Gets or sets the name of the property (or properties) that contains * the child items for each node. * * The default value for this property is the string **"items"**. * * In most cases, the property that contains the child items is the * same for all data items on the tree. In these cases, set the * {@link childItemsPath} to that name. * * In some cases, however, items at different levels use different * properties to store their child items. For example, you could have * a tree with categories, products, and orders. In that case, you * would set the {@link childItemsPath} to an array such as this: * * 
// categories have products, products have orders:
     * tree.childItemsPath = [ 'Products', 'Orders' ];
*/ childItemsPath: string | string[]; /** * Gets or sets the name of the property (or properties) to use as * the visual representation of the nodes. * * The default value for this property is the string **"header"**. * * In most cases, the property that contains the node text is the * same for all data items on the tree. In these cases, set the * {@link displayMemberPath} to that name. * * In some cases, however, items at different levels use different * properties to represent them. For example, you could have * a tree with categories, products, and orders. In that case, you * might set the {@link displayMemberPath} to an array such as this: * * 
// categories, products, and orders have different headers:
     * tree.displayMemberPath = [ 'CategoryName', 'ProductName', 'OrderID' ];
*/ displayMemberPath: string | string[]; /** * Gets or sets the name of the property (or properties) to use as a * source of images for the nodes. * * The default value for this property is an empty string, which * means no images are added to the nodes. */ imageMemberPath: string | string[]; /** * Gets or sets the name of the property (or properties) to bind * to the node's checked state. * * See also the {@link showCheckboxes} property and the * {@link checkedItemsChanged} event. */ checkedMemberPath: string | string[]; /** * Gets or sets a value indicating whether items are bound to * plain text or HTML. * * The default value for this property is **false**. */ isContentHtml: boolean; /** * Gets or sets a value that determines whether the {@link TreeView} * should add checkboxes to nodes and manage their state. * * This property can be used only on trees without lazy-loaded * nodes (see the {@link lazyLoadFunction} property). * * See also the {@link checkedItems} property and {@link checkedItemsChanged} * event. * * The default value for this property is **false**. */ showCheckboxes: boolean; /** * Gets or sets a value that determines if sibling nodes should be * collapsed when a node is expanded. * * The default value for this property is **true**, because in * most cases collapsing nodes that are not in use helps keep the * UI clean. */ autoCollapse: boolean; /** * Gets or sets a value that determines whether nodes should be * collapsed when they are disabled. * * The default value for this property is **true**. */ collapseWhenDisabled: boolean; /** * Gets or sets a value that indicates whether to use animations when * expanding or collapsing nodes. * * The default value for this property is **true**. */ isAnimated: boolean; /** * Gets or sets a value that determines whether users can edit the * text in the nodes. * * When the {@link isReadOnly} property is set to false, users may * edit the content of the tree nodes by typing directly into the nodes. * The F2 key can also be used to enter edit mode with the whole node * content selected. * * You may customize the editing behavior using the following methods * and events: * * **Methods**: {@link startEditing}, {@link finishEditing}. * * **Events**: {@link nodeEditStarting}, {@link nodeEditStarted}, * {@link nodeEditEnding}, {@link nodeEditEnded}. * * The default value for this property is **true**. */ isReadOnly: boolean; /** * Starts editing a given {@link TreeNode}. * * @param node {@link TreeNode} to edit. If not provided, the currently * selected node is used. * * @return True if the edit operation started successfully. */ startEditing(node?: TreeNode): boolean; /** * Commits any pending edits and exits edit mode. * * @param cancel Whether pending edits should be canceled or committed. * @return True if the edit operation finished successfully. */ finishEditing(cancel?: boolean): boolean; /** * Gets or sets a value that determines whether users can drag and drop nodes * within the {@link TreeView}. * * The default value for this property is **false**. */ allowDragging: boolean; /** * Gets or sets a value that determines whether to toggle checkboxes * when the user clicks the node header. * * The default value for this property is **false**, which causes * checkboxes to be toggled only when the user clicks the checkbox * itself (not the node header). * * See also the {@link showCheckboxes} property and the {@link checkedItemsChanged} event. */ checkOnClick: boolean; /** * Gets or sets a value that determines whether to expand collapsed * nodes when the user clicks the node header. * * The default value for this property is **true**. * * When this property is set to **false**, users have to click the * expand/collapse icons to collapse the node. * Clicking the node header will select the node if it is not selected, * and will start editing the node if it is selected (and if the * {@link isReadOnly} property is set to false). * * See also the {@link collapseOnClick} property. */ expandOnClick: boolean; /** * Gets or sets a value that determines whether to collapse expanded * nodes when the user clicks the node header. * * The default value for this property is **false**. * * When this property is set to **false**, users have to click the * expand/collapse icons to collapse the node. * Clicking the node header will select the node if it is not selected, * and will start editing the node if it is selected (and if the * {@link isReadOnly} property is set to false). * * See also the {@link expandOnClick} property. */ collapseOnClick: boolean; /** * Gets or sets a value that determines whether to automatically expand the * first node when the tree is loaded. * * The default value for this property is **true**. If you set it to false, * all nodes will be initially collapsed. */ expandOnLoad: boolean; /** * Gets or sets the data item that is currently selected. */ selectedItem: any; /** * Gets or sets the {@link TreeNode} that is currently selected. */ selectedNode: TreeNode; /** * Gets an array containing the text of all nodes from the root * to the currently selected node. */ readonly selectedPath: string[]; /** * Gets an array containing the items that are currently checked. * * The array returned includes only items that have no children. * This is because checkboxes in parent items are used to check * or uncheck the child items. * * See also the {@link showCheckboxes} property and the * {@link checkedItemsChanged} event. * * For example: * * ```typescript * import { TreeView } from 'wijmo/wijmo.nav'; * var treeViewChk = new TreeView('#gsTreeViewChk', { * displayMemberPath: 'header', * childItemsPath: 'items', * showCheckboxes: true, * itemsSource: items, * checkedItemsChanged: function (s, e) { * var items = s.checkedItems, * msg = ''; * if (items.length) { * msg = '<p><b>Selected Items:</b></p><ol>\r\n'; * for (var i = 0; i < items.length; i++) { * msg += '<li>' + items[i].header + '</li>\r\n'; * } * msg += '</ol>'; * } * document.getElementById('gsTreeViewChkStatus').innerHTML = msg; * } * }); * ``` */ checkedItems: any[]; /** * Checks or unchecks all checkboxes on the tree. * * @param check Whether to check or uncheck all checkboxes. */ checkAllItems(check: boolean): void; /** * Gets the total number of items in the tree. */ readonly totalItemCount: number; /** * Gets or sets a function that loads child nodes on demand. * * The {@link lazyLoadFunction} takes two parameters: the node being * expanded and a callback to be invoked when the data becomes * available. * * The callback function tells the {@link TreeView} that the node * loading process has been completed. It should always be called, * even if there are errors when loading the data. * * For example: * * ```typescript * import { TreeView } from 'wijmo/wijmo.nav'; * var treeViewLazyLoad = new TreeView('#treeViewLazyLoad', { * displayMemberPath: 'header', * childItemsPath: 'items', * itemsSource: [ // start with three lazy-loaded nodes * { header: 'Lazy Node 1', items: []}, * { header: 'Lazy Node 2', items: [] }, * { header: 'Lazy Node 3', items: [] } * ], * lazyLoadFunction: function (node, callback) { * setTimeout(function () { // simulate http delay * var result = [ // simulate result * { header: 'Another lazy node...', items: [] }, * { header: 'A non-lazy node without children' }, * { header: 'A non-lazy node with child nodes', items: [ * { header: 'hello' }, * { header: 'world' } * ]} * ]; * callback(result); // return result to control * }, 2500); // simulated 2.5 sec http delay * } *}); * ``` * * Trees with lazy-loaded nodes have some restrictions: their nodes * may not have checkboxes (see the {@link showCheckboxes} property) and * the {@link collapseToLevel} method will not expand collapsed nodes * that have not been loaded yet. */ lazyLoadFunction: ILazyLoad; /** * Gets or sets a value that determines whether the TreeView should preserve selected node when * node list is expanded/collapsed by clicking on the expand/collapse icon. * * The default value for this property is **false**. */ preserveSelectedNode: boolean; /** * Gets an array with list of currently selected nodes * This property works only if {@link allowMultiSelect} is set to true */ readonly selectedNodes: ObservableArray; /** * Gets or sets a value that determines whether multiple nodes selection is allowed or not * when clicking in combination with ctrl or shift key * The default value for this property is **false**. */ allowMultiSelect: boolean; /** * Gets a reference to the first {@link TreeNode} in the {@link TreeView}. * * @param visible Whether to return only visible nodes (whose ancestors are not collapsed). * @param enabled Whether to return only enabled nodes (whose ancestors are not disabled). */ getFirstNode(visible?: boolean, enabled?: boolean): TreeNode; /** * Gets a reference to the last {@link TreeNode} in the {@link TreeView}. * * @param visible Whether to return only visible nodes (whose ancestors are not collapsed). * @param enabled Whether to return only enabled nodes (whose ancestors are not disabled). */ getLastNode(visible?: boolean, enabled?: boolean): TreeNode; /** * Gets an array of {@link TreeNode} objects representing the nodes * currently loaded. */ readonly nodes: TreeNode[]; /** * Gets the {@link TreeNode} object representing a given data item. * * @param item The data item to look for. */ getNode(item: any): TreeNode; /** * Adds a child node at a specific position. * * @param index Index of the new child node. * @param dataItem Data item used to create the new node. * @return The {@link TreeNode} that was added. */ addChildNode(index: number, dataItem: any): TreeNode; /** * Collapses all the tree items to a given level. * * This method will typically expand or collapse multiple nodes * at once. But it will not perform lazy-loading on any nodes, * so collapsed nodes that must be lazy-loaded will not be * expanded. * * @param level Maximum node level to show. */ collapseToLevel(level: number): void; /** * Loads the tree using data from the current {@link itemsSource}. * * @param preserveOutlineState Whether to preserve the outline state when loading the * tree data. Defaults to false. */ loadTree(preserveOutlineState?: boolean): void; /** * Occurs when the value of the {@link itemsSource} property changes. */ readonly itemsSourceChanged: Event; /** * Raises the {@link itemsSourceChanged} event. */ onItemsSourceChanged(e?: EventArgs): void; /** * Occurs before the tree items are generated. */ readonly loadingItems: Event; /** * Raises the {@link loadingItems} event. * @return True if the event was not canceled. */ onLoadingItems(e?: CancelEventArgs): boolean; /** * Occurs after the tree items have been generated. */ readonly loadedItems: Event; /** * Raises the {@link loadedItems} event. */ onLoadedItems(e?: EventArgs): void; /** * Occurs when the user clicks an item or presses the Enter key and an item is selected. * * This event is typically used in navigation trees. Use the {@link selectedItem} property * to get the item that was clicked. */ readonly itemClicked: Event; /** * Raises the {@link itemClicked} event. */ onItemClicked(e?: EventArgs): void; /** * Occurs when the value of the {@link selectedItem} property changes. * If {@link allowMultiSelect} is set to true, then this event also fires when selected nodes changes. */ readonly selectedItemChanged: Event; /** * Raises the {@link selectedItemChanged} event. */ onSelectedItemChanged(e?: EventArgs): void; /** * Occurs when the value of the {@link checkedItems} property changes. * * See also the {@link showCheckboxes} and {@link checkOnClick} * properties. */ readonly checkedItemsChanged: Event; /** * Raises the {@link checkedItemsChanged} event. */ onCheckedItemsChanged(e?: EventArgs): void; /** * Occurs before the value of the {@link TreeNode.isCollapsed} property changes. */ readonly isCollapsedChanging: Event; /** * Raises the {@link isCollapsedChanging} event. * * @param e {@link TreeNodeEventArgs} that contains the event data. * @return True if the event was not canceled. */ onIsCollapsedChanging(e: TreeNodeEventArgs): boolean; /** * Occurs after the value of the {@link TreeNode.isCollapsed} property changes. */ readonly isCollapsedChanged: Event; /** * Raises the {@link isCollapsedChanged} event. * * @param e {@link TreeNodeEventArgs} that contains the event data. */ onIsCollapsedChanged(e: TreeNodeEventArgs): void; /** * Occurs before the value of the {@link TreeNode.isChecked} property changes. */ readonly isCheckedChanging: Event; /** * Raises the {@link isCheckedChanging} event. * * @param e {@link TreeNodeEventArgs} that contains the event data. * @return True if the event was not canceled. */ onIsCheckedChanging(e: TreeNodeEventArgs): boolean; /** * Occurs after the value of the {@link TreeNode.isChecked} property changes. */ readonly isCheckedChanged: Event; /** * Raises the {@link isCheckedChanged} event. * * @param e {@link TreeNodeEventArgs} that contains the event data. */ onIsCheckedChanged(e: TreeNodeEventArgs): void; /** * Occurs when an element representing a node has been created. * * This event can be used to format nodes for display. * * The example below uses the **formatItem** event to add a "new" * badge to the right of new items on the tree. * * ```typescript * import { TreeView } from 'wijmo/wijmo.nav'; * var treeViewFmtItem = new TreeView('#treeViewFmtItem', { * displayMemberPath: 'header', * childItemsPath: 'items', * itemsSource: items, * formatItem: function (s, e) { * if (e.dataItem.newItem) { * let img = wijmo.createElement(''); * e.element.appendChild(img); * } * } * }); * ``` */ readonly formatItem: Event; /** * Raises the {@link formatItem} event. * * @param e {@link FormatNodeEventArgs} that contains the event data. */ onFormatItem(e: FormatNodeEventArgs): void; /** * Occurs when the user starts dragging a node. * * This event only occurs if the {@link allowDragging} property is set to true. * * You may prevent nodes from being dragged by setting the event's * **cancel** parameter to true. */ readonly dragStart: Event; /** * Raises the {@link dragStart} event. * * @param e {@link TreeNodeEventArgs} that contains the event data. * @return True if the event was not canceled. */ onDragStart(e: TreeNodeEventArgs): boolean; /** * Occurs while the user drags a node over other nodes on the {@link TreeView}. * * This event only occurs if the {@link allowDragging} property is set to true. * * You may prevent drop operations over certain nodes and/or positions by * setting the event's **cancel** parameter to true. */ readonly dragOver: Event; /** * Raises the {@link dragOver} event. * * @param e {@link TreeNodeDragDropEventArgs} that contains the event data. * @return True if the event was not canceled. */ onDragOver(e: TreeNodeDragDropEventArgs): boolean; /** * Occurs when the user drops a on the {@link TreeView}. * * @return True if the event was not canceled. */ readonly drop: Event; /** * Raises the {@link drop} event. * * @param e {@link TreeNodeDragDropEventArgs} that contains the event data. */ onDrop(e: TreeNodeDragDropEventArgs): boolean; /** * Occurs when the user finishes a drag/drop operation, either by dropping * a node into a new location or by canceling the operation with the mouse * or keyboard. */ readonly dragEnd: Event; /** * Raises the {@link dragEnd} event. */ onDragEnd(e?: EventArgs): void; /** * Occurs before a {@link TreeNode} enters edit mode. */ readonly nodeEditStarting: Event; /** * Raises the {@link nodeEditStarting} event. * * @param e {@link TreeNodeEventArgs} that contains the event data. * @return True if the event was not canceled. */ onNodeEditStarting(e: TreeNodeEventArgs): boolean; /** * Occurs after a {@link TreeNode} has entered edit mode. */ readonly nodeEditStarted: Event; /** * Raises the {@link nodeEditStarted} event. * * @param e {@link TreeNodeEventArgs} that contains the event data. */ onNodeEditStarted(e: TreeNodeEventArgs): void; /** * Occurs before a {@link TreeNode} exits edit mode. */ readonly nodeEditEnding: Event; /** * Raises the {@link nodeEditEnding} event. * * @param e {@link TreeNodeEventArgs} that contains the event data. * @return True if the event was not canceled. */ onNodeEditEnding(e: TreeNodeEventArgs): boolean; /** * Occurs after a {@link TreeNode} has exited edit mode. */ readonly nodeEditEnded: Event; /** * Raises the {@link nodeEditEnded} event. * * @param e {@link TreeNodeEventArgs} that contains the event data. */ onNodeEditEnded(e: TreeNodeEventArgs): void; /** * Overridden to re-populate the tree. * * @param fullUpdate Indicates whether to update the control layout as well as the content. */ refresh(fullUpdate?: boolean): void; _updateFocus(oldNode: TreeNode): void; private _updateTabIndex; protected _setTabOrder(value: number): void; _raiseCheckedItemsChanged(): void; _reload(): void; _createNode(dataItem: any): TreeNode; private _getCollapseIconWidthBounds; private _mousedown; private _getNodesBetween; private _getOffsetFromRoot; private _checkCollapseIconClick; private _click; private _keydown; private _keypress; private _findNext; private _loadTree; private _addItem; private _collapseToLevel; _lazyLoadNode(node: TreeNode): void; private _lazyLoadCallback; private _lazyLoadNodeDone; private isTxtSelected; _clearMultiSelectedNodes(preserveCurrentNode?: boolean): void; } /** * Class that handles drag/drop operations for a {@link TreeView}. */ export declare class _TreeDragDropManager { private _tree; private _dragstartBnd; private _dragoverBnd; private _dragendBnd; private _dropBnd; static CLS_DRAG_FEEDBACK: string; static CLS_DRAG_ITEMCOUNT: string; static CLS_DRAG_ITEMCOUNT_LARGE: string; private static _dMarker; private static _drgSrc; /** * Initializes a new instance of a {@link _TreeViewDragDropManager}. * * @param treeView {@link TreeView} managed by this {@link _TreeViewDragDropManager}. */ constructor(treeView: TreeView); /** * Disposes of this {@link _TreeViewDragDropManager} */ dispose(): void; private _dragstart; private _removeDragFeedback; private _dragover; private _drop; private _dragend; private _keydown; private _handleDragDrop; private _getTopLevelSelectedNodes; private _showDragMarker; }