All docs
V21.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Access a Funnel Item Using the API

Call the getAllItems() method to access funnel items. It returns a collection of objects whose fields and methods are described in the Item section.

jQuery
JavaScript
var funnelItems = $("#funnelContainer").dxFunnel("getAllItems");
Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxFunnelModule, DxFunnelComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxFunnelComponent, { static: false }) funnel: DxFunnelComponent;
    // Prior to Angular 8
    // @ViewChild(DxFunnelComponent) funnel: DxFunnelComponent;
    funnelItems: any = [];
    getFunnelItems() {
        this.funnelItems = this.funnel.instance.getAllItems();
    }
}
@NgModule({
    imports: [
        // ...
        DxFunnelModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxFunnel ref="funnel" />
</template>

<script>
import DxFunnel from 'devextreme-vue/funnel';

export default {
    components: {
        DxFunnel
    },
    methods: {
        getAllItems () {
            return this.$refs.funnel.instance.getAllItems();
        }
    }
}
</script>
React
App.js
import React from 'react';
import Funnel from 'devextreme-react/funnel';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.funnelRef = React.createRef();
    }
    render() {
        return (
            <Funnel ref={this.funnelRef} />
        );
    }
    get funnel() {
        return this.funnelRef.current.instance;
    }
    getAllItems () {
        return this.funnel.getAllItems();
    }
}

export default App;

You can also access a funnel item in the event handlers. For example, the onItemClick event handler gets the clicked item in the argument.

jQuery
JavaScript
$(function() {
    $("#funnelContainer").dxFunnel({
        // ...
        onItemClick: function (e) {
            var item = e.item;
            // ...
        }
    });
});
Angular
HTML
TypeScript
<dx-funnel
    (onItemClick)="onItemClick($event)">
</dx-funnel>
import { DxFunnelModule } from "devextreme-angular";
// ...
export class AppComponent {
    onItemClick (e) {
        let item = e.item;
        // ...
    };
}
@NgModule({
    imports: [
        // ...
        DxFunnelModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxFunnel @item-click="onItemClick" />
</template>

<script>
import DxFunnel from 'devextreme-vue/funnel';

export default {
    components: {
        DxFunnel
    },
    methods: {
        onItemClick () {
            let item = e.item;
            // ...
        }
    }
}
</script>
React
App.js
import React from 'react';
import Funnel from 'devextreme-react/funnel';

class App extends React.Component {
    render() {
        return (
            <Funnel onItemClick={this.onItemClick} />
        );
    }
    onItemClick () {
        let item = e.item;
        // ...
    }
}

export default App;
See Also