template String|Function

Controls the rendering of the card.

Example

<div id="taskBoard"></div>


<script id="card-template" type="text/x-kendo-template">
      <div class="my-card-template-container">
         <div class="#:styles.header# #:styles.hbox#">
           <a class="#:styles.title# #:styles.link#" href="\\#" data-command="SelectCardCommand">#:title#</a>
           <span class="#:styles.spacer#"></span>
           #=cardMenuButton#
          </div>
          <div class="#:styles.body#"><p>#:description#</p></div>
      </div>
  </script>




<script>
    $("#taskBoard").kendoTaskBoard({
      template: $("#card-template").html(),
      dataOrderField: "order",
      dataSource: [
        { id: 1, order: 1, title: "Task 1", description: "Description 1", status: "backlog", category: "red" },
        { id: 2, order: 2, title: "Task 11", description: "Description 11", status: "backlog", category: "red" },
        { id: 3, order: 3, title: "Task 2", description: "Description 2", status: "doing", category: "green" },
        { id: 4, order: 4, title: "Task 22", description: "Description 22", status: "doing", category: "green" },
        { id: 5, order: 5, title: "Task 3", description: "Description 3", status: "done", category: "blue" }
      ],
      columns: [
        { text: "Doing", status: "doing" },
        { text: "Backlog", status: "backlog" },
        { text: "Done", status: "done" }
      ]
    });
  </script>
In this article