React UI Components

Show Demo List

Theme:

Demo
App.htm
App.js

ReactJS Kanban demo. Kanban Item Template.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title id='Description'>
        ReactJS Kanban demo. Kanban Item Template.
    </title>
	<meta name="description" content="This React Kanban demo showcases how to use Kanban item template."/>	
	
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxkanban.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../scripts/demos.js"></script>

    <style>
        .jqx-kanban-item-color-status {
            width: 100%;
            height: 25px;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            position: relative;
            margin-top: 0px;
            top: 0px;
        }

        .jqx-kanban-item {
            padding-top: 0px;
        }

        .jqx-kanban-item-text {
            padding-top: 6px;
        }

        .jqx-kanban-item-avatar {
            top: 9px;
        }

        .jqx-kanban-template-icon {
            position: absolute;
            right: 3px;
            top: 12px;
        }
    </style>

</head>
<body>
    <div class="example-description" style="margin-bottom:3em">
        ReactJS Kanban demo. Kanban Item Template.
    </div>
    <div id="app"></div>
    <script src="../build/kanban_itemtemplate.bundle.js"></script>
</body>
</html>

import React from 'react';
import ReactDOM from 'react-dom';

import JqxKanban from '../../../jqwidgets-react/react_jqxkanban.js';
import JqxInput from '../../../jqwidgets-react/react_jqxinput.js';

class App extends React.Component {
    componentDidMount() {
        this.refs.myKanban.on('itemAttrClicked', (event) => {
            let args = event.args;
            if (args.attribute == 'template') {
                this.refs.myKanban.removeItem(args.item.id);
            }
        });

        let itemIndex = 0;
        this.refs.myKanban.on('columnAttrClicked', (event) => {
            let args = event.args;
            if (args.attribute == 'button') {
                args.cancelToggle = true;
                if (!args.column.collapsed) {
                    let colors = ['#f19b60', '#5dc3f0', '#6bbd49', '#732794']
                    this.refs.myKanban.addItem({
                        status: args.column.dataField,
                        text: '<div id="newItem' + itemIndex + '"/>',
                        tags: 'new task',
                        color: colors[Math.floor(Math.random() * 4)],
                        resourceId: Math.floor(Math.random() * 4)
                    });

                    let container = document.getElementById('newItem' + itemIndex);

                    let myInput = ReactDOM.render(
                        <JqxInput
                            width={'96%'} height={20} placeHolder={'(No Title)'}
                        />, container);

                    container.addEventListener('keydown', (event) => {
                        if (event.keyCode == 13) {
                            const element = <span>{myInput.val()}</span>;
                            ReactDOM.render(element, container);
                        }
                    }, true);

                    myInput.focus();
                    itemIndex++;
                }
            }
        });
    }
    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: [
                    { 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
            };

        let dataAdapter = new $.jqx.dataAdapter(source);

        let resourcesAdapterFunc = () => {
            let resourcesSource =
                {
                    localData: [
                        { id: 0, name: 'No name', image: '../jqwidgets/styles/images/common.png', common: true },
                        { id: 1, name: 'Andrew Fuller', image: '../images/andrew.png' },
                        { id: 2, name: 'Janet Leverling', image: '../images/janet.png' },
                        { id: 3, name: 'Steven Buchanan', image: '../images/steven.png' },
                        { id: 4, name: 'Nancy Davolio', image: '../images/nancy.png' },
                        { id: 5, name: 'Michael Buchanan', image: '../images/Michael.png' },
                        { id: 6, name: 'Margaret Buchanan', image: '../images/margaret.png' },
                        { id: 7, name: 'Robert Buchanan', image: '../images/robert.png' },
                        { id: 8, name: 'Laura Buchanan', image: '../images/Laura.png' },
                        { id: 9, name: 'Laura Buchanan', image: '../images/Anne.png' }
                    ],
                    dataType: 'array',
                    dataFields: [
                        { name: 'id', type: 'number' },
                        { name: 'name', type: 'string' },
                        { name: 'image', type: 'string' },
                        { name: 'common', type: 'boolean' }
                    ]
                };
            let resourcesDataAdapter = new $.jqx.dataAdapter(resourcesSource);
            return resourcesDataAdapter;
        }
        let getIconClassName = () => {
            switch (theme) {
                case 'darkblue':
                case 'black':
                case 'shinyblack':
                case 'ui-le-frog':
                case 'metrodark':
                case 'orange':
                case 'darkblue':
                case 'highcontrast':
                case 'ui-sunny':
                case 'ui-darkness':
                    return 'jqx-icon-plus-alt-white ';
            }
            return 'jqx-icon-plus-alt';
        }

        let template =
            '<div class="jqx-kanban-item" id="">'
            + '<div class="jqx-kanban-item-color-status"></div>'
            + '<div style="display: none;" class="jqx-kanban-item-avatar"></div>'
            + '<div class="jqx-icon jqx-icon-close jqx-kanban-item-template-content jqx-kanban-template-icon"></div>'
            + '<div class="jqx-kanban-item-text"></div>'
            + '<div style="display: none;" class="jqx-kanban-item-footer"></div>'
            + '</div>';

        let columns =
            [
                { text: "Backlog", iconClassName: getIconClassName(), dataField: "new" },
                { text: "In Progress", iconClassName: getIconClassName(), dataField: "work" },
                { text: "Done", iconClassName: getIconClassName(), dataField: "done" }
            ];

        let itemRenderer = (element, item, resource) => {
            element[0].getElementsByClassName('jqx-kanban-item-color-status')[0].innerHTML = '<span style="line-height: 23px; margin-left: 5px;">' + resource.name + '</span>';
        };
      
        return (
            <JqxKanban ref='myKanban'
                template={template} height={600} resources={resourcesAdapterFunc()}
                source={dataAdapter} columns={columns}
                itemRenderer={itemRenderer}
            />
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));