Kendo UI Grid

Local data, mobile scrolling.

by Kai_Draord

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng:app="myApp">
    <div id="grid"></div>
    
    <div ng:controller="Tester">
        <kendogrid span-support="['First Name', 'asdf Name']" source="people" groupable="true" sortable="true" columns="columns" pageable="true"></kendogrid>
        <input type="text" ng-model="nameInput">
        <input type="number" ng-model="ageInput">
        <button ng-click="onSubmit()" type="button">Submit</button>
    </div>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.directive('kendogrid', function() {
    return {
        restrict: 'E',
        replace: true,
        scope:{source:'=source',columns:'=columns'},
        template: '<div id="kendogrid"></div>',
        link: function(scope,element,attrs) {
            element.kendoGrid({
                        dataSource: scope.source,
                        groupable: attrs.groupable,
                        sortable: attrs.sortable,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
                        columns: scope.columns
                    });
        }
    };
});

myApp.directive('spanSupport', function() {
    return {
        restrict: 'A',
        link: function(scope,element,attrs) {
            var listOfColumns = scope.$eval(attrs.spanSupport) || [];
            console.log(listOfColumns);
        		listOfColumns.forEach(function(column){
            angular.element('#' + attrs.id + '>.k-grid-content>table').each(function (index, item) {
 								
                var dimension_col = 1;
                // First, scan first row of headers for the "Dimensions" column.
                angular.element('#' + attrs.id + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () {
                  if (angular.element(this).text() == column) {

                    // first_instance holds the first instance of identical td
                    var first_instance = null;

                    angular.element(item).find('tr').each(function () {

                      // find the td of the correct column (determined by the column)
                      var dimension_td = angular.element(this).find('td:nth-child(' + dimension_col + ')');
                      if (first_instance == null) {
                        first_instance = dimension_td;
                      } else if (dimension_td.text() ==...