| Name | Type | Default |
|---|---|---|
| columnRenderer | (element?: KanbanColumnRenderer['element'], collapsedElement?: KanbanColumnRenderer['collapsedElement'], column?: KanbanColumnRenderer['column']) => void | null |
|
Interface KanbanColumnRenderer {
element?: any; collapsedElement?: any; column?: any; } Sets or gets a custom rendering function for jqxKanban's columns. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
columnRenderer: (element: any, collapsedElement: any, column: any): any => {
var columnItems = this.$refs.myKanban.getColumnItems(column.dataField).length;
/* update header's status.*/
element.find(".jqx-kanban-column-header-status").html(" (" + columnItems + "/" + column.maxItems + ")");
/* update collapsed header's status.*/
collapsedElement.find(".jqx-kanban-column-header-status").html(" (" + columnItems + "/" + column.maxItems + ")");
},
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public render() {
return (
<JqxKanban ref={this.myKanban}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources} columnRenderer={this.state.columnRenderer}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| columns | Array<KanbanColumns> | null |
|
KanbanCollapseDirection: "left" | "right"
Interface KanbanColumns { text?: string; dataField?: string; maxItems?: number; collapsible?: boolean; collapseDirection?: KanbanCollapseDirection; headerElement?: any; collapsedHeaderElement?: any; iconClassName?: string; } Sets or gets the jqxKanban columns. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public render() {
return (
<JqxKanban ref={this.myKanban}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| connectWith | string | null |
|
Sets a connection to another jqxKanban widget. As a selector is used the id of the widget. |
||
| headerHeight | number | string | 30 |
|
Sets or gets the height of the jqxKanban column headers when columns are expanded. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public render() {
return (
<JqxKanban ref={this.myKanban}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources} headerHeight={50}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| headerWidth | number | 30 |
|
Sets or gets the width of the jqxKanban column headers when columns are collapsed. Possible Values:/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public render() {
return (
<JqxKanban ref={this.myKanban}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources} headerWidth={50}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| height | string | number | 400 |
|
Sets or gets the kanban's height. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public render() {
return (
<JqxKanban ref={this.myKanban}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| itemRenderer | (element?: KanbanItemRenderer['element'], item?: KanbanItemRenderer['item'], resource?: KanbanItemRenderer['resource']) => void | null |
|
Interface KanbanItemRenderer {
element?: any; item?: any; resource?: any; } This function is called when an item is being rendered. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
itemRenderer: (element: any, item: any, resource: any): any => {
$(element).find(".jqx-kanban-item-text").html("<strong>" + resource.name + "</strong>");
},
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public render() {
return (
<JqxKanban ref={this.myKanban}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources} itemRenderer={this.state.itemRenderer}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| ready | () => void | null |
|
This function is called when the jqxKanban is initialized and the binding is completed. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
ready: (): any => {
alert('ready');
},
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public render() {
return (
<JqxKanban ref={this.myKanban}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources} ready={this.state.ready}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| rtl | boolean | false |
|
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public render() {
return (
<JqxKanban ref={this.myKanban}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources} rtl={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| source | any | null |
|
The source object represents a set of key/value pairs. Every set is a jqxKanban item. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public render() {
return (
<JqxKanban ref={this.myKanban}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| resources | any | null |
|
The resources object represents a set of key/value pairs. It contains information about items, associated to the jqxKanban cards. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public render() {
return (
<JqxKanban ref={this.myKanban}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| template | string | '' |
|
Sets or gets new HTML structure about kanban's cards. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
template: "<div class='jqx-kanban-item' id=''><div class='jqx-kanban-item-color-status'></div><div class='jqx-kanban-item-text'></div></div>",
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public render() {
return (
<JqxKanban ref={this.myKanban}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources} template={this.state.template}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| templateContent | any | null |
|
Sets or gets the default values about kanban's cards. |
||
| theme | string | '' |
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public render() {
return (
<JqxKanban ref={this.myKanban}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources} theme={'material'}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| width | string | number | 600 |
|
Sets or gets the kanban's width. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public render() {
return (
<JqxKanban ref={this.myKanban}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
Events |
||
| columnAttrClicked | Event | |
|
This event is triggered when jqxKanban column is clicked. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public render() {
return (
<JqxKanban ref={this.myKanban} onColumnAttrClicked={this.onColumnAttrClicked}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources}
/>
);
}
private onColumnAttrClicked(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| columnCollapsed | Event | |
|
This event is triggered when jqxKanban column is collapsed. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public render() {
return (
<JqxKanban ref={this.myKanban} onColumnCollapsed={this.onColumnCollapsed}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources}
/>
);
}
private onColumnCollapsed(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| columnExpanded | Event | |
|
This event is triggered when jqxKanban column is expanded. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public render() {
return (
<JqxKanban ref={this.myKanban} onColumnExpanded={this.onColumnExpanded}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources}
/>
);
}
private onColumnExpanded(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| itemAttrClicked | Event | |
|
This event is triggered when some element of an item is clicked. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public render() {
return (
<JqxKanban ref={this.myKanban} onItemAttrClicked={this.onItemAttrClicked}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources}
/>
);
}
private onItemAttrClicked(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| itemMoved | Event | |
|
This event is triggered when an item is moved. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public render() {
return (
<JqxKanban ref={this.myKanban} onItemMoved={this.onItemMoved}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources}
/>
);
}
private onItemMoved(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
Methods |
||
| Name | Arguments | Return Type |
| addItem | newItem | |
|
Add new item in widget. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public componentDidMount(): void {
this.myKanban.current!.addItem({ status: "new", text: "New Task", tags: "new task", color: "#5dc3f0" });
}
public render() {
return (
<JqxKanban ref={this.myKanban}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| destroy | None | |
|
Add new item in widget. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public componentDidMount(): void {
this.myKanban.current!.destroy();
}
public render() {
return (
<JqxKanban ref={this.myKanban}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| getColumn | dataField | |
|
Returs all items as an array of objects. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public componentDidMount(): void {
this.myKanban.current!.getColumn('work');
}
public render() {
return (
<JqxKanban ref={this.myKanban}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| getColumnItems | dataField | |
|
Returs all items as an array of objects. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public componentDidMount(): void {
this.myKanban.current!.getColumnItems('work');
}
public render() {
return (
<JqxKanban ref={this.myKanban}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| getItems | None | |
|
Returs all items as an array of objects. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public componentDidMount(): void {
this.myKanban.current!.getItems();
}
public render() {
return (
<JqxKanban ref={this.myKanban}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| removeItem | itemId | |
|
Removes an item. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public componentDidMount(): void {
this.myKanban.current!.removeItem('1161');
}
public render() {
return (
<JqxKanban ref={this.myKanban}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| updateItem | itemId, newContent | |
|
Update an item. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxKanban, { IKanbanProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxkanban';
class App extends React.PureComponent<{}, IKanbanProps> {
private myKanban = React.createRef<JqxKanban>();
constructor(props: {}) {
super(props);
const fields = [
{ name: 'id', type: 'string' },
{ name: 'status', map: 'state', type: 'string' },
{ name: 'text', map: 'label', type: 'string' },
{ name: 'tags', type: 'string' },
{ name: 'color', map: 'hex', type: 'string' },
{ name: 'resourceId', type: 'number' }
];
const source = {
localData: [
{ id: '1161', state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
{ id: '1645', state: 'work', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
{ id: '9213', state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 },
{ id: '6546', state: 'done', label: 'Edit Item Price', tags: 'price, edit', hex: '#5dc3f0', resourceId: 4 },
{ id: '9034', state: 'new', label: 'Login 404 issue', tags: 'issue login', hex: '#6bbd49' }
],
dataType: 'array',
dataFields: fields
};
const resourcesSource = {
localData: [
{ id: 0, name: 'No name', image: 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png', common: true },
{ id: 1, name: 'Andrew Fuller', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png' },
{ id: 2, name: 'Janet Leverling', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png' },
{ id: 3, name: 'Steven Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png' },
{ id: 4, name: 'Nancy Davolio', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png' },
{ id: 5, name: 'Michael Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Michael.png' },
{ id: 6, name: 'Margaret Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/margaret.png' },
{ id: 7, name: 'Robert Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/robert.png' },
{ id: 8, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Laura.png' },
{ id: 9, name: 'Laura Buchanan', image: 'https://www.jqwidgets.com/jquery-widgets-demo/images/Anne.png' }
],
dataType: 'array',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' },
{ name: 'common', type: 'boolean' }
]
};
this.state = {
source: new jqx.dataAdapter(source),
columns: [
{ text: "Backlog", dataField: "new", maxItems: 5 },
{ text: "In Progress", dataField: "work", maxItems: 5 },
{ text: "Done", dataField: "done", maxItems: 5, collapseDirection: "right" }
],
resources: new jqx.dataAdapter(resourcesSource)
}
}
public componentDidMount(): void {
this.myKanban.current!.updateItem('1161',{ 'status': 'new', 'text': 'Task', 'tags': 'task', 'color': '#5dc3f0', 'resourceId': 3 });
}
public render() {
return (
<JqxKanban ref={this.myKanban}
width={600} height={500} columns={this.state.columns} source={this.state.source}
resources={this.state.resources}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||