Vue UI Components Documentation

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>

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>

Sets or gets the jqxButtonGroup's mode.

'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>

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>

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>
  <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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>