React UI Components Documentation

Sets or gets the columnRenderer property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns} columnRenderer={columnRenderer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the columns property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the connectWith property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns} connectWith={'#jqxKanban2'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the headerHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns} headerHeight={50}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the headerWidth property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns} headerWidth={50}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the itemRenderer property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns} itemRenderer={itemRenderer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the ready property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns} ready={ready}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the source property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the resources property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns} resources={resources}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the template property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns} template={template}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the templateContent property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns} templateContent={templateContent}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns} theme={'energyblue'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when jqxKanban column is clicked.

Code examples

Bind to the columnAttrClicked event of jqxKanban.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myKanban.on('columnAttrClicked', (event) => {
            // Do Something...
        });
    }

    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when jqxKanban column is collapsed.

Code examples

Bind to the columnCollapsed event of jqxKanban.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myKanban.on('columnCollapsed', (event) => {
            // Do Something...
        });
    }

    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when jqxKanban column is expanded.

Code examples

Bind to the columnExpanded event of jqxKanban.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myKanban.on('columnExpanded', (event) => {
            // Do Something...
        });
    }

    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when some element of an item is clicked.

Code examples

Bind to the itemAttrClicked event of jqxKanban.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myKanban.on('itemAttrClicked', (event) => {
            // Do Something...
        });
    }

    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when an item is moved.

Code examples

Bind to the itemMoved event of jqxKanban.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myKanban.on('itemMoved', (event) => {
            // Do Something...
        });
    }

    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myKanban.addItem(0,[object Object]);
    }

    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myKanban.destroy();
    }

    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myKanban.getColumn();
    }

    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myKanban.getColumnItems();
    }

    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myKanban.getItems();
    }

    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myKanban.removeItem(0);
    }

    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKanban, { jqx } from 'jqwidgets-react/react_jqxkanban.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myKanban.updateItem(0,[object Object]);
    }

    render() {       
        let 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' }
        ];
    
        let source =
        {
            localData:
            [
                { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
                { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
                { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
            ],
            dataType: 'array',
            dataFields: fields
        };
 
        let dataAdapter = new jqx.dataAdapter(source);
 
        let columns =
        [
            { text: 'Backlog', dataField: 'new', maxItems: 10 }
        ];
        return (
            <JqxKanban ref='myKanban'
                width={'100%'} height={'100%'} source={dataAdapter} columns={columns}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));