Use List of employees for swimlaneSettings in Kanban

[Adrien Pech]

Hello,

in my kanban component I would like to use a list of employees for the swimlanes.

Currently only the employees are selected that are also present in the data for the individual cards. So is there a way to bind the array of employees to the swimlaneSettings, so that also those are displayed that are not present in the data for the cards?

Best Regards,

Adrien P.

[Vinitha Jeyakumar]

Hi Adrien, 

 

 

Greetings from Syncfusion support 

 

 

We have validated your query “Use List of employees for swimlaneSettings in Kanban” 

 

We want some more information about your requirement. Do you want to show empty Swimlane rows even when no data is presented on the corresponding rows? 

 

Please share your exact requirement that will be helpful for us to provide you a prompt solution. 

 

Regards, 

Vinitha 

[Adrien Pech]

Hello Vinitha,

"Do you want to show empty Swimlane rows even when no data is presented on the corresponding rows?"

Yes, that is exactly what I would like to achieve. Just like in the documentation, but I don't know how to make it work with my use case. (https://ej2.syncfusion.com/angular/documentation/kanban/swimlane/#create-empty-row)

In the attachment you can also find my kanban component. In the file datasource.ts is the employee list (employee) and the card data (kanbanData).

Best Regards,

Adrien P.

Attachment: syncfusionKanban_5ba79ba7.zip

[Vinitha Jeyakumar]

Hi Adrien, 

 

 

Good day to you, 

 

 

We have validated your query “Use List of employees for swimlaneSettings in Kanban” 

 

Your requirement to show empty Swimlane rows even when no data is presented on the corresponding rows can be achieved by using sortComparer property of SwimlaneSettings, in which we can push the data to be added into the array of arguments and return them. Please check the code below, 

 

Code snippet: 

public swimlaneSettings: SwimlaneSettingsModel = { 

    sortComparer: this.customSorting, 

  }; 

customSorting(args) : void { 

    //debugger; 

    args.push({ keyField: 'Karita Välimaa', textField: 'Karita Välimaa' }); 

    args.push({ keyField: 'Cesio Marcelo', textField: 'Cesio Marcelo' }); 

    args.push({ keyField: 'Taija Seikola', textField: 'Taija Seikola' }); 

    args.push({ keyField: 'Savanna Goodbody', textField: 'Savanna Goodbody' }); 

    args.push({ keyField: 'Cotman Whitfoot', textField: 'Cotman Whitfoot' }); 

    args.push({ 

    keyField: 'Marigold Bolger-Baggins', 

      textField: 'Marigold Bolger-Baggins', 

    }); 

    return args; 

  } 

 

Sample: https://stackblitz.com/edit/angular-8ecg8p?file=app.component.ts 

 

Please check the sample and code snippet and let us know if it satisfies your requirement. 

 

Regards, 

Vinitha 

[Adrien Pech]

Hello again,

This is almost perfect. I just wonder if you can add the data a little bit more dynamically. I tried to add the data as follows, 

but unfortunately this did not work.

Thank you already for your efforts!

Best Regards,

Adrien P.

[Vinitha Jeyakumar]

Hi Adrien, 

 

 

Good day to you, 

 

 

We have further validated your query “I just wonder if you can add the data a little bit more dynamically” 

 

Yes, we can add the data dynamically using the for loop conditions to push the data into the Kanban. Please check the code below, 

 

Code snippet: 

customSorting(args) : void { 

    this.assigneeData = employee; 

    this.len = args.length; 

    for (let j = 0; j< this.len; j++) { 

      args.pop(); 

    } 

    for (let i = 0; i< this.assigneeData.length; i++) { 

      args.push({ 

        keyField: this.assigneeData[i], 

        textField: this.assigneeData[i], 

      }); 

    } 

            return args; 

  } 

 

Sample: https://stackblitz.com/edit/angular-8ecg8p-c9n1ds?file=app.component.ts 

 

Please check the code snippet and sample and let us know if it satisfies your requirement. 

 

Regards, 

Vinitha 

[Adrien Pech]

Hey Vinitha,

Thank you so much, that's exactly what I needed!

Best Regards,

Adrien P.

[Vinitha Jeyakumar]

Hi Adrien, 

 

 

You are welcome. Please get back to us if you need any further assistance. 

 

Regards, 

Vinitha