Sets or gets a custom rendering function for jqxKanban's columns.

<template>
  <JqxKanban ref="myKanban"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
    :columnRenderer="columnRenderer"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    },
    methods: {
      columnRenderer: function (element, collapsedElement, column) {
        var columnItems = this.$refs.myKanban.getColumnItems(column.dataField).length;
        /* update header's status.*/
        element.find(".jqx-kanban-column-header-status").html(" (" + columnItems + "/" + column.maxItems + ")");
        /* update collapsed header's status.*/
        collapsedElement.find(".jqx-kanban-column-header-status").html(" (" + columnItems + "/" + column.maxItems + ")");
      }
    }
  }
</script>

Sets or gets the jqxKanban columns.

<template>
  <JqxKanban ref="myKanban"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    }
  }
</script>

Sets a connection to another jqxKanban widget. As a selector is used the id of the widget.

<template>
    <div>
        <div id="outerBox1">
            <h2>Team 1</h2>
            <div id="kanbanBox1">
                <JqxKanban :width="400" :height="400" :columns="kanbanColumns" :resources="staff"
                           :source="kanbanSourceConnected1" :connectWith="'#kanbanBox2'">
                </JqxKanban>
            </div>
        </div>
        <div id="outerBox2">
            <h2>Team 2</h2>
            <div id="kanbanBox2">
                <JqxKanban :width="400" :height="400" :columns="kanbanColumns" :resources="staff"
                           :source="kanbanSourceConnected2" :connectWith="'#kanbanBox1'">
                </JqxKanban>
            </div>
        </div>
    </div>
</template>
<script>
    import JqxKanban from "jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue";
    export default {
        components: {
            JqxKanban
        },
        data: function () {
            return {
                getWidth: getWidth('kanban'),
                staff: [
                    { id: 0, name: "No name", image: "https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png", common: true },
                    { id: 1, name: "Andrew Fuller", image: "https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png" },
                    { id: 2, name: "Janet Leverling", image: "https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png" },
                    { id: 3, name: "Steven Buchanan", image: "https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png" }
                ],
                kanbanColumns: [
                    { text: 'Backlog', dataField: 'new', access: 'none', maxItems: 5 },
                    { text: 'In Progress', dataField: 'work', access: 'none', maxItems: 5 },
                    { text: 'Done', dataField: 'done', access: 'none', maxItems: 5, collapseDirection: 'right' }
                ],
                kanbanSourceConnected1: [
                    { id: 3, status: 'done', text: 'Combine Orders', tags: 'orders, combine', color: '#5dc3f0', resourceId: 3 },
                    { id: 4, status: 'work', text: 'Change Billing Address', tags: 'billing', color: '#6bbd49', resourceId: 1 },
                    { id: 5, status: 'new', text: 'One item added to the cart', tags: 'cart', color: '#5dc3f0', resourceId: 3 },
                    { id: 6, status: 'work', text: 'Login 404 issue', tags: 'issue, login', color: '#6bbd49' }
                ],
                kanbanSourceConnected2: [
                    { id: 0, status: 'new', text: 'State opened does not contain items', tags: 'state, open', color: '#5dc3f0', resourceId: 1 },
                    { id: 1, status: 'done', text: 'Patch #2043', tags: 'patch', color: '#6bbd49', personId: 2 },
                    { id: 2, status: 'work', text: 'Change payment method', tags: 'payment', color: '#6bbd49', resourceId: 2 }
                ]
            }
        }
    }
</script>
<style>
    #kanbanBox1 {
        width: 400px;
        height: 400px;
        float: left;
        padding: 2px;
    }
    #kanbanBox2 {
        width: 400px;
        height: 400px;
        float: left;
        padding: 2px;
    }
    #outerBox1 {
        float: left;
        padding: 5px;
        margin: 2px;
        background-color: #6bbd49;
        color: #fff;
    }
    #outerBox2 {
        color: #fff;
        float: left;
        padding: 5px;
        margin: 2px;
        background-color: #5dc3f0;
    }
</style>

Sets or gets the height of the jqxKanban column headers when columns are expanded.

<template>
  <JqxKanban ref="myKanban"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
    :headerHeight="50"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    }
  }
</script>

Sets or gets the width of the jqxKanban column headers when columns are collapsed.

<template>
  <JqxKanban ref="myKanban"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
    :headerWidth="50"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    }
  }
</script>

Sets or gets the kanban's height.

<template>
  <JqxKanban ref="myKanban"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    }
  }
</script>

This function is called when an item is being rendered.

<template>
  <JqxKanban ref="myKanban"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
    :itemRenderer="itemRenderer"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    },
    methods: {
      itemRenderer: function (element, item, resource) {
        $(element).find(".jqx-kanban-item-text").html("<strong>" + resource.name + "</strong>");
      }
    }
  }
</script>

This function is called when the jqxKanban is initialized and the binding is completed.

<template>
  <JqxKanban ref="myKanban"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
    :ready="ready"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    },
    methods: {
      ready: function () {
        alert('ready');
      }
    }
  }
</script>

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

<template>
  <JqxKanban ref="myKanban"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
    :rtl="true"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    }
  }
</script>

The source object represents a set of key/value pairs. Every set is a jqxKanban item.

<template>
  <JqxKanban ref="myKanban"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    }
  }
</script>

The resources object represents a set of key/value pairs. It contains information about items, associated to the jqxKanban cards.

<template>
  <JqxKanban ref="myKanban"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    }
  }
</script>

Sets or gets new HTML structure about kanban's cards.

<template>
  <JqxKanban ref="myKanban"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
    :template="template"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        template: "<div class='jqx-kanban-item' id=''><div class='jqx-kanban-item-color-status'></div><div class='jqx-kanban-item-text'></div></div>",
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    }
  }
</script>

Sets or gets the default values about kanban's cards.

<template>
    <JqxKanban ref="myKanban"
               :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
               :templateContent="templateContent" />
</template>
<script>
    import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
    export default {
        components: {
            JqxKanban
        },
        data: function () {
            return {
                templateContent: { status: 'new', text: 'New text', content: 'New content', tags: 'New, taggs', color: 'green', resourceId: 0, className: '' },
                source: new jqx.dataAdapter(this.source),
                columns: [
                    { text: "Backlog", dataField: "new", maxItems: 5 },
                    { text: "In Progress", dataField: "work", maxItems: 5 },
                    { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
                ],
                resources: new jqx.dataAdapter(this.resourcesSource)
            }
        },
        beforeCreate: function () {
            const fields = [
                { name: 'status', map: 'state', type: 'string' },
                { name: 'text', map: 'label', type: 'string' },
                { name: 'tags', type: 'string' },
                { name: 'color', map: 'hex', type: 'string' },
                { name: 'resourceId', type: 'number' }
            ];
            this.source = {
                localData: [
                    { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                    { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                    { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
                    { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
                    { id: '9034', state: 'work' }
                ],
                dataType: 'array',
                dataFields: fields
            };
            this.resourcesSource = {
                localData: [
                    { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
                    { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
                    { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
                    { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
                    { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
                    { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
                    { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
                    { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
                    { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
                    { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
                ],
                dataType: 'array',
                dataFields: [
                    { name: 'id', type: 'number' },
                    { name: 'name', type: 'string' },
                    { name: 'image', type: 'string' },
                    { name: 'common', type: 'boolean' }
                ]
            };
        }
    }
</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>
  <JqxKanban ref="myKanban"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
    :theme="'material'"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    }
  }
</script>

Sets or gets the kanban's width.

<template>
  <JqxKanban ref="myKanban"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    }
  }
</script>

This event is triggered when jqxKanban column is clicked.

Code examples

Bind to the columnAttrClicked event of jqxKanban.

<template>
  <JqxKanban ref="myKanban" @columnAttrClicked="onColumnAttrClicked($event)"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    },
    methods: {
      onColumnAttrClicked: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when jqxKanban column is collapsed.

Code examples

Bind to the columnCollapsed event of jqxKanban.

<template>
  <JqxKanban ref="myKanban" @columnCollapsed="onColumnCollapsed($event)"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    },
    methods: {
      onColumnCollapsed: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when jqxKanban column is expanded.

Code examples

Bind to the columnExpanded event of jqxKanban.

<template>
  <JqxKanban ref="myKanban" @columnExpanded="onColumnExpanded($event)"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    },
    methods: {
      onColumnExpanded: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when some element of an item is clicked.

Code examples

Bind to the itemAttrClicked event of jqxKanban.

<template>
  <JqxKanban ref="myKanban" @itemAttrClicked="onItemAttrClicked($event)"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    },
    methods: {
      onItemAttrClicked: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when an item is moved.

Code examples

Bind to the itemMoved event of jqxKanban.

<template>
  <JqxKanban ref="myKanban" @itemMoved="onItemMoved($event)"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    },
    methods: {
      onItemMoved: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Add new item in widget.

<template>
  <JqxKanban ref="myKanban"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    },
    mounted: function () {
      this.$refs.myKanban.addItem({ status: "new", text: "New Task", tags: "new task", color: "#5dc3f0" });
    }
  }
</script>

Add new item in widget.

<template>
  <JqxKanban ref="myKanban"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    },
    mounted: function () {
      this.$refs.myKanban.destroy();
    }
  }
</script>

Returs all items as an array of objects.

<template>
  <JqxKanban ref="myKanban"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    },
    mounted: function () {
      const value = this.$refs.myKanban.getColumn('work');
    }
  }
</script>

Returs all items as an array of objects.

<template>
  <JqxKanban ref="myKanban"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    },
    mounted: function () {
      const value = this.$refs.myKanban.getColumnItems('work');
    }
  }
</script>

Returs all items as an array of objects.

<template>
  <JqxKanban ref="myKanban"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    },
    mounted: function () {
      const value = this.$refs.myKanban.getItems();
    }
  }
</script>

Removes an item.

<template>
  <JqxKanban ref="myKanban"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    },
    mounted: function () {
      this.$refs.myKanban.removeItem('1161');
    }
  }
</script>

Update an item.

<template>
  <JqxKanban ref="myKanban"
    :width="600" :height="500" :columns="columns" :source="source" :resources="resources"
  />
</template>
 
<script>
  import JqxKanban from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxkanban.vue';
 
  export default {
    components: {
      JqxKanban
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: "Backlog", dataField: "new", maxItems: 5 },
          { text: "In Progress", dataField: "work", maxItems: 5 },
          { text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
        ],
        resources: new jqx.dataAdapter(this.resourcesSource)
      }
    },
    beforeCreate: function () {
      const fields = [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
      ];
      this.source = {
        localData: [
          { id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
          { id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
          { id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
          { id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
          { id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
        ],
        dataType: 'array',
        dataFields: fields
      }; 
      this.resourcesSource = {
        localData: [
          { id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
          { id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
          { id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
          { id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
          { id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
          { id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
          { id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
          { id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
          { id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
          { id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
        ],
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'number' },
          { name: 'name', type: 'string' },
          { name: 'image', type: 'string' },
          { name: 'common', type: 'boolean' }
        ]
      };
    },
    mounted: function () {
      this.$refs.myKanban.updateItem('1161',{ 'status': 'new', 'text': 'Task', 'tags': 'task', 'color': '#5dc3f0', 'resourceId': 3 });
    }
  }
</script>