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