| Name | Type | Default |
|---|---|---|
| columnRenderer | Function | null |
|
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>
|
||
| columns | Array | null |
|
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>
|
||
| connectWith | String | null |
|
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>
|
||
| headerHeight | Number | 30 |
|
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>
|
||
| headerWidth | Number | 30 |
|
Sets or gets the width of the jqxKanban column headers when columns are collapsed. Possible Values:<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>
|
||
| height | String | Number | 400 |
|
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>
|
||
| itemRenderer | Function | null |
|
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>
|
||
| ready | Function | null |
|
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>
|
||
| rtl | Boolean | false |
|
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>
|
||
| source | Array | Object | null |
|
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>
|
||
| resources | Array | Object | null |
|
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>
|
||
| template | String | '' |
|
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>
|
||
| templateContent | Object | null |
|
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>
|
||
| theme | String | '' |
|
Sets the widget's theme.
<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>
|
||
| width | String | Number | 600 |
|
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>
|
||
Events |
||
| columnAttrClicked | Event | |
|
This event is triggered when jqxKanban column is clicked. Code examples
Bind to the
<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>
|
||
| columnCollapsed | Event | |
|
This event is triggered when jqxKanban column is collapsed. Code examples
Bind to the
<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>
|
||
| columnExpanded | Event | |
|
This event is triggered when jqxKanban column is expanded. Code examples
Bind to the
<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>
|
||
| itemAttrClicked | Event | |
|
This event is triggered when some element of an item is clicked. Code examples
Bind to the
<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>
|
||
| itemMoved | Event | |
|
This event is triggered when an item is moved. Code examples
Bind to the
<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>
|
||
Methods |
||
| Name | Arguments | Return Type |
| addItem | newItem | None |
|
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>
|
||
| destroy | None | None |
|
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>
|
||
| getColumn | dataField | Object |
|
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>
|
||
| getColumnItems | dataField | Array |
|
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>
|
||
| getItems | None | Object |
|
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>
|
||
| removeItem | itemId | None |
|
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>
|
||
| updateItem | itemId, newContent | None |
|
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>
|
||