BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
// Card Template
<script id="cardtemplate" type="text/x-jsrender">
<table class="e-templatetable">
<tbody>
<tr>
<td class="photo">
<img class="e-imgCard"src="{{:ImageUrl}}".png">
</td>
<td class="details">
<table>
<tbody>
<tr>
<td class="CardHeader"> Assignee: </td>
<td>{{:Assignee}}</td>
</tr>
<tr>
<td class="CardHeader"> Summary: </td>
<td>{{:Summary}}</td>
</tr>
<tr>
<td class="CardHeader"> Type: </td>
<td>{{:Type}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td></td>
<td class="e-trianglecell">" // You need to define td for applycolor
<div class="e-bottom-triangle {{:Type}}"></div>
</td>
</tr>
</tbody>
</table>
</script>
<style type="text/css">
.e-kanban .e-kanbancard .Improvement{
border-bottom-color: #67ab47;
}
.e-kanban .e-kanbancard .Bug{
border-bottom-color: #cb2027;
}
.e-kanban .e-kanbancard .Story{
border-bottom-color: #179bd7;
}
.e-kanban .e-kanbancard .Epic{
border-bottom-color: #fbae19;
}
.e-kanban .e-kanbancard .Others{
border-bottom-color: #6a5da8;
}
.e-trianglecell{
padding: 0;
}
.e-templatetable {
width: 100%;
border-collapse: collapse;
}
.details >table {
margin-left:2px;
border-collapse: separate;
border-spacing: 2px;
width: 100%;
}
.details td {
vertical-align: top;
}
.details {
padding: 8px 8px 10px 0;
}
.photo {
padding: 8px 6px 10px 6px;
text-align: center;
}
.CardHeader {
font-weight: bolder;
padding-right: 10px;
}
</style> |
$("#Kanban").ejKanban({
……………………
queryCellInfo: "queryCellInfo" // You can define queryCellInfo event
}); |
function queryCellInfo(args){ // query cell info event was called when render Kanban card
var type = args.data.Type, color;
if(type == "Improvement") // Get card type and assign color value
color = "#67ab47";
if(type == "Bug")
color = "#cb2027";
if(type == "Story")
color ="#179bd7";
if(type=="Epic")
color= "#fbae19";
if (type == "Others")
color = "#6a5da8";
}
|