Trello

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:

  1. Include a button in the header of the list template
  2. Create an edit template and add it to the options for each list
  3. Define a click handler for the add button
  4. 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>
    <meta charset="utf-8">
    <title>Kanban Board</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.bootstrap-v4.min.css">
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="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: 0 1em;
      }

      .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>
    <div class="board"></div>
    <!-- LIST TEMPLATE -->
    <script id="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 -->
    <script id="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:

<div class="pull-right">
  <span class="k-add-button k-icon k-i-add"></span>
</div>

Add this CSS to your styles:

 .pull-right {
  float: right;
}

Trello

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:

<script id="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:

  1. Identify the list the clicked button belongs to
  2. Get the id of the list
  3. Use the list’s id to get a reference to the ListView widget
  4. 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

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:

  <script id="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

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.

Start My Kendo UI Trial

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.

Resources


Alberta Williams
About the Author

Alberta Williams

Alberta is a software developer and writer from New Orleans. Learn more about Alberta at github.com/albertaw.

Related Posts

Comments

Comments are disabled in preview mode.