Hi Mehran,
How did you try to set Kanban’s swimlanes in your code?
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

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/

Hi,

To reapply swimlanes, you will need to set the property of the Kanban again. They are not updated automatically.

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

Hi Milan Unjiya,

If you want to get the swimlane when you drop an kanban item I have created a quick code snippet on how to achieve this functionality:

document.getElementById('kanban').addEventListener('dragEnd', (event) => {
console.log(event.detail.data.Item.data.swimlane);
});

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

</div>

• This reply was modified 4 years ago by Yavor Dashev.