Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #102189
    Mehran
    Member
    Up
    0
    Down

    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?

    #102190
    admin
    Keymaster
    Up
    0
    Down

    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/

    #102191
    Mehran
    Member
    Up
    0
    Down

    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.
     

    #102192
    admin
    Keymaster
    Up
    0
    Down

    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/

    #102402
    Milan Unjiya
    Participant
    Up
    0
    Down

    How to get updated swimlanes dataField value ?

    #102407
    admin
    Keymaster
    Up
    0
    Down

    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/

    #102409
    Milan Unjiya
    Participant
    Up
    0
    Down

    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.

    #102413
    Yavor Dashev
    Participant
    Up
    0
    Down

    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 2 weeks, 1 day ago by Yavor Dashev.
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.