Vue UI Components Documentation

Automatically updates the panel, if its children size is changed.

<template>
  <JqxPanel ref="myPanel"
    :width="250" :height="250" :autoUpdate="true">
    <div style='margin: 10px;'>
      <h3>Early History of the Internet</h3>
    </div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1970 Network Information Center (NIC)</li>
        <li>1971 Merit Network's packet-switched network operational</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
      </ul>
    </div>
  </JqxPanel>
</template>
 
<script>
  import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
 
  export default {
    components: {
      JqxPanel
    }
  }
</script>

Sets or gets whether the panel is disabled.

<template>
  <JqxPanel ref="myPanel"
    :width="250" :height="250" :disabled="true">
    <div style='margin: 10px;'>
      <h3>Early History of the Internet</h3>
    </div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1970 Network Information Center (NIC)</li>
        <li>1971 Merit Network's packet-switched network operational</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
      </ul>
    </div>
  </JqxPanel>
</template>
 
<script>
  import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
 
  export default {
    components: {
      JqxPanel
    }
  }
</script>

Sets or gets the panel's height.

<template>
  <JqxPanel ref="myPanel"
    :width="250" :height="250">
    <div style='margin: 10px;'>
      <h3>Early History of the Internet</h3>
    </div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1970 Network Information Center (NIC)</li>
        <li>1971 Merit Network's packet-switched network operational</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
      </ul>
    </div>
  </JqxPanel>
</template>
 
<script>
  import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
 
  export default {
    components: {
      JqxPanel
    }
  }
</script>

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

<template>
  <JqxPanel ref="myPanel"
    :width="250" :height="250" :rtl="true">
    <div style='margin: 10px;'>
      <h3>Early History of the Internet</h3>
    </div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1970 Network Information Center (NIC)</li>
        <li>1971 Merit Network's packet-switched network operational</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
      </ul>
    </div>
  </JqxPanel>
</template>
 
<script>
  import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
 
  export default {
    components: {
      JqxPanel
    }
  }
</script>

Sets or gets the sizing mode. In the 'fixed' mode, the panel displays scrollbars, if its content requires it. In the wrap mode, the scrollbars are not displayed and the panel automatically changes its size.

'fixed'

'wrap'

<template>
  <JqxPanel ref="myPanel"
    :width="250" :height="250" :sizeMode="'wrap'">
    <div style='margin: 10px;'>
      <h3>Early History of the Internet</h3>
    </div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1970 Network Information Center (NIC)</li>
        <li>1971 Merit Network's packet-switched network operational</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
      </ul>
    </div>
  </JqxPanel>
</template>
 
<script>
  import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
 
  export default {
    components: {
      JqxPanel
    }
  }
</script>

Sets or gets the scrollbar's size.

<template>
  <JqxPanel ref="myPanel"
    :width="250" :height="250" :scrollBarSize="20">
    <div style='margin: 10px;'>
      <h3>Early History of the Internet</h3>
    </div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1970 Network Information Center (NIC)</li>
        <li>1971 Merit Network's packet-switched network operational</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
      </ul>
    </div>
  </JqxPanel>
</template>
 
<script>
  import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
 
  export default {
    components: {
      JqxPanel
    }
  }
</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>
  <JqxPanel ref="myPanel"
    :width="250" :height="250" :theme="'material'">
    <div style='margin: 10px;'>
      <h3>Early History of the Internet</h3>
    </div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1970 Network Information Center (NIC)</li>
        <li>1971 Merit Network's packet-switched network operational</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
      </ul>
    </div>
  </JqxPanel>
</template>
 
<script>
  import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
 
  export default {
    components: {
      JqxPanel
    }
  }
</script>

Sets or gets the panel's width.

<template>
  <JqxPanel ref="myPanel"
    :width="250" :height="250">
    <div style='margin: 10px;'>
      <h3>Early History of the Internet</h3>
    </div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1970 Network Information Center (NIC)</li>
        <li>1971 Merit Network's packet-switched network operational</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
      </ul>
    </div>
  </JqxPanel>
</template>
 
<script>
  import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
 
  export default {
    components: {
      JqxPanel
    }
  }
</script>

Appends an element to the panel's content.

<template>
  <JqxPanel ref="myPanel"
       :width="250" :height="250">
    <div style='margin: 10px;'>
      <h3>Early History of the Internet</h3>
    </div>
    <div>
      <ul>
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1970 Network Information Center (NIC)</li>
        <li>1971 Merit Network's packet-switched network operational</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
      </ul>
    </div>
  </JqxPanel>
</template>
<script>
  import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
  export default {
    components: {
      JqxPanel
    },
    mounted: function () {
      let div = document.createElement('div');
      div.innerHTML = 'Custom Content';
      this.$refs.myPanel.append(div);
    }
  }
</script>

Clears the panel's content.

<template>
  <JqxPanel ref="myPanel"
    :width="250" :height="250">
    <div style='margin: 10px;'>
      <h3>Early History of the Internet</h3>
    </div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1970 Network Information Center (NIC)</li>
        <li>1971 Merit Network's packet-switched network operational</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
      </ul>
    </div>
  </JqxPanel>
</template>
 
<script>
  import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
 
  export default {
    components: {
      JqxPanel
    },
    mounted: function () {
      this.$refs.myPanel.clearcontent();
    }
  }
</script>

Destroys the widget.

<template>
  <JqxPanel ref="myPanel"
    :width="250" :height="250">
    <div style='margin: 10px;'>
      <h3>Early History of the Internet</h3>
    </div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1970 Network Information Center (NIC)</li>
        <li>1971 Merit Network's packet-switched network operational</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
      </ul>
    </div>
  </JqxPanel>
</template>
 
<script>
  import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
 
  export default {
    components: {
      JqxPanel
    },
    mounted: function () {
      this.$refs.myPanel.destroy();
    }
  }
</script>

Focuses the widget.

<template>
  <JqxPanel ref="myPanel"
    :width="250" :height="250">
    <div style='margin: 10px;'>
      <h3>Early History of the Internet</h3>
    </div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1970 Network Information Center (NIC)</li>
        <li>1971 Merit Network's packet-switched network operational</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
      </ul>
    </div>
  </JqxPanel>
</template>
 
<script>
  import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
 
  export default {
    components: {
      JqxPanel
    },
    mounted: function () {
      this.$refs.myPanel.focus();
    }
  }
</script>

Get the scrollable height. Returns a number.

<template>
  <JqxPanel ref="myPanel"
    :width="250" :height="250">
    <div style='margin: 10px;'>
      <h3>Early History of the Internet</h3>
    </div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1970 Network Information Center (NIC)</li>
        <li>1971 Merit Network's packet-switched network operational</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
      </ul>
    </div>
  </JqxPanel>
</template>
 
<script>
  import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
 
  export default {
    components: {
      JqxPanel
    },
    mounted: function () {
      const value = this.$refs.myPanel.getScrollHeight();
    }
  }
</script>

Get the vertical scrollbar's position. Returns a number.

<template>
  <JqxPanel ref="myPanel"
    :width="250" :height="250">
    <div style='margin: 10px;'>
      <h3>Early History of the Internet</h3>
    </div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1970 Network Information Center (NIC)</li>
        <li>1971 Merit Network's packet-switched network operational</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
      </ul>
    </div>
  </JqxPanel>
</template>
 
<script>
  import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
 
  export default {
    components: {
      JqxPanel
    },
    mounted: function () {
      const value = this.$refs.myPanel.getVScrollPosition();
    }
  }
</script>

Get the scrollable width. Returns a number.

<template>
  <JqxPanel ref="myPanel"
    :width="250" :height="250">
    <div style='margin: 10px;'>
      <h3>Early History of the Internet</h3>
    </div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1970 Network Information Center (NIC)</li>
        <li>1971 Merit Network's packet-switched network operational</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
      </ul>
    </div>
  </JqxPanel>
</template>
 
<script>
  import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
 
  export default {
    components: {
      JqxPanel
    },
    mounted: function () {
      const value = this.$refs.myPanel.getScrollWidth();
    }
  }
</script>

Get the horizontal scrollbar's position. Returns a number.

<template>
  <JqxPanel ref="myPanel"
    :width="250" :height="250">
    <div style='margin: 10px;'>
      <h3>Early History of the Internet</h3>
    </div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1970 Network Information Center (NIC)</li>
        <li>1971 Merit Network's packet-switched network operational</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
      </ul>
    </div>
  </JqxPanel>
</template>
 
<script>
  import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
 
  export default {
    components: {
      JqxPanel
    },
    mounted: function () {
      const value = this.$refs.myPanel.getHScrollPosition();
    }
  }
</script>

Prepends an element to the panel's content.

<template>
  <JqxPanel ref="myPanel"
       :width="250" :height="250">
    <div style='margin: 10px;'>
      <h3>Early History of the Internet</h3>
    </div>
    <div>
      <ul>
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1970 Network Information Center (NIC)</li>
        <li>1971 Merit Network's packet-switched network operational</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
      </ul>
    </div>
  </JqxPanel>
</template>
<script>
  import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
  export default {
    components: {
      JqxPanel
    },
    mounted: function () {
      let div = document.createElement('div');
      div.innerHTML = 'Custom Content';
      this.$refs.myPanel.prepend(div);
    }
  }
</script>

Remove an element from the panel's content.

<template>
  <JqxPanel ref="myPanel"
    :width="250" :height="250">
    <div style='margin: 10px;'>
      <h3>Early History of the Internet</h3>
    </div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1970 Network Information Center (NIC)</li>
        <li>1971 Merit Network's packet-switched network operational</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
      </ul>
    </div>
  </JqxPanel>
</template>
 
<script>
  import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
 
  export default {
    components: {
      JqxPanel
    },
    mounted: function () {
      this.$refs.myPanel.remove(document.querySelector('li'));
    }
  }
</script>

Scroll to specific position.

<template>
  <JqxPanel ref="myPanel"
    :width="250" :height="250">
    <div style='margin: 10px;'>
      <h3>Early History of the Internet</h3>
    </div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1970 Network Information Center (NIC)</li>
        <li>1971 Merit Network's packet-switched network operational</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
      </ul>
    </div>
  </JqxPanel>
</template>
 
<script>
  import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';
 
  export default {
    components: {
      JqxPanel
    },
    mounted: function () {
      this.$refs.myPanel.scrollTo(0,20);
    }
  }
</script>