Kendo UI Grid

Local data, mobile scrolling.

by mihaichiritescu

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">
        <gridview>
            <div data-ng-repeat="man in people">
                <gridviewcolumn datasource="name" man="man" first="true"></gridviewcolumn>
                <gridviewcolumn datasource="age" man="man"></gridviewcolumn>               
            </div>            
        </gridview>
    </div>
</div>

JavaScript

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

myApp.directive('gridview', function() {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        template: '<div id="kendoGridView" ng-transclude></div>',
        compile: function compile(tElement, tAttrs) {
            return function postLink(scope, iElement, iAttrs) {}
        }
    };
});

myApp.directive('gridviewcolumn', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        compile: function compile(tElement, tAttrs) {
            var dsTemplate = "{{man." + tAttrs['datasource'] + "}}";
            tElement.html(dsTemplate);
            return function postLink(scope, iElement, iAttrs) {
                var gridDiv = $("#kendoGridView");
                var gridClass = gridDiv.attr('class');
                if (gridClass == undefined) {
                    $("#kendoGridView").kendoGrid({
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        }
                    });
                }

                var dataSrc = iAttrs['datasource'];
                var first = iAttrs['first'];
                var man = iAttrs['man'];
                var gridTbody = $('#kendoGridView tbody');
                var lastRow = $('#kendoGridView tbody tr:last');

                if (first == "true") {
                    // add new row
                    lastRow = $("<tr>");
                    lastRow.appendTo(gridTbody);
                }

                // add new cell
                lastRow = $('#kendoGridView tbody tr:last');
                var cell = $("<td>");
                cell.appendTo(lastRow);
            }
        }
    };
});

function Tester($scope) {
    var man1 = new Man('name1', 25);
    var man2 = new Man('name2', 28);
    var man3 = new...