<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
"jqwidgets/styles/jqx.base.css"
type
=
"text/css"
/>
<
script
type
=
"text/javascript"
src
=
"scripts/jquery-1.11.1.min.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxcore.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxbuttons.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxsortable.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxkanban.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxdata.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqx-all.js"
>
</
script
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color:green;"
>
GeeksforGeeks
</
h1
>
<
h3
> jQWidgets jqxKanban getItems() Method </
h3
>
<
div
id
=
"jqx_Kanban"
></
div
>
<
input
type
=
"button"
style
=
"margin: 5px;"
id
=
"button_for_getItems"
value
=
"Get the items"
/>
<
div
id
=
"log"
></
div
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
var Data = new $.jqx.dataAdapter({
localData: [
{
id: "1",
status: "new",
Company_Name: "GeeksforGeeks",
About: "It is a CS portal"
}
],
dataFields: [
{
name: "id",
type: "string"
},
{
map: "About",
name: "tags",
type: "string"
},
{
map: "Company_Name",
name: "text",
type: "string"
},
{
name: "status",
type: "string"
},
]
});
var Data_Function = function () {
var Data_Adapter = new $.jqx.dataAdapter({
localData: [
{ name: "name" },
],
});
return Data_Adapter;
}
$('#jqx_Kanban').jqxKanban({
width: 300,
height: 110,
resources: Data_Function(),
source: Data,
columns: [
{
text: "Company",
dataField: "new"
}
]
});
$("#button_for_getItems").jqxButton({
width: 250
});
$('#jqx_Kanban').jqxKanban('addItem', {
status: "new", color: "green", text: "gfg"
});
$('#button_for_getItems').jqxButton().click(function () {
var a = $('#jqx_Kanban').jqxKanban('getItems');
$("#log").text(a[1].color + ", " + a[1].status + ", " + a[1].text);
})
});
</
script
>
</
center
>
</
body
>
</
html
>