customized card content

Question

Hi,I want to customize the content of the card and I've two questions of how to do that:1) The general way (template & JsRender) is described in the documentation (https://help.syncfusion.com/aspnetmvc/kanban/cards#template) -> ok. If I want to extend the default layout - e.g. add another textline - it seems it's much effort to rebuild the default layout as template. Is the structure (template/css) for the default layout available, so I can use and customize it?2) A second way of customizing could be to handle the QueryCellInfo Event and to manipulate the content. I found some Information about that in https://www.syncfusion.com/forums/134541/click-icon-in-card-to-open-edit-dialog. It's not really clear to me, how that event works. Will the event be fired when the card was already rendered and I have to change the html of the card or is there a way to manipulate e.g. the data for the title before the card is rendered? Are there any (API) documentations that may help me?Best regards,Patrick

Selvamani Sankarappan · Answer

Hi Patrick, 
 
Thanks for contacting Syncfusion support. 
 
Query:  Is the structure (template/css) for the default layout available, so I can use and customize it? 
 
You can customize the template structure using JSRender template and map this script template Id to the CardSettings of template field. We have customized the card structure as like default card demo using template. Also, you can customize the structure based on your application needs.Please refer to the following demo: 
http://www.syncfusion.com/downloads/support/forum/137604/ze/SyncfusionMvcApplication64_-_Copy-111179634 
 
Query: Will the event be fired when the card was already rendered and I have to change the html of the card or is there a way to manipulate e.g. the data for the title before the card is rendered? 
 
The QueryCellInfo event will be triggered before the card element appened to the Kanban board. This event triggered before every card appended to the board. Yes, you can use this event to change the title before appended to the Kanban board.  
 
Please let us know if you need any further assistance. 
 
Regards, 
 
Selvamani S.

Patrick Rogalski · Answer

Hi Selvamani,thanks for your answer. Yes, I need further assistance ;-)Query:  Is the structure (template/css) for the default layout available, so I can use and customize it?Unfortunately the template of your sample looks not exact the same like the default style. You can see it in the picture below. Thats what I meant with "it seems it's much effort to rebuild the default". Is a template available that contains the full default style ?Query: Will the event be fired when the card was already rendered and I have to change the html of the card or is there a way to manipulate e.g. the data for the title before the card is rendered?"Yes, you can use this event to change the title before appended to the Kanban board."That's what I tried, but it didn't worked. I've changed the Property in args data but the changes were not considered. I've modified your sample project, so you can see what I've done. Can youu please modify the code so the Title shows "Hello" instead of "Title".Regards,Patrick Attachment: SyncfusionMvcApplication64_6ba5ca33.zip

Selvamani Sankarappan · Answer

Hi Patrick, 
 
Thanks for the update. 
 
 Query: Is a template available that contains the full default style? 
 
No, currently we did not have template option for full default functionality style. But, we can customize the structure as like default using template as previously suggested. 
 
Query: That's what I tried, but it didn't worked. I've changed the Property in args data but the changes were not considered. I've modified your sample project, so you can see what I've done. Can youu please modify the code so the Title shows "Hello" instead of "Title". 
 
You can change the Title text by using queryCellInfo event. Please refer to the following code example: 
 




function queryCellInfo(args) { 
        $($(args.card).find(".e-primarykey")).html("Hello"); // you can pass which you need to change 
    } 
 
Please refer to the following sample: 
http://www.syncfusion.com/downloads/support/forum/134541/ze/SyncfusionMvcApplication64_-_Copy_(2)-1334366002 
 
Please let us know if you need any further assistance. 
 
Regards, 
 
Selvamani S.

Patrick Rogalski · Answer

Hi Selvamani,Query: Is a template available that contains the full default style? "But, we can customize the structure as like default using template as previously suggested. "What does that mean? You create a structure which has the layout of the default cards and provide it?queryCellInfo Ok, that was my first question. So I have to change the html of the card instead of manipulating the data. Am I right, that there are no detailed (API) documentations about that?Regards,Patrick

Selvamani Sankarappan · Answer

Hi Patrick, 
 
Thanks for the update. 
 
Query: Is a template available that contains the full default style?  
 
Currently, we did not have default template option for achieving the exact full default functionality structure. But, you need to customize the structure and can apply styles to achieve the default structure as like default using template option. In previous update, we have provided the sample demo for how to achieve the default layout with tag option and images.  
 
Query: Am I right, that there are no detailed (API) documentations about that? 
 
We will update the documentation in online as soon as possible. Please let us know if you need any further assistance. 
 
Regards, 
 
Selvamani S.