Properties

NameTypeDefault
disabled Boolean false

Enables or disables the jqxButtonGroup.

<template>
<JqxButtonGroup ref="myButtonGroup"
:disabled="true">
<button style='padding: 4px 16px' id='Left' value='Left'></button>
<button style='padding: 4px 16px' id='Center' value='Center'></button>
<button style='padding: 4px 16px' id='Right' value='Right'></button>
</JqxButtonGroup>
</template>
<script>
import JqxButtonGroup from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttongroup.vue';
export default {
components: {
JqxButtonGroup
}
}
</script>
enableHover Boolean false

Enables or disabled the highlight state.

<template>
<JqxButtonGroup ref="myButtonGroup"
:enableHover="false">
<button style='padding: 4px 16px' id='Left' value='Left'></button>
<button style='padding: 4px 16px' id='Center' value='Center'></button>
<button style='padding: 4px 16px' id='Right' value='Right'></button>
</JqxButtonGroup>
</template>
<script>
import JqxButtonGroup from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttongroup.vue';
export default {
components: {
JqxButtonGroup
}
}
</script>
mode String 'default'

Sets or gets the jqxButtonGroup's mode.

Possible Values:
'checkbox'
'radio'
'default'
<template>
<JqxButtonGroup ref="myButtonGroup"
:mode="'radio'">
<button style='padding: 4px 16px' id='Left' value='Left'></button>
<button style='padding: 4px 16px' id='Center' value='Center'></button>
<button style='padding: 4px 16px' id='Right' value='Right'></button>
</JqxButtonGroup>
</template>
<script>
import JqxButtonGroup from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttongroup.vue';
export default {
components: {
JqxButtonGroup
}
}
</script>
rtl Boolean false

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

<template>
<JqxButtonGroup ref="myButtonGroup"
:rtl="true">
<button style='padding: 4px 16px' id='Left' value='Left'></button>
<button style='padding: 4px 16px' id='Center' value='Center'></button>
<button style='padding: 4px 16px' id='Right' value='Right'></button>
</JqxButtonGroup>
</template>
<script>
import JqxButtonGroup from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttongroup.vue';
export default {
components: {
JqxButtonGroup
}
}
</script>
template String 'default'

Determines the template as an alternative of the default styles.

Possible Values:
'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>
<JqxButtonGroup ref="myButtonGroup"
:template="'success'">
<button style='padding: 4px 16px' id='Left' value='Left'></button>
<button style='padding: 4px 16px' id='Center' value='Center'></button>
<button style='padding: 4px 16px' id='Right' value='Right'></button>
</JqxButtonGroup>
</template>
<script>
import JqxButtonGroup from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttongroup.vue';
export default {
components: {
JqxButtonGroup
}
}
</script>
theme String ''

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>
<JqxButtonGroup ref="myButtonGroup"
:theme="'material'">
<button style='padding: 4px 16px' id='Left' value='Left'></button>
<button style='padding: 4px 16px' id='Center' value='Center'></button>
<button style='padding: 4px 16px' id='Right' value='Right'></button>
</JqxButtonGroup>
</template>
<script>
import JqxButtonGroup from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttongroup.vue';
export default {
components: {
JqxButtonGroup
}
}
</script>

Events

buttonclick Event

This event is triggered when a button is clicked.

Code examples

Bind to the buttonclick event of jqxButtonGroup.

<template>
<JqxButtonGroup ref="myButtonGroup" @buttonclick="onButtonclick($event)"
>
<button style='padding: 4px 16px' id='Left' value='Left'></button>
<button style='padding: 4px 16px' id='Center' value='Center'></button>
<button style='padding: 4px 16px' id='Right' value='Right'></button>
</JqxButtonGroup>
</template>
<script>
import JqxButtonGroup from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttongroup.vue';
export default {
components: {
JqxButtonGroup
},
methods: {
onButtonclick: function (event) {
alert('do something...');
}
}
}
</script>

selected Event

This event is triggered when a button is selected - in checkboxes or radio buttons mode.

Code examples

Bind to the selected event of jqxButtonGroup.

<template>
<JqxButtonGroup ref="myButtonGroup" @selected="onSelected($event)"
>
<button style='padding: 4px 16px' id='Left' value='Left'></button>
<button style='padding: 4px 16px' id='Center' value='Center'></button>
<button style='padding: 4px 16px' id='Right' value='Right'></button>
</JqxButtonGroup>
</template>
<script>
import JqxButtonGroup from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttongroup.vue';
export default {
components: {
JqxButtonGroup
},
methods: {
onSelected: function (event) {
alert('do something...');
}
}
}
</script>

unselected Event

This event is triggered when a button is unselected - in checkbox or radio buttons mode.

Code examples

Bind to the unselected event of jqxButtonGroup.

<template>
<JqxButtonGroup ref="myButtonGroup" @unselected="onUnselected($event)"
>
<button style='padding: 4px 16px' id='Left' value='Left'></button>
<button style='padding: 4px 16px' id='Center' value='Center'></button>
<button style='padding: 4px 16px' id='Right' value='Right'></button>
</JqxButtonGroup>
</template>
<script>
import JqxButtonGroup from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttongroup.vue';
export default {
components: {
JqxButtonGroup
},
methods: {
onUnselected: function (event) {
alert('do something...');
}
}
}
</script>

Methods

NameArgumentsReturn Type
disableAt index None

Disables a button at specific index.

<template>
<JqxButtonGroup ref="myButtonGroup"
>
<button style='padding: 4px 16px' id='Left' value='Left'></button>
<button style='padding: 4px 16px' id='Center' value='Center'></button>
<button style='padding: 4px 16px' id='Right' value='Right'></button>
</JqxButtonGroup>
</template>
<script>
import JqxButtonGroup from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttongroup.vue';
export default {
components: {
JqxButtonGroup
},
mounted: function () {
this.$refs.myButtonGroup.disableAt(1);
}
}
</script>
disable None None

Disables jqxButtonGroup.

<template>
<JqxButtonGroup ref="myButtonGroup"
>
<button style='padding: 4px 16px' id='Left' value='Left'></button>
<button style='padding: 4px 16px' id='Center' value='Center'></button>
<button style='padding: 4px 16px' id='Right' value='Right'></button>
</JqxButtonGroup>
</template>
<script>
import JqxButtonGroup from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttongroup.vue';
export default {
components: {
JqxButtonGroup
},
mounted: function () {
this.$refs.myButtonGroup.disable();
}
}
</script>
destroy None None

Destroys the widget.

<template>
<JqxButtonGroup ref="myButtonGroup"
>
<button style='padding: 4px 16px' id='Left' value='Left'></button>
<button style='padding: 4px 16px' id='Center' value='Center'></button>
<button style='padding: 4px 16px' id='Right' value='Right'></button>
</JqxButtonGroup>
</template>
<script>
import JqxButtonGroup from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttongroup.vue';
export default {
components: {
JqxButtonGroup
},
mounted: function () {
this.$refs.myButtonGroup.destroy();
}
}
</script>
enable None None

Enables the jqxButtonGroup.

<template>
<JqxButtonGroup ref="myButtonGroup"
>
<button style='padding: 4px 16px' id='Left' value='Left'></button>
<button style='padding: 4px 16px' id='Center' value='Center'></button>
<button style='padding: 4px 16px' id='Right' value='Right'></button>
</JqxButtonGroup>
</template>
<script>
import JqxButtonGroup from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttongroup.vue';
export default {
components: {
JqxButtonGroup
},
mounted: function () {
this.$refs.myButtonGroup.enable();
}
}
</script>
enableAt index None

Enables a button at specific index.

<template>
<JqxButtonGroup ref="myButtonGroup"
>
<button style='padding: 4px 16px' id='Left' value='Left'></button>
<button style='padding: 4px 16px' id='Center' value='Center'></button>
<button style='padding: 4px 16px' id='Right' value='Right'></button>
</JqxButtonGroup>
</template>
<script>
import JqxButtonGroup from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttongroup.vue';
export default {
components: {
JqxButtonGroup
},
mounted: function () {
this.$refs.myButtonGroup.enableAt(1);
}
}
</script>
getSelection None Number/Array

Gets the index or indexes of the selected button(s).

  • Returns undefined when the "mode" property is "default".
  • Returns the index of the selected button when the "mode" property is set the "radio". For example, if the first button is selected, the retuned value is 0.
  • Returns an array of the selected buttons when the "mode" property is set to "checkbox". For example, if you have a group of three buttons and the first and third buttons are selected, the returned value will be [0, 2]

<template>
<JqxButtonGroup ref="myButtonGroup"
>
<button style='padding: 4px 16px' id='Left' value='Left'></button>
<button style='padding: 4px 16px' id='Center' value='Center'></button>
<button style='padding: 4px 16px' id='Right' value='Right'></button>
</JqxButtonGroup>
</template>
<script>
import JqxButtonGroup from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttongroup.vue';
export default {
components: {
JqxButtonGroup
},
mounted: function () {
const value = this.$refs.myButtonGroup.getSelection();
}
}
</script>
render None None

Renders the widget.

<template>
<JqxButtonGroup ref="myButtonGroup"
>
<button style='padding: 4px 16px' id='Left' value='Left'></button>
<button style='padding: 4px 16px' id='Center' value='Center'></button>
<button style='padding: 4px 16px' id='Right' value='Right'></button>
</JqxButtonGroup>
</template>
<script>
import JqxButtonGroup from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttongroup.vue';
export default {
components: {
JqxButtonGroup
},
mounted: function () {
this.$refs.myButtonGroup.render();
}
}
</script>
setSelection index None

Selects a button in checkbox or radio buttons mode

<template>
<JqxButtonGroup ref="myButtonGroup"
>
<button style='padding: 4px 16px' id='Left' value='Left'></button>
<button style='padding: 4px 16px' id='Center' value='Center'></button>
<button style='padding: 4px 16px' id='Right' value='Right'></button>
</JqxButtonGroup>
</template>
<script>
import JqxButtonGroup from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttongroup.vue';
export default {
components: {
JqxButtonGroup
},
mounted: function () {
this.$refs.myButtonGroup.setSelection(1);
}
}
</script>