jQuery Funnel - 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
Feedback