Vue UI Components Documentation

Enables or disables the jqxFormattedInput.

<template>
  <JqxFormattedInput ref="myFormattedInput"
    :disabled="true"
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    }
  }
</script>

Get the disabled property.

let disabled = this.$refs.myFormattedInput.disabled;

Sets or gets the notation in which to display decimal numbers.

Possible values

'default' - the default representation of decimal numbers, e.g. 1590;

'exponential' - representation of decimal numbers in scientific exponential notation (E notation), e.g. 1.59e+3.

<template>
  <JqxFormattedInput ref="myFormattedInput"
    :decimalNotation="'exponential'" :radix="'decimal'"
    :value="253000" :width="250" :height="25"
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    }
  }
</script>

Get the decimalNotation property.

let decimalNotation = this.$refs.myFormattedInput.decimalNotation;

Sets or gets whether the jqxFormattedInput's dropdown (pop-up) will be enabled. The dropdown allows the user to choose the radix (numeral system) of the displayed number.

Note: the dropdown requires an additional empty div element in the initialization div of jqxFormattedInput.

<template>
  <JqxFormattedInput :width="250" :height="25" :radix="'decimal'"
                       :value="253000" :spinButtons="true" :dropDown="true">
    </JqxFormattedInput>
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    }
  }
</script>

Get the dropDown property.

let dropDown = this.$refs.myFormattedInput.dropDown;

Sets or gets the width of the jqxFormattedInput's dropdown (pop-up).

<template>
    <JqxFormattedInput :width="100" :height="25" 
        :radix="'binary'" :dropDownWidth="200"
        :value="11111101" :spinButtons="false" :dropDown="true"
    />
</template>
 
<script>
import JqxFormattedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue";
export default {
  components: {
    JqxFormattedInput
  }
};
</script>

Get the dropDownWidth property.

let dropDownWidth = this.$refs.myFormattedInput.dropDownWidth;

Sets or gets the jqxFormattedInput's height.

<template>
  <JqxFormattedInput ref="myFormattedInput"
    :height="25" :value="25300"
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    }
  }
</script>

Get the height property.

let height = this.$refs.myFormattedInput.height;

Sets or gets the minimum value of the widget. The value of min should be in the same numeral system as value. The min property can be set to no less than '-9223372036854775808' (-2⁶³) in decimal.

<template>
  <JqxFormattedInput ref="myFormattedInput"
    :min="0" :spinButtons="true" :value="1" :height="25"
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    }
  }
</script>

Get the min property.

let min = this.$refs.myFormattedInput.min;

Sets or gets the maximum value of the widget. The value of max should be in the same numeral system as value. The max property can be set to no more than '9223372036854775807' (2⁶³ - 1) in decimal.

<template>
  <JqxFormattedInput ref="myFormattedInput"
    :max="111110100" :spinButtons="true" :value="11111101" :height="25"
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    }
  }
</script>

Get the max property.

let max = this.$refs.myFormattedInput.max;

Sets or gets the jqxFormattedInput's placeholder.

<template>
  <JqxFormattedInput ref="myFormattedInput"
    :placeHolder="'Enter a number'"
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    }
  }
</script>

Get the placeHolder property.

let placeHolder = this.$refs.myFormattedInput.placeHolder;

Sets or gets the pop-up's z-index.

<template>
  <JqxFormattedInput ref="myFormattedInput"
    :popupZIndex="99999"
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    }
  }
</script>

Get the popupZIndex property.

let popupZIndex = this.$refs.myFormattedInput.popupZIndex;

Enables or disables the rounded corners functionality. This property setting has effect in browsers which support CSS border-radius.

<template>
  <JqxFormattedInput ref="myFormattedInput"
    :roundedCorners="false" :height="25" :width="250" :spinButtons="true"
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    }
  }
</script>

Get the roundedCorners property.

let roundedCorners = this.$refs.myFormattedInput.roundedCorners;

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxFormattedInput ref="myFormattedInput"
    :rtl="true" :height="25" :width="250" :spinButtons="true"
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    }
  }
</script>

Get the rtl property.

let rtl = this.$refs.myFormattedInput.rtl;

Sets or gets the radix of the jqxFormattedInput. The radix specifies the numeral system in which to display the widget's value.

Possible values

2 or 'binary' - specifies the binary numeral system. Allowed characters for this numeral system are the digits 0 and 1;

8 or 'octal' - specifies the octal numeral system. Allowed characters for this numeral system are the digits from 0 to 7;

10 or 'decimal' - specifies the decimal numeral system. Allowed characters for this numeral system are the digits from 0 to 9;

16 or 'hexadecimal' - specifies the hexadecimal numeral system. Allowed characters for this numeral system are the digits from 0 to 9 and letters from a to f (case insenstive).

<template>
  <JqxFormattedInput ref="myFormattedInput"
    :radix="'hexadecimal'" :value="'fd'"
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    }
  }
</script>

Get the radix property.

let radix = this.$refs.myFormattedInput.radix;

Shows or hides the spin buttons.

Note: the spin buttons require an additional empty div element in the initialization div of jqxFormattedInput.

<template>
  <JqxFormattedInput ref="myFormattedInput"
    :spinButtons="true" :height="25"
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    }
  }
</script>

Get the spinButtons property.

let spinButtons = this.$refs.myFormattedInput.spinButtons;

Sets or gets the increase/decrease step. The value of spinButtonsStep is a decimal number.

<template>
  <JqxFormattedInput ref="myFormattedInput"
    :spinButtons="true" :spinButtonsStep="3" :height="25" :width="250"
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    }
  }
</script>

Get the spinButtonsStep property.

let spinButtonsStep = this.$refs.myFormattedInput.spinButtonsStep;

Determines the template as an alternative of the default styles.

'default' - the default template. The style depends only on the "theme" property value.

'primary' - dark blue style for extra visual weight.

'success' - green style for successful or positive action.

'warning' - orange style which indicates caution.

'danger' - red style which indicates a dangerous or negative action.

'info' - blue button, not tied to a semantic action or use.

<template>
  <JqxFormattedInput ref="myFormattedInput"
    :template="'primary'" :spinButtons="true" :height="25" :width="250"
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    }
  }
</script>

Get the template property.

let template = this.$refs.myFormattedInput.template;

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
                                  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" /> 
                                  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxFormattedInput ref="myFormattedInput"
    :theme="'material'" :spinButtons="true" :height="25" :width="250"
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    }
  }
</script>

Sets or gets whether to use upper case when the radix property is set to 16 or 'hexadecimal'.

<template>
  <JqxFormattedInput ref="myFormattedInput"
    :upperCase="true" :radix="'hexadecimal'" :value="'fd'" :height="25"
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    }
  }
</script>

Get the upperCase property.

let upperCase = this.$refs.myFormattedInput.upperCase;

Sets or gets the value of the jqxFormattedInput widget. The value is in the numeral system specified by the radix property.

<template>
  <JqxFormattedInput ref="myFormattedInput"
    :value="25300" :height="25"
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    }
  }
</script>

Get the value property.

let value = this.$refs.myFormattedInput.value;

Sets or gets the jqxFormattedInput's width.

<template>
  <JqxFormattedInput ref="myFormattedInput"
    :width="200" :height="25" :spinButtons="true" :radix="'binary'" :value="11111101"
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    }
  }
</script>

Get the width property.

let width = this.$refs.myFormattedInput.width;

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxFormattedInput.

<template>
    <div>
        <JqxFormattedInput @open="onOpen($event)" @close="onClose($event)"
                           @change="onChange($event)" @radixChange="onRadixChange($event)"
                           :width="300" :height="25" :radix="'decimal'"
                           :value="190" :spinButtons="true" :dropDown="true">
        </JqxFormattedInput>
        <div style="margin-top: 150px">
            Events log:
        </div>
        <JqxPanel ref="myPanel" :width="300" :height="150"></JqxPanel>
    </div>
</template>
<script>
    import JqxFormattedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue";
    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
    export default {
        components: {
            JqxFormattedInput,
            JqxPanel
        },
        methods: {
            onOpen: function (event) {
                this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />');
            },
            onClose: function (event) {
                this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />');
            },
            onChange: function (event) {
                const args = event.args;
                const newValue = args.value;
                const oldValue = args.oldValue;
                const radix = args.radix;
                this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />' +
                    'value: ' + newValue + ', old value: ' + oldValue + ', radix: ' + radix + '<br />');
            },
            onRadixChange: function (event) {
                const args = event.args;
                const newRadix = args.radix;
                const oldRadix = args.oldRadix;
                const newValue = args.value;
                const oldValue = args.oldValue;
                this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />' +
                    'radix: ' + newRadix + ', old radix: ' + oldRadix +
                    '<br />value: ' + newValue + ', old value: ' + oldValue + '<br />');
            }
        }
    }
</script>

This event is triggered when the pop-up is closed.

Code examples

Bind to the close event of jqxFormattedInput.

<template>
    <div>
        <JqxFormattedInput @open="onOpen($event)" @close="onClose($event)"
                           @change="onChange($event)" @radixChange="onRadixChange($event)"
                           :width="300" :height="25" :radix="'decimal'"
                           :value="190" :spinButtons="true" :dropDown="true">
        </JqxFormattedInput>
        <div style="margin-top: 150px">
            Events log:
        </div>
        <JqxPanel ref="myPanel" :width="300" :height="150"></JqxPanel>
    </div>
</template>
<script>
    import JqxFormattedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue";
    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
    export default {
        components: {
            JqxFormattedInput,
            JqxPanel
        },
        methods: {
            onOpen: function (event) {
                this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />');
            },
            onClose: function (event) {
                this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />');
            },
            onChange: function (event) {
                const args = event.args;
                const newValue = args.value;
                const oldValue = args.oldValue;
                const radix = args.radix;
                this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />' +
                    'value: ' + newValue + ', old value: ' + oldValue + ', radix: ' + radix + '<br />');
            },
            onRadixChange: function (event) {
                const args = event.args;
                const newRadix = args.radix;
                const oldRadix = args.oldRadix;
                const newValue = args.value;
                const oldValue = args.oldValue;
                this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />' +
                    'radix: ' + newRadix + ', old radix: ' + oldRadix +
                    '<br />value: ' + newValue + ', old value: ' + oldValue + '<br />');
            }
        }
    }
</script>

This event is triggered when the pop-up is opened.

Code examples

Bind to the open event of jqxFormattedInput.

<template>
    <div>
        <JqxFormattedInput @open="onOpen($event)" @close="onClose($event)"
                           @change="onChange($event)" @radixChange="onRadixChange($event)"
                           :width="300" :height="25" :radix="'decimal'"
                           :value="190" :spinButtons="true" :dropDown="true">
        </JqxFormattedInput>
        <div style="margin-top: 150px">
            Events log:
        </div>
        <JqxPanel ref="myPanel" :width="300" :height="150"></JqxPanel>
    </div>
</template>
<script>
    import JqxFormattedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue";
    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
    export default {
        components: {
            JqxFormattedInput,
            JqxPanel
        },
        methods: {
            onOpen: function (event) {
                this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />');
            },
            onClose: function (event) {
                this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />');
            },
            onChange: function (event) {
                const args = event.args;
                const newValue = args.value;
                const oldValue = args.oldValue;
                const radix = args.radix;
                this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />' +
                    'value: ' + newValue + ', old value: ' + oldValue + ', radix: ' + radix + '<br />');
            },
            onRadixChange: function (event) {
                const args = event.args;
                const newRadix = args.radix;
                const oldRadix = args.oldRadix;
                const newValue = args.value;
                const oldValue = args.oldValue;
                this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />' +
                    'radix: ' + newRadix + ', old radix: ' + oldRadix +
                    '<br />value: ' + newValue + ', old value: ' + oldValue + '<br />');
            }
        }
    }
</script>

This event is triggered when the radix is changed.

Code examples

Bind to the radixChange event of jqxFormattedInput.

<template>
    <div>
        <JqxFormattedInput @open="onOpen($event)" @close="onClose($event)"
                           @change="onChange($event)" @radixChange="onRadixChange($event)"
                           :width="300" :height="25" :radix="'decimal'"
                           :value="190" :spinButtons="true" :dropDown="true">
        </JqxFormattedInput>
        <div style="margin-top: 150px">
            Events log:
        </div>
        <JqxPanel ref="myPanel" :width="300" :height="150"></JqxPanel>
    </div>
</template>
<script>
    import JqxFormattedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue";
    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
    export default {
        components: {
            JqxFormattedInput,
            JqxPanel
        },
        methods: {
            onOpen: function (event) {
                this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />');
            },
            onClose: function (event) {
                this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />');
            },
            onChange: function (event) {
                const args = event.args;
                const newValue = args.value;
                const oldValue = args.oldValue;
                const radix = args.radix;
                this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />' +
                    'value: ' + newValue + ', old value: ' + oldValue + ', radix: ' + radix + '<br />');
            },
            onRadixChange: function (event) {
                const args = event.args;
                const newRadix = args.radix;
                const oldRadix = args.oldRadix;
                const newValue = args.value;
                const oldValue = args.oldValue;
                this.$refs.myPanel.append('<strong>' + event.type + '</strong><br />' +
                    'radix: ' + newRadix + ', old radix: ' + oldRadix +
                    '<br />value: ' + newValue + ', old value: ' + oldValue + '<br />');
            }
        }
    }
</script>

Closes the jqxFormattedInput pop-up.

<template>
    <JqxFormattedInput ref="myFormattedInput"
        :width="200" :height="25" :radix="'decimal'"
        :value="190" :spinButtons="true" :dropDown="true">
    </JqxFormattedInput>
</template>
<script>
    import JqxFormattedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue";
    export default {
        components: {
            JqxFormattedInput
        },
        mounted: function () {
            this.$refs.myFormattedInput.open();
            setTimeout(_ => this.$refs.myFormattedInput.close(), 1000);
        }
    }
</script>

Destroys the widget.

<template>
  <JqxFormattedInput ref="myFormattedInput"
   
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    },
    mounted: function () {
      this.$refs.myFormattedInput.destroy();
    }
  }
</script>

Focuses the widget.

<template>
  <JqxFormattedInput ref="myFormattedInput"
   
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    },
    mounted: function () {
      this.$refs.myFormattedInput.focus();
    }
  }
</script>

Opens the jqxFormattedInput pop-up.

<template>
    <JqxFormattedInput ref="myFormattedInput"
        :width="200" :height="25" :radix="'decimal'"
        :value="190" :spinButtons="true" :dropDown="true">
    </JqxFormattedInput>
</template>
<script>
    import JqxFormattedInput from "jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue";
    export default {
        components: {
            JqxFormattedInput
        },
        mounted: function () {
            this.$refs.myFormattedInput.open();
            setTimeout(_ => this.$refs.myFormattedInput.close(), 1000);
        }
    }
</script>

Renders the widget.

<template>
  <JqxFormattedInput ref="myFormattedInput"
   
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    },
    mounted: function () {
      this.$refs.myFormattedInput.render();
    }
  }
</script>

Refreshes the widget.

<template>
  <JqxFormattedInput ref="myFormattedInput"
   
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    },
    mounted: function () {
      this.$refs.myFormattedInput.refresh();
    }
  }
</script>

Selects the text in the input field.

<template>
  <JqxFormattedInput ref="myFormattedInput"
   
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    },
    mounted: function () {
      this.$refs.myFormattedInput.value = 123456789;
      this.$refs.myFormattedInput.selectAll();
    }
  }
</script>

Positions the caret in the beginning of the number in the input.

<template>
  <JqxFormattedInput ref="myFormattedInput"
   
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    },
    mounted: function () {
      this.$refs.myFormattedInput.value = 123456789;
      this.$refs.myFormattedInput.selectFirst();
    }
  }
</script>

Positions the caret at the end of the number in the input.

<template>
  <JqxFormattedInput ref="myFormattedInput"
   
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    },
    mounted: function () {
      this.$refs.myFormattedInput.value = 123456789;
      this.$refs.myFormattedInput.selectLast();
    }
  }
</script>

Sets or gets the value.

<template>
  <JqxFormattedInput ref="myFormattedInput"
   
  />
</template>
 
<script>
  import JqxFormattedInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxformattedinput.vue';
 
  export default {
    components: {
      JqxFormattedInput
    },
    mounted: function () {
      const value = this.$refs.myFormattedInput.val();
    }
  }
</script>