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) funnel: DxFunnelComponent;
    funnelItems: any = [];
    getFunnelItems() {
        this.funnelItems = this.funnel.instance.getAllItems();
    }
}
@NgModule({
    imports: [
        // ...
        DxFunnelModule
    ],
    // ...
})

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
    ],
    // ...
})

Access a Funnel Item Using the API

jQuery

Angular

jQuery

Angular

See Also