Vue UI Components Documentation

Enables or disables the cookies. If the cookies are enabled then the docking layout is going to be saved and kept every time the page is being reloaded.

<template>
  <JqxDocking ref="myDocking"
    :cookies="true">
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    }
  }
</script>

Get the cookies property.

let cookies = this.$refs.myDocking.cookies;

Sets or gets the cookie options.

<template>
  <JqxDocking ref="myDocking"
    :cookies="true" :cookieOptions='{ domain: 'jqwidgets.com', expires: 90 }'>
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    }
  }
</script>

Get the cookieOptions property.

let cookieOptions = this.$refs.myDocking.cookieOptions;

Sets or gets whether the docking is disabled.

<template>
  <JqxDocking ref="myDocking"
    :disabled="true">
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    }
  }
</script>

Get the disabled property.

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

Sets or gets the opacity of the window which is currently dragged by the user.

<template>
  <JqxDocking ref="myDocking"
    :floatingWindowOpacity="0.4">
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    }
  }
</script>

Get the floatingWindowOpacity property.

let floatingWindowOpacity = this.$refs.myDocking.floatingWindowOpacity;

Sets or gets the docking's height.

<template>
  <JqxDocking ref="myDocking"
    :height="300">
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    }
  }
</script>

Get the height property.

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

Enables or disables the jqxDocking's keyboard navigation.

<template>
  <JqxDocking ref="myDocking"
    :keyboardNavigation="true">
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    }
  }
</script>

Get the keyboardNavigation property.

let keyboardNavigation = this.$refs.myDocking.keyboardNavigation;

Sets or gets docking's mode.

'default'-the user can  drop every window inside any docking panel or outside the docking panels

'docked'-the user can drop every window just into the docking panels

'floating'-the user can drop any window just outside of the docking panels.

<template>
  <JqxDocking ref="myDocking"
    :mode="'docked'" :width="200">
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    }
  }
</script>

Get the mode property.

let mode = this.$refs.myDocking.mode;

Sets or gets docking's orientation. This property is setting whether the panels are going to be side by side or below each other.

<template>
  <JqxDocking ref="myDocking"
    :orientation="'horizontal'">
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    }
  }
</script>

Get the orientation property.

let orientation = this.$refs.myDocking.orientation;

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

<template>
  <JqxDocking ref="myDocking"
    :rtl="true">
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    }
  }
</script>

Get the rtl property.

let rtl = this.$refs.myDocking.rtl;

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>
  <JqxDocking ref="myDocking"
    :theme="'material'">
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    }
  }
</script>

Sets or gets the docking's width.

<template>
  <JqxDocking ref="myDocking"
    :width="300">
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    }
  }
</script>

Get the width property.

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

Sets ot gets specific mode for each window. The value of the property is object with keys - window's ids and values - specific modes.

<template>
  <JqxDocking ref="myDocking"
    :width="400"
    :windowsMode="windowsMode">
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    },
    data: function () {
        return {
            windowsMode: { 'window1': 'floating', 'window2': 'docked' }
        }
    }
  }
</script>

Get the windowsMode property.

let windowsMode = this.$refs.myDocking.windowsMode;

Sets or gets the offset between the windows.

<template>
  <JqxDocking ref="myDocking"
    :windowsOffset="7">
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    }
  }
</script>

Get the windowsOffset property.

let windowsOffset = this.$refs.myDocking.windowsOffset;

This event is triggered when the user start to drag any window.

Code examples

Bind to the dragStart event of jqxDocking.

<template>
  <JqxDocking ref="myDocking" @dragStart="onDragStart($event)"
   >
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    },
    methods: {
      onDragStart: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user drop any window.

Code examples

Bind to the dragEnd event of jqxDocking.

<template>
  <JqxDocking ref="myDocking" @dragEnd="onDragEnd($event)"
   >
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    },
    methods: {
      onDragEnd: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Adding new window to the docking. This method accepts four arguments. The first one is id of the window we wish to add to the docking. The second argument is window's mode (default, docked, floating) the third argument is the panel's number and the last one is the position into the panel. The last three arguments are optional.

<template>
<div>
    <JqxButton @click="onClick($event)" :width="60" :height="18">Click</JqxButton>
      <br/>
    <JqxDocking ref="myDocking"
    >
      <div>
        <div id="window1">
          <div>Header 1</div>
          <div>Content 1</div>
        </div>
        <div id="window2">
          <div>Header 2</div>
          <div>Content 2</div>
        </div>
        <div id="window3">
          <div>Header 3</div>
          <div>Content 3</div>
        </div>
      </div>
      <div>
        <div id="window4">
          <div>Header 4</div>
          <div>Content 4</div>
        </div>
      </div>
    </JqxDocking>
  </div>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
  import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
  export default {
    components: {
      JqxDocking,
      JqxButton
    },
    methods: {
      onClick() {
        this.$refs.myDocking.addWindow('window3', 'default', 1, 1);
      }
    }
  }
</script>

Closing specific window.

<template>
  <JqxDocking ref="myDocking"
   >
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    },
    mounted: function () {
      this.$refs.myDocking.closeWindow('window1');
    }
  }
</script>

Collapsing a specific window.

<template>
  <JqxDocking ref="myDocking"
   >
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    },
    mounted: function () {
      this.$refs.myDocking.collapseWindow('window1');
    }
  }
</script>

Destroys the widget.

<template>
  <JqxDocking ref="myDocking"
   >
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    },
    mounted: function () {
      this.$refs.myDocking.destroy();
    }
  }
</script>

Disabling the resize of a specific window.

<template>
  <JqxDocking ref="myDocking"
   >
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    },
    mounted: function () {
      this.$refs.myDocking.disableWindowResize('window1');
    }
  }
</script>

Disabling the jqxDocking.

<template>
  <JqxDocking ref="myDocking"
   >
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    },
    mounted: function () {
      this.$refs.myDocking.disable();
    }
  }
</script>

Exporting docking's layout into a JSON string.

<template>
  <div>
    <JqxButton @click="onClick($event)" :width="60" :height="18">Click</JqxButton>
      <br/>
    <JqxDocking ref="myDocking"
    >
      <div>
        <div id="window1" style="width: 340px;">
          <div>Header 1</div>
          <div>Content 1</div>
        </div>
        <div id="window2" style="width: 340px;">
          <div>Header 2</div>
          <div>Content 2</div>
        </div>
      </div>
      <div>
        <div id="window3" style="width: 340px;">
          <div>Header 3</div>
          <div>Content 3</div>
        </div>
        <div id="window4" style="width: 340px;">
          <div>Header 4</div>
          <div>Content 4</div>
        </div>
      </div>
    </JqxDocking>
    <div id="info"></div>
  </div>
</template>
 
<script>
import JqxDocking from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue";
import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
export default {
  components: {
    JqxDocking,
    JqxButton
  },
  methods: {
    onClick() {      
      let layout = this.$refs.myDocking.exportLayout();
      document.getElementById('info').innerText = layout;
    }
  }
};
</script>

Enabling the docking

<template>
  <div>
    <JqxButton @click="onClick($event)" :width="60" :height="18">Click</JqxButton>
      <br/>
    <JqxDocking ref="myDocking"
      :disabled="true"
    >
      <div>
        <div id="window1" style="width: 340px;">
          <div>Header 1</div>
          <div>Content 1</div>
        </div>
        <div id="window2" style="width: 340px;">
          <div>Header 2</div>
          <div>Content 2</div>
        </div>
      </div>
    </JqxDocking>
  </div>
</template>
 
<script>
import JqxDocking from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue";
import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
export default {
  components: {
    JqxDocking,
    JqxButton
  },
  methods: {
    onClick() {      
      this.$refs.myDocking.enable();
    }
  }
};
</script>

Expanding a specific window.

<template>
  <div>
    <JqxButton @click="onClick($event)" :width="60" :height="18">Click</JqxButton>
      <br/>
    <JqxDocking ref="myDocking"
      :width="340" :orientation="'horizontal'"
    >
      <div>
        <div id="window1" style="width: 340px;">
          <div>Header 1</div>
          <div>Content 1</div>
        </div>
        <div id="window2" style="width: 340px;">
          <div>Header 2</div>
          <div>Content 2</div>
        </div>
      </div>
    </JqxDocking>
  </div>
</template>
 
<script>
import JqxDocking from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue";
import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
export default {
  components: {
    JqxDocking,
    JqxButton
  },
  mounted: function() {
    this.$refs.myDocking.collapseWindow('window1');
  },
  methods: {
    onClick() {      
      this.$refs.myDocking.expandWindow('window1');
    }
  }
};
</script>

Enabling the resize of a specific window which is not docked into a panel.

<template>
  <div>
    <JqxButton @click="onClick($event)" :width="60" :height="18">Click</JqxButton>
      <br/>
    <JqxDocking ref="myDocking"
      :width="340" :orientation="'horizontal'"
      :windowsMode="windowsMode"
    >
      <div>
        <div ref="window1" id="window1" style="width: 340px;">
          <div>Header 1</div>
          <div>You cannot resize that window.</div>
        </div>
        <div id="window2" style="width: 340px;">
          <div>Header 2</div>
          <div>Content 2</div>
        </div>
      </div>
    </JqxDocking>
  </div>
</template>
 
<script>
import JqxDocking from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue";
import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
export default {
  components: {
    JqxDocking,
    JqxButton
  },
  data: function() {
    return {
      windowsMode: {
        window1: "floating",
        window2: "docked"
      }
    };
  },
  mounted: function() {
    this.$refs.myDocking.disableWindowResize('window1');
  },
  methods: {
    onClick() {      
      this.$refs.myDocking.enableWindowResize('window1');
      this.$refs.window1.children[0].children[1].innerText = "You can resize that window";
    }
  }
};
</script>

Focuses the widget.

<template>
  <JqxDocking ref="myDocking"
   >
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    },
    mounted: function () {
      this.$refs.myDocking.focus();
    }
  }
</script>

Hiding the close buttons of all windows.

<template>
  <JqxDocking ref="myDocking"
   >
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    },
    mounted: function () {
      this.$refs.myDocking.hideAllCloseButtons();
    }
  }
</script>

Hiding the collapse buttons of all windows.

<template>
  <div>
    <JqxButton @click="onClick($event)" :width="60" :height="18">Click</JqxButton>
      <br/>
    <JqxDocking ref="myDocking"
      :width="340" :orientation="'horizontal'"
    >
      <div>
        <div id="window1" style="width: 340px;">
          <div>Header 1...</div>
          <div>Content 1...</div>
        </div>
        <div id="window2" style="width: 340px;">
          <div>Header 2...</div>
          <div>Content 2...</div>
        </div>
      </div>
    </JqxDocking>
  </div>
</template>
 
<script>
import JqxDocking from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue";
import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
export default {
  components: {
    JqxDocking,
    JqxButton
  },
  mounted: function() {
    this.$refs.myDocking.showAllCollapseButtons();
  },
  methods: {
    onClick() {
      this.$refs.myDocking.hideAllCollapseButtons();
    }
  }
};
</script>

Hiding the collapse button of a specific window.

<template>
  <div>
    <JqxButton @click="onClick($event)" :width="60" :height="18">Click</JqxButton>
      <br/>
    <JqxDocking ref="myDocking"
      :width="340" :orientation="'horizontal'"
    >
      <div>
        <div id="window1" style="width: 340px;">
          <div>Header 1...</div>
          <div>Content 1...</div>
        </div>
        <div id="window2" style="width: 340px;">
          <div>Header 2...</div>
          <div>Content 2...</div>
        </div>
      </div>
    </JqxDocking>
  </div>
</template>
 
<script>
import JqxDocking from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue";
import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
export default {
  components: {
    JqxDocking,
    JqxButton
  },
  mounted: function() {
    this.$refs.myDocking.showCollapseButton('window1');
  },
  methods: {
    onClick() {
      this.$refs.myDocking.hideCollapseButton('window1');
    }
  }
};
</script>

Hiding the close button of a specific window.

<template>
  <JqxDocking ref="myDocking"
   >
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    },
    mounted: function () {
      this.$refs.myDocking.hideCloseButton('window1');
    }
  }
</script>

Importing the docking layout from a JSON string.

<template>
  <div>
    <JqxButton @click="onClick($event)" :width="60" :height="18">Click</JqxButton>
      <br/>
    <JqxDocking ref="myDocking"
      :width="340" :orientation="'horizontal'"
      :mode="'default'" :windowsMode="windowsMode"
    >
      <div>
        <div id="window1" style="width: 340px;">
          <div>Header 1...</div>
          <div>Content 1...</div>
        </div>
        <div id="window2" style="width: 340px;">
          <div>Header 2...</div>
          <div>Content 2...</div>
        </div>
      </div>
    </JqxDocking>
  </div>
</template>
 
<script>
import JqxDocking from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue";
import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
export default {
  components: {
    JqxDocking,
    JqxButton
  },
  data: function () {
      return {
          windowsMode: { 'window1': 'floating', 'window2': 'docked' }
      }
  },
  mounted: function() {
    this.$refs.myDocking.move('window1', 100, 100);
  },
  methods: {
    onClick() {
      let layoutStructure = {
        "panel0": {
          "window1": {
            "collapsed": true
          }
        },
        "panel1": {
          "window2": {
            "collapsed": false
          }
        }
      };
      this.$refs.myDocking.importLayout(JSON.stringify(layoutStructure));
    }
  }
};
</script>

Moving window to specific position into specific panel. This method have three parameters. The first one is id of the window we want to move, the second one is number of the panel where we want to move our window and the last one is the position into this panel.

<template>
  <JqxDocking ref="myDocking"
    :width="340" :windowsMode="windowsMode"
  >
    <div>
      <div id="window1" style="width: 300px;">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    },
    data: function () {
        return {
            windowsMode: { 'window1': 'floating', 'window2': 'docked' }
        }
    },
    mounted: function () {
      this.$refs.myDocking.move('window1', 100, 100);
    }
  }
</script>

Pinning a specific window

<template>
  <JqxDocking ref="myDocking"
   >
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    },
    mounted: function () {
      this.$refs.myDocking.pinWindow('window2');
    }
  }
</script>

Setting mode to a specific window. This method accepts two arguments - window id and mode type.

<template>
  <JqxDocking ref="myDocking"
   >
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    },
    mounted: function () {
      this.$refs.myDocking.setWindowMode('window2','default');
    }
  }
</script>

Showing the close button of a specific window.

<template>
  <div>
    <JqxButton @click="onClick($event)" :width="60" :height="18">Click</JqxButton>
      <br/>
    <JqxDocking ref="myDocking"
    >
      <div>
        <div id="window1">
          <div>Header 1...</div>
          <div>Content 1...</div>
        </div>
        <div>
          <div>Header 2...</div>
          <div>Content 2...</div>
        </div>
      </div>
    </JqxDocking>
  </div>
</template>
 
<script>
import JqxDocking from "jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue";
import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
export default {
  components: {
    JqxDocking,
    JqxButton
  },
  mounted: function() {
    this.$refs.myDocking.hideAllCloseButtons();
  },
  methods: {
    onClick() {
      this.$refs.myDocking.showCloseButton("window1");
    }
  }
};
</script>

Showing the collapse button of a specific window.

<template>
  <JqxDocking ref="myDocking"
   >
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div>
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    },
    mounted: function () {
      this.$refs.myDocking.showCollapseButton('window1');
    }
  }
</script>

Moving window in floating mode to a specific position.

<template>
  <JqxDocking ref="myDocking"
    :width="340" :windowsMode="windowsMode"
  >
    <div>
      <div id="window1" style="width: 300px;">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    },
    data: function () {
        return {
            windowsMode: { 'window1': 'floating', 'window2': 'docked' }
        }
    },
    mounted: function () {
      this.$refs.myDocking.setWindowPosition('window1', 170, 240);
    }
  }
</script>

Showing the close buttons of all windows.

<template>
  <div>
    <JqxButton @click="onClick($event)" :width="60" :height="18">Click</JqxButton>
    <br/>
    <JqxDocking ref="myDocking"
    >
      <div>
        <div id="window1">
          <div>Header 1...</div>
          <div>Content 1...</div>
        </div>
        <div>
          <div>Header 2...</div>
          <div>Content 2...</div>
        </div>
      </div>
    </JqxDocking>    
  </div>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxDocking,
      JqxButton
    },
    mounted: function () {
      this.$refs.myDocking.hideAllCloseButtons();
    },
    methods: {
      onClick() {
        this.$refs.myDocking.showAllCloseButtons();
      }
    }
  }
</script>

Showing the collapse buttons of all windows.

<template>
  <JqxDocking ref="myDocking"
   >
    <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
  </JqxDocking>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
 
  export default {
    components: {
      JqxDocking
    },
    mounted: function () {
      this.$refs.myDocking.showAllCollapseButtons();
    }
  }
</script>

Unpinning a specific window

<template>
  <div>
    <JqxButton @click="onClick($event)" :width="60" :height="20">Unpin</JqxButton>
    <br/>
    <JqxDocking ref="myDocking"
    >
      <div>
        <div id="window1">
          <div>Header 1...</div>
          <div>Content 1...</div>
        </div>
        <div>
          <div>Header 2...</div>
          <div>Content 2...</div>
        </div>
      </div>
    </JqxDocking>    
  </div>
</template>
 
<script>
  import JqxDocking from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxdocking.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxDocking,
      JqxButton
    },
    mounted: function () {
      this.$refs.myDocking.pinWindow('window1');
    },
    methods: {
      onClick() {
        this.$refs.myDocking.unpinWindow('window1');
      }
    }
  }
</script>