Back

Telerik

Easily Creating a Trello-Like App with Kendo UI (Part 1) 2019-02-11 21:35:59

In this step-by-step guide, learn how you can create a Trello-like project management app quickly and easily using Kendo UI.

This is the first post in a two-part series where you will learn how to build the frontend for a Trello-like app. Our app will have a board with lists and the lists will contain cards. The cards can be dragged and dropped within their list or between lists. And users can create new cards as well as edit the content of existing cards. This kind of app can be customized for many different uses cases like a project management tool for software developers or an issue tracker. Our app will be a todo list built using the Kendo UI ListView and Sortable components. Your first task will be to create a board initialized with three lists and a few cards.

Creating the Lists

Our board is essentially a list view within another list view. The first list view we will create are the containers for the cards. We will create an element with the id board in the body of our HTML to inject our lists. Inside the component’s parameters, we will specify the data source and the template to initialize the widget. Our dataSource will be an array of objects that have a listID and name attribute. This example creates three lists:

Trello

<!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>
  </head>
<body>
  <div class="board"></div>
  <script>
     $('.board').kendoListView({
    template: kendo.template($('#listTemplate').html()),
    dataSource: [
        {listID: 0, name: 'To Do'},
        {listID: 1, name: 'Doing'},
        {listID: 2, name: 'Done'}
      ]
    });
  </script>
</body>
</html>

The list template will have a header that displays the value of the name attribute. Beneath the header will be a container to hold the list of cards. This container will have an id that uses the value of the listID attribute. For our example, if the listID is 1 the element’s id will become list-1. We need to give this element an id so we can reference it when creating the list view for the cards later on. The following is an example of the board’s list template created using a script block. It should be placed before the script where your component is initialized.

<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>

And this is the associated CSS to style the lists:

<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;
  }
</style>

Creating the Cards

Next, we will create a ListView for the cards. A card will have a cardID and a name. The name is the content that will be displayed inside the card. The first step is defining the template. Again, we will use a script block that’s placed in the body of the HTML.

<script id="cardTemplate" type="text/x-kendo-template">
  <div class="card">#: name #</div>
</script>

And this is the additional styles:

.card {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-height: 4em;
  padding: 1em;
  border-radius: 3px;
  margin-bottom: .5em;
  background: #fff;
}

For each list in the board, we will create a list view for the cards. We could create a function to loop through the data and create the components. This would be ideal if we had a variable number of lists. For instance, if we allowed users to create lists as well, then we would not be able to hard code each component. We would need to dynamically create the lists and find which cards belong to each list to insert them into the list view. However, since we are working with a fixed number of lists, I will define each component manually.

$('#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())
});

This is now what our board looks like:

Trello

Making the Cards Sortable

To make our cards draggable and droppable between lists we will use the Sortable component. Each of these list views will behave the same so we can give them all the same options. First, we will create a variable named sortableOptions that we will pass to the component’s arguments.

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'
    });
  }
};

The filter option is needed to define which items are sortable. The connectWith option lets us move the cards between the lists. Our placeholder is an empty card element that is slightly darker than the background to give the appearance of a shadow where the card was moved. And the hint is a copy of the card element given a slight tilt. The final part is to initialize each card list view as a Sortable component.

$('#list-0').kendoSortable(sortableOptions);
$('#list-1').kendoSortable(sortableOptions);
$('#list-2').kendoSortable(sortableOptions);

This is what the board looks like while dragging a card:

Trello

Summary

So far we have created a list view for the lists on the board and the cards in the lists. We also made the cards sortable so we could move them around the lists. We could have also made the lists sortable using much of the same code from the card sortable options. The main fields you would need to change is the filter option so that it uses the container for the lists and the hint can be a clone of the element.

Stay tuned for the next article, where we will implement the behavior to add, edit, and remove cards.

Try out Kendo UI for Yourself

Want to start taking advantage of the more than 70+ ready-made Kendo UI components, like the ones here? 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, KendoReact, or Kendo UI for Vue.

Resources

Read more


Telerik UI for Blazor 0.2.0 is Available 2019-02-11 19:24:06

Telerik UI for Blazor 0.2.0 is available for download today. This release makes Telerik UI for Blazor compatible with Visual Studio 2019 preview 2, and ASP.NET Core 3.0 preview 2. 

A few weeks ago we released an early preview of Telerik UI for Blazor. The early preview is intended to give developers a peek into the development process while giving everyone a chance to share their feedback on the product. We are working closely to align our goals with those of Microsoft's ASP.NET Core team, which is why we're happy to announce Telerik UI for Blazor 0.2.0. This new version aligns our UI components with the ASP.NET Core 3.0 preview 2 and Blazor 0.8.0 release.

What's New

In this release you may not see a lot of changes on the surface, but we've diligently kept up with things that are happening beneath the surface of the framework. ASP.NET Core 3.0 preview-2 marks a milestone for Razor Components, the underlying component model for Blazor. In preview 2, Razor Components has been decoupled from Blazor, making the component model much more flexible (for more about this see the preview 2 announcements). The change shifted some dependencies and name spaces used to power Telerik UI for Blazor, prompting us add compatibility with the new release.

Telerik UI for Blazor is now compatible with:

  • Visual Studio 2019 Preview 2
  • ASP.NET Core 3.0 Preview 2
  • and Blazor 0.8.0

Going forward Telerik UI for Blazor 0.1.0 is only compatible with Visual Studio 2017. You will need to migrate your experiments along with your tooling to Visual Studio 2019 to utilize 0.2.0.

Besides supporting the new latest bits some small changes were made to the Grid component:

blazor-grid-sort-page

  • Grid columns are now better defined. In this version Grid columns have improved semantics through nesting. The KendoGridColumns container clearly defines where columns begin in the Grid and gives us a framework to build upon. In the example below the columns are clearly defined and have different nesting from the RowTemplate.
<KendoGrid Data=@GridData>
    <RowTemplate ... />
    <KendoGridColumns>
        <KendoGridColumn Field=@nameof(Product.ProductName)/>
        <KendoGridColumn Field=@nameof(Product.UnitPrice)/>
    </KendoGridColumns>
</KendoGrid>
  • Grid Height is now a supported parameter, which allows the grid height to be defined programmatically.
<KendoGrid Data=@GridData Height=@Height>
  • Code samples are here! We really wanted to help you hit the ground running. With the ecosystem changing rapidly, it's best to show solid examples of how to get things done. This is why we have released a new GitHub repository showing of our components doing cool things like: Templates, Editing, and swapping themes. You can clone the samples here: https://github.com/telerik/ui-for-blazor-examples

Stay Tuned

We're committed to Telerik UI for Blazor and plan to release more content in the form of video, blogs, and samples on GitHub. If you're watching with anticipation for what's coming next, make sure to visit our blogs frequently for news and announcements. For more insight into all things Blazor, you can watch me (Ed Charbeneau, Progress developer advocate), each week Friday at 12pm EST on Twitch.

Join the Early Preview

We're excited to be part of the next generation of ASP.NET applications by supporting Blazor. Telerik UI for Blazor Early Preview is available for free today. The package currently includes Data Grid, Tab Set, and Button components written from the gound up to take advantage of Blazor without legacy JavaScript dependencies (there's no jQuery this time folks). Throughout the year Microsoft will be working on Blazor (aka Razor Components) as part of ASP.NET Core 3.0. We plan on keeping Telerik UI for Blazor up to date as the project progresses and look forward to hearing your feedback, see what you've built, and know what components you need for your next app.

A Special Installation Note

For the Telerik UI for Blazor version 0.2.0 to show in your NuGet feed, you must visit the download page and create an account, or sign in. You will need to repeat this process even if you already have early preview 0.1.0. Visiting this page will activate your NuGet feed. For more information about adding the Telerik NuGet feed please see our documentation.

Read more