Important: Please read the Qt Code of Conduct -

QML Qt.binding with toFixed not working

  • Hello,

    I have a property in a QML object that is set by a JS:

    Qt.binding(function(){return SetValueObject[SetValueProperty]  + setUnit})

    I want to use toFixed but this is not working:

    Qt.binding(function(){return SetValueObject[SetValueProperty].toFixed(setDecimals)  + setUnit})
    What am I doing wrong?
    best regards

  • Moderators

    @Slash200 said in QML Qt.binding with toFixed not working:

    I want to use toFixed but this is not working

    I would be much of a help when you also tell "what" is not working.

  • When using

    Qt.binding(function(){return SetValueObject[SetValueProperty].toFixed(setDecimals)  + setUnit})

    it is showing nothing in the QML Gui.

  • Moderators

    what does the console window say?

  • It says TypeError: Cannot call method 'toFixed' of undefined

  • Moderators

    so then either SetValueObject is not set or there is no property with the name of SetValueProperty.
    What is the type of SetValueProperty?

  • It's working fine, just when using .toFixed it isn't working anymore.
    Here is the qml that is created from the JS:

    import QtQuick 2.8
    import QtGraphicalEffects 1.0
    import QtQuick.Controls 2.1
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Extras 1.4
    Rectangle {
            id: initalID
            width: 100
            height: 80
            color: "transparent"
            antialiasing: false
            property alias gaugetext: gaugetextfield.text
            property alias gaugevalue: gauge.value
            property alias gaugemaxvalue: gauge.maximumValue
            property alias gaugeminvalue: gauge.minimumValue
            MouseArea {
                      id: mouseArea
                      width: parent.width
                      height: parent.height + 10 // easier to get
                      anchors.centerIn: parent
                      // parent
                      //drag.axis: Drag.XAndYAxis
                      //onClicked: touchmenu.popup(mouseX, mouseY)
            Gauge {
                id: gauge
                height: 200
                anchors.fill: parent
                anchors.margins: 10
                orientation : Qt.Horizontal
                minorTickmarkCount: 4
                //labelStepSize: 50
                minimumValue: 0
                maximumValue: 400
                tickmarkStepSize : maximumValue / 4
                //value: Dashboard.MAP
                Behavior on value {
                    NumberAnimation {
                        duration: 5
                Text {
                    id: gaugetextfield
                    font.pixelSize: (parent.height / 3)
                    font.bold: true
                    color: "white"
                    anchors.horizontalCenter: parent.horizontalCenter
                  style: GaugeStyle {
                    valueBar: Rectangle {
                       implicitWidth:  20
                        color: Qt.rgba(gauge.value / gauge.maximumValue, 0, 1 - gauge.value / gauge.maximumValue, 1)

    And this is the JS that creates the object:

    var component;
    var gauge;
    function createVerticalGauge(setWidth,setHeight,setX,setY,setMinValue,setMaxValue,setDecPlace,setUnit,setID,SetValueObject,SetValueProperty) {
        component = Qt.createComponent("verticalbargauge.qml");
        if (component.status == Component.Ready)
    function finishCreation(setWidth,setHeight,setX,setY,setMinValue,setMaxValue,setDecPlace,setUnit,setID,SetValueObject,SetValueProperty) {
        if (component.status == Component.Ready) {
            gauge = component.createObject(adaptronicDash, {"id": setID, "width": setWidth, "height": setHeight,
                                               "gaugemaxvalue": setMaxValue,
                                               "gaugeminvalue": setMinValue,
                                               "gaugetext": Qt.binding(function(){return SetValueObject[SetValueProperty] +  " " + setUnit}),
                                               "gaugevalue": Qt.binding(function(){return SetValueObject[SetValueProperty]}),
                                               "x": setX, "y": setY});
            if (gauge == null) {
                // Error Handling
                //console.log("Error creating object");
        } else if (component.status == Component.Error) {
            // Error Handling
            //console.log("Error loading component:", component.errorString());

    This is working well, just when it change the line where gaugetext is set to ```

    "gaugetext": Qt.binding(function(){return SetValueObject[SetValueProperty].toFixed(aValue) +  " " + setUnit}),

    it throws this error.

    Best regards

  • Moderators

    hi, I stumpeld upon that myself, I think it's a limitation of QML, how many actions you can chain, or the execution order might be the problem.

    double->int->string doesn't really work.

    this workaround, should do the trick.

        var stepInBetween = SetValueObject[SetValueProperty].toFixed(setDecimals);
        return stepInBetween + setUnit

Log in to reply