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. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Knockout example using Card Template

Thread ID:

Created:

Updated:

Platform:

Replies:

130027 Apr 17,2017 12:42 AM UTC Apr 17,2017 10:52 AM UTC JavaScript 1
loading
Tags: ejKanban
Jason
Asked On April 17, 2017 12:42 AM UTC

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 10:52 AM UTC

  
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.

Warning Icon 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.Close Icon

;