JSFiddle - React, Tailwind, and code Playground

by Barry Carter

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-kendo/0.10.0/knockout-kendo.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.blueopal.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<div>
  <a href="#" data-bind="click: mode0_click">Users/Teams</a>
  <a href="#" data-bind="click: mode1_click">Teams/Users</a>
  <a href="#" data-bind="click: mode2_click">Campaign/Teams</a>
  <a href="#" data-bind="click: mode3_click">Teams/Campaign</a>
  
  <span data-bind="with: selectedEntity">
    <span data-bind="text: name"></span>
  </span>
</div>

<div class='row'>
  <div id="kendogrid" class="col-9" data-bind='kendoGrid: {
                selectable: true,
                data: mainGridData,
                change: vm.onChange, 
                dataBound: vm.databindgrid, 
                columns: [
                    {"field": "id", "title": "id", width: "80px"},
                    {"field": "name", "title": "Login", width: "130px"}, 
                    {"field": "name", "title": "Full Name", width: "160px"}, 
                    {"field": "name", "title": "Extension"}, 
                    {"command": ["edit"], title: "&nbsp;", width: "250px" },
                ],
   ...

CSS

.selected { background-color: blue; }

JavaScript

var _dragged;
ko.bindingHandlers.drag = {
  update: function (element, valueAccessor) {
        var dragElement = $(element);
        if (valueAccessor()) {

            dragElement.toggleClass('draggable', true);
            dragElement.kendoDraggable({
            		filter: "tr",
                hint: function(e) {
                    return $("<label class='grabbedObject' style='font-weight: bold;'>" + $(e).text() + "</label>");
                },
                cursorOffset: { top: -4, left: -20 },
                dragstart: function(e) { 
                	$(e.currentTarget).kendoAddClass('grabbed');
                  var grid = $("#kendogrid").data('kendoGrid');
				
        					// much hack
        					var model = grid.dataSource.getByUid(e.currentTarget.data("uid"));
        
                	vm.selectedEntity(ko.utils.arrayFirst(vm.mainGridData(), function(item) {
        						return (item.id() === model.id);
        					}));
                },
                dragend: function (e) { $(e.currentTarget).kendoRemoveClass('grabbed'); }
            });
        } else {
            if (dragElement.data('kendoDraggable')) {
                dragElement.toggleClass('draggable', false);
                dragElement.data('kendoDraggable').destroy();
            }
        }
    }
};

ko.bindingHandlers.drop = {
  init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    var dropElement = $(element);
    var dropOptions = {
      drop: function (e, ui) {
        //valueAccessor().value.push(ko.mapping.fromJS(_dragged));
        var grid = $("#kendogrid").data('kendoGrid');
				
        // much hack
        var model = grid.dataSource.getByUid(e.draggable.currentTarget.data("uid"));
        
        valueAccessor()(ko.utils.arrayFirst(vm.mainGridData(), function(item) {
        	return (item.id() === model.id);
        }),
        ko.dataFor(element));
        var row = grid.element.find("tr[data-uid='" + model.uid + "']");
        
       ...