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