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/Use_Plain_Data/ below:

Vue TreeView - Use Plain Data

If you use plain data in the TreeView, set the dataStructure property to "plain". For an example of plain data, see the following code snippet.

jQuery

var plainData = [
    { id: '1', text: 'Fruits' },
    { id: '1_1', text: 'Apples', parentId: '1' },
    { id: '1_2', text: 'Oranges', parentId: '1' },
    { id: '2', text: 'Vegetables' },
    { id: '2_1', text: 'Cucumbers', parentId: '2' },
    { id: '2_2', text: 'Tomatoes', parentId: '2' }
];

$(function() {
    $("#treeViewContainer").dxTreeView({
        dataSource: plainData,
        dataStructure: 'plain'
    });
});

Angular

<dx-tree-view
    [dataSource]="plainData"
    dataStructure="plain">
</dx-tree-view>

import { DxTreeViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    plainData = [
        { id: '1', text: 'Fruits' },
        { id: '1_1', text: 'Apples', parentId: '1' },
        { id: '1_2', text: 'Oranges', parentId: '1' },
        { id: '2', text: 'Vegetables' },
        { id: '2_1', text: 'Cucumbers', parentId: '2' },
        { id: '2_2', text: 'Tomatoes', parentId: '2' }
    ];
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})

Vue

<template>
    <DxTreeView
        data-structure="plain"
        :data-source="plainData"
    />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

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

const plainData = [
    { id: '1', text: 'Fruits' },
    { id: '1_1', text: 'Apples', parentId: '1' },
    { id: '1_2', text: 'Oranges', parentId: '1' },
    { id: '2', text: 'Vegetables' },
    { id: '2_1', text: 'Cucumbers', parentId: '2' },
    { id: '2_2', text: 'Tomatoes', parentId: '2' }
];

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

React

import React from 'react';

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

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

const plainData = [
    { id: '1', text: 'Fruits' },
    { id: '1_1', text: 'Apples', parentId: '1' },
    { id: '1_2', text: 'Oranges', parentId: '1' },
    { id: '2', text: 'Vegetables' },
    { id: '2_1', text: 'Cucumbers', parentId: '2' },
    { id: '2_2', text: 'Tomatoes', parentId: '2' }
];

class App extends React.Component {
    render() {
        return (
            <TreeView
                dataStructure="plain"
                dataSource={plainData} />
        );
    }
}

export default App;

As you can see, all items in a plain data source have the id and text fields, and items that have a parent, have the parentId field. Those are conventional field names. To use other names, change the keyExpr, displayExpr and parentIdExpr properties, respectively.

jQuery

var plainData = [
    { key: '1', name: 'Fruits' },
    { key: '1_1', name: 'Apples', parent: '1' },
    { key: '1_2', name: 'Oranges', parent: '1' },
    { key: '2', name: 'Vegetables' },
    { key: '2_1', name: 'Cucumbers', parent: '2' },
    { key: '2_2', name: 'Tomatoes', parent: '2' }
];

$(function() {
    $("#treeViewContainer").dxTreeView({
        dataSource: plainData,
        dataStructure: 'plain',
        keyExpr: 'key',
        displayExpr: 'name',
        parentIdExpr: 'parent'
    });
});

Angular

<dx-tree-view
    [dataSource]="plainData"
    dataStructure="plain"
    keyExpr="key"
    displayExpr="name"
    parentIdExpr="parent">
</dx-tree-view>

import { DxTreeViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    plainData = [
        { key: '1', name: 'Fruits' },
        { key: '1_1', name: 'Apples', parent: '1' },
        { key: '1_2', name: 'Oranges', parent: '1' },
        { key: '2', name: 'Vegetables' },
        { key: '2_1', name: 'Cucumbers', parent: '2' },
        { key: '2_2', name: 'Tomatoes', parent: '2' }
    ];
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})

Vue

<template>
    <DxTreeView
        data-structure="plain"
        :data-source="plainData"
        key-expr="key"
        display-expr="name"
        parent-id-expr="parent"
    />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

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

const plainData = [
    { key: '1', name: 'Fruits' },
    { key: '1_1', name: 'Apples', parent: '1' },
    { key: '1_2', name: 'Oranges', parent: '1' },
    { key: '2', name: 'Vegetables' },
    { key: '2_1', name: 'Cucumbers', parent: '2' },
    { key: '2_2', name: 'Tomatoes', parent: '2' }
];

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

React

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

const plainData = [
    { key: '1', name: 'Fruits' },
    { key: '1_1', name: 'Apples', parent: '1' },
    { key: '1_2', name: 'Oranges', parent: '1' },
    { key: '2', name: 'Vegetables' },
    { key: '2_1', name: 'Cucumbers', parent: '2' },
    { key: '2_2', name: 'Tomatoes', parent: '2' }
];

class App extends React.Component {
    render() {
        return (
            <TreeView
                dataStructure="plain"
                dataSource={plainData} 
                keyExpr="key"
                displayExpr="name"
                parentIdExpr="parent" />
        );
    }
}

export default App;

Frequently, the id of an item is also its text. In this case, set both the keyExpr and displayExpr properties to a single value.

jQuery

var plainData = [
    { name: 'Fruits' },
    { name: 'Apples', parentId: 'Fruits' },
    { name: 'Oranges', parentId: 'Fruits' },
    { name: 'Vegetables' },
    { name: 'Cucumbers', parentId: 'Vegetables' },
    { name: 'Tomatoes', parentId: 'Vegetables' }
];

$(function() {
    $("#treeViewContainer").dxTreeView({
        dataSource: plainData,
        dataStructure: 'plain',
        keyExpr: 'name',
        displayExpr: 'name'
    });
});

Angular

<dx-tree-view
    [dataSource]="plainData"
    dataStructure="plain"
    keyExpr="name"
    displayExpr="name">
</dx-tree-view>

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

Vue

<template>
    <DxTreeView
        data-structure="plain"
        :data-source="plainData"
        key-expr="name"
        display-expr="name"
    />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

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

const plainData = [
    { name: 'Fruits' },
    { name: 'Apples', parentId: 'Fruits' },
    { name: 'Oranges', parentId: 'Fruits' },
    { name: 'Vegetables' },
    { name: 'Cucumbers', parentId: 'Vegetables' },
    { name: 'Tomatoes', parentId: 'Vegetables' }
];

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

React

import React from 'react';

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

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

const plainData = [
    { name: 'Fruits' },
    { name: 'Apples', parentId: 'Fruits' },
    { name: 'Oranges', parentId: 'Fruits' },
    { name: 'Vegetables' },
    { name: 'Cucumbers', parentId: 'Vegetables' },
    { name: 'Tomatoes', parentId: 'Vegetables' }
];

class App extends React.Component {
    render() {
        return (
            <TreeView
                dataStructure="plain"
                dataSource={plainData} 
                keyExpr="name"
                displayExpr="name" />
        );
    }
}

export default App;

View Demo