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

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

Vue TreeView - Expand and Collapse Nodes

If a node is supposed to be expanded initially, set its expanded field to true. If another field specifies whether a node is expanded or collapsed, assign its name to the expandedExpr property as shown in the following code.

var hierarchicalData = [{
    name: 'Fruits',
    isExpanded: true,
    items: [
        { name: 'Apples' },
        { name: 'Oranges' }
    ]
}, {
    name: 'Vegetables',
    isExpanded: true,
    items: [
        { name: 'Cucumbers' },
        { name: 'Tomatoes' }
    ]
}];

$(function() {
    $("#treeViewContainer").dxTreeView({
        dataSource: hierarchicalData,
        keyExpr: 'name',
        displayExpr: 'name',
        expandedExpr: 'isExpanded'
    });
});

<dx-tree-view
    [dataSource]="hierarchicalData"
    keyExpr="name"
    displayExpr="name"
    expandedExpr="isExpanded">
</dx-tree-view>

import { DxTreeViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    hierarchicalData = [{
        name: 'Fruits',
        isExpanded: true,
        items: [
            { name: 'Apples' },
            { name: 'Oranges' }
        ]
    }, {
        name: 'Vegetables',
        isExpanded: true,
        items: [
            { name: 'Cucumbers' },
            { name: 'Tomatoes' }
        ]
    }];
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})

<template>
    <DxTreeView
        key-expr="key"
        display-expr="name"
        expanded-expr="isExpanded"
        :items="hierarchicalData" 
    />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

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

const hierarchicalData = [{
    key: '1',
    name: 'Fruits',
    isExpanded: true,
    items: [
        { key: '1_1', name: 'Apples' },
        { key: '1_2', name: 'Oranges' }
    ]
}, {
    key: '2',
    name: 'Vegetables',
    isExpanded: true,
    items: [
        { key: '2_1', name: 'Cucumbers' },
        { key: '2_2', name: 'Tomatoes' }
    ]
}];

export default {
    components: {
        DxTreeView
    },
    data() {
        return {
            hierarchicalData
        };
    },
};
</script>

import React from 'react';

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

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

const hierarchicalData = [{
    key: '1',
    name: 'Fruits',
    isExpanded: true,
    items: [
        { key: '1_1', name: 'Apples' },
        { key: '1_2', name: 'Oranges' }
    ]
}, {
    key: '2',
    name: 'Vegetables',
    isExpanded: true,
    items: [
        { key: '2_1', name: 'Cucumbers' },
        { key: '2_2', name: 'Tomatoes' }
    ]
}];

class App extends React.Component {
    render() {
        return (
            <TreeView
                keyExpr="key"
                displayExpr="name"
                expandedExpr="isExpanded"
                items={hierarchicalData} />
        );
    }
}

export default App;

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4