Sets or gets the duration of the show animation.

<template>
  <JqxTree ref="myTree"
    :width="400" :animationShowDuration="1000">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    }
  }
</script>

Sets or gets the duration of the hide animation.

<template>
  <JqxTree ref="myTree"
    :width="400" :animationHideDuration="1000">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    }
  }
</script>

Enables the dragging of Tree Items.

<template>
  <JqxTree ref="myTree"
    :width="400" :allowDrop="true" :allowDrag="true">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    }
  }
</script>

Enables the dropping of Tree Items.

<template>
  <JqxTree ref="myTree"
    :width="400" :allowDrop="true" :allowDrag="true">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    }
  }
</script>

Sets or gets whether the tree should display a checkbox next to each item. In order to use this feature, you need to include the jqxcheckbox.js.

<template>
  <JqxTree ref="myTree"
    :width="400" :checkboxes="true">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    }
  }
</script>

Callback function which is called when a drag operation starts.

<template>
  <JqxTree ref="myTree"
    :width="400" :dragStart="dragStart">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    },
    methods: {
      dragStart: function (item) {
        console.log(item);
      }
    }
  }
</script>

Callback function which is called when a drag operation ends.

<template>
  <JqxTree ref="myTree"
    :width="400" :dragEnd="dragEnd">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    },
    methods: {
      dragEnd: function (dragItem, dropItem, args, dropPosition, tree) {
        console.log(dragItem);
        console.log(dropItem)
        console.log(args);
        console.log(dropPosition);
        console.log(tree);
      }
    }
  }
</script>

Gets or sets whether the tree is disabled.

<template>
  <JqxTree ref="myTree"
    :width="400" :disabled="true">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    }
  }
</script>

Sets or gets the animation's easing to one of the JQuery's supported easings.

<template>
  <JqxTree ref="myTree"
    :width="400" :easing="'easeInOutCirc'">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    }
  }
</script>

Enables or disables the hover state.

<template>
  <JqxTree ref="myTree"
    :width="400" :enableHover="false">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    }
  }
</script>

Sets or gets the tree's height.

<template>
  <JqxTree ref="myTree"
    :width="400" :height="300">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    }
  }
</script>

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

<template>
  <JqxTree ref="myTree"
    :width="400" :checkboxes="true" :hasThreeStates="true">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    }
  }
</script>

Determines whether the incremental search is enabled. The feature allows you to quickly find and select items by typing when the widget is on focus.

<template>
  <JqxTree ref="myTree"
    :width="400" :incrementalSearch="false">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    }
  }
</script>

Enables or disables the key navigation.

<template>
  <JqxTree ref="myTree"
    :width="400" :keyboardNavigation="false">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    }
  }
</script>

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

<template>
  <JqxTree ref="myTree"
    :width="400" :rtl="true">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    }
  }
</script>

Specifies the jqxTree's data source. Use this property to populate the jqxTree.

• label - sets the item's label.
• value - sets the item's value.
• html - item's html. The html to be displayed in the item.
• id - sets the item's id.
• disabled - sets whether the item is enabled/disabled.
• checked - sets whether the item is checked/unchecked(when checkboxes are enabled).
• expanded - sets whether the item is expanded or collapsed.
• selected - sets whether the item is selected.
• items - sets an array of sub items.
• icon - sets the item's icon(url is expected).
• iconsize - sets the size of the item's icon.

<template>
  <JqxTree ref="myTree" :width="200" :source="source" /> 
</template>
 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    },
    data: function () {
      return {
        source: [
          { 
            label: "Mail",
            expanded: true,
            items: [
               { label: "Calendar" },
               { label: "Contacts" }
             ]
           },
           {
             label: "Inbox",
             items: [
               { label: "Admin" },
               { label: "Corporate" },
               { label: "Finance" },
               { label: "Other" }             
             ]
           },
           { label: "Deleted Items" }
         ]
       }
     }
   } 
</script>

Sets or gets the size of the expand/collapse arrows.

<template>
  <JqxTree ref="myTree"
    :width="400" :toggleIndicatorSize="20">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    }
  }
</script>

Sets or gets user interaction used for expanding or collapsing any item.

Possible Values:

'click'

'dblclick'

<template>
  <JqxTree ref="myTree"
    :width="400" :toggleMode="'click'">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxTree ref="myTree"
    :width="400" :theme="'material'">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    }
  }
</script>

Sets or gets the tree's width.

<template>
  <JqxTree ref="myTree"
    :width="400">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    }
  }
</script>

This event is triggered when the user adds a new tree item.

Code examples

Bind to the added event of jqxTree.

<template>
  <div>
    <JqxTree ref="myTree" @added="onAdded($event)"
         :width="400">
      <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>
            <li>
              Solutions
              <ul>
                <li>Consumer photo and video</li>
                <li>Mobile</li>
                <li>Rich Internet applications</li>
                <li>Technical communication</li>
                <li>Training and eLearning</li>
                <li>Web conferencing</li>
              </ul>
            </li>
            <li>All industries and solutions</li>
          </ul>
        </li>
      </ul>
    </JqxTree>
    <jqxButton :width="50" @click="add()">Add</jqxButton>
  </div>
</template>

<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxTree,
      JqxButton
    },
    methods: {
      add: function () {
        this.$refs.myTree.addTo({ label: 'Item' });
      },
      onAdded: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user checks, unchecks or the checkbox is in indeterminate state.

Code examples

Bind to the checkChange event of jqxTree.

<template>
  <JqxTree ref="myTree" @checkChange="onCheckChange($event)"
       :width="400" :checkboxes="true">
    <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>
          <li>
            Solutions
            <ul>
              <li>Consumer photo and video</li>
              <li>Mobile</li>
              <li>Rich Internet applications</li>
              <li>Technical communication</li>
              <li>Training and eLearning</li>
              <li>Web conferencing</li>
            </ul>
          </li>
          <li>All industries and solutions</li>
        </ul>
      </li>
    </ul>
  </JqxTree>
</template>

<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';

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

This event is triggered when the user collapses a tree item.

Code examples

Bind to the collapse event of jqxTree.

<template>
  <JqxTree ref="myTree" @collapse="onCollapse($event)"
    :width="400">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    },
    methods: {
      onCollapse: function (event) {
        alert('do something...');
      }
    }
  }
</script>

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

Code examples

Bind to the dragStart event of jqxTree.

<template>
  <JqxTree ref="myTree" @dragStart="onDragStart($event)"
    :width="400">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    },
    methods: {
      onDragStart: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user drops an item.

Code examples

Bind to the dragEnd event of jqxTree.

<template>
  <JqxTree ref="myTree" @dragEnd="onDragEnd($event)"
    :width="400">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    },
    methods: {
      onDragEnd: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user expands a tree item.

Code examples

Bind to the expand event of jqxTree.

<template>
  <JqxTree ref="myTree" @expand="onExpand($event)"
    :width="400">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    },
    methods: {
      onExpand: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user clicks a tree item.

Code examples

Bind to the itemClick event of jqxTree.

<template>
  <JqxTree ref="myTree" @itemClick="onItemClick($event)"
    :width="400">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    },
    methods: {
      onItemClick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user removes a tree item.

Code examples

Bind to the removed event of jqxTree.

<template>
  <div>
    <JqxTree ref="myTree" @removed="onRemoved($event)"
         :width="400">
      <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>
            <li>
              Solutions
              <ul>
                <li>Consumer photo and video</li>
                <li>Mobile</li>
                <li>Rich Internet applications</li>
                <li>Technical communication</li>
                <li>Training and eLearning</li>
                <li>Web conferencing</li>
              </ul>
            </li>
            <li>All industries and solutions</li>
          </ul>
        </li>
      </ul>
    </JqxTree>
    <jqxButton :width="150" @click="remove()">Remove Selected</jqxButton>
  </div>
</template>
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxTree,
      JqxButton
    },
    methods: {
      remove: function () {
        let selected = this.$refs.myTree.getSelectedItem();
        this.$refs.myTree.removeItem(selected);
      },
      onRemoved: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user selects a tree item.

Code examples

Bind to the select event of jqxTree.

<template>
  <JqxTree ref="myTree" @select="onSelect($event)"
    :width="400">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    },
    methods: {
      onSelect: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Adds an item as a sibling of another item.

<template>
  <JqxTree ref="myTree"
       :width="400">
    <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>
          <li>
            Solutions
            <ul>
              <li>Consumer photo and video</li>
              <li>Mobile</li>
              <li>Rich Internet applications</li>
              <li>Technical communication</li>
              <li>Training and eLearning</li>
              <li>Web conferencing</li>
            </ul>
          </li>
          <li>All industries and solutions</li>
        </ul>
      </li>
    </ul>
  </JqxTree>
</template>

<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';

  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      let items = this.$refs.myTree.getItems();
      let element = items[0].element;
      this.$refs.myTree.addBefore('item', element);
    }
  }
</script>

Adds an item as a sibling of another item.

<template>
  <JqxTree ref="myTree"
       :width="400">
    <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>
          <li>
            Solutions
            <ul>
              <li>Consumer photo and video</li>
              <li>Mobile</li>
              <li>Rich Internet applications</li>
              <li>Technical communication</li>
              <li>Training and eLearning</li>
              <li>Web conferencing</li>
            </ul>
          </li>
          <li>All industries and solutions</li>
        </ul>
      </li>
    </ul>
  </JqxTree>
</template>

<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';

  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      let items = this.$refs.myTree.getItems();
      let element = items[0].element;
      this.$refs.myTree.addAfter('item', element);
    }
  }
</script>

Adds an item.

<template>
  <JqxTree ref="myTree"
       :width="400">
    <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>
          <li>
            Solutions
            <ul>
              <li>Consumer photo and video</li>
              <li>Mobile</li>
              <li>Rich Internet applications</li>
              <li>Technical communication</li>
              <li>Training and eLearning</li>
              <li>Web conferencing</li>
            </ul>
          </li>
          <li>All industries and solutions</li>
        </ul>
      </li>
    </ul>
  </JqxTree>
</template>

<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';

  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      let items = this.$refs.myTree.getItems();
      let element = items[0].element;
      this.$refs.myTree.addTo('item', element);
    }
  }
</script>

Removes all elements.

<template>
  <JqxTree ref="myTree"
    :width="400">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      this.$refs.myTree.clear();
    }
  }
</script>

Checks all tree items.

<template>
  <div>
    <JqxTree ref="myTree"
         :width="400" :checkboxes="true">
      <ul>
        <li item-selected='true'>Home</li>
        <li ref="solutions" item-expanded='true'>
          Solutions
          <ul>
            <li>Education</li>
            <li>Financial services</li>
            <li>Government</li>
            <li>Manufacturing</li>
            <li>
              Solutions
              <ul>
                <li>Consumer photo and video</li>
                <li>Mobile</li>
                <li>Rich Internet applications</li>
                <li>Technical communication</li>
                <li>Training and eLearning</li>
                <li>Web conferencing</li>
              </ul>
            </li>
            <li>All industries and solutions</li>
          </ul>
        </li>
      </ul>
    </JqxTree>
    <jqxButton :width="150" @click="checkAll()">Check All</jqxButton>
    <jqxButton :width="150" @click="uncheckAll()">Uncheck All</jqxButton>
  </div>
</template>
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxTree,
      JqxButton
    },
    methods: {
      checkAll: function () {
        this.$refs.myTree.checkAll();
      },
      uncheckAll: function () {
        this.$refs.myTree.uncheckAll();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
    margin-right: 50px;
  }
</style>

Checks a tree item.

<template>
  <div>
    <JqxTree ref="myTree"
         :width="400" :checkboxes="true">
      <ul>
        <li item-selected='true'>Home</li>
        <li ref="solutions" item-expanded='true'>
          Solutions
          <ul>
            <li>Education</li>
            <li>Financial services</li>
            <li ref="government">Government</li>
            <li>Manufacturing</li>
            <li>
              Solutions
              <ul>
                <li>Consumer photo and video</li>
                <li>Mobile</li>
                <li>Rich Internet applications</li>
                <li>Technical communication</li>
                <li>Training and eLearning</li>
                <li>Web conferencing</li>
              </ul>
            </li>
            <li>All industries and solutions</li>
          </ul>
        </li>
      </ul>
    </JqxTree>
    <jqxButton :width="150" @click="check()">Check 'Government'</jqxButton>
    <jqxButton :width="150" @click="uncheck()">Uncheck 'Government'</jqxButton>
  </div>
</template>
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxTree,
      JqxButton
    },
    methods: {
      check: function () {
        let item = this.$refs.government;
        this.$refs.myTree.checkItem(item);
      },
      uncheck: function () {
        let item = this.$refs.government;
        this.$refs.myTree.uncheckItem(item);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
    margin-right: 50px;
  }
</style>

Collapses all items.

<template>
  <JqxTree ref="myTree"
    :width="400">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      this.$refs.myTree.collapseAll();
    }
  }
</script>

Collapses a tree item by passing an element as parameter.

<template>
  <div>
    <JqxTree ref="myTree"
         :width="400">
      <ul>
        <li item-selected='true'>Home</li>
        <li ref="solutions" item-expanded='true'>
          Solutions
          <ul>
            <li>Education</li>
            <li>Financial services</li>
            <li>Government</li>
            <li>Manufacturing</li>
            <li>
              Solutions
              <ul>
                <li>Consumer photo and video</li>
                <li>Mobile</li>
                <li>Rich Internet applications</li>
                <li>Technical communication</li>
                <li>Training and eLearning</li>
                <li>Web conferencing</li>
              </ul>
            </li>
            <li>All industries and solutions</li>
          </ul>
        </li>
      </ul>
    </JqxTree>
    <jqxButton :width="150" @click="expand()">Expand 'Solutions'</jqxButton>
    <jqxButton :width="150" @click="collapse()">Collapse 'Solutions'</jqxButton>
  </div>
</template>

<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxTree,
      JqxButton
    },
    methods: {
      expand: function () {
        let item = this.$refs.solutions;
        this.$refs.myTree.expandItem(item);
      },
      collapse: function () {
        let item = this.$refs.solutions;
        this.$refs.myTree.collapseItem(item);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
    margin-right: 50px;
  }
</style>

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

<template>
  <JqxTree ref="myTree"
    :width="400">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      this.$refs.myTree.destroy();
    }
  }
</script>

Disables a tree item.

<template>
  <div>
    <JqxTree ref="myTree"
         :width="400">
      <ul>
        <li item-selected='true'>Home</li>
        <li ref="solutions" item-expanded='true'>
          Solutions
          <ul>
            <li>Education</li>
            <li>Financial services</li>
            <li>Government</li>
            <li>Manufacturing</li>
            <li>
              Solutions
              <ul>
                <li>Consumer photo and video</li>
                <li>Mobile</li>
                <li>Rich Internet applications</li>
                <li>Technical communication</li>
                <li>Training and eLearning</li>
                <li>Web conferencing</li>
              </ul>
            </li>
            <li>All industries and solutions</li>
          </ul>
        </li>
      </ul>
    </JqxTree>
    <jqxButton :width="150" @click="disable()">Disable 'Solutions'</jqxButton>
    <jqxButton :width="150" @click="enable()">Enable 'Solutions'</jqxButton>
  </div>
</template>
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxTree,
      JqxButton
    },
    methods: {
      disable: function () {
        let item = this.$refs.solutions;
        this.$refs.myTree.disableItem(item);
      },
      enable: function () {
        let item = this.$refs.solutions;
        this.$refs.myTree.enableItem(item);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
    margin-right: 50px;
  }
</style>

Ensures the visibility of an element.

<template>
  <JqxTree ref="myTree"
       :width="300" :height="150">
    <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>
          <li>
            Solutions
            <ul>
              <li>Consumer photo and video</li>
              <li>Mobile</li>
              <li>Rich Internet applications</li>
              <li>Technical communication</li>
              <li>Training and eLearning</li>
              <li>Web conferencing</li>
            </ul>
          </li>
          <li ref="industries">All industries and solutions</li>
        </ul>
      </li>
    </ul>
  </JqxTree>
</template>

<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';

  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      let item = this.$refs.industries;
      this.$refs.myTree.ensureVisible(item);
    }
  }
</script>

Enables a tree item.

<template>
  <div>
    <JqxTree ref="myTree"
         :width="400">
      <ul>
        <li item-selected='true'>Home</li>
        <li ref="solutions" item-expanded='true'>
          Solutions
          <ul>
            <li>Education</li>
            <li>Financial services</li>
            <li>Government</li>
            <li>Manufacturing</li>
            <li>
              Solutions
              <ul>
                <li>Consumer photo and video</li>
                <li>Mobile</li>
                <li>Rich Internet applications</li>
                <li>Technical communication</li>
                <li>Training and eLearning</li>
                <li>Web conferencing</li>
              </ul>
            </li>
            <li>All industries and solutions</li>
          </ul>
        </li>
      </ul>
    </JqxTree>
    <jqxButton :width="150" @click="disable()">Disable 'Solutions'</jqxButton>
    <jqxButton :width="150" @click="enable()">Enable 'Solutions'</jqxButton>
  </div>
</template>
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxTree,
      JqxButton
    },
    methods: {
      disable: function () {
        let item = this.$refs.solutions;
        this.$refs.myTree.disableItem(item);
      },
      enable: function () {
        let item = this.$refs.solutions;
        this.$refs.myTree.enableItem(item);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
    margin-right: 50px;
  }
</style>

Enables all items.

<template>
  <JqxTree ref="myTree"
    :width="400">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      this.$refs.myTree.enableAll();
    }
  }
</script>

Expandes all items.

<template>
  <JqxTree ref="myTree"
    :width="400">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      this.$refs.myTree.expandAll();
    }
  }
</script>

Expands a tree item by passing an element as parameter.

<template>
  <div>
    <JqxTree ref="myTree"
         :width="400">
      <ul>
        <li item-selected='true'>Home</li>
        <li ref="solutions" item-expanded='true'>
          Solutions
          <ul>
            <li>Education</li>
            <li>Financial services</li>
            <li>Government</li>
            <li>Manufacturing</li>
            <li>
              Solutions
              <ul>
                <li>Consumer photo and video</li>
                <li>Mobile</li>
                <li>Rich Internet applications</li>
                <li>Technical communication</li>
                <li>Training and eLearning</li>
                <li>Web conferencing</li>
              </ul>
            </li>
            <li>All industries and solutions</li>
          </ul>
        </li>
      </ul>
    </JqxTree>
    <jqxButton :width="150" @click="expand()">Expand 'Solutions'</jqxButton>
    <jqxButton :width="150" @click="collapse()">Collapse 'Solutions'</jqxButton>
  </div>
</template>

<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxTree,
      JqxButton
    },
    methods: {
      expand: function () {
        let item = this.$refs.solutions;
        this.$refs.myTree.expandItem(item);
      },
      collapse: function () {
        let item = this.$refs.solutions;
        this.$refs.myTree.collapseItem(item);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
    margin-right: 50px;
  }
</style>

Sets the focus to the widget.

<template>
  <JqxTree ref="myTree"
    :width="400">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      this.$refs.myTree.focus();
    }
  }
</script>

Gets an array with all checked tree 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.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

<template>
  <JqxTree ref="myTree"
       :width="400" :checkboxes="true">
    <ul>
      <li item-selected='true'>Home</li>
      <li item-expanded='true'>
        Solutions
        <ul>
          <li ref="education">Education</li>
          <li>Financial services</li>
          <li>Government</li>
          <li>Manufacturing</li>
          <li>
            Solutions
            <ul>
              <li>Consumer photo and video</li>
              <li>Mobile</li>
              <li>Rich Internet applications</li>
              <li>Technical communication</li>
              <li>Training and eLearning</li>
              <li>Web conferencing</li>
            </ul>
          </li>
          <li>All industries and solutions</li>
        </ul>
      </li>
    </ul>
  </JqxTree>
</template>
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      let item = this.$refs.education;
      this.$refs.myTree.checkItem(item, true);
      let items = this.$refs.myTree.getCheckedItems();
    }
  }
</script>

Gets an array with all unchecked tree 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.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

<template>
  <JqxTree ref="myTree"
       :width="400" :checkboxes="true">
    <ul>
      <li item-selected='true'>Home</li>
      <li item-expanded='true'>
        Solutions
        <ul>
          <li ref="education">Education</li>
          <li>Financial services</li>
          <li>Government</li>
          <li>Manufacturing</li>
          <li>
            Solutions
            <ul>
              <li>Consumer photo and video</li>
              <li>Mobile</li>
              <li>Rich Internet applications</li>
              <li>Technical communication</li>
              <li>Training and eLearning</li>
              <li>Web conferencing</li>
            </ul>
          </li>
          <li>All industries and solutions</li>
        </ul>
      </li>
    </ul>
  </JqxTree>
</template>
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      let item = this.$refs.education;
      this.$refs.myTree.checkItem(item, true);
      let items = this.$refs.myTree.getUncheckedItems();
    }
  }
</script>

Gets an array with all tree 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.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

<template>
  <JqxTree ref="myTree"
    :width="400">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      const value = this.$refs.myTree.getItems();
    }
  }
</script>

Gets the tree item associated to a LI tag passed as parameter. The returned value is an object.

• 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.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

<template>
  <JqxTree ref="myTree"
       :width="400">
    <ul>
      <li item-selected='true'>Home</li>
      <li item-expanded='true'>
        Solutions
        <ul>
          <li>Education</li>
          <li>Financial services</li>
          <li ref="government">Government</li>
          <li>Manufacturing</li>
          <li>
            Solutions
            <ul>
              <li>Consumer photo and video</li>
              <li>Mobile</li>
              <li>Rich Internet applications</li>
              <li>Technical communication</li>
              <li>Training and eLearning</li>
              <li>Web conferencing</li>
            </ul>
          </li>
          <li>All industries and solutions</li>
        </ul>
      </li>
    </ul>
  </JqxTree>
</template>

<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';

  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      let ref = this.$refs.government;
      let item = this.$refs.myTree.getItem(ref);
      alert(item.label);
    }
  }
</script>

Gets the selected tree 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.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

<template>
  <JqxTree ref="myTree"
    :width="400">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      const value = this.$refs.myTree.getSelectedItem();
    }
  }
</script>

Gets the item above another item. The returned value is an object.

• 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.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

<template>
    <JqxTree ref="myTree"
             :width="400">
        <ul>
            <li>Home</li>
            <li item-expanded='true'>
                Solutions
                <ul>
                    <li>Education</li>
                    <li>Financial services</li>
                    <li item-selected='true'>Government</li>
                    <li>Manufacturing</li>
                    <li>
                        Solutions
                        <ul>
                            <li>Consumer photo and video</li>
                            <li>Mobile</li>
                            <li>Rich Internet applications</li>
                            <li>Technical communication</li>
                            <li>Training and eLearning</li>
                            <li>Web conferencing</li>
                        </ul>
                    </li>
                    <li>All industries and solutions</li>
                </ul>
            </li>
        </ul>
    </JqxTree>
</template>

<script>
    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';

    export default {
        components: {
            JqxTree
        },
        mounted: function () {
            const selectedItem = this.$refs.myTree.getSelectedItem();
            const value = this.$refs.myTree.getPrevItem(selectedItem);
        }
    }
</script>

Gets the item below another item. The returned value is an object.

• 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.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

<template>
    <JqxTree ref="myTree"
             :width="400">
        <ul>
            <li>Home</li>
            <li item-expanded='true'>
                Solutions
                <ul>
                    <li>Education</li>
                    <li>Financial services</li>
                    <li item-selected='true'>Government</li>
                    <li>Manufacturing</li>
                    <li>
                        Solutions
                        <ul>
                            <li>Consumer photo and video</li>
                            <li>Mobile</li>
                            <li>Rich Internet applications</li>
                            <li>Technical communication</li>
                            <li>Training and eLearning</li>
                            <li>Web conferencing</li>
                        </ul>
                    </li>
                    <li>All industries and solutions</li>
                </ul>
            </li>
        </ul>
    </JqxTree>
</template>

<script>
    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';

    export default {
        components: {
            JqxTree
        },
        mounted: function () {
            const selectedItem = this.$refs.myTree.getSelectedItem();
            const value = this.$refs.myTree.getNextItem(selectedItem);
        }
    }
</script>

Gets an item at specific position. The method expects 2 parameters - left and top. The coordinates are relative to the document.

<template>
  <JqxTree ref="myTree"
    :width="400">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      const value = this.$refs.myTree.hitTest(100,100);
    }
  }
</script>

Removes an item.

<template>
  <JqxTree ref="myTree"
       :width="400">
    <ul>
      <li item-selected='true'>Home</li>
      <li item-expanded='true'>
        Solutions
        <ul>
          <li>Education</li>
          <li>Financial services</li>
          <li ref="government">Government</li>
          <li>Manufacturing</li>
          <li>
            Solutions
            <ul>
              <li>Consumer photo and video</li>
              <li>Mobile</li>
              <li>Rich Internet applications</li>
              <li>Technical communication</li>
              <li>Training and eLearning</li>
              <li>Web conferencing</li>
            </ul>
          </li>
          <li>All industries and solutions</li>
        </ul>
      </li>
    </ul>
  </JqxTree>
</template>

<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';

  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      let item = this.$refs.government;
      this.$refs.myTree.removeItem(item);
    }
  }
</script>

Renders the jqxTree widget.

<template>
  <JqxTree ref="myTree"
    :width="400">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      this.$refs.myTree.render();
    }
  }
</script>

Refreshes the jqxTree widget. The refresh method will update the jqxTree's layout and size.

<template>
  <JqxTree ref="myTree"
    :width="400">
    <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>
           <li>Solutions
             <ul>
               <li>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
  </JqxTree>
</template>

 
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
 
  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      this.$refs.myTree.refresh();
    }
  }
</script>

Selects an item.

<template>
  <JqxTree ref="myTree"
       :width="400">
    <ul>
      <li item-selected='true'>Home</li>
      <li item-expanded='true'>
        Solutions
        <ul>
          <li>Education</li>
          <li>Financial services</li>
          <li ref="government">Government</li>
          <li>Manufacturing</li>
          <li>
            Solutions
            <ul>
              <li>Consumer photo and video</li>
              <li>Mobile</li>
              <li>Rich Internet applications</li>
              <li>Technical communication</li>
              <li>Training and eLearning</li>
              <li>Web conferencing</li>
            </ul>
          </li>
          <li>All industries and solutions</li>
        </ul>
      </li>
    </ul>
  </JqxTree>
</template>

<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';

  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      let item = this.$refs.government;
      this.$refs.myTree.selectItem(item);
    }
  }
</script>

Unchecks all tree items.

<template>
  <div>
    <JqxTree ref="myTree"
         :width="400" :checkboxes="true">
      <ul>
        <li item-selected='true'>Home</li>
        <li ref="solutions" item-expanded='true'>
          Solutions
          <ul>
            <li>Education</li>
            <li>Financial services</li>
            <li>Government</li>
            <li>Manufacturing</li>
            <li>
              Solutions
              <ul>
                <li>Consumer photo and video</li>
                <li>Mobile</li>
                <li>Rich Internet applications</li>
                <li>Technical communication</li>
                <li>Training and eLearning</li>
                <li>Web conferencing</li>
              </ul>
            </li>
            <li>All industries and solutions</li>
          </ul>
        </li>
      </ul>
    </JqxTree>
    <jqxButton :width="150" @click="checkAll()">Check All</jqxButton>
    <jqxButton :width="150" @click="uncheckAll()">Uncheck All</jqxButton>
  </div>
</template>
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxTree,
      JqxButton
    },
    methods: {
      checkAll: function () {
        this.$refs.myTree.checkAll();
      },
      uncheckAll: function () {
        this.$refs.myTree.uncheckAll();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
    margin-right: 50px;
  }
</style>

Unchecks a tree item.

<template>
  <div>
    <JqxTree ref="myTree"
         :width="400" :checkboxes="true">
      <ul>
        <li item-selected='true'>Home</li>
        <li ref="solutions" item-expanded='true'>
          Solutions
          <ul>
            <li>Education</li>
            <li>Financial services</li>
            <li ref="government">Government</li>
            <li>Manufacturing</li>
            <li>
              Solutions
              <ul>
                <li>Consumer photo and video</li>
                <li>Mobile</li>
                <li>Rich Internet applications</li>
                <li>Technical communication</li>
                <li>Training and eLearning</li>
                <li>Web conferencing</li>
              </ul>
            </li>
            <li>All industries and solutions</li>
          </ul>
        </li>
      </ul>
    </JqxTree>
    <jqxButton :width="150" @click="check()">Check 'Government'</jqxButton>
    <jqxButton :width="150" @click="uncheck()">Uncheck 'Government'</jqxButton>
  </div>
</template>
<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxTree,
      JqxButton
    },
    methods: {
      check: function () {
        let item = this.$refs.government;
        this.$refs.myTree.checkItem(item);
      },
      uncheck: function () {
        let item = this.$refs.government;
        this.$refs.myTree.uncheckItem(item);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
    margin-right: 50px;
  }
</style>

Updates an item.

<template>
  <JqxTree ref="myTree"
       :width="400">
    <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>
          <li>
            Solutions
            <ul>
              <li>Consumer photo and video</li>
              <li>Mobile</li>
              <li>Rich Internet applications</li>
              <li>Technical communication</li>
              <li>Training and eLearning</li>
              <li>Web conferencing</li>
            </ul>
          </li>
          <li>All industries and solutions</li>
        </ul>
      </li>
    </ul>
  </JqxTree>
</template>

<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';

  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      let items = this.$refs.myTree.getItems();
      this.$refs.myTree.updateItem(items[0], { label: 'Updated Item' });
    }
  }
</script>

Sets or gets the selected item.

<template>
  <JqxTree ref="myTree"
       :width="400">
    <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>
          <li>
            Solutions
            <ul>
              <li>Consumer photo and video</li>
              <li>Mobile</li>
              <li>Rich Internet applications</li>
              <li>Technical communication</li>
              <li>Training and eLearning</li>
              <li>Web conferencing</li>
            </ul>
          </li>
          <li>All industries and solutions</li>
        </ul>
      </li>
    </ul>
  </JqxTree>
</template>

<script>
  import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';

  export default {
    components: {
      JqxTree
    },
    mounted: function () {
      let item = this.$refs.myTree.val();
    }
  }
</script>