Kendo UI sortable component does not work

Question

I would like a horizontal sortable list like they have in the demo on this link: https://www.telerik.com/kendo-angular-ui/components/sortable/

When I try to get this to work on my app, it renders as a column of items. I can't figure out why but I think it has something to do with the container-fluid class and media breakpoints not working.

Steps to reproduce:

ng new notes
ng add @progress/kendo-angular-sortable

Copy demo code

notes.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-notes',
  templateUrl: './notes.component.html',
  styleUrls: ['./notes.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class NotesComponent implements OnInit {

  public items: string[] = [
    'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'
  ];

  constructor() { }

  ngOnInit() {
  }

}

notes.component.html

<div class="container-fluid">
  <kendo-sortable [kendoSortableBinding]="items" [navigatable]="true" [animation]="true" class="row"
    itemClass="item col-xs-6 col-sm-3" activeItemClass="item col-xs-6 col-sm-3 active">
  </kendo-sortable>
</div>

notes.component.css

.item {
    background-color: #bfe7f9;
    color: #1494d0;
    border: 1px solid #fff;
    height: 70px;
    line-height: 68px;
    font-size: 16px;
    text-align: center;
    outline: none;
    cursor: move;
}

.item:hover,
.employee:hover {
    opacity: 0.8;
}

.item.active,
.employee.active {
    background-color: #27aceb;
    color: #fff;
    border-color: #27aceb;
    z-index: 10;
}

.item.disabled {
    opacity: 0.5;
    cursor: default;
}

.team {
    min-height: 240px;
    padding-top: 15px;
    padding-bottom: 15px;
    border: 1px solid #fff;
    background-color: #dff3fc;
}

.team-b {
    background-color: #fbe0e7;
}

.employee {
    background-color: #bfe7f9;
    color: #1494d0;
    margin: 1px;
    padding: 5px;
    cursor: move;
}

.team-b .employee {
    background-color: #f3b9c9;
    color: #dd4672;
}

.team-b .employee.active {
    background-color: #dd4672;
    color: #fff;
}

.empty {
    height: 150px;
}

Answer 1

Well i guess its the typo, its "[navigable]" and not "[navigatable]",

<kendo-sortable [kendoSortableBinding]="items" [navigatable]="true" [animation]="true" class="row"
    itemClass="item col-xs-6 col-sm-3" activeItemClass="item col-xs-6 col-sm-3 active">
</kendo-sortable>