Reply To: Kanban swimlanes

[admin]

Hi Mehran,
Swimlanes are expected to be set by using the ‘swimlanes’ property.
Example:

const kanban = document.querySelector("#kanban");
  kanban.swimlanes = [
                { label: 'Client "Energo"', dataField: 'client1' },
                { label: 'Client "Sim-Prod Ltd."', dataField: 'client2', color: '#C90086' },
                { label: 'Other clients', dataField: 'other', color: '#03C7C0' }
            ];

Full example:

/// <reference path="../../source/typescript/smart.elements.d.ts" />
const data = [
    {
        text: 'Research of energy business',
        userId: 3,
        status: 'done',
        swimlane: 'client1'
    },
    {
        text: 'Create Gannt chart',
        userId: 2,
        status: 'inProgress',
        swimlane: 'client1'
    },
    {
        text: 'Develop prototype',
        userId: 4,
        status: 'testing',
        swimlane: 'client1'
    },
    {
        text: 'Data extrapolation',
        userId: 3,
        status: 'inProgress',
        swimlane: 'client1'
    },
    {
        text: 'Prepare requirements',
        userId: 1,
        status: 'done',
        swimlane: 'client2'
    },
    {
        text: 'Try out new simulation',
        userId: 1,
        status: 'testing',
        swimlane: 'client2'
    },
    {
        text: 'Create blueprints for new product',
        userId: 1,
        status: 'toDo',
        swimlane: 'client2'
    },
    {
        text: 'Calculate hours necessary for "EMV" project',
        userId: 2,
        status: 'toDo',
        swimlane: 'other'
    },
    {
        text: 'Distribute final product',
        userId: 4,
        status: 'done',
        swimlane: 'other'
    }
];
window.Smart('#kanban', class {
    get properties() {
        return {
            collapsible: true,
            dataSource: data,
            editable: true,
            userList: true,
            users: [
                { id: 0, name: 'Andrew', image: '../../images/people/andrew.png' },
                { id: 1, name: 'Anne', image: '../../images/people/anne.png' },
                { id: 2, name: 'Janet', image: '../../images/people/janet.png' },
                { id: 3, name: 'John', image: '../../images/people/john.png' },
                { id: 4, name: 'Laura', image: '../../images/people/laura.png' }
            ],
            columns: [
                { label: 'To do', dataField: 'toDo' },
                { label: 'In progress', dataField: 'inProgress' },
                { label: 'Testing', dataField: 'testing' },
                { label: 'Done', dataField: 'done' }
            ]
        };
    }
});
window.onload = () => {
  const kanban = document.querySelector("#kanban");
  kanban.swimlanes = [
                { label: 'Client "Energo"', dataField: 'client1' },
                { label: 'Client "Sim-Prod Ltd."', dataField: 'client2', color: '#C90086' },
                { label: 'Other clients', dataField: 'other', color: '#03C7C0' }
            ];
  
}

Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/