Properties

NameTypeDefault
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 columnAttrClicked event of jqxKanban. 

/* 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 columnCollapsed event of jqxKanban. 

/* 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 columnExpanded event of jqxKanban. 

/* 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 itemAttrClicked event of jqxKanban. 

/* 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 itemMoved event of jqxKanban. 

/* 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

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