Syncfusion Angular Kanban not showing Custom Card Template

[Fatur Gautama S]

Hi, iam using Angular 12.0.1 and @syncfusion/ej2-angular-kanban 19.1.67 and i try to explore Syncfusion's Kanban Card on it. And then i got an issue when i trying to create Card in Kanban using Card Template. In my project i use Shared Module, which contain KanbanModule and i try to export SharedModule on my PageModule . I use Angular like Syncfusion Kanban's documentation and demos. But when i comment (the Kanban Card Template) it can show its Card properly. Little help please, i need the Card Template for my Kanban for sure. Thank you

[Indrajith Srinivasan]

Hi Fatur, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query “But when i comment (the Kanban Card Template) it can show its Card properly”. We have prepared a sample for reproducing the reported issue using the Kanban card template but unfortunately, we couldn’t find any issues with the rendering. We have also shared the ensured sample from our end.

 

In the below sample the following are configured, 

• Used the version 19.1.67 and Angular 12 project.
• Rendering the Kanban component in the shared module.
• Rendering the card with templates.

Sample: https://www.syncfusion.com/downloads/support/forum/166795/ze/Synfusion_kanban-243328664 

 

Can you please share us the following details ? 

• Are you able to reproduce the reported issue in the above shared sample ?
• Can you please share us, the screenshot of the error log if any ?
• If possible, can you replicate the issue in the above sample and revert back to us ?

The above details will be helpful for us to further validate on the reported issue and assist you better. 

 

Regards, 

Indrajith 

[David]

I have the same issue with a production project. I can run the sample using the same Node and Syncfusion versions as our prod build. The Sample works fine but our prod build (a much more complex project) renders any  #cardSettingsTemplate as per this screenshot, also trying to add a headertemplate causes the Kanban control to not render. We're using the Kanban control 19.4.41.

Was there a resolution to the above or a more in-depth debugging process? Looks like the template function is not being called for some reason. 

 

[David]

After much messing around and debugging code, ensuring the Syncfusion controls were the same version fixed this for me. It meant deleting package.json.lock deleting the @syncfusion folder in node_modules, and updating package.json to remove the specified versions and replace with the latest.

https://www.syncfusion.com/forums/144809/str-match-is-not-a-function?reply=NtIG1A

Thanks!

[Buvana Sathasivam]

Hi David, 

Thank you for your update. 

We are happy to hear your problem has been solved.  Please let us know if you have any further queries.  

Regards, 

Buvana S 

[Ric Phil]

Hey I remember I had a similar issue while working with Syncfusion Angular Kanban for a bot development project. I remember that the headerField property of cardSettings is mandatory to render the cards in the Kanban board. It acts as a unique field that is used to avoid the duplication of card data. You can not change the headerField of mapped data value using the updateCard public method or server-side update of data.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

This is the code that I used to update the custom card template. 

The card’s content is fetched from data source using the contentField property, which is placed inside the cardSettings property. If the contentField property is not used, card is rendered with empty content. I have worked on several chatbot development services projects and normally I select the multiple cards randomly using Ctrl + mouse click and select the multiple cards continuously using Shift + mouse click action on Kanban board. Set Multiple in selectionType to enable the multiple selection in a board.

[Buvana Sathasivam]

Hi Ric, 

Yes, the header field is mandatory to render the Kanban component. But, contentField is not mandatory when specifying a card template. Please see below the code and sample for the card template. 

app.component.html 

 <ejs-kanban [cardSettings]="cardSettings"> 

  <ng-template #cardSettingsTemplate let-data> 

  <div class="card-template"> 

          <div class="card-template-wrap"> {{ data.Title }} </div> 

</div> 

….. 

  </ng-template> 

    </ejs-kanban> 

app.component.ts 

import { CardSettingsModel } from '@syncfusion/ej2-angular-kanban'; 

export class AppComponent { 

  public cardSettings: CardSettingsModel = { 

    headerField: 'Id' 

  }; 

} 

Sample: https://stackblitz.com/edit/angular-b6wqk7?file=app.component.html 

Demo: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/kanban/card-template 

Documentation: https://ej2.syncfusion.com/angular/documentation/kanban/cards/#template 

 

If you still have not solved your problem, can you please share your sample code or modify the above sample to check your issue? 

Regards, 

Buvana S 

[Arturo Schloss]

Any solution for this problem? 

I have the same problem...

[Vinitha Jeyakumar]

Hi Arturo,

Can you please update us with some more information about your issue for our better understanding.

Please provide the exact issue replication steps along with video illustration and if possible share the runnable issue reproducing sample.

We also want to let you know that header field is mandatory to render the Kanban component, and it act as a unique field . But content Field is not mandatory when specifying a card template.

Regards,

Vinitha

[Tuariq]

Hi Team,

I am facing some what similar issue though my project version is different. Any solution?
I have described the problem in detailed along with demo project here: https://www.syncfusion.com/forums/181810/unable-to-use-custom-card-template-in-syncfusion-angular-kanban-with-angular-versions-less

[Vinothkumar Yuvaraj]

Hi Fatur,

Based on your attached sample project, we suggest that you to update the other component package version to the latest to resolve the problem. To assist you further, we have created a sample using your shared sample with the new package version. Please see the attached sample for your reference.

Additionally, we noticed that you are using the getString method in card templates. If you remove this method, the card is rendered properly. Could you please provide more details on why you are using this method? We want to understand your use case better and offer tailored assistance.

Regards,

Vinothkumar

Attachment: KanbanComponent_537a5594.zip