Documentation

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

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.

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

Add new item in widget.

Code examples

Invoke the addItem method.

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

Add new item in widget.

Code examples

Invoke the destroy method.

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

Returs all items as an array of objects.

Code examples

Invoke the getColumn method.

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

Returs all items as an array of objects.

Code examples

Invoke the getColumnItems method.

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

Returs all items as an array of objects.

Code examples

Invoke the getItems method.

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

Removes an item.

Code examples

Invoke the removeItem method.

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

Update an item.

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