Gets whether the dockpanel is disabled.

<template>
  <JqxDockPanel ref="myDockPanel"
    :width="300" :height="200" :disabled="true">
    <div dock='left' style='background: #486974;'> First Div </div>
    <div dock='top' style='height: 100px; background: #368ba7;'> Second Div </div>
    <div dock='right' style='background: #df7169;'> Third Div </div>
    <div style='background: #a73654;'> Fourth Div </div>
  </JqxDockPanel>
</template>

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

Get the disabled property.

let disabled = this.$refs.myDockPanel.disabled;

Sets or gets the dockpanel's height.

<template>
  <JqxDockPanel ref="myDockPanel"
    :width="300" :height="200">
    <div dock='left' style='background: #486974;'> First Div </div>
    <div dock='top' style='height: 100px; background: #368ba7;'> Second Div </div>
    <div dock='right' style='background: #df7169;'> Third Div </div>
    <div style='background: #a73654;'> Fourth Div </div>
  </JqxDockPanel>
</template>

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

Get the height property.

let height = this.$refs.myDockPanel.height;

When true, the last child gets the available width and height.

<template>
  <JqxDockPanel ref="myDockPanel"
    :width="300" :height="200" :lastchildfill="true">
    <div dock='left' style='background: #486974;'> First Div </div>
    <div dock='top' style='height: 100px; background: #368ba7;'> Second Div </div>
    <div dock='right' style='background: #df7169;'> Third Div </div>
    <div style='background: #a73654;'> Fourth Div </div>
  </JqxDockPanel>
</template>

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

Get the lastchildfill property.

let lastchildfill = this.$refs.myDockPanel.lastchildfill;

Sets or gets the dockpanel's width.

<template>
  <JqxDockPanel ref="myDockPanel"
    :width="300" :height="200">
    <div dock='left' style='background: #486974;'> First Div </div>
    <div dock='top' style='height: 100px; background: #368ba7;'> Second Div </div>
    <div dock='right' style='background: #df7169;'> Third Div </div>
    <div style='background: #a73654;'> Fourth Div </div>
  </JqxDockPanel>
</template>

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

Get the width property.

let width = this.$refs.myDockPanel.width;

Occurs when the layout is performed.

Code examples

Bind to the layout event of jqxDockPanel.

<template>
  <JqxDockPanel ref="myDockPanel" @layout="onLayout($event)"
    :width="300" :height="200">
    <div dock='left' style='background: #486974;'> First Div </div>
    <div dock='top' style='height: 100px; background: #368ba7;'> Second Div </div>
    <div dock='right' style='background: #df7169;'> Third Div </div>
    <div style='background: #a73654;'> Fourth Div </div>
  </JqxDockPanel>
</template>

 
<script>
  import JqxDockPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdockpanel.vue';
 
  export default {
    components: {
      JqxDockPanel
    },
    mounted: function () {
      this.$refs.myDockPanel.layout = {};

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

Refreshes the DockPanel.

<template>
  <JqxDockPanel ref="myDockPanel"
    :width="300" :height="200">
    <div dock='left' style='background: #486974;'> First Div </div>
    <div dock='top' style='height: 100px; background: #368ba7;'> Second Div </div>
    <div dock='right' style='background: #df7169;'> Third Div </div>
    <div style='background: #a73654;'> Fourth Div </div>
  </JqxDockPanel>
</template>

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