jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
1,286 lines • 59.6 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../../../Styles/jqx.apireference.css" type="text/css" />
<script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../../scripts/documentation.js"></script>
<meta name="keywords" content="jQuery, Kanban, jqxKanban, Kanban method" />
<meta name="description" content="This page represents the help documentation of the jqxKanban widget." />
<title>jqxKanban API Reference</title>
<script type="text/javascript">
$(document).ready(function () {
$(".documentation-option-type-click").click(function (event) {
$(event.target).parents('tr').next().find(".property-content").toggle();
});
});
</script>
</head>
<body>
<div id="properties">
<h2 class="documentation-top-header">
Properties
</h2>
<table class="documentation-table">
<tr>
<th>
Name
</th>
<th>
Type
</th>
<th>
Default
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span2'>columnRenderer</span>
</td>
<td>
<span>Function</span>
</td>
<td>
null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets a custom rendering function for jqxKanban's columns.
</p>
<h4>
Code examples
</h4>
<pre><code>
$('#jqxKanban').jqxKanban({
resources: resourcesAdapterFunc(),
source: dataAdapter2,
columns: [
{ text: "Ready", dataField: "ready", maxItems: 10 }
],
// render column headers.
columnRenderer: function (element, collapsedElement, column) {
var columnItems = $("#kanban2").jqxKanban('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 + ")");
}
});
</code></pre>
<br />
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-columnrenderer-property">columnRenderer is set to a custom function.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span13'>columns</span>
</td>
<td>
<span>Array</span>
</td>
<td>
null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the jqxKanban columns.
</p>
<h4>
Code examples
</h4>
<pre><code>
$('#jqxKanban').jqxKanban({
width: 600,
height: 500,
resources: resourcesAdapterFunc(),
source: dataAdapter,
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
]
});
</code></pre>
<br />
Column Properties:
<ul>
<li>text - sets the text in column's header.</li>
<li>dataField - sets the column datafield.</li>
<li>maxItems - sets maximum number of items per column.</li>
<li>collapsible - determines whether the column can be collapsed or not.</li>
<li>collapseDirection - determines the column's collapse direction - "left" or "right".</li>
<li>headerElement - gets the header element of the column after the widget is created.</li>
<li>collapsedHeaderElement - gets the collapsed header element of the column after the widget is created.</li>
<li>iconClassName - sets the class name of the header element's icon.</li>
</ul>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-template">columns is set to columns array.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span5'>connectWith</span>
</td>
<td>
<span>String</span>
</td>
<td>
null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets a connection to another jqxKanban widget. As a selector is used the id of the widget.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>connectWith</code> property.
</p>
<pre><code>$('#jqxKanban').jqxKanban({connectWith: '#jqxKanban2'});</code></pre>
<p>
Get the <code>connectWith</code> property.
</p>
<pre><code>var connectWith = $('#jqxKanban').jqxKanban('connectWith'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-connectwith-property">connectWith is set to '#jqxKanban2'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span8'>headerHeight</span>
</td>
<td>
<span>Number</span>
</td>
<td>
30
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the height of the jqxKanban column headers when columns are expanded.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>headerHeight</code> property.
</p>
<pre><code>$('#jqxKanban').jqxKanban({ headerHeight: 50 }); </code></pre>
<p>
Get the <code>autoClose</code> property.
</p>
<pre><code>var headerHeight = $('#jqxKanban').jqxKanban('headerHeight'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-header-properties">headerHeight is set to 30</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span63'>headerWidth</span>
</td>
<td>
<span>Number</span>
</td>
<td>
30
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the width of the jqxKanban column headers when columns are collapsed.
</p>
<b>Possible Values:</b>
<br />
<h4>
Code example
</h4>
<p>
Set the <code>headerWidth</code> property.
</p>
<pre><code>$('#jqxKanban').jqxKanban({headerWidth : 50}); </code></pre>
<p>
Get the <code>headerWidth</code> property.
</p>
<pre><code>var headerWidth = $('#jqxKanban').jqxKanban('headerWidth'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-header-properties">headerWidth is set to 50</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span1'>height</span>
</td>
<td>
<span>Number</span>
</td>
<td>
400
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the kanban's height.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>height</code> property.
</p>
<pre><code>$('#jqxKanban').jqxKanban({height: 500});</code></pre>
<p>
Get the <code>height</code> property.
</p>
<pre><code>var height = $('#jqxKanban').jqxKanban('height');</code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-header-properties">height is set to 500</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>itemRenderer</span>
</td>
<td>
<span>Function</span>
</td>
<td>
null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This function is called when an item is being rendered.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>itemRenderer</code> property.
</p>
<pre><code>
$('#kanban1').jqxKanban({
resources: resourcesAdapterFunc(),
source: dataAdapter,
itemRenderer: function(element, item, resource)
{
$(element).find(".jqx-kanban-item-color-status").html(resource.name);
},
columns: [
{ text: "Backlog", iconClassName: getIconClassName(), dataField: "new" },
{ text: "In Progress", iconClassName: getIconClassName(), dataField: "work" },
{ text: "Done", iconClassName: getIconClassName(), dataField: "done" }
]
});
</code></pre>
<p>
Get the <code>ready</code> property.
</p>
<pre><code>var ready = $('#jqxKanban').jqxKanban('ready'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-item-template">itemRenderer is set to 'function(){...}'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span3'>ready</span>
</td>
<td>
<span>Function</span>
</td>
<td>
null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This function is called when the jqxKanban is initialized and the binding is completed.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>ready</code> property.
</p>
<pre><code>$('#jqxKanban').jqxKanban({ ready: function(){ // Some code here. } }); </code></pre>
<p>
Get the <code>ready</code> property.
</p>
<pre><code>var ready = $('#jqxKanban').jqxKanban('ready'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-ready-property">ready is set to 'function(){...}'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span4'>rtl</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>
false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>rtl</code> property.
</p>
<pre><code>$('#jqxKanban').jqxKanban({ rtl: true }); </code></pre>
<p>
Get the <code>rtl</code> property.
</p>
<pre><code>var rtl = $('#jqxKanban').jqxKanban('rtl'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-rtl-property-1">rtl is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span12'>source</span>
</td>
<td>
<span>Array/Object</span>
</td>
<td>
null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>The source object represents a set of key/value pairs. Every set is a jqxKanban item.</p>
<h4>
Code examples
</h4>
<p>
Set the <code>source</code> property.
</p>
<pre><code>
var 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" }
];
var 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
};
var dataAdapter = new $.jqx.dataAdapter(source);
</code></pre>
<br />
Source item Properties:
<ul>
<li>id - unique identifier of the item. This property is required!</li>
<li>status - sets the column where the item will be stored. Associated to column's dataField property. This property is required!</li>
<li>text - sets the item's text. </li>
<li>content - sets the content area. Could be filled with text/images/widgets etc.</li>
<li>tags - sets taggs stored in item footer div.</li>
<li>color - sets unique status color of the item.</li>
<li>resourceId - contains resource id, associated to some resource from resources property.</li>
<li>className - sets individual css class about item.</li>
</ul>
<p>
Get the <code>source</code> property.
</p>
<pre><code>var source = $('#jqxKanban').jqxKanban('source'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-template">source is set to a dataAdapter instance.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span6'>resources</span>
</td>
<td>
<span>Array/Object</span>
</td>
<td>
null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
The resources object represents a set of key/value pairs.
It contains information about items, associated to the jqxKanban cards.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>resources</code> property.
</p>
<pre><code>
var 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" }
];
var 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
};
var dataAdapter = new $.jqx.dataAdapter(source);
var resourcesAdapterFunc = function () {
var resourcesSource =
{
localData: [
{ id: 0, name: "No name", image: "../../../../jqwidgets/styles/images/common.png", common: true },
{ id: 1, name: "Andrew Fuller", image: "../../../../images/andrew.png" },
{ id: 2, name: "Janet Leverling", image: "../../../../images/janet.png" },
{ id: 3, name: "Steven Buchanan", image: "../../../../images/steven.png" },
{ id: 4, name: "Nancy Davolio", image: "../../../../images/nancy.png" },
{ id: 5, name: "Michael Buchanan", image: "../../../../images/Michael.png" },
{ id: 6, name: "Margaret Buchanan", image: "../../../../images/margaret.png" },
{ id: 7, name: "Robert Buchanan", image: "../../../../images/robert.png" },
{ id: 8, name: "Laura Buchanan", image: "../../../../images/Laura.png" },
{ id: 9, name: "Laura Buchanan", image: "../../../../images/Anne.png" }
],
dataType: "array",
dataFields: [
{ name: "id", type: "number" },
{ name: "name", type: "string" },
{ name: "image", type: "string" },
{ name: "common", type: "boolean" }
]
};
var resourcesDataAdapter = new $.jqx.dataAdapter(resourcesSource);
return resourcesDataAdapter;
}
$('#kanban').jqxKanban({
width: 600,
height: 500,
resources: resourcesAdapterFunc(),
source: dataAdapter,
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
]
});
</code></pre>
<br />
Resource item Properties:
<ul>
<li>id - unique identifier of the resource.</li>
<li>name - name of the resource.</li>
<li>image - image of the resource.</li>
</ul>
<p>
Get the <code>resources</code> property.
</p>
<pre><code>var resources = $('#jqxKanban').jqxKanban('resources'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-template">resources is set to dataAdapter instance.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span51'>template</span>
</td>
<td>
<span>String</span>
</td>
<td>
false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Sets or gets new HTML structure about kanban's cards.</p>
<h4>
Code example
</h4>
<p>
Set the <code>template</code> property.
</p>
<pre><code>
$('#jqxKanban').jqxKanban({template : "<div class='jqx-kanban-item' id=''>"
+ "<div class='jqx-kanban-item-color-status'></div>"
+ "<div class='jqx-kanban-item-avatar'></div>"
+ "<div class='jqx-kanban-item-text'></div>"
+ "<div class='jqx-kanban-item-footer'></div>"
+ "</div>";
});
</code></pre>
<p>
Get the <code>template</code> property.
</p>
<pre><code>var template = $('#jqxKanban').jqxKanban('template'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-template-property">template is set to a custom html structure</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span16'>templateContent</span>
</td>
<td>
<span>Object</span>
</td>
<td>
null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the default values about kanban's cards.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>templateContent</code> property.
</p>
<pre><code>
var templateContent = { status: "new", text: "New text", content: "New content", tags: "New, taggs", color: "green", resourceId: 0, className: ""},
$('#jqxKanban').jqxKanban({ templateContent: templateContent });
</code></pre>
<p>
Get the <code>templateContent</code> property.
</p>
<pre><code>var selector = $('#jqxKanban').jqxKanban('templateContent'); </code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-template-content-property">templateContent is set to a custom object</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span9'>theme</span>
</td>
<td>
<span>String</span>
</td>
<td>
''
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the widget's theme.
</p>
jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.
In order to set a theme, you need to do the following:
<ul>
<li>
Include the theme's CSS file after jqx.base.css.<br />
The following code example adds the 'energyblue' theme.
<pre><code>
<pre><code><link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
</code></pre>
</code></pre>
</li>
<li>
Set the widget's theme property to 'energyblue' when you initialize it.
</li>
</ul>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-theme-property">theme is set to 'arctic'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span14'>width</span>
</td>
<td>
<span>Number</span>
</td>
<td>
600
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the kanban's width.
</p>
<h4>
Code examples
</h4>
<p>
Set the <code>width</code> property.
</p>
<pre><code>$('#jqxKanban').jqxKanban({width:850});</code></pre>
<p>
Get the <code>width</code> property.
</p>
<pre><code>var width = $('#jqxKanban').jqxKanban('width');</code></pre>
<div style="padding-bottom:5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-template">width is set to 600</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">
Events
</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span11'>columnAttrClicked</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when jqxKanban column is clicked.
</p>
<h4>
Code examples
</h4>
<p>
Bind to the <code>columnAttrClicked</code> event by type: jqxKanban.
</p>
<pre><code>
$('#jqxKanban').on('columnAttrClicked', function (event) {
var args = event.args;
var column = args.column;
var cancelToggle = args.cancelToggle; // false by default. Set to true to cancel toggling dynamically.
var attribute = args.attribute; // title, button
});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-events">Bind to the columnAttrClicked event by type: jqxKanban.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span10'>columnCollapsed</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when jqxKanban column is collapsed.
</p>
<h4>
Code examples
</h4>
<p>
Bind to the <code>columnCollapsed</code> event by type: jqxKanban.
</p>
<pre><code>
$('#jqxKanban').on('columnCollapsed', function (event) {
var args = event.args;
var column = args.column;
});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-events">Bind to the columnCollapsed event by type: jqxKanban.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>columnExpanded</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when jqxKanban column is expanded.
</p>
<h4>
Code examples
</h4>
<p>
Bind to the <code>columnExpanded</code> event by type: jqxKanban.
</p>
<pre><code>
$('#jqxKanban').on('columnCollapsed', function (event) {
var args = event.args;
var column = args.column;
});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-events">Bind to the columnExpanded event by type: jqxKanban.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span15'>itemAttrClicked</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when some element of an item is clicked.
</p>
<h4>
Code examples
</h4>
<p>
Bind to the <code>itemAttrClicked</code> event by type: jqxKanban.
</p>
<pre><code>
$('#jqxKanban').on('itemAttrClicked', function (event) {
var args = event.args;
var itemId = args.itemId;
var attribute = args.attribute; // template, colorStatus, content, keyword, text, avatar
});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-events">Bind to the itemAttrClicked event by type: jqxKanban.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span17'>itemMoved</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when an item is moved.
</p>
<h4>
Code examples
</h4>
<p>
Bind to the <code>itemMoved</code> event by type: jqxKanban.
</p>
<pre><code>
$('#kanban').on('itemMoved', function (event) {
var args = event.args;
var itemId = args.itemId;
var oldParentId = args.oldParentId;
var newParentId = args.newParentId;
var itemData = args.itemData;
var oldColumn = args.oldColumn;
var newColumn = args.newColumn;
});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-events">Bind to the itemMoved event by type: jqxKanban.</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">
Methods
</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span28'>addItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Add new item in widget.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>newItem</em></td>
<td><em>Object</em></td>
<td><em>
The content of the new jqxKanban item.<br />
newItem.status - String, newItem.text - String, newItem.content - String, newItem.tags - String, newItem.color - String, newItem.resourceId - String, newItem.className - String</em></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>
Code examples
</h4>
<p>
Invoke the <code>addItem</code> method.
</p>
<pre><code>
var newItem = { status: "new", text: "Cookies", content: "Content", tags: "cookies", color: "lightgreen", resourceId: 1 };
$('#jqxKanban').jqxKanban('addItem', newItem);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-template">add new item</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span18'>destroy</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Add new item in widget.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td><em></em></td>
<td><em></em></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>
Code examples
</h4>
<p>
Invoke the <code>destroy</code> method.
</p>
<pre><code>
$('#jqxKanban').jqxKanban('destroy');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-destroy-method">destroys the jqxKanban</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span19'>getColumn</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Returs all items as an array of objects.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>dataField</em></td>
<td><em>String</em></td>
<td><em></em></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em>
Column Properties:
<ul>
<li>text - sets the text in column's header.</li>
<li>dataField - sets the column datafield.</li>
<li>maxItems - sets maximum number of items per column.</li>
<li>collapsible - determines whether the column can be collapsed or not.</li>
<li>collapseDirection - determines the column's collapse direction - "left" or "right".</li>
<li>headerElement - gets the header element of the column after the widget is created.</li>
<li>collapsedHeaderElement - gets the collapsed header element of the column after the widget is created.</li>
<li>iconClassName - sets the class name of the header element's icon.</li>
</ul>
</div>
<h4>
Code examples
</h4>
<p>
Invoke the <code>getColumn</code> method.
</p>
<pre><code>
var column = $('#jqxKanban').jqxKanban('getColumn', 'work');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-getcolumn-method">get the column</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span20'>getColumnItems</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Returs all items as an array of objects.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>dataField</em></td>
<td><em>String</em></td>
<td><em></em></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Array</em> <em>
The content of the each jqxKanban item in the Array.<br />
item.status - String, item.text - String, item.content - String, item.tags - String, item.color - String, item.resourceId - Number, item.className - String</em>
</div>
<h4>
Code examples
</h4>
<p>
Invoke the <code>getColumnItems</code> method.
</p>
<pre><code>
var items = $('#jqxKanban').jqxKanban('getColumnItems');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-getcolumnitems-method">get the items</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span21'>getItems</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Returs all items as an array of objects.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td><em></em></td>
<td><em></em></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Array</em> <em>
The content of the each jqxKanban item in the Array.<br />
item.status - String, item.text - String, item.content - String, item.tags - String, item.color - String, item.resourceId - Number, item.className - String</em>
</div>
<h4>
Code examples
</h4>
<p>
Invoke the <code>getItems</code> method.
</p>
<pre><code>
var items = $('#jqxKanban').jqxKanban('getItems');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-getitems-method">get the items</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span22'>removeItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Removes an item.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>itemId</em></td>
<td><em>Stirng</em></td>
<td><em>Id of the item, which must be removed </em></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>
Code examples
</h4>
<p>
Invoke the <code>removeItem</code> method.
</p>
<pre><code>
$('#jqxKanban').jqxKanban('removeItem', "1236");
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-template">removes an item</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span23'>updateItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Update an item.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>itemId</em></td>
<td><em>Stirng</em></td>
<td><em>Id of the item which content must be replaced</em></td>
</tr>
<tr>
<td><em>newContent</em></td>
<td><em>Object</em></td>
<td><em>
The new content of the updated kanban's card.<br/>
newContent.status - String, newContent.text - String, newContent.content - String, newContent.tags - String, newContent.color - String, newContent.resourceID - String, newContent.className - String</em></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>
Code examples
</h4>
<p>
Invoke the <code>updateItem</code> method.
</p>
<pre><code>
var itemId = '12354';
var newContent = { text: "Cookies", content: "Content", tags: "cookies", color: "lightgreen", resourceId: 1, className: "standard" };
$('#jqxKanban').jqxKanban('updateItem', itemId, newContent); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqwidgets-kanban-template">update an item</a>
</div>
</div>
</td>
</tr>
</table>
<br />
</div>
</body>
</html>