JSFiddle - React, Tailwind, and code Playground

by aidankirrane

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<div id="grid"></div>

CSS

.drag-helper {
    opacity: 0.4;
    z-index:1000;
    top: 7px;
}

.k-dirty-cell {
    color: blue;
}

JavaScript

$.fn.reverse = [].reverse;//save a new function from Array.reverse

      var data = [
          { id: 1, name: "Michael", phone: "897-894-8956" },
          { id: 2, name: "George Michael", phone: "897-555-5555" },
          { id: 3, name: "George Sr.", phone: "897-444-4444" },
          { id: 4, name: "Gob", phone: "897-333-3333" },
          { id: 5, name: "Lucille", phone: "897-222-2222" },
          { id: 6, name: "Tobias", phone: "897-111-1111" },
          { id: 7, name: "Maeby", phone: "897-666-6666" },
          { id: 8, name: "Buster", phone: "897-777-7777" },
          { id: 9, name: "Lindsay", phone: "897-888-8888" }
      ];

      var dataModel = kendo.data.Model.define({
        id: "id",
        fields: {
          id: { type: "number" },
          name: { type: "string" },
          phone: { type: "string" }
        }
      });

      var mainDataSource = new kendo.data.DataSource({
        schema: {
          model: dataModel
        },
        data : data
      });

      var mainGrid = $("#grid").kendoGrid({
        dataSource: mainDataSource,
        columns: [ "id","name","phone" ],
        scrollable:false
      }).data("kendoGrid");

      var selectedClass = 'k-state-selected';
      $(document).on('click','#grid tbody tr',function(e) {
        if (e.ctrlKey || e.metaKey) {
          $(this).toggleClass(selectedClass);
        } else {
          $(this).addClass(selectedClass).siblings().removeClass(selectedClass);
        }
      });

      mainGrid.table.kendoDraggable({
        filter: "tbody tr",
        group: "gridGroup",
        axis: "y",
        hint: function (item) {
          var helper = $('<div class="k-grid k-widget drag-helper"/>');
          if (!item.hasClass(selectedClass)) {
            item.addClass(selectedClass).siblings().removeClass(selectedClass);
          }
          var elements = item.parent().children('.'+selectedClass).clone();
          item.data('multidrag',...