jqwidgets-framework

<!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">