large grid sorter 2 grids

by merganser

HTML

<script src="https://kendo.cdn.telerik.com/2015.2.624/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.2.624/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.624/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.624/styles/kendo.default.min.css">
<div id="div1">

  <div id="grid"></div>

</div>

<div id="div2">
  <div id="grid2"></div>
</div>

CSS

#div1,
#div2 {
  float: left;
}

#div1 {
  width: 400px;
  background-color: red;display:none;
}

#div2 {
  width: 400px;
  background-color: blue;
  min-height: 300px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
  border-bottom: 1px solid #ccc;
  cursor: move;
}

li:last-child {
  border: none;
}

li {
  text-decoration: none;
  color: #000;
  display: block;
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}

li:hover {
  font-size: 30px;
  background: #f6f6f6;
}

ul#sortablelistAbove {
  display: block;
  min-height: 50px;
  background-color: yellow;
}

ul#sortablelistMaintain {
  display: block;
  min-height: 50px;
  background-color: grey;
}

ul#sortablelistBelow {
  display: block;
  min-height: 50px;
  background-color: green;
}

JavaScript

var dataSource1 = new kendo.data.DataSource();
 var dataSource2 = new kendo.data.DataSource();
 var grid1;
 var grid2;

 var db = {
   t_arr: JSON.parse(localStorage.getItem('tests')) || [],
   get tests() {
     return this.t_arr
   },
   set tests(v) {
     if (v.constructor === Array) {
       this.t_arr = v
     }
     localStorage.setItem('tests', JSON.stringify(this.t_arr));

   }
 }

 console.log('db', db);

 if (db.tests.length === 0) {
   $.getJSON("https://data.consumerfinance.gov/resource/jhzv-w97w.json",
     function(data) {

       console.log('data pull completed');

       for (var i = 1; i < data.length + 1; i++) {

         data[i - 1]["sort"] = i;

       }


       db.tests = data;
       //localStorage.setItem('tests', JSON.stringify(data));
       console.log('item array filled');

       console.log('db', db);
     });

 }






 $(function() {
   var dataSource1 = new kendo.data.DataSource({
     data: db.tests,
  	 sort: { field: "sort", dir: "asc" },
     schema: {
       model: {
         id: "complaint_id",
         fields: {
           complaint_id: {
             type: "number"
           },
           company: {
             type: "string"
           },
           sort: {
             type: "number"
           }
         }
       }
     },
     pageSize: 20
   });
   var dataSource2 = new kendo.data.DataSource({
     data: [{
     complaint_id:1,
       "company": "---------------",
       "sort": 0
     },{
     complaint_id:2,
       "company": "2---------------",
       "sort": 1
     },{
     complaint_id:3,
       "company": "3---------------",
       "sort": 2
     }],
  	 sort: { field: "sort", dir: "asc" },
     schema: {
       model: {
         id: "complaint_id",
         fields: {
           complaint_id: {
             type: "number"
           },
           company: {
             type: "string"
           },
           sort: {
             type: "number"
           }
         }
       }
     },
     pageSize: 30
  ...