## Properties

Name | Type | Default
--- | --- | ---
columnRenderer | Function | null
Sets or gets a custom rendering function for jqxKanban's columns.

#### Code examples

    $('#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 + ")");
        }
    });

Try it: columnRenderer is set to a custom function.
columns | Array | null
Sets or gets the jqxKanban columns.

#### Code examples

    $('#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" }
        ]
    });

Column Properties:

- text - sets the text in column's header.
- dataField - sets the column datafield.
- maxItems - sets maximum number of items per column.
- collapsible - determines whether the column can be collapsed or not.
- collapseDirection - determines the column's collapse direction - "left" or "right".
- headerElement - gets the header element of the column after the widget is created.
- collapsedHeaderElement - gets the collapsed header element of the column after the widget is created.
- iconClassName - sets the class name of the header element's icon.

Try it: columns is set to columns array.
connectWith | String | null
Sets a connection to another jqxKanban widget. As a selector is used the id of the widget.

#### Code examples

Set the `connectWith` property.

    $('#jqxKanban').jqxKanban({connectWith: '#jqxKanban2'});

Get the `connectWith` property.

    var connectWith = $('#jqxKanban').jqxKanban('connectWith');

Try it: connectWith is set to '#jqxKanban2'
headerHeight | Number | 30
Sets or gets the height of the jqxKanban column headers when columns are expanded.

#### Code examples

Set the `headerHeight` property.

    $('#jqxKanban').jqxKanban({ headerHeight: 50 });

Get the `autoClose` property.

    var headerHeight = $('#jqxKanban').jqxKanban('headerHeight');

Try it: headerHeight is set to 30
headerWidth | Number | 30
Sets or gets the width of the jqxKanban column headers when columns are collapsed. Possible Values:

#### Code example

Set the `headerWidth` property.

    $('#jqxKanban').jqxKanban({headerWidth : 50});

Get the `headerWidth` property.

    var headerWidth = $('#jqxKanban').jqxKanban('headerWidth');

Try it: headerWidth is set to 50
height | Number | 400
Sets or gets the kanban's height.

#### Code examples

Set the `height` property.

    $('#jqxKanban').jqxKanban({height: 500});

Get the `height` property.

    var height = $('#jqxKanban').jqxKanban('height');

Try it: height is set to 500
itemRenderer | Function | null
This function is called when an item is being rendered.

#### Code examples

Set the `itemRenderer` property.

    $('#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" }
        ]
    });

Get the `ready` property.

    var ready = $('#jqxKanban').jqxKanban('ready');

Try it: itemRenderer is set to 'function(){...}'
ready | Function | null
This function is called when the jqxKanban is initialized and the binding is completed.

#### Code examples

Set the `ready` property.

    $('#jqxKanban').jqxKanban({ ready: function(){ // Some code here. } });

Get the `ready` property.

    var ready = $('#jqxKanban').jqxKanban('ready');

Try it: ready is set to 'function(){...}'
rtl | Boolean | false
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

#### Code examples

Set the `rtl` property.

    $('#jqxKanban').jqxKanban({ rtl: true });

Get the `rtl` property.

    var rtl = $('#jqxKanban').jqxKanban('rtl');

Try it: rtl is set to true
source | Array/Object | null
The source object represents a set of key/value pairs. Every set is a jqxKanban item.

#### Code examples

Set the `source` property.

    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);

Source item Properties:

- id - unique identifier of the item. This property is required!
- status - sets the column where the item will be stored. Associated to column's dataField property. This property is required!
- text - sets the item's text.
- content - sets the content area. Could be filled with text/images/widgets etc.
- tags - sets taggs stored in item footer div.
- color - sets unique status color of the item.
- resourceId - contains resource id, associated to some resource from resources property.
- className - sets individual css class about item.

Get the `source` property.

    var source = $('#jqxKanban').jqxKanban('source');

Try it: source is set to a dataAdapter instance.
resources | Array/Object | null
The resources object represents a set of key/value pairs. It contains information about items, associated to the jqxKanban cards.

#### Code examples

Set the `resources` property.

    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" }
    ]
    });

Resource item Properties:

- id - unique identifier of the resource.
- name - name of the resource.
- image - image of the resource.

Get the `resources` property.

    var resources = $('#jqxKanban').jqxKanban('resources');

Try it: resources is set to dataAdapter instance.
template | String | false
Sets or gets new HTML structure about kanban's cards.

#### Code example

Set the `template` property.

    $('#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>";
    });

Get the `template` property.

    var template = $('#jqxKanban').jqxKanban('template');

Try it: template is set to a custom html structure
templateContent | Object | null
Sets or gets the default values about kanban's cards.

#### Code examples

Set the `templateContent` property.

                                var templateContent = { status: "new", text: "New text", content: "New content", tags: "New, taggs", color: "green", resourceId: 0, className: ""},
                                $('#jqxKanban').jqxKanban({ templateContent: templateContent });

Get the `templateContent` property.

    var selector = $('#jqxKanban').jqxKanban('templateContent');

Try it: templateContent is set to a custom object
theme | String | ''
Sets the widget's theme. 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:

- Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

      <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" />
      <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />

- Set the widget's theme property to 'energyblue' when you initialize it.

Try it: theme is set to 'arctic'
width | Number | 600
Sets or gets the kanban's width.

#### Code examples

Set the `width` property.

    $('#jqxKanban').jqxKanban({width:850});

Get the `width` property.

    var width = $('#jqxKanban').jqxKanban('width');

Try it: width is set to 600

## Events

columnAttrClicked | Event |
This event is triggered when jqxKanban column is clicked.

#### Code examples

Bind to the `columnAttrClicked` event by type: jqxKanban.

    $('#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
    });

Try it: Bind to the columnAttrClicked event by type: jqxKanban.
columnCollapsed | Event |
This event is triggered when jqxKanban column is collapsed.

#### Code examples

Bind to the `columnCollapsed` event by type: jqxKanban.

    $('#jqxKanban').on('columnCollapsed', function (event) {
        var args = event.args;
        var column = args.column;
    });

Try it: Bind to the columnCollapsed event by type: jqxKanban.
columnExpanded | Event |
This event is triggered when jqxKanban column is expanded.

#### Code examples

Bind to the `columnExpanded` event by type: jqxKanban.

    $('#jqxKanban').on('columnCollapsed', function (event) {
        var args = event.args;
        var column = args.column;
    });

Try it: Bind to the columnExpanded event by type: jqxKanban.
itemAttrClicked | Event |
This event is triggered when some element of an item is clicked.

#### Code examples

Bind to the `itemAttrClicked` event by type: jqxKanban.

    $('#jqxKanban').on('itemAttrClicked', function (event) {
        var args = event.args;
        var itemId = args.itemId;
        var attribute = args.attribute; // template, colorStatus, content, keyword, text, avatar
    });

Try it: Bind to the itemAttrClicked event by type: jqxKanban.
itemMoved | Event |
This event is triggered when an item is moved.

#### Code examples

Bind to the `itemMoved` event by type: jqxKanban.

    $('#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;
    });

Try it: Bind to the itemMoved event by type: jqxKanban.

## Methods

addItem | Method |
Add new item in widget.

Parameter | Type | Description
--- | --- | ---
newItem | Object | The content of the new jqxKanban item. newItem.status - String, newItem.text - String, newItem.content - String, newItem.tags - String, newItem.color - String, newItem.resourceId - String, newItem.className - String

Return Value
None

#### Code examples

Invoke the `addItem` method.

    var newItem = { status: "new", text: "Cookies", content: "Content", tags: "cookies", color: "lightgreen", resourceId: 1 };
    $('#jqxKanban').jqxKanban('addItem', newItem);

Try it: add new item
destroy | Method |
Add new item in widget.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `destroy` method.

    $('#jqxKanban').jqxKanban('destroy');

Try it: destroys the jqxKanban
getColumn | Method |
Returs all items as an array of objects.

Parameter | Type | Description
--- | --- | ---
dataField | String |

Return Value
Object Column Properties:

- text - sets the text in column's header.
- dataField - sets the column datafield.
- maxItems - sets maximum number of items per column.
- collapsible - determines whether the column can be collapsed or not.
- collapseDirection - determines the column's collapse direction - "left" or "right".
- headerElement - gets the header element of the column after the widget is created.
- collapsedHeaderElement - gets the collapsed header element of the column after the widget is created.
- iconClassName - sets the class name of the header element's icon.

#### Code examples

Invoke the `getColumn` method.

    var column = $('#jqxKanban').jqxKanban('getColumn', 'work');

Try it: get the column
getColumnItems | Method |
Returs all items as an array of objects.

Parameter | Type | Description
--- | --- | ---
dataField | String |

Return Value
Array The content of the each jqxKanban item in the Array.
item.status - String, item.text - String, item.content - String, item.tags - String, item.color - String, item.resourceId - Number, item.className - String

#### Code examples

Invoke the `getColumnItems` method.

    var items = $('#jqxKanban').jqxKanban('getColumnItems');

Try it: get the items
getItems | Method |
Returs all items as an array of objects.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
Array The content of the each jqxKanban item in the Array.
item.status - String, item.text - String, item.content - String, item.tags - String, item.color - String, item.resourceId - Number, item.className - String

#### Code examples

Invoke the `getItems` method.

    var items = $('#jqxKanban').jqxKanban('getItems');

Try it: get the items
removeItem | Method |
Removes an item.

Parameter | Type | Description
--- | --- | ---
itemId | Stirng | Id of the item, which must be removed

Return Value
None

#### Code examples

Invoke the `removeItem` method.

    $('#jqxKanban').jqxKanban('removeItem', "1236");

Try it: removes an item
updateItem | Method |
Update an item.

Parameter | Type | Description
--- | --- | ---
itemId | Stirng | Id of the item which content must be replaced
newContent | Object | The new content of the updated kanban's card. newContent.status - String, newContent.text - String, newContent.content - String, newContent.tags - String, newContent.color - String, newContent.resourceID - String, newContent.className - String

Return Value
None

#### Code examples

Invoke the `updateItem` method.

    var itemId = '12354';
    var newContent = { text: "Cookies", content: "Content", tags: "cookies", color: "lightgreen", resourceId: 1, className: "standard" };
    $('#jqxKanban').jqxKanban('updateItem', itemId, newContent);

Try it: update an item