Knockout example using Card Template

[Jason]

Is there any demos with Knockout and custom templates, and in particular binding card fields to the template?

Regards

Jason Coley

[Buvana Sathasivam]

  

Hi Jason,   

  

Thanks for using Syncfusion products.   

  

Templates are used to create custom card layout as per your convenience.  HTML templates can be specified in the template property of the cardSettings as an ID of the template’s HTML element.  Kanban fields property can be used for mapping fields from the dataSource.  If you are wish to customize the Kanban card, then use cardSettings property.  Please refer to the following code.   

  

  

<div id="Kanban" data-bind="ejKanban: {……  

                                 cardSettings: card   

                                    }"></div>   // binding values from ViewModel to HTML elements   

   

 

  

  

<script id="cardtemplate" type="text/x-jsrender">               // Here customize the Kanban card 

        <table class="e-templatetable">   

           <colgroup>   

               <col width="10%">   

               <col width="90%">   

          </colgroup>   

          <tbody>   

           <tr>               

            <td class="details">   

                <table>   

                    <colgroup>   

                        <col width="10%">   

                        <col width="90%">   

                    </colgroup>   

                    <tbody>   

                        <tr>   

                            <td class="CardHeader"><b>   Assignee:</b></td>   

                            <td>{{:Assignee}}</td>   

                        </tr>                         

                        <tr>   

                            <td class="CardHeader"><b>   Summary: </b></td>   

                            <td>{{:Summary}}</td>   

                        </tr>   

                        <tr>   

                            <td class="CardHeader"><b>   Type: </b></td>   

                            <td>{{:Type}}</td>   

                        </tr>                           

                    </tbody>   

                </table>   

            </td>   

           </tr>   

        </tbody>   

    </table>        

    </script>   

 

  

  

var card = {   

                    template: "#cardtemplate",         // Template loading              

                };   

   

window.kanbanData = {   

        ……   

                card: ko.observable(card),                      // update underlying ViewModel data   

        ……   

};   

 

  

Please refer to the following UG document: https://help.syncfusion.com/js/kanban/cards#template   

  

API documents:    

https://help.syncfusion.com/api/js/ejkanban#members:fields    

https://help.syncfusion.com/api/js/ejkanban#members:cardsettings-template  

  

Please refer to the following link: https://www.jsviews.com/#jsobservable    

  

We have prepared a Kanban sample demo with template for your reference.   

  

Sample:    http://www.syncfusion.com/downloads/support/forum/130027/ze/knockout_kanban_sample296060237  

   

Regards,   

Buvana S.