React TreeView Methods

DevExpress.ui.dxTreeView.defaultOptions({ 
    device: { deviceType: "desktop" },
    options: {
        // Here go the TreeView properties
    }
});

import TreeView, { Properties } from "devextreme/ui/tree_view";
// ...
export class AppComponent {
    constructor () {
        TreeView.defaultOptions<Properties>({
            device: { deviceType: "desktop" },
            options: {
                // Here go the TreeView properties
            }
        });
    }
}

<template>
    <div>
        <DxTreeView id="treeView1" />
        <DxTreeView id="treeView2" />
    </div>
</template>
<script>
import DxTreeView from "devextreme-vue/tree-view";
import TreeView from "devextreme/ui/tree_view";

TreeView.defaultOptions({
    device: { deviceType: "desktop" },
    options: {
        // Here go the TreeView properties
    }
});

export default {
    components: {
        DxTreeView
    }
}
</script>

import dxTreeView from "devextreme/ui/tree_view";
import TreeView from "devextreme-react/tree-view";

dxTreeView.defaultOptions({
    device: { deviceType: "desktop" },
    options: {
        // Here go the TreeView properties
    }
});

export default function App() {
    return (
        <div>
            <TreeView id="treeView1" />
            <TreeView id="treeView2" />
        </div>
    )
}

const devicesConfig = [
    { deviceType: 'desktop' },
    { deviceType: 'tablet' },
    { deviceType: 'phone' },
];

devicesConfig.forEach(deviceConfig => {
    DevExpress.ui.dxTreeView.defaultOptions({ 
        device: deviceConfig,
        options: {
            // Here go the TreeView properties
        }
    });
});

import TreeView, { Properties } from "devextreme/ui/tree_view";
// ...
export class AppComponent {
    constructor () {
        const devicesConfig = [
            { deviceType: 'desktop' },
            { deviceType: 'tablet' },
            { deviceType: 'phone' },
        ];

        devicesConfig.forEach(deviceConfig => {
            TreeView.defaultOptions<Properties>({
                device: deviceConfig,
                options: {
                    // Here go the TreeView properties
                }
            });
        });
    }
}

<template>
    <div>
        <DxTreeView />
    </div>
</template>
<script>
import DxTreeView from "devextreme-vue/tree-view";
import TreeView from "devextreme/ui/tree_view";

const devicesConfig = [
    { deviceType: 'desktop' },
    { deviceType: 'tablet' },
    { deviceType: 'phone' },
];

devicesConfig.forEach(deviceConfig => {
    TreeView.defaultOptions({
        device: deviceConfig,
        options: {
            // Here go the TreeView properties
        }
    });
});

export default {
    components: {
        DxTreeView
    }
}
</script>

import dxTreeView from "devextreme/ui/tree_view";
import TreeView from "devextreme-react/tree-view";

const devicesConfig = [
    { deviceType: 'desktop' },
    { deviceType: 'tablet' },
    { deviceType: 'phone' },
];

devicesConfig.forEach(deviceConfig => {
    dxTreeView.defaultOptions({
        device: deviceConfig,
        options: {
            // Here go the TreeView properties
        }
    });
});

export default function App() {
    return (
        <div>
            <TreeView />
        </div>
    )
}

$("#myTreeView").dxTreeView("dispose");
$("#myTreeView").remove();

<dx-tree-view ...
    *ngIf="condition">
</dx-tree-view>

<template>
    <DxTreeView ...
        v-if="condition">
    </DxTreeView>
</template>

<script>
import DxTreeView from 'devextreme-vue/tree-view';

export default {
    components: {
        DxTreeView
    }
}
</script>

import React from 'react';

import TreeView from 'devextreme-react/tree-view';

function DxTreeView(props) {
    if (!props.shouldRender) {
        return null;
    }

    return (
        <TreeView ... >    
        </TreeView>
    );
}

class App extends React.Component {
    render() {
        return (
            <DxTreeView shouldRender="condition" />
        );
    }
}
export default App;

const selectedNodes = $("#treeViewContainer").dxTreeView("getSelectedNodes");

<template>
    <DxTreeView ...
        :ref="treeViewRef">
    </DxTreeView>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeView from 'devextreme-vue/tree-view';

export default {
    components: {
        DxTreeView
    },
    data() {
        return {
            treeViewRef,
            selectedNodes: []
        }
    },
    computed: {
        treeView: function() {
            return this.$refs[treeViewRef].instance;
        }
    },
    methods: {
        getSelectedNodes() {
            this.selectedNodes = this.treeView.getSelectedNodes();
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import TreeView from 'devextreme-react/tree-view';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.treeViewRef = React.createRef();
        this.selectedNodes = [];
        this.getSelectedNodes = () => {
            this.selectedNodes = this.treeView.getSelectedNodes();
        }
    }

    get treeView() {
        return this.treeViewRef.current.instance();
    }

    render() {
        return (
            <TreeView ...
                ref={this.treeViewRef}>
            </TreeView>
        );
    }
}
export default App;