In part two of this step-by-step guide, learn how to enhance your Trello-like project management app with interactivity using Kendo UI.
In the first part of this series, we used the ListView and Sortable components of Kendo UI to easily make a Trello-like todo list. In this part, you will make your lists more interactive by adding features to add cards, remove cards, and edit cards in each list.
When the add button is clicked, a card will appear in edit mode at the top of the list. The changes will be saved by clicking an update button which will replace the card with a normal card. When a user hovers over a card, an edit and remove button will appear. When the edit button is clicked, a card will appear in edit mode at the top of the list. When the remove button is clicked, the card will be deleted from the list.
Getting Started
To implement these features we will complete the following steps:
- Include a button in the header of the list template
- Create an edit template and add it to the options for each list
- Define a click handler for the add button
- Add buttons to the card template for editing and removing
Before we begin, this is the code we will be modifying:
<!DOCTYPE html><html><head><metacharset="utf-8"><title>Kanban Board</title><linkrel="stylesheet"href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.bootstrap-v4.min.css"><scriptsrc="https://code.jquery.com/jquery-1.12.3.min.js"></script><scriptsrc="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script><style>body {font-family: helvetica;color:#444;}.board{overflow-x: scroll;white-space: nowrap;position: absolute;top:0;right:0;bottom:0;left:0;background:#cd5a91;}.list-wrapper{width:16em;background-color:#eee;margin:.5em;border-radius:3px;box-sizing: border-box;display: inline-block;vertical-align: top;}.list{background-color:#eee;border: none;padding:.5em;margin-bottom:2em;box-sizing: border-box;}.list-header{height:3em;line-height:3em;padding:01em;}.list-title{font-weight: bold;}.card{box-sizing: border-box;position: relative;width:100%;min-height:4em;padding:1em;border-radius:3px;margin-bottom:.5em;background:#fff;}</style></head><body><divclass="board"></div><!-- LIST TEMPLATE --><scriptid="listTemplate"type="text/x-kendo-template"><div class="list-wrapper"><div class="list-header"><span class="list-title">#: name #</span></div><div id="list-#: listID #"class="list"></div></div></script><!-- CARD TEMPLATE --><scriptid="cardTemplate"type="text/x-kendo-template"><div class="card">#: name #</div></script><!-- INITIALIZATION --><script>$('.board').kendoListView({
template: kendo.template($('#listTemplate').html()),
dataSource:[{listID:0, name:'To Do'},{listID:1, name:'Doing'},{listID:2, name:'Done'}]});$('#list-0').kendoListView({
template: kendo.template($('#cardTemplate').html()),
dataSource:[{ cardID:0, name:'Create UI'}]});$('#list-1').kendoListView({
template: kendo.template($('#cardTemplate').html()),
dataSource:[{ cardID:1, name:'Implement button behavior'},{ cardID:2, name:'Refactor code'}]});$('#list-2').kendoListView({
template: kendo.template($('#cardTemplate').html())});var sortableOptions ={
filter:'.card',
container:'.board',
connectWith:'.list',
cursor:'grabbing',
placeholder:function(element){return$('<div class="card"></div>').css({
background:'#ddd'});},
hint:function(element){return element.clone().css({
width:'15em',
transform:'rotate(-5deg)',
border:'1px solid #eee'});}};$('#list-0').kendoSortable(sortableOptions);$('#list-1').kendoSortable(sortableOptions);$('#list-2').kendoSortable(sortableOptions);</script></body></html>Updating the Templates
First, we will add the markup for the add button to the lists. Inside the script block for the list template, add the following code within the list-header element:
<divclass="pull-right"><spanclass="k-add-button k-icon k-i-add"></span></div>Add this CSS to your styles:
.pull-right{float: right;}
![Trello]( "34trello1")
Next, we will define an edit template for the card. We will create another script block and add it to our HTML. Inside the script block, we will add a textarea element so users can enter the name of the card and an update button to save the changes. Inside the textarea we will add the attribute data-bind="value:name" to link the name field of the data item to the value of the textarea. You do not need to create a click handler for the save button to work. By adding the class k-update-button to the button’s attributes, the component will take care of that functionality for us. This is what our new template looks like:
<scriptid="cardEditTemplate"type="text/x-kendo-template"><div><textarea class="card-edit" name="name" data-bind="value:name" required="required"></textarea><div class="card-edit-controls"><button class="k-update-button k-button"><span class="k-icon k-i-check"></span> Save
</button></div></div></script>This is the additional CSS:
.card-edit{display: block;box-sizing: border-box;position: relative;width:100%;min-height:4em;padding:1em;border-radius:3px;margin-bottom:.5em;background:#fff;font-size:1em;border: none;}.card-edit-controls{margin-bottom:.5em;}For the #list-0, #list-1, and list-2 list views, add the following coded inside the component’s options:
editTemplate: kendo.template($('#cardEditTemplate').html())Activating the Add Button
The next step is to create an event handler to show the edit template when the add button is clicked. This is what the handler will do:
- Identify the list the clicked button belongs to
- Get the id of the list
- Use the list’s id to get a reference to the ListView widget
- Call the add method on the widget
The add method will insert an item in edit mode at the beginning of the list view. Inside the initialization script block, add this:
$('.k-add-button').click(function(e){var list =$(e.target).closest('.list-wrapper').find('.list');var listID ='#'+$(list).prop('id');var listView =$(listID).data('kendoListView');
listView.add();});![Trello]( "34Trello2")
Edit and Remove Card Features
The final step is to add the edit and remove buttons to our card template. The edit and remove features are simple to implement as they do not require us to create click handlers. We just need to add the class k-edit-button and k-delete-button to the button element. This is our updated card template:
<scriptid="cardTemplate"type="text/x-kendo-template"><div class="card">
#= name #
<div class="card-controls"><span class="k-edit-button k-icon k-i-edit"></span><span class="k-delete-button k-icon k-i-close"></span></div></div></script>This is the CSS to style the buttons:
.card-controls{position: absolute;right:.5em;top:.5em;display: none;}.card:hover.card-controls{display: inline-block;}![Trello]( "34Trello3")
Summary
In this tutorial, you saw how to create buttons to add, edit and remove cards. We needed to specify an edit template to add and edit cards. We created a click handler to add a new card, but not to edit or remove a card. It is also possible to add a cancel button to discard changes while in edit mode. You would just need to add a button with the class k-cancel-button to the card’s edit template. Additionally, all of the features we added to manipulate cards could be used to manipulate the lists. You can add the functionality to add, edit, and remove lists by reusing much of the code we have here.
Try out Kendo UI for Yourself
Want to start taking advantage of the more than 70+ ready-made Kendo UI components, like the Grid or Scheduler? You can begin a free trial of Kendo UI today and start developing your apps faster.
Angular, React, and Vue Versions
Looking for UI component to support specific frameworks? Check out Kendo UI for Angular, Kendo UI for React, or Kendo UI for Vue.