JavaScript/jQuery ProgressBar Options

$(function(){
    $("#progressBarContainer").dxProgressBar({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

<template>
    <DxProgressBar ...
        :element-attr="progressBarAttributes">
    </DxProgressBar>
</template>

<script>
import DxProgressBar from 'devextreme-vue/progress-bar';

export default {
    components: {
        DxProgressBar
    },
    data() {
        return {
            progressBarAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

import React from 'react';

import ProgressBar from 'devextreme-react/progress-bar';

class App extends React.Component {
    progressBarAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <ProgressBar ...
                elementAttr={this.progressBarAttributes}>
            </ProgressBar>
        );
    }
}
export default App;

$(function() {
    $("#progressBarContainer").dxProgressBar({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

<template> 
    <DxProgressBar ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxProgressBar from 'devextreme-vue/progress-bar'; 

export default { 
    components: { 
        DxProgressBar
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script> 

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import ProgressBar from 'devextreme-react/progress-bar'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <ProgressBar ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
} 

$(function() {
    const progressBar = $("#progressBarContainer").dxProgressBar({
        // ...
    }).dxProgressBar("instance");

    function setInvalidStatus(message) {
        progressBar.option({
            validationStatus: "invalid",
            validationErrors: [{ message: message }]
        });
    }
});

<template>
    <DxProgressBar ...
        :validation-status="validationStatus"
        :validation-errors="validationErrors"
    />
</template>

<script>
    // ...
    export default {
        // ...
        data() {
            return {
                validationStatus: "valid",
                validationErrors: []
            }
        },
        methods: {
            setInvalidStatus(message) {
                this.validationStatus = "invalid";
                this.validationErrors = [{ message: message }];
            }
        }
    }
</script>

import React, { useState } from 'react';
// ...

function App() {
    const [validationStatus, setValidationStatus] = useState("valid");
    const [validationErrors, setValidationErrors] = useState([]);

    const setInvalidStatus = message => {
        setValidationStatus("invalid");
        setValidationErrors([{ message: message }]);
    }

    return (
        <ProgressBar
            validationStatus={validationStatus}
            validationErrors={validationErrors}
        />
    ); 

};
export default App;