Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/Guide/UI_Components/Funnel/Adaptive_Layout/ below:

Vue Funnel - Adaptive Layout

The layout does not automatically adapt to changes made in the UI component's container at runtime. Therefore, if you enable a user to resize the container, call the render() method after each resizing to render the Funnel in the new size.

$("#funnelContainer").dxFunnel("render");

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;
    renderFunnel () {
        this.funnel.instance.render();
    };
}
@NgModule({
    imports: [
        // ...
        DxFunnelModule
    ],
    // ...
})

<template> 
    <DxFunnel ref="funnel" />
</template>

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

export default {
    components: {
        DxFunnel
    },
    methods: {
        renderFunnel () {
            this.$refs.funnel.instance.render();
        }
    }
}
</script>

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();
    }
    renderFunnel () {
        this.funnel.render();
    }
}

export default App;

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4