large grid sorter

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">
  <ul id="sortablelistAbove" class="connectedSortable">

  </ul>
  <ul id="sortablelistMaintain" class="connectedSortable">

  </ul>
  <ul id="sortablelistBelow" class="connectedSortable">

  </ul>
</div>

CSS

#div1,#div2 {
  float: left;
}

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

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

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

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

}


$( function() {
   
    $("#grid").kendoGrid({
                        dataSource: {
                            data: db.tests,
                            pageSize: 20
                        },
                        height: 543,
                        scrollable: {
                            virtual: true
                        },
                        pageable: {
                            numeric: false,
                            previousNext: false,
                            messages: {
                                display: "Showing {2} data items"
                            }
                        },
                        columns: [
                            
                            { field: "company", title: "Test", width: "130px" }
                        ]
                    });
   
  } );