RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/Guide/UI_Components/TreeView/Access_a_Node/ below:

Vue TreeView - Access a Node

Vue TreeView - Access a Node Within Event Handlers

Usually, you need to access a TreeView node when an action was made on it, for example, when it was clicked or selected. This action raises an event, and you can access the node subjected to the action within the event handler.

jQuery

$(function() {
    $("#treeViewContainer").dxTreeView({
        dataSource: data,
        onItemClick: function (e) {
            var node = e.node;
            // ...
        }
    });
});

Angular

<dx-tree-view
    [dataSource]="data"
    (onItemClick)="onItemClick($event)">
</dx-tree-view>

import { DxTreeViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    data = [ ... ];
    onItemClick (e) {
        var node = e.node;
        // ...
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})

Vue

<template>
    <DxTreeView
        :data-source="data"
        @item-click="onItemClick" 
    />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

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

const data = [ ... ];

export default {
    components: {
        DxTreeView
    },
    data() {
        return {
            data
        };
    },
    methods: {
        onItemClick(e) {
            const node = e.node;
            // ...
        }
    }
};
</script>

React

import React from 'react';

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

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

const data = [ ... ];

class App extends React.Component {
    render() {
        return (
            <TreeView
                onItemClick={this.onItemClick}
                dataSource={data} />
        );
    }

    onItemClick(e) {
        const node = e.node;
        // ...            
    }
}

export default App;

Not every event handler provides access to the node, only those whose name starts with onItem.... They are described in the TreeView Configuration.

Using a Method

Call the getNodes() method to get TreeView nodes at any point in the application flow.

jQuery

var allNodes = $("#treeViewContainer").dxTreeView("getNodes");

Angular

import { ..., ViewChild } from "@angular/core";
import { DxTreeViewModule, DxTreeViewComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxTreeViewComponent, { static: false }) treeView: DxTreeViewComponent;
    // Prior to Angular 8
    // @ViewChild(DxTreeViewComponent) treeView: DxTreeViewComponent;
    nodeCollection: Array<any> = [];
    getNodes () {
        this.nodeCollection = this.treeView.instance.getNodes();
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})

Vue

<template>
    <dx-tree-view
        :ref="treeViewRef"
        :items="data" 
    />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import { DxTreeView } from 'devextreme-vue/tree-view';
const treeViewRef = 'treeView';

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

React

import React from 'react';

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

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

class App extends React.Component {
    constructor() {
        super();
        this.treeViewRef = React.createRef();
        this.getNodes = this.getNodes.bind(this);
    }

    render() {
        return (
            <TreeView
                items={data}
                ref={this.treeViewRef} />
        );
    }

    getNodes(e) {
        this.treeView.getNodes();
    }

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

export default App;

All node objects contain a similar set of fields, which are described in the Node documentation section.