columnRenderer
|
function
|
null
|
Sets or gets the columnRenderer property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { columns:columns, source:adapter, resources:resources, columnRenderer:columnRenderer, theme: "light" } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
columns
|
array
|
null
|
Sets or gets the columns property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { columns:columns, source:adapter, resources:resources, theme: "light" } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
connectWith
|
string
|
null
|
Sets or gets the connectWith property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { columns:columns, source:adapter, resources:resources, theme: "light", connectWith:"#jqxKanban2" } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
headerHeight
|
number
|
30
|
Sets or gets the headerHeight property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { columns:columns, source:adapter, resources:resources, theme: "light",headerHeight:50 } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
headerWidth
|
number
|
30
|
Sets or gets the headerWidth property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { columns:columns, source:adapter, resources:resources, theme: "light",headerWidth:50 } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
height
|
string | number
|
400
|
Sets or gets the height property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { columns:columns, source:adapter, resources:resources, theme: "light" } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
itemRenderer
|
function
|
null
|
Sets or gets the itemRenderer property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { columns:columns, source:adapter, resources:resources, theme: "light", itemRenderer:"itemRenderer" } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
ready
|
function
|
null
|
Sets or gets the ready property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { columns:columns, source:adapter, resources:resources, theme: "light", ready:"ready" } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
rtl
|
boolean
|
false
|
Sets or gets the rtl property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { columns:columns, source:adapter, resources:resources, theme: "light",rtl:true } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
source
|
array
|
null
|
Sets or gets the source property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { columns:columns, source:adapter, resources:resources, theme: "light" } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
resources
|
array
|
null
|
Sets or gets the resources property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { columns:columns, source:adapter, resources:resources, theme: "light" } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
template
|
string
|
''
|
Sets or gets the template property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { columns:columns, source:adapter, resources:resources, theme: "light", template:"template" } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
templateContent
|
object
|
null
|
Sets or gets the templateContent property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { columns:columns, source:adapter, resources:resources, theme: "light", templateContent:"templateContent" } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
theme
|
string
|
''
|
Sets or gets the theme property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { columns:columns, source:adapter, resources:resources, theme: "light" } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
width
|
string | number
|
600
|
Sets or gets the width property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { columns:columns, source:adapter, resources:resources, theme: "light" } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
|
columnAttrClicked
|
Event
|
|
Code examples
Bind to the columnAttrClicked event of jqxKanban.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { columns:columns, source:adapter, resources:resources, theme: "light" } window.onload = function() { document.querySelector( "jqx-kanban").addEventListener("columnAttrClicked", function(event) { // Your code here. }); }; </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
columnCollapsed
|
Event
|
|
Code examples
Bind to the columnCollapsed event of jqxKanban.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { columns:columns, source:adapter, resources:resources, theme: "light" } window.onload = function() { document.querySelector( "jqx-kanban").addEventListener("columnCollapsed", function(event) { // Your code here. }); }; </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
columnExpanded
|
Event
|
|
Code examples
Bind to the columnExpanded event of jqxKanban.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { columns:columns, source:adapter, resources:resources, theme: "light" } window.onload = function() { document.querySelector( "jqx-kanban").addEventListener("columnExpanded", function(event) { // Your code here. }); }; </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
itemAttrClicked
|
Event
|
|
Code examples
Bind to the itemAttrClicked event of jqxKanban.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { columns:columns, source:adapter, resources:resources, theme: "light" } window.onload = function() { document.querySelector( "jqx-kanban").addEventListener("itemAttrClicked", function(event) { // Your code here. }); }; </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
itemMoved
|
Event
|
|
Code examples
Bind to the itemMoved event of jqxKanban.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { columns:columns, source:adapter, resources:resources, theme: "light" } window.onload = function() { document.querySelector( "jqx-kanban").addEventListener("itemMoved", function(event) { // Your code here. }); }; </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
|
addItem
|
Method
|
|
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
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { } window.onload = function() { document.querySelector( "jqx-kanban").addItem(0,[object Object]); } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
destroy
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { } window.onload = function() { document.querySelector( "jqx-kanban").destroy(); } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
getColumn
|
Method
|
|
Parameter |
Type |
Description |
dataField |
string |
|
Return Value
Object
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-kanban").getColumn(); } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
getColumnItems
|
Method
|
|
Parameter |
Type |
Description |
dataField |
string |
|
Return Value
Array
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-kanban").getColumnItems(); } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
getItems
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
Object
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-kanban").getItems(); } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
removeItem
|
Method
|
|
Parameter |
Type |
Description |
itemId |
string |
Id of the item, which must be removed |
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { } window.onload = function() { document.querySelector( "jqx-kanban").removeItem(0); } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|
updateItem
|
Method
|
|
Parameter |
Type |
Description |
itemId |
string |
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
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Kanban Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var columnRenderer = function (element, collapsedElement, column) { } var resources = new jqx.dataAdapter({ 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 adapter = new jqx.dataAdapter( { 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: [ { 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 columns = [ { text: "Backlog", dataField: "new" }, { text: "In Progress", dataField: "work" }, { text: "Done", dataField: "done" } ]; JQXElements.settings[ "kanbanSettings"] = { } window.onload = function() { document.querySelector( "jqx-kanban").updateItem(0,[object Object]); } </script></head><body> <jqx-kanban settings="kanbanSettings"></jqx-kanban>
|