Vue UI Components Documentation

Sets or gets whether the DropDown is automatically opened when the mouse cursor is moved over the widget.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :autoOpen="true"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Sets or gets whether the height of the jqxDropDownList's ListBox displayed in the widget's DropDown is calculated as a sum of the items heights.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :autoDropDownHeight="true"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Sets or gets the type of the animation.

'fade'

'slide'

'none'

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :animationType="'fade'"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Determines whether checkboxes will be displayed next to the list items.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :checkboxes="true"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Sets or gets the delay of the 'close' animation.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :closeDelay="800"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Enables/disables the jqxDropDownList.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :disabled="true"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</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>
    <JqxDropDownList ref="myDropDownList"
        :width="200" :height="25" :source="source" :selectedIndex="4" 
        :valueMember="'value'" :displayMember="'label'" 
    />
</template>
<script>
    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
    export default {
        components: {
            JqxDropDownList
        },
        data: function () {
            return {
                source: [
                    { label: 'Affogato', value: 0 },
                    { label: 'Americano', value: 1 },
                    { label: 'Bicerin', value: 2 },
                    { label: 'Breve', value: 3 },
                    { label: 'Cafe Bombon', value: 4 },
                    { label: 'Cafe mocha', value: 5 },
                    { label: 'Caffe Latte', value: 6 }
                ]
            }
        }
    }
</script>

Sets or gets the DropDown's alignment.

'left'

'right'

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :dropDownHorizontalAlignment="'right'"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Sets or gets the DropDown's alignment.

'top'

'bottom'

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :dropDownVerticalAlignment="'bottom'"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Sets or gets the height of the jqxDropDownList's ListBox displayed in the widget's DropDown.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :dropDownHeight="50"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Sets or gets the width of the jqxDropDownList's ListBox displayed in the widget's DropDown.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :dropDownWidth="300"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Enables/disables the selection.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :enableSelection="false"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Sets or gets whether the dropdown detects the browser window's bounds and automatically adjusts the dropdown's position.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :enableBrowserBoundsDetection="true"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Enables/disables the hover state.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :enableHover="false"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Determines whether the Filtering is enabled.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :filterable="true"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Determines the Filter's height.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :filterHeight="40"
    :filterable="true"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</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>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :filterDelay="200"
    :filterable="true"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Determines the Filter input's place holder.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :filterable="true"
    :filterPlaceHolder="'Filtering...'"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Sets or gets the jqxDropDownList's height.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</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, jqxDropDownList automatically selects the found item. Focus the widget and start typing.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :incrementalSearch="true"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Sets or 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. Focus the widget and start typing.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :incrementalSearchDelay="200"
    :incrementalSearch="true"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

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

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :itemHeight="30"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Sets or gets the delay of the 'open' animation.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :openDelay="2000"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Text displayed when the selection is empty.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="'null'" :placeHolder="'I am a placeholder !'"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Sets or gets the popup's z-index.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :popupZIndex="20000"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

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

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :rtl="true"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</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>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :renderer="renderer"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    methods: {
      renderer: function (index, label, value) {
        return index + ' ' + label;
      }
    }
  }
</script>

Callback function which is called when the selected item is rendered in the jqxDropDownList's content area. By using the selectionRenderer function, you can customize the look of the selected item.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :selectionRenderer="selectionRenderer"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    methods: {
      selectionRenderer: function (htmlString) {
        return 'My String';
      }
    }
  }
</script>

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

'none'

'contains'

'containsignorecase'

'equals'

'equalsignorecase'

'startswithignorecase'

'startswith'

'endswithignorecase'

'endswith'

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :searchMode="'startswith'"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Sets or gets the items source.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Sets or gets the selected index.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="1"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Sets the widget's theme. Include the desired theme CSS file after 'jqx.base.css' file.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :theme="'material'"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4" :template="'success'"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</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>
    <JqxDropDownList ref="myDropDownList"
        :width="200" :height="25" :source="source" :selectedIndex="4" 
        :valueMember="'value'" :displayMember="'label'" 
    />
</template>
<script>
    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
    export default {
        components: {
            JqxDropDownList
        },
        data: function () {
            return {
                source: [
                    { label: 'Affogato', value: 0 },
                    { label: 'Americano', value: 1 },
                    { label: 'Bicerin', value: 2 },
                    { label: 'Breve', value: 3 },
                    { label: 'Cafe Bombon', value: 4 },
                    { label: 'Cafe mocha', value: 5 },
                    { label: 'Caffe Latte', value: 6 }
                ]
            }
        }
    }
</script>

Sets or gets the jqxDropDownList's width.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

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

Code examples

Bind to the bindingComplete event of jqxDropDownList.

<template>
    <JqxDropDownList ref="myDropDownList" @bindingComplete="onBindingComplete($event)"
          :width="200" :height="25" :selectedIndex="4" 
    />
</template>
<script>
    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
    export default {
        components: {
            JqxDropDownList
        },
        data: function () {
            return {
                source: [
                    'Affogato',
                    'Americano',
                    'Bicerin',
                    'Breve',
                    'Cappuccino',
                    'Espresso',
                    'Frappuccino',
                    'Iced Coffee?',
                    'Irish coffee',
                    'Liqueur coffee'
                ]
            }
        },
        mounted: function () {
            this.$refs.myDropDownList.source = this.source;
        },
        methods: {
            onBindingComplete: function (event) {
                alert('do something...');
            }
        }
    }
</script>

This event is triggered when the popup ListBox is closed.

Code examples

Bind to the close event of jqxDropDownList.

<template>
  <JqxDropDownList ref="myDropDownList" @close="onClose($event)"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    methods: {
      onClose: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when an item is checked/unchecked.

Code examples

Bind to the checkChange event of jqxDropDownList.

<template>
  <JqxDropDownList ref="myDropDownList" @checkChange="onCheckChange($event)"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.checkboxes = true;
    },
    methods: {
      onCheckChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user selects an item.

Code examples

Bind to the change event of jqxDropDownList.

<template>
  <JqxDropDownList ref="myDropDownList" @change="onChange($event)"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    methods: {
      onChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the popup ListBox is opened.

Code examples

Bind to the open event of jqxDropDownList.

<template>
  <JqxDropDownList ref="myDropDownList" @open="onOpen($event)"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    methods: {
      onOpen: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user selects an item.

Code examples

Bind to the select event of jqxDropDownList.

<template>
  <JqxDropDownList ref="myDropDownList" @select="onSelect($event)"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    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 jqxDropDownList.

<template>
  <JqxDropDownList ref="myDropDownList" @unselect="onUnselect($event)"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    methods: {
      onUnselect: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Adds a new item to the jqxDropDownList. 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>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.addItem('Item1');
    }
  }
</script>

Clears all selected items.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.clearSelection();
    }
  }
</script>

Clears all items.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.clear();
    }
  }
</script>

Hides the popup listbox.

<template>
    <JqxDropDownList ref="myDropDownList"
                     :width="200" :height="25" :source="source" :selectedIndex="4" />
</template>
<script>
    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
    export default {
        components: {
            JqxDropDownList
        },
        data: function () {
            return {
                source: [
                    'Affogato',
                    'Americano',
                    'Bicerin',
                    'Breve',
                    'Cappuccino',
                    'Espresso',
                    'Frappuccino',
                    'Iced Coffee?',
                    'Irish coffee',
                    'Liqueur coffee'
                ]
            }
        },
        mounted: function () {
            this.$refs.myDropDownList.open();
            setTimeout(_ => this.$refs.myDropDownList.close(), 1000);            
        }
    }
</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>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.checkboxes = true;
      this.$refs.myDropDownList.checkIndex(2);
    }
  }
</script>

Checks an item.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.checkboxes = true;
      this.$refs.myDropDownList.checkItem('Item1');
    }
  }
</script>

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

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.checkboxes = true;
      this.$refs.myDropDownList.checkAll();
    }
  }
</script>

Clears the widget's filter when filtering is applied.

<template>
    <div>
        <JqxDropDownList ref="myDropDownList"
            :width="200" :height="25" :source="source" 
            :filterable="true" :selectedIndex="4"
        />
        <p>Please apply a filter and then clear it with the button:</p>
        <JqxButton @click="onClick()" :width="120">Clear Filter</JqxButton>
    </div>
</template>
<script>
    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
    export default {
        components: {
            JqxDropDownList,
            JqxButton
        },
        data: function () {
            return {
                source: [
                    'Affogato',
                    'Americano',
                    'Bicerin',
                    'Breve',
                    'Cappuccino',
                    'Espresso',
                    'Frappuccino',
                    'Iced Coffee?',
                    'Irish coffee',
                    'Liqueur coffee'
                ]
            }
        },
        methods: {
            onClick: function () {
                this.$refs.myDropDownList.clearFilter();
            }
        }
    }
</script>

Destroys the widget.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.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>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.disableItem('Bicerin');
    }
  }
</script>

Disables an item by index. Index is a number.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.disableAt(2);
    }
  }
</script>

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>
        <JqxDropDownList ref="myDropDownList"           
            :width="200" :height="25" :source="source" :selectedIndex="4" 
        />
        <p>Please click the button to enable the item "Breve":</p>
        <JqxButton @click="onClick()" :width="120">Enable</JqxButton>
    </div>
</template>
<script>
    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
    export default {
        components: {
            JqxDropDownList,
            JqxButton
        },
        data: function () {
            return {
                source: [
                    'Affogato',
                    'Americano',
                    'Bicerin',
                    'Breve',
                    'Cappuccino',
                    'Espresso',
                    'Frappuccino',
                    'Iced Coffee?',
                    'Irish coffee',
                    'Liqueur coffee'
                ]
            }
        },
        mounted: function () {
            this.$refs.myDropDownList.disableItem('Breve');
        },
        methods: {
            onClick: function () {
                this.$refs.myDropDownList.enableItem('Breve');
            }
        }
    }
</script>

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

<template>
    <div>
        <JqxDropDownList ref="myDropDownList"           
            :width="200" :height="25" :source="source" :selectedIndex="4" 
        />
        <p>Please click the button to enable the item at "2" position:</p>
        <JqxButton @click="onClick()" :width="120">Enable</JqxButton>
    </div>
</template>
<script>
    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
    import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
    export default {
        components: {
            JqxDropDownList,
            JqxButton
        },
        data: function () {
            return {
                source: [
                    'Affogato',
                    'Americano',
                    'Bicerin',
                    'Breve',
                    'Cappuccino',
                    'Espresso',
                    'Frappuccino',
                    'Iced Coffee?',
                    'Irish coffee',
                    'Liqueur coffee'
                ]
            }
        },
        mounted: function () {
            this.$refs.myDropDownList.disableAt('2');
        },
        methods: {
            onClick: function () {
                this.$refs.myDropDownList.enableAt('2');
            }
        }
    }
</script>

Ensures that an item is visible. index is number. When necessary, the jqxDropDownList scrolls to the item to make it visible.

<template>
    <JqxDropDownList ref="myDropDownList" @open="onOpen()"
                     :width="200" :height="25" :source="source" />
</template>
<script>
    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
    export default {
        components: {
            JqxDropDownList
        },
        data: function () {
            return {
                source: [
                    'Affogato',
                    'Americano',
                    'Bicerin',
                    'Breve',
                    'Cappuccino',
                    'Espresso',
                    'Frappuccino',
                    'Iced Coffee?',
                    'Irish coffee',
                    'Liqueur coffee'
                ]
            }
        },
        methods: {
            onOpen: function () {
                this.$refs.myDropDownList.selectIndex(9);
                this.$refs.myDropDownList.ensureVisible(9);
            }
        }
    }
</script>

Sets the focus to the widget.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.focus();
    }
  }
</script>

Gets 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>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myDropDownList.getItem(2);
    }
  }
</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>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myDropDownList.getItemByValue('Breve');
    }
  }
</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>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myDropDownList.getItems();
    }
  }
</script>

Gets the checked 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>
    <JqxDropDownList ref="myDropDownList" :checkboxes="true"
        :width="200" :height="25" :source="source" :selectedIndex="4" 
    />
</template>
<script>
    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
    export default {
        components: {
            JqxDropDownList
        },
        data: function () {
            return {
                source: [
                    'Affogato',
                    'Americano',
                    'Bicerin',
                    'Breve',
                    'Cappuccino',
                    'Espresso',
                    'Frappuccino',
                    'Iced Coffee?',
                    'Irish coffee',
                    'Liqueur coffee'
                ]
            }
        },
        mounted: function () {
            this.$refs.myDropDownList.checkIndex(1);
            this.$refs.myDropDownList.checkIndex(3);
            this.$refs.myDropDownList.checkIndex(5);
            const value = this.$refs.myDropDownList.getCheckedItems();
        }
    }
</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>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myDropDownList.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>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myDropDownList.getSelectedIndex();
    }
  }
</script>

Inserts a new item to the jqxDropDownList. 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>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.insertAt('Item1',0);
    }
  }
</script>

Returns true, if the popup is opened. Otherwise returns false.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myDropDownList.isOpened();
    }
  }
</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>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.checkboxes = true;
      this.$refs.myDropDownList.indeterminateIndex(2);
    }
  }
</script>

Indeterminates an item.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.checkboxes = true;
      this.$refs.myDropDownList.indeterminateItem('Breve');
    }
  }
</script>

Loads list items from a 'select' tag.

<template>
    <div>
        <JqxDropDownList ref="myDropDownList" style="float: left"
                         @select="listOnSelect($event)"
                         :width="200" :height="25" :selectedIndex="0">
        </JqxDropDownList>
        <div style="float: left">
            <select ref="select" id="select" style="height: 25px; width: 200px; margin-left: 30px">
                <option>Affogato</option>
                <option>Americano</option>
                <option>Bicerin</option>
                <option>Breve</option>
            </select>
        </div>
    </div>
</template>
<script>
    import JqxDropDownList from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue";
    export default {
        components: {
            JqxDropDownList
        },
        mounted: function () {
            this.$refs.myDropDownList.loadFromSelect('select');
            this.selectElement = this.$refs.select;
            this.selectElement.addEventListener('change', (event) => {
                this.updating = true;
                const index = this.selectElement.selectedIndex;
                this.$refs.myDropDownList.selectIndex(index);
                this.$refs.myDropDownList.ensureVisible(index);
                this.updating = false;
            });
        },
        methods: {
            listOnSelect: function (event) {
                if (event.args && !this.updating) {
                    const index = event.args.item.index;
                    this.selectElement.selectedIndex = index;
                }
            }
        }
    }
</script>

Shows the popup listbox.

<template>
    <JqxDropDownList ref="myDropDownList"
                     :width="200" :height="25" :source="source" :selectedIndex="4" />
</template>
<script>
    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
    export default {
        components: {
            JqxDropDownList
        },
        data: function () {
            return {
                source: [
                    'Affogato',
                    'Americano',
                    'Bicerin',
                    'Breve',
                    'Cappuccino',
                    'Espresso',
                    'Frappuccino',
                    'Iced Coffee?',
                    'Irish coffee',
                    'Liqueur coffee'
                ]
            }
        },
        mounted: function () {
            this.$refs.myDropDownList.open();
            setTimeout(_ => this.$refs.myDropDownList.close(), 1000);            
        }
    }
</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>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.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>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.removeAt(1);
    }
  }
</script>

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

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.selectIndex(1);
    }
  }
</script>

Selects an item.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.selectItem('Breve');
    }
  }
</script>

Sets the content of the DropDownList.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.setContent('Some Content');
    }
  }
</script>

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>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.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>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.updateAt('New Americano',1);
    }
  }
</script>

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

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.unselectIndex(4);
    }
  }
</script>

Unselects an item.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myDropDownList.unselectItem('Cappuccino');
    }
  }
</script>

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>
    <JqxDropDownList ref="myDropDownList" :checkboxes="true"
                     :width="200" :height="25" :source="source" :selectedIndex="4" />
</template>
<script>
    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
    export default {
        components: {
            JqxDropDownList
        },
        data: function () {
            return {
                source: [
                    'Affogato',
                    'Americano',
                    'Bicerin',
                    'Breve',
                    'Cappuccino',
                    'Espresso',
                    'Frappuccino',
                    'Iced Coffee?',
                    'Irish coffee',
                    'Liqueur coffee'
                ]
            }
        },
        mounted: function () {
            this.$refs.myDropDownList.checkAll();
            this.$refs.myDropDownList.uncheckIndex(2);
            this.$refs.myDropDownList.uncheckIndex(3);
        }
    }
</script>

Unchecks an item.

<template>
    <JqxDropDownList ref="myDropDownList" :checkboxes="true"
                     :width="200" :height="25" :source="source" :selectedIndex="4" />
</template>
<script>
    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
    export default {
        components: {
            JqxDropDownList
        },
        data: function () {
            return {
                source: [
                    'Affogato',
                    'Americano',
                    'Bicerin',
                    'Breve',
                    'Cappuccino',
                    'Espresso',
                    'Frappuccino',
                    'Iced Coffee?',
                    'Irish coffee',
                    'Liqueur coffee'
                ]
            }
        },
        mounted: function () {
            this.$refs.myDropDownList.checkAll();
            this.$refs.myDropDownList.uncheckItem('Bicerin');
            this.$refs.myDropDownList.uncheckItem('Breve');
        }
    }
</script>

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

<template>
    <JqxDropDownList ref="myDropDownList" :checkboxes="true"
                     :width="200" :height="25" :source="source" :selectedIndex="4" />
</template>
<script>
    import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
    export default {
        components: {
            JqxDropDownList
        },
        data: function () {
            return {
                source: [
                    'Affogato',
                    'Americano',
                    'Bicerin',
                    'Breve',
                    'Cappuccino',
                    'Espresso',
                    'Frappuccino',
                    'Iced Coffee?',
                    'Irish coffee',
                    'Liqueur coffee'
                ]
            }
        },
        mounted: function () {
            this.$refs.myDropDownList.checkAll();
            this.$refs.myDropDownList.open();
            setTimeout(_ => this.$refs.myDropDownList.uncheckAll(), 1000);
        }
    }
</script>

Gets the selected value.

<template>
  <JqxDropDownList ref="myDropDownList"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxDropDownList from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.vue';
 
  export default {
    components: {
      JqxDropDownList
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee?',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myDropDownList.val();
    }
  }
</script>