*TeamViewer* kendoMenu/grid example

HTML

<script src="http://login.teamviewer.com/Scripts/kendo/2012.3.1315-debug/kendo.all.js"></script>
<link rel="stylesheet" href="https://dev-trunk.teamviewer.com//Content/kendo/2012.3.1315/kendo.common.css">
<link rel="stylesheet" href="https://dev-trunk.teamviewer.com//Content/kendo/2012.3.1315/kendo.metro.css">
<div id='grid'></div>
<div>
    <ul id='log'></ul>
</div>
<div id='hidden'>
    <div>
        <ul id='dummyMenu' class='menuButton'>
            <li>Menu [d]
                <ul></ul>
            </li>
        </ul>
    </div>
    <div>
        <ul id='menu' class='bottomLeft menuButton'>
            <li>Menu
                <ul>
                    <li class='selection'>ww</li>
                    <li class='selection'>ww</li>
                    <li class='selection'>ww</li>
                    <li class='selection'>ww</li>
                </ul>
            </li>
        </ul>
    </div>
</div>

<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr>
        <td>#: OrderID#</td>
        <td>#: ShipName#</td>
        <td>#: ShipCity#</td>
        <td class='menuPlaceholder'></td>
    </tr>
</script>

CSS

#wrapper {
    height: 200px;
}
.bottomLeft .k-animation-container {
    position: absolute;
    left: auto !important; /* override the kendo left positioning */
    right: -3px;
}
#hidden {
    visibility: hidden;
}
#log {
    max-height: 300px;
    overflow-y: auto;
    color: #666;
    font-size: 70%;
    font-family: 'Lucida Console';
}
#grid td {
    overflow: visible;
}
#dummyMenu {
    display: none;
}
tr:hover #dummyMenu {
    display: inherit;
}
.menuButton>li.k-item>span.k-link {
    padding: 1px;
}
#grid .menuButton,
#grid .menuButton>li.k-item {
    width: 80px;
}
#grid .menuButton>li.k-item {
    border: 1px solid #aaa;
}

JavaScript

// TV MCO-2181
"use strict";

var $log = $('#log'),
    $dummyMenu = $('#dummyMenu'),
    $menu = $('#menu'),
    $hidden = $('#hidden'),
    data = 'wwwwwwwwwwww',
    menuCache;


// grid
var grid = $("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                fields: {
                    OrderID: {
                        type: "number"
                    },
                    Freight: {
                        type: "number"
                    },
                    ShipName: {
                        type: "string"
                    },
                    OrderDate: {
                        type: "date"
                    },
                    ShipCity: {
                        type: "string"
                    }
                }
            }
        },
        pageSize: 20,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    },
    height: 430,
    filterable: true,
    sortable: true,
    pageable: true,
    selectable: "single, row",
    columns: [{
        field: "OrderID",
        filterable: false
    },{
        field: "ShipName",
        title: "Ship Name",
        width: 260
    }, {
        field: "ShipCity",
        title: "Ship City",
        width: 150
    }, {
        title: "",
        width: 150
    }],
    rowTemplate: kendo.template($("#rowTemplate").html())
});

//    make the dummy menu
$dummyMenu.kendoMenu();
//    make the real menu
menuCache = $menu.kendoMenu({
    openOnClick: true,
    animation: false,
    hoverDelay: 0
});

menuCache.data('kendoMenu').bind("select", function (e) {
    if($(e.item).hasClass('selection')){
        data = data === 'ww' ? 'wwwwwwwwwwww' : 'ww';
        logIt('data = ' + data);
        menuCache.appendTo($hidden);
        logIt('cached menu is appended to #hidden');
    }
    
});

//    make...