Kanban swimlanes

[Mehran]

Hi,
Is it possible to create swimlanes programatically at run time?
I couldn’t to update the swimlane property in the dataSource? Any fragment code please?

[admin]

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/

[Mehran]

Hi.
I needed to swim by priority, from how the component does it, I try to simulate it, that is:
//assign the value of the priority to the swimlane attribute
for (var i = 0; _kanban.dataSource.length < length; i++) {
_kanban.dataSource[i].swimlane = _kanban.dataSource[i].priority;
}
//then build UI
_kanban.swimlanes.push({ label: ‘Low priority’, dataField: ‘low’ });
_kanban.swimlanes.push({ label: ‘Normal priority’, dataField: ‘normal’ });
_kanban.swimlanes.push({ label: ‘High priority’, dataField: ‘high’ });
_kanban.refresh();
Interestingly enough, value of the swimlane did not change, they all were set to ‘low’.
I need to do this at run time, and not pre-determined. If only swimlane field could have been any of the fields of a task.
Please show me the proper way to do this.
 

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

[Milan Unjiya]

How to get updated swimlanes dataField value ?

[admin]

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/

[Milan Unjiya]

I have not to issue with reapplying, I need the latest value for an update in the database. I’m getting the object of oldValue and value but both swimlane has the same value.

I’m moving the task from swimlane_2 to swimlane_5, I need swimlane_5 but it’s returns swimlane_2.

Any example for getting updated swimlane value.

Your support is highly appreciated.

Thank you in advance.

[Yavor Dashev]

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 3 years, 4 months ago by Yavor Dashev.

[Author]

Posts