We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Knockout example using Card Template

Thread ID:

Created:

Updated:

Platform:

Replies:

130027 Apr 16,2017 08:42 PM Apr 17,2017 06:52 AM JavaScript 1
loading
Tags: ejKanban
Jason
Asked On April 16, 2017 08:42 PM

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

Regards
Jason Coley

Buvana Sathasivam [Syncfusion]
Replied On April 17, 2017 06:52 AM

  
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:    
  
Please refer to the following link: https://www.jsviews.com/#jsobservable    
  
We have prepared a Kanban sample demo with template for your reference.   
  
   
Regards,   
Buvana S.   
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;