Vue UI Components Documentation

Sets or gets the type of the animation.

'fade'

'slide'

'none'

<template>
  <JqxDropDownButton ref="myDropDownButton"
    :animationType="'fade'">
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

<template>
  <JqxDropDownButton ref="myDropDownButton"
    :arrowSize="20">
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

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

<template>
  <JqxDropDownButton ref="myDropDownButton"
    :autoOpen="true">
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

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

<template>
  <JqxDropDownButton ref="myDropDownButton"
    :closeDelay="800">
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

Enables or disables the dropDownButton.

<template>
  <JqxDropDownButton ref="myDropDownButton"
    :disabled="true">
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

Sets or gets the DropDown's alignment.

'left' 

'right'

<template>
  <JqxDropDownButton ref="myDropDownButton"
    :dropDownHorizontalAlignment="'right'">
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

Sets or gets the DropDown's alignment.

'top'

'bottom'

<template>
  <JqxDropDownButton ref="myDropDownButton"
    :dropDownVerticalAlignment="'bottom'">
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

<template>
  <JqxDropDownButton ref="myDropDownButton"
    :dropDownWidth="500">
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

When this property is set to true, the popup may open above the button, if there's not enough available space below the button.

<template>
  <JqxDropDownButton ref="myDropDownButton"
    :enableBrowserBoundsDetection="true">
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

Sets or gets the button's height.

<template>
  <JqxDropDownButton ref="myDropDownButton"
    :height="40">
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

Function, called after the first open of the dropdown button popup.

<template>
  <JqxDropDownButton ref="myDropDownButton"
    :initContent="initContent">
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      },
      initContent: function () {
        this.$refs.myDropDownButton.setContent('Dynamicly Added!');
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

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

<template>
  <JqxDropDownButton ref="myDropDownButton"
    :openDelay="1000">
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

Sets or gets the popup's z-index.

<template>
  <JqxDropDownButton ref="myDropDownButton"
    :popupZIndex="9999">
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

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

<template>
  <JqxDropDownButton ref="myDropDownButton"
    :rtl="true">
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

Determines the template as an alternative of the default styles.

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

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

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

'warning' - orange style which indicates caution.

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

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

<template>
  <JqxDropDownButton ref="myDropDownButton"
    :template="'success'">
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

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

<template>
  <JqxDropDownButton ref="myDropDownButton"
    :theme="'material'">
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

Sets or gets the button's width.

<template>
  <JqxDropDownButton ref="myDropDownButton"
    :width="400">
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

This event is triggered when the button's popup is closed.

Code examples

Bind to the close event of jqxDropDownButton.

<template>
  <JqxDropDownButton ref="myDropDownButton" @close="onClose($event)"
   >
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      },
      onClose: function (event) {
        alert('do something...');
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

This event is triggered when the button's popup is opened.

Code examples

Bind to the open event of jqxDropDownButton.

<template>
  <JqxDropDownButton ref="myDropDownButton" @open="onOpen($event)"
   >
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      },
      onOpen: function (event) {
        alert('do something...');
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

Hides the button's content.

<template>
    <JqxDropDownButton ref="myDropDownButton" :autoOpen="false">
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'>
            <ul>
                <li item-selected='true'>Home</li>
                <li item-expanded='true'>
                    Solutions
                    <ul>
                        <li>Education</li>
                        <li>Financial services</li>
                        <li>Government</li>
                        <li>Manufacturing</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC products</li>
                        <li>Mobile products</li>
                        <li>All products</li>
                    </ul>
                </li>
            </ul>
        </jqxTree>
    </JqxDropDownButton>
</template>
<script>
    import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
    export default {
        components: {
            JqxDropDownButton,
            JqxTree
        },
        mounted: function () {
            this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
            this.$refs.myDropDownButton.open();
            setTimeout(_ => this.$refs.myDropDownButton.close(), 1000);
        },
        methods: {
            myTreeOnSelect: function (event) {
                const item = this.$refs.myTree.getItem(event.args.element);
                const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
                this.$refs.myDropDownButton.setContent(dropDownContent);
            }
        }
    }
</script>
<style>
    .jqx-tree {
        border: none;
    }
</style>

Destroys the widget.

<template>
  <JqxDropDownButton ref="myDropDownButton"
   >
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
      this.$refs.myDropDownButton.destroy();
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

Focuses the widget.

<template>
  <JqxDropDownButton ref="myDropDownButton"
   >
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
      this.$refs.myDropDownButton.focus();
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

Gets the button's content. The returned value is the button's content set through the "setContent" method.

<template>
  <JqxDropDownButton ref="myDropDownButton"
   >
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
      const value = this.$refs.myDropDownButton.getContent();
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

Returns true, if the drop down is opened. Otherwise returns false.

<template>
  <JqxDropDownButton ref="myDropDownButton"
   >
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
      const value = this.$refs.myDropDownButton.isOpened();
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>

Shows the button's content.

<template>
    <JqxDropDownButton ref="myDropDownButton" :autoOpen="false">
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'>
            <ul>
                <li item-selected='true'>Home</li>
                <li item-expanded='true'>
                    Solutions
                    <ul>
                        <li>Education</li>
                        <li>Financial services</li>
                        <li>Government</li>
                        <li>Manufacturing</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC products</li>
                        <li>Mobile products</li>
                        <li>All products</li>
                    </ul>
                </li>
            </ul>
        </jqxTree>
    </JqxDropDownButton>
</template>
<script>
    import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
    export default {
        components: {
            JqxDropDownButton,
            JqxTree
        },
        mounted: function () {
            this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
            this.$refs.myDropDownButton.open();
            setTimeout(_ => this.$refs.myDropDownButton.close(), 1000);
        },
        methods: {
            myTreeOnSelect: function (event) {
                const item = this.$refs.myTree.getItem(event.args.element);
                const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
                this.$refs.myDropDownButton.setContent(dropDownContent);
            }
        }
    }
</script>
<style>
    .jqx-tree {
        border: none;
    }
</style>

Sets the button's content. The parameter could be a "string" or "html".

<template>
  <JqxDropDownButton ref="myDropDownButton"
   >
    <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :width='200'> 
      <ul> 
        <li item-selected='true'>Home</li>
        <li item-expanded='true'> 
          Solutions
            <ul> 
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
  </JqxDropDownButton>
</template>
 
<script>
  import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownbutton.vue';
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxDropDownButton,
      JqxTree
    },
    mounted: function () {
      this.$refs.myDropDownButton.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
      this.$refs.myDropDownButton.setContent('New Content!');
    },
    methods: {
      myTreeOnSelect: function (event) {
        const item = this.$refs.myTree.getItem(event.args.element);
        const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
        this.$refs.myDropDownButton.setContent(dropDownContent);
      }
    }
  }
</script>
<style>
  .jqx-tree {
    border: none;
  }
</style>