jube-fork/Jube.App/wwwroot/kendo/examples/menu/context-menu.html

<!DOCTYPE html>
<html>
<head>
    <title>Context Menu</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
    <script src="../content/shared/js/webmail.js"></script>

    <div class="demo-section k-content wide">
        <h4>WebMail</h4>
        <div id="listview-context-menu"></div>
    </div>

    <script type="text/x-kendo-template" id="template">
        <div class="product">
            <img src="../content/shared/images/employees/#= FromID #.png" alt="#: From #" />

            <h3>#:Title#</h3>
            <p class="date">#:Date#</p>
            <p>#:From#</p>
        </div>
    </script>

    <ul id="menu">
        <li>
            <img src="../content/web/toolbar/reply.png" /> Reply
            <ul>
                <li><img src="../content/web/toolbar/reply.png" /> Reply to Sender</li>
                <li><img src="../content/web/toolbar/reply.png" /> Reply to All</li>
            </ul>
        </li>
        <li class="k-separator"></li>
        <li>
            <img src="../content/web/toolbar/forward.png" />  Forward
        </li>
        <li class="k-separator"></li>
        <li>
            Label
            <ul>
                <li>None</li>
                <li class="k-separator"></li>
                <li><img src="../content/web/toolbar/important.png" />Important</li>
                <li><img src="../content/web/toolbar/todo.png" />Work</li>
                <li><img src="../content/web/toolbar/done.png" />Personal</li>
                <li class="k-separator"></li>
                <li>New Label</li>
            </ul>
        </li>
    </ul>
</div>
<script>
    $(document).ready(function() {
        setTimeout(function () {
            var dataSource = new kendo.data.DataSource({
                data: window.mails,
                pageSize: 5
            });

            $("#listview-context-menu").kendoListView({
                dataSource: dataSource,
                template: kendo.template($("#template").html())
            });

            var menu = $("#menu"),
                original = menu.clone(true);

            original.find(".k-state-active").removeClass("k-state-active");

            $("#apply").click(function (e) {
                e.preventDefault();
                var clone = original.clone(true);

                menu.getKendoContextMenu().destroy();
                clone.appendTo("#example");

                initMenu();
            });

            var initMenu = function () {
                menu = $("#menu").kendoContextMenu({
                    target: "#listview-context-menu",
                    filter: ".product",
                    animation: {
                        open: { effects: "fadeIn" },
                        duration: 500
                    },
                    select: function(e) {
                        // Do something on select
                    }
                });
            };

            initMenu();
        }, 0);
    });
</script>

<style>
    #listview-context-menu {
        padding: 0;
        margin-bottom: -1px;
        min-height: 300px;
    }
    .product {
        position: relative;
        height: 62px;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid rgba(128,128,128,.3);
    }
    .product img {
        width: 40px;
        height: 40px;
        border-radius: 40px;
        margin: 10px;
        border: 1px solid #000;
        float: left;
    }
    .product h3 {
        margin: 0;
        padding: 15px 5px 1px 0;
        overflow: hidden;
        line-height: 1em;
        font-size: 1.1em;
        font-weight: bold;
    }
    .product p {
        font-size: .9em;
    }
    .product .date {
        float: right;
        margin: -8px 15px 0 0;
    }
    .k-listview:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    media screen and (max-width: 620px) {
        .product h3 {
           max-width: 100px;
           white-space: nowrap;
           text-overflow: ellipsis;
           height: 15px;
        }

    }
</style>


    
</body>
</html>