DevExtreme jQuery - 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
],
// ...
})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
],
// ...
})See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
Feedback