Sets or gets whether the listbox's height is equal to the sum of each item's height

<template>
  <JqxListBox ref="myListBox"
    :source="source" :autoHeight="true"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Enables/disables the dragging of ListBox Items.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :allowDrag="true" :allowDrop="true"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Enables/disables the dropping of ListBox Items.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :allowDrag="true" :allowDrop="true"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Sets or gets whether the listbox should display a checkbox next to each item.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :checkboxes="true"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Enables/disables the listbox.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :disabled="true"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Sets or gets the displayMember of the Items. The displayMember specifies the name of an object property to display. The name is contained in the collection specified by the 'source' property.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :displayMember="'text'" />
</template> 
 
<script> 
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue'; 
 
  export default { 
    components: { 
      JqxListBox 
    }, 
    data: function () { 
      return { 
        source: [
          { text: "Affogato", value: 0 },
          { text: "Americano", value: 1 },
          { text: "Bicerin", value: 2 },
          { text: "Breve", value: 3 },
          { text: "Cafe Bombon", value: 4 },
          { text: "Cafe au lait", value: 5 }
        ]
      }
    }
  }
</script>

Sets or gets the drop action when an item is dropped.

Possible Values:

'default'

'copy'-adds a clone of the dropped item

'none'-means that the dropped item will not be added to a new collection and will not be removed from its parent collection

<template>
  <JqxListBox ref="myListBox"
    :source="source" :allowDrag="true" :dropAction="'copy'"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Callback function which is called when a drag operation starts.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :allowDrag="true" :allowDrop="true" :dragStart="dragStart"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      dragStart: function (item) {
        console.log('Dragging: ' + item.label);
      }
    }
  }
</script>

Callback function which is called when a drag operation ends.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :allowDrag="true" :allowDrop="true" :dragEnd="dragEnd"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      dragEnd: function (dragItem, dropItem) {
        console.log('Dropping: ' + dragItem.label);
      }
    }
  }
</script>

Enables/disables the hover state.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :enableHover="false"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Enables/disables the selection.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :enableSelection="false"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Sets or gets whether the items width should be equal to the listbox's width.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :equalItemsWidth="false"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Determines whether the Filtering is enabled.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :filterable="true"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Determines the Filter's height.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :filterable="true" :filterHeight="30"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Determines the Filter's delay. After 100 milliseconds, the widget automatically filters its data based on the filter input's value. To perform filter only on "Enter" key press, set this property to 0.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :filterable="true" :filterDelay="300"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Determines the Filter input's place holder.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :filterable="true" :filterPlaceHolder="'Filtering...'"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Sets or gets the listbox's height.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :height="200"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Sets or gets whether the checkboxes have three states - checked, unchecked and indeterminate.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :checkboxes="true" :hasThreeStates="true"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Sets or gets the height of the jqxListBox Items. When the itemHeight == - 1, each item's height is equal to its desired height.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :itemHeight="30"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Sets or gets the incrementalSearch property. An incremental search begins searching as soon as you type the first character of the search string. As you type in the search string, jqxListBox automatically selects the found item.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :incrementalSearch="false"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Sets ot gets the incrementalSearchDelay property. The incrementalSearchDelay specifies the time-interval in milliseconds after which the previous search string is deleted. The timer starts when you stop typing.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :incrementalSearchDelay="150"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Enables/disables the multiple selection. When this property is set to true, the user can select multiple items.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :multiple="true"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Enables/disables the multiple selection using Shift and Ctrl keys. When this property is set to true, the user can select multiple items by clicking on item and holding Shift or Ctrl.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :multipleextended="true"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Callback function which is called when an item is rendered. By using the renderer function, you can customize the look of the list items.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :renderer="renderer"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      renderer: function (index, label, value) {
        return "<i>" + value + "</i>";
      }
    }
  }
</script>

<template>
  <JqxListBox ref="myListBox"
    :source="source" :rendered="rendered"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      rendered: function () {
        alert('rendered!')
      }
    }
  }
</script>

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

<template>
  <JqxListBox ref="myListBox"
    :source="source" :rtl="true"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Sets or gets the selected index.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :selectedIndex="2"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

<template>
  <JqxListBox ref="myListBox"
    :source="source" :multiple="true" :selectedIndexes="selectedIndexes"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        selectedIndexes: { 1: true, 3: true },
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Sets or gets the item's source.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Sets or gets the scrollbars's size.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :scrollBarSize="15"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Sets or gets the item incremental search mode. When the user types some text in a focused ListBox, the jqxListBox widget tries to find the searched item using the entered text and the selected search mode.

Possible Values:

'none'

'contains'

'containsignorecase'

'equals'

'equalsignorecase'

'startswithignorecase'

'startswith'

'endswithignorecase'

'endswith'

<template>
  <JqxListBox ref="myListBox"
    :source="source" :searchMode="'contains'"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</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>
  <JqxListBox ref="myListBox"
    :source="source" :theme="'material'"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

Sets or gets the valueMember of the Items. The valueMember specifies the name of an object property to set as a 'value' of the list items. The name is contained in the collection specified by the 'source' property.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :displayMember="'text'" :valueMember="'value'" />
</template> 
 
<script> 
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue'; 
 
  export default { 
    components: { 
      JqxListBox 
    }, 
    data: function () { 
      return { 
        source: [
          { text: "Affogato", value: 0 },
          { text: "Americano", value: 1 },
          { text: "Bicerin", value: 2 },
          { text: "Breve", value: 3 },
          { text: "Cafe Bombon", value: 4 },
          { text: "Cafe au lait", value: 5 }
        ]
      }
    }
  }
</script>

Sets or gets the listbox's width.

<template>
  <JqxListBox ref="myListBox"
    :source="source" :width="200"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    }
  }
</script>

This event is triggered when the data binding operation is completed.

Code examples

Bind to the bindingComplete event of jqxListBox.

<template>
  <JqxListBox ref="myListBox" @bindingComplete="onBindingComplete($event)" />
</template>

<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';

  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      this.$refs.myListBox.source = this.source;
    },
    methods: {
      onBindingComplete: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user selects an item.

Code examples

Bind to the change event of jqxListBox.

<template>
  <JqxListBox ref="myListBox" @change="onChange($event)"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      onChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user checks or unchecks an item.

Code examples

Bind to the checkChange event of jqxListBox.

<template>
  <JqxListBox ref="myListBox" @checkChange="onCheckChange($event)"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      this.$refs.myListBox.checkboxes = true;

    },
    methods: {
      onCheckChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user starts a drag operation.

Code examples

Bind to the dragStart event of jqxListBox.

<template>
  <JqxListBox ref="myListBox" @dragStart="onDragStart($event)"
        :source="source" :allowDrag="true" :allowDrop="true"/>
</template>

<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';

  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      onDragStart: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user drops an item.

Code examples

Bind to the dragEnd event of jqxListBox.

<template>
  <JqxListBox ref="myListBox" @dragEnd="onDragEnd($event)"
        :source="source" :allowDrag="true" :allowDrop="true"/>
</template>

<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';

  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      onDragEnd: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user selects an item.

Code examples

Bind to the select event of jqxListBox.

<template>
  <JqxListBox ref="myListBox" @select="onSelect($event)"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      onSelect: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user unselects an item.

Code examples

Bind to the unselect event of jqxListBox.

<template>
  <JqxListBox ref="myListBox" @unselect="onUnselect($event)"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      onUnselect: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Adds a new item to the jqxListBox. Returns 'true', if the new item is added or 'false' if the item is not added.

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      this.$refs.myListBox.addItem('New Item');
    }
  }
</script>

Stops the ListBox's rendering. That method is usually used when multiple items need to be inserted or removed dynamically.

<template>
  <div>
    <JqxListBox ref="myListBox"
          :source="source" />
    <jqxButton style="width: 100px;margin-right:10px;" @click="beginUpdate()">Begin Update</jqxButton>
    <jqxButton style="width: 80px;" @click="endUpdate()">End Update</jqxButton>
  </div>
</template>

<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxListBox,
      JqxButton
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      beginUpdate: function () {
        this.$refs.myListBox.beginUpdate();
      },
      endUpdate: function () {
        this.$refs.myListBox.endUpdate();
      }
    }
  }
</script>
<style>
  .jqx-button {
    margin-top: 20px;
    display: inline-block;
  }
</style>

Clears all items.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      this.$refs.myListBox.clear();
    }
  }
</script>

Clears all selected items.

<template>
  <div>
    <JqxListBox ref="myListBox"
          :source="source" :multiple="true"/>
    <JqxButton style="margin-top: 10px;" :width="100" @click="clearSelection()">Clear Selection</JqxButton>
  </div>
</template>

<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxListBox,
      JqxButton
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      clearSelection: function () {
        this.$refs.myListBox.clearSelection();
      }
    }
  }
</script>

Checks a list item when the 'checkboxes' property value is true. The index is zero-based, i.e to check the first item, the 'checkIndex' method should be called with parameter 0.

<template>
  <div>
    <JqxListBox ref="myListBox"
          :source="source" :checkboxes="true"/>
    <jqxButton style="width: 100px;margin-right:10px;" @click="checkIndex()">Check 'Breve'</jqxButton>
    <jqxButton style="width: 120px;" @click="uncheckIndex()">Uncheck 'Breve'</jqxButton>
  </div>
</template>
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxListBox,
      JqxButton
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      checkIndex: function () {
        this.$refs.myListBox.checkIndex(3);
      },
      uncheckIndex: function () {
        this.$refs.myListBox.uncheckIndex(3);
      }
    }
  }
</script>
<style>
  .jqx-button {
    margin-top: 20px;
    display: inline-block;
  }
</style>

Checks an item.

<template>
  <div>
    <JqxListBox ref="myListBox"
          :source="source" :checkboxes="true" />
    <jqxButton style="width: 100px;margin-right:10px;" @click="checkItem()">Check 'Breve'</jqxButton>
    <jqxButton style="width: 120px;" @click="uncheckItem()">Uncheck 'Breve'</jqxButton>
  </div>
</template>
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxListBox,
      JqxButton
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      checkItem: function () {
        this.$refs.myListBox.checkItem('Breve');
      },
      uncheckItem: function () {
        this.$refs.myListBox.uncheckItem('Breve');
      }
    }
  }
</script>
<style>
  .jqx-button {
    margin-top: 20px;
    display: inline-block;
  }
</style>

Checks all list items when the 'checkboxes' property value is true.

<template>
  <div>
    <JqxListBox ref="myListBox"
          :source="source" :checkboxes="true" />
    <jqxButton style="width: 100px;margin-right:10px;" @click="checkAll()">Check All</jqxButton>
    <jqxButton style="width: 120px;" @click="uncheckAll()">Uncheck All</jqxButton>
  </div>
</template>
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxListBox,
      JqxButton
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      checkAll: function () {
        this.$refs.myListBox.checkAll();
      },
      uncheckAll: function () {
        this.$refs.myListBox.uncheckAll();
      }
    }
  }
</script>
<style>
  .jqx-button {
    margin-top: 20px;
    display: inline-block;
  }
</style>

Clears the widget's filter when filtering is applied.

<template>
  <div>
    <JqxListBox ref="myListBox"
          :source="source" :filterable="true" />
    <JqxButton style="margin-top: 10px;" :width="100" @click="clearFilter()">Clear Filter</JqxButton>
  </div>
</template>
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxListBox,
      JqxButton
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      clearFilter: function () {
        this.$refs.myListBox.clearFilter();
      }
    }
  }
</script>

Destroy the jqxListBox widget. The destroy method removes the jqxListBox widget from the web page.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      this.$refs.myListBox.destroy();
    }
  }
</script>

Disables an item. Item is an object.

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

<template>
  <div>
    <JqxListBox ref="myListBox"
          :source="source" />
    <jqxButton style="width: 100px;margin-right:10px;" @click="enableItem()">Enable 'Breve'</jqxButton>
    <jqxButton style="width: 100px;" @click="disableItem()">Disable 'Breve'</jqxButton>
  </div>
</template>
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxListBox,
      JqxButton
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      enableItem: function () {
        this.$refs.myListBox.enableItem('Breve');
      },
      disableItem: function () {
        this.$refs.myListBox.disableItem('Breve');
      }
    }
  }
</script>
<style>
  .jqx-button {
    margin-top: 20px;
    display: inline-block;
  }
</style>

Disables an item by index. Index is a number.

<template>
  <div>
    <JqxListBox ref="myListBox"
          :source="source" />
    <jqxButton style="width: 100px;margin-right:10px;" @click="enableItem()">Enable 'Breve'</jqxButton>
    <jqxButton style="width: 100px;" @click="disableItem()">Disable 'Breve'</jqxButton>
  </div>
</template>
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxListBox,
      JqxButton
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      enableItem: function () {
        this.$refs.myListBox.enableAt(3);
      },
      disableItem: function () {
        this.$refs.myListBox.disableAt(3);
      }
    }
  }
</script>
<style>
  .jqx-button {
    margin-top: 20px;
    display: inline-block;
  }
</style>

Enables an item. Item is an object.

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

<template>
  <div>
    <JqxListBox ref="myListBox"
          :source="source" />
    <jqxButton style="width: 100px;margin-right:10px;" @click="enableItem()">Enable 'Breve'</jqxButton>
    <jqxButton style="width: 100px;" @click="disableItem()">Disable 'Breve'</jqxButton>
  </div>
</template>
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxListBox,
      JqxButton
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      enableItem: function () {
        this.$refs.myListBox.enableItem('Breve');
      },
      disableItem: function () {
        this.$refs.myListBox.disableItem('Breve');
      }
    }
  }
</script>
<style>
  .jqx-button {
    margin-top: 20px;
    display: inline-block;
  }
</style>

Enables a disabled item by index. Index is a number.

<template>
  <div>
    <JqxListBox ref="myListBox"
          :source="source" />
    <jqxButton style="width: 100px;margin-right:10px;" @click="enableItem()">Enable 'Breve'</jqxButton>
    <jqxButton style="width: 100px;" @click="disableItem()">Disable 'Breve'</jqxButton>
  </div>
</template>
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxListBox,
      JqxButton
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      enableItem: function () {
        this.$refs.myListBox.enableAt(3);
      },
      disableItem: function () {
        this.$refs.myListBox.disableAt(3);
      }
    }
  }
</script>
<style>
  .jqx-button {
    margin-top: 20px;
    display: inline-block;
  }
</style>

Ensures that an item is visible. Index is number. If necessary scrolls to the item. Insted of Index, you can also pass the item's value.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      this.$refs.myListBox.ensureVisible(8);
    }
  }
</script>

Starts the ListBox's rendering and refreshes the ListBox. That method is usually used in combination with the 'beginUpdate' method when multiple items need to be inserted or removed dynamically.

<template>
  <div>
    <JqxListBox ref="myListBox"
          :source="source" />
    <jqxButton style="width: 100px;margin-right:10px;" @click="beginUpdate()">Begin Update</jqxButton>
    <jqxButton style="width: 80px;" @click="endUpdate()">End Update</jqxButton>
  </div>
</template>

<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxListBox,
      JqxButton
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      beginUpdate: function () {
        this.$refs.myListBox.beginUpdate();
      },
      endUpdate: function () {
        this.$refs.myListBox.endUpdate();
      }
    }
  }
</script>
<style>
  .jqx-button {
    margin-top: 20px;
    display: inline-block;
  }
</style>

Sets the focus to the jqxListBox.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      this.$refs.myListBox.focus();
    }
  }
</script>

Gets all items. The returned value is an array of Items.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myListBox.getItems();
    }
  }
</script>

Gets the selected ListBox items. The returned value is an Array of items.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myListBox.getSelectedItems();
    }
  }
</script>

Gets the checked ListBox items. Returns an Array of checked items.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      this.$refs.myListBox.checkboxes = true;

      const value = this.$refs.myListBox.getCheckedItems();
    }
  }
</script>

Gets an item by index. The returned value is an object with the following fields:

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myListBox.getItem(3);
    }
  }
</script>

Gets an item by its value. The returned value is an object with the following fields:

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myListBox.getItemByValue('Breve');
    }
  }
</script>

Gets the selected item. The returned value is an object or null(if there is no selected item).

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myListBox.getSelectedItem();
    }
  }
</script>

Gets the index of the selected item. The returned value is the index of the selected item. If there's no selected item, -1 is returned.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myListBox.getSelectedIndex();
    }
  }
</script>

Inserts a new item to the jqxListBox. Returns 'true', if the new item is inserted or false if the insertaion fails. The first parameter is object or string - the new item. The second parameter is number - the item's index.

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      this.$refs.myListBox.insertAt('New Item',1);
    }
  }
</script>

The invalidate method will repaint the jqxListBox's items.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      this.$refs.myListBox.invalidate();
    }
  }
</script>

Indeterminates an item.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      this.$refs.myListBox.checkboxes = true;

      this.$refs.myListBox.indeterminateItem('Breve');
    }
  }
</script>

indeterminates a list item when the 'checkboxes' property value is true. The index is zero-based, i.e to indeterminate the first item, the 'indeterminateIndex' method should be called with parameter 0.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      this.$refs.myListBox.checkboxes = true;

      this.$refs.myListBox.indeterminateIndex(3);
    }
  }
</script>

Method: loadFromSelect

<template>
  <div>
    <div style="float: left;">
      <JqxListBox ref="myListBox" :width="200" :height="250">
      </JqxListBox>
    </div>
    <div style="float: left;">
      <select style="height: 250px; width: 200px; margin-left: 30px;" size="2" id="select">
        <option>Affogato</option>
        <option>Americano</option>
        <option>Bicerin</option>
        <option>Breve</option>
        <option>Café Bombón</option>
        <option>Caffé Corretto</option>
        <option>Café Crema</option>
        <option>Caffé Latte</option>
        <option>Caffé macchiato</option>
        <option>Café mélange</option>
        <option>Coffee milk</option>
        <option>Cafe mocha</option>
        <option>Cappuccino</option>
        <option>Carajillo</option>
        <option>Cuban espresso</option>
        <option>Espresso</option>
        <option selected="selected">The Flat White</option>
        <option>Frappuccino</option>
        <option>Galao</option>
        <option>Greek frappé coffee</option>
        <option>Iced Coffee</option>
        <option>Indian filter coffee</option>
        <option>Instant coffee</option>
        <option>Irish coffee</option>
        <option>Liqueur coffee</option>
      </select>
    </div>
  </div>
</template>
<script>
  import JqxListBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue";
  export default {
    components: {
      JqxListBox
    },
    beforeCreate: function () {
      this.updating = false;
    },
    mounted: function () {
      this.$refs.myListBox.loadFromSelect('select');
    }
  }
</script>

Removes an item from the listbox. Parameter type: object returned by the "getItem" method or string - the value of an item. Returns 'true', if the item is removed or 'false', if the item is not removed.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      this.$refs.myListBox.removeItem('Breve');
    }
  }
</script>

Removes an item from the listbox. Parameter type: number - the index of the item. The method returns 'true', if the item is removed or 'false', if the item is not removed.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      this.$refs.myListBox.removeAt(3);
    }
  }
</script>

Renders the jqxListBox widget.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      this.$refs.myListBox.render();
    }
  }
</script>

Refreshes the jqxListBox widget. The refresh method will update the jqxListBox's layout, size and data.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      this.$refs.myListBox.refresh();
    }
  }
</script>

Selects an item.

<template>
  <div>
    <JqxListBox ref="myListBox"
          :source="source" />
    <jqxButton style="width: 100px;margin-right:10px;" @click="selectItem()">Select 'Breve'</jqxButton>
    <jqxButton style="width: 120px;" @click="unselectItem()">Unselect 'Breve'</jqxButton>
  </div>
</template>
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxListBox,
      JqxButton
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      selectItem: function () {
        this.$refs.myListBox.selectItem('Breve');
      },
      unselectItem: function () {
        this.$refs.myListBox.unselectItem('Breve');
      }
    }
  }
</script>
<style>
  .jqx-button {
    margin-top: 20px;
    display: inline-block;
  }
</style>

Selects item. Index is number. The index is zero-based, i.e to select the first item, the 'selectIndex' method should be called with parameter 0.

<template>
  <div>
    <JqxListBox ref="myListBox"
          :source="source" />
    <jqxButton style="width: 100px;margin-right:10px;" @click="selectItem()">Select 'Breve'</jqxButton>
    <jqxButton style="width: 120px;" @click="unselectItem()">Unselect 'Breve'</jqxButton>
  </div>
</template>
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxListBox,
      JqxButton
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      selectItem: function () {
        this.$refs.myListBox.selectIndex(3);
      },
      unselectItem: function () {
        this.$refs.myListBox.unselectIndex(3);
      }
    }
  }
</script>
<style>
  .jqx-button {
    margin-top: 20px;
    display: inline-block;
  }
</style>

Updates an item. The first parameter is the new item. The second parameter could be an existing item or the value of an existing item.

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      this.$refs.myListBox.updateItem('New Breve','Breve');
    }
  }
</script>

Updates an item. The first parameter is the new item. The second parameter is the index of the item to be updated.

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      this.$refs.myListBox.updateAt('New Breve',3);
    }
  }
</script>

Unselects item by index. The index is zero-based, i.e to select the first item, the 'unselectIndex' method should be called with parameter 0.

<template>
  <div>
    <JqxListBox ref="myListBox"
          :source="source" />
    <jqxButton style="width: 100px;margin-right:10px;" @click="selectItem()">Select 'Breve'</jqxButton>
    <jqxButton style="width: 120px;" @click="unselectItem()">Unselect 'Breve'</jqxButton>
  </div>
</template>
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxListBox,
      JqxButton
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      selectItem: function () {
        this.$refs.myListBox.selectIndex(3);
      },
      unselectItem: function () {
        this.$refs.myListBox.unselectIndex(3);
      }
    }
  }
</script>
<style>
  .jqx-button {
    margin-top: 20px;
    display: inline-block;
  }
</style>

Unselects an item.

<template>
  <div>
    <JqxListBox ref="myListBox"
          :source="source" />
    <jqxButton style="width: 100px;margin-right:10px;" @click="selectItem()">Select 'Breve'</jqxButton>
    <jqxButton style="width: 120px;" @click="unselectItem()">Unselect 'Breve'</jqxButton>
  </div>
</template>
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxListBox,
      JqxButton
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      selectItem: function () {
        this.$refs.myListBox.selectItem('Breve');
      },
      unselectItem: function () {
        this.$refs.myListBox.unselectItem('Breve');
      }
    }
  }
</script>
<style>
  .jqx-button {
    margin-top: 20px;
    display: inline-block;
  }
</style>

Unchecks a list item when the 'checkboxes' property value is true. The index is zero-based, i.e to uncheck the first item, the 'uncheckIndex' method should be called with parameter 0.

<template>
  <div>
    <JqxListBox ref="myListBox"
          :source="source" :checkboxes="true"/>
    <jqxButton style="width: 100px;margin-right:10px;" @click="checkIndex()">Check 'Breve'</jqxButton>
    <jqxButton style="width: 120px;" @click="uncheckIndex()">Uncheck 'Breve'</jqxButton>
  </div>
</template>
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxListBox,
      JqxButton
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      checkIndex: function () {
        this.$refs.myListBox.checkIndex(3);
      },
      uncheckIndex: function () {
        this.$refs.myListBox.uncheckIndex(3);
      }
    }
  }
</script>
<style>
  .jqx-button {
    margin-top: 20px;
    display: inline-block;
  }
</style>

Unchecks an item.

<template>
  <div>
    <JqxListBox ref="myListBox"
          :source="source" :checkboxes="true" />
    <jqxButton style="width: 100px;margin-right:10px;" @click="checkItem()">Check 'Breve'</jqxButton>
    <jqxButton style="width: 120px;" @click="uncheckItem()">Uncheck 'Breve'</jqxButton>
  </div>
</template>
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxListBox,
      JqxButton
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      checkItem: function () {
        this.$refs.myListBox.checkItem('Breve');
      },
      uncheckItem: function () {
        this.$refs.myListBox.uncheckItem('Breve');
      }
    }
  }
</script>
<style>
  .jqx-button {
    margin-top: 20px;
    display: inline-block;
  }
</style>

Unchecks all list items when the 'checkboxes' property value is true.

<template>
  <div>
    <JqxListBox ref="myListBox"
          :source="source" :checkboxes="true" />
    <jqxButton style="width: 100px;margin-right:10px;" @click="checkAll()">Check All</jqxButton>
    <jqxButton style="width: 120px;" @click="uncheckAll()">Uncheck All</jqxButton>
  </div>
</template>
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxListBox,
      JqxButton
    },
    data: function () {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    methods: {
      checkAll: function () {
        this.$refs.myListBox.checkAll();
      },
      uncheckAll: function () {
        this.$refs.myListBox.uncheckAll();
      }
    }
  }
</script>
<style>
  .jqx-button {
    margin-top: 20px;
    display: inline-block;
  }
</style>

Sets or gets the selected value.

<template>
  <JqxListBox ref="myListBox"
    :source="source"
  />
</template>

 
<script>
  import JqxListBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistbox.vue';
 
  export default {
    components: {
      JqxListBox
    },
    data: function () {
      return  {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
      }
    },
    mounted: function () {
      this.$refs.myListBox.selectedIndex = 3;

      const value = this.$refs.myListBox.val();
    }
  }
</script>