large grid sorter 3 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='filterBar'>
  <h2>
  Filter By:
  </h2>
  <div>
    <label>Filter 1</label>
    <select id="filter1">
        <option value="0">-- select --</option>
    </select>
  </div>
</div>

<div id="div1">

  <div id="grid"></div>
  
  <div style="clear:both;">
  &nbsp;
  </div>
</div>

<div id="div2">
  <div id="gridAbove"></div>
  <div id="gridMaintain"></div>
  <div id="gridBelow"></div>
</div>

CSS

#filterBar{margin-bottom:5px;}
#div1,
#div2 {
  float: left;
}

#div1 {
  width: 400px;
}

#div2 {
  width: 400px;
  min-height: 300px;
  margin-left: 50px;
}

#div2 div.k-grid {
  margin-bottom: 5px;
}


.k-grid tbody tr {
  cursor: move;
}

div#grid .k-grid-pager{height:30px;}

JavaScript

$.extend({
        distinctObj:function(obj,propertyName) {
            var result = [];
            $.each(obj,function(i,v){
                var prop=eval("v."+propertyName);
                if ($.inArray(prop, result) == -1) result.push(prop);
            });
            return result;
        }
    });
 
 
 var dataSource1 = new kendo.data.DataSource();
 var datasourceabove = new kendo.data.DataSource();
 var datasourcemaintain = new kendo.data.DataSource();
 var datasourcebelow = new kendo.data.DataSource();
 var grid1;
 var gridAbove;
 var gridMaintain;
 var gridBelow;

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








 $(function() {




   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
   });
   datasourceabove = new kendo.data.DataSource({
     data: [{
       complaint_id: 0,
       "company": " ",
       "sort": null
     }],
     schema: {
       model: {
         id: "complaint_id",
         fields: {
           complaint_id: {
             type: "number"
           },
           company: {
             type: "string"
           },
           sort: {
             type: "number"
           }
         }
       }
     },
     pageSize: 30
   });

   datasourcemaintain = new kendo.data.DataSource({
     data: [{
       complaint_id: 0,
       "company": " ",
       "sort": null
     }],
     schema: {
       model:...