New to KendoReact? Start a free 30-day trial
TreeViewDragClue
A subclass of React.Component.
Represents the KendoReact TreeViewDragClue component which renders a clue when an item is dragged.
jsx
class App extends React.Component {
dragClue;
state = { tree };
render() {
return (
<div>
<TreeView data={this.state.tree} draggable={true}
onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
<TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
</div>
);
}
onItemDragOver = (event) => {
this.dragClue.show(event.pageY + 10, event.pageX, event.item.text, this.getClueClassName(event));
}
onItemDragEnd = (event) => {
this.dragClue.hide();
const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
if (eventAnalyzer.isDropAllowed) {
const updatedTree = moveTreeViewItem(
event.itemHierarchicalIndex,
this.state.tree,
eventAnalyzer.getDropOperation(),
eventAnalyzer.destinationMeta.itemHierarchicalIndex,
);
this.setState({ tree: updatedTree });
}
}
getClueClassName(event) {
const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
if (eventAnalyzer.isDropAllowed) {
switch (eventAnalyzer.getDropOperation()) {
case 'child':
return 'k-i-plus';
case 'before':
return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
'k-i-insert-up' : 'k-i-insert-middle';
case 'after':
const siblings = getSiblings(itemIndex, this.state.tree);
const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down';
default:
break;
}
}
return 'k-i-cancel';
}
}
function getSiblings(itemIndex, data) {
let result = data;
const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
for (let i = 0; i < indices.length - 1; i++) {
result = result[indices[i]].items;
}
return result;
}
const SEPARATOR = '_';
const tree = [{
text: 'Furniture', expanded: true, items: [
{ text: 'Tables & Chairs', expanded: true },
{ text: 'Sofas', expanded: true },
{ text: 'Occasional Furniture', expanded: true }]
}, {
text: 'Decor', expanded: true, items: [
{ text: 'Bed Linen', expanded: true },
{ text: 'Curtains & Blinds', expanded: true },
{ text: 'Carpets', expanded: true }]
}];
ReactDOM.render(<App />, document.querySelector('my-app'));
Name | Type | Default | Description |
---|---|---|---|
props |
|
The props of the TreeViewDragClue component. |
Methods
hide |
---|
Hides the TreeViewDragClue component. |
show | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Displays the TreeViewDragClue component. | |||||||||||||||
|