jube-fork/Jube.App/wwwroot/kendo/examples/listbox/templates.html

<!DOCTYPE html>
<html>
<head>
    <title>Templates</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" role="application">
    <div class="demo-section k-content wide">
        <select id="optional"></select>
        <select id="selected"></select>
    </div>
    <script>
        $(document).ready(function () {
            var customerTemplate = '<span class="k-state-default" style="background-image: url(\'../content/web/Customers/#:data.CustomerID#.jpg\')"></span>' +
                '<span class="k-state-default"><h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p></span>';
            $("#optional").kendoListBox({
                dataTextField: "ContactName",
                dataValueField: "CustomerID",
                template: customerTemplate,
                dataSource: {
                    transport: {
                        read: {
                            dataType: "jsonp",
                            url: "https://demos.telerik.com/kendo-ui/service/Customers",
                        }
                    }
                },
                draggable: { placeholder: customPlaceholder },
                dropSources: ["selected"],
                connectWith: "selected",
                toolbar: {
                    position: "right",
                    tools: ["moveUp", "moveDown", "transferTo", "transferFrom", "transferAllTo", "transferAllFrom", "remove"]
                }
            });

            $("#selected").kendoListBox({
                dataTextField: "ContactName",
                dataValueField: "CustomerID",
                template: customerTemplate,
                draggable: { placeholder: customPlaceholder },
                dropSources: ["optional"],
                connectWith: "optional"
            });

            function customPlaceholder(draggedItem) {
                return draggedItem
                        .clone()
                        .addClass("custom-placeholder")
                        .removeClass("k-ghost");
            }
        });
    </script>
</div>
<style>
    #example .demo-section {
        max-width: none;
        width: 780px;
    }

    #example .k-listbox {
        width: 326px;
        height: 350px;
    }

    #example .k-listbox:first-child {
        width: 360px;
        margin-right: 1px;
    }

    .k-ghost {
        display:none!important;
    }

    .custom-placeholder {
        opacity: 0.4;
    }

    #example .k-item {
        line-height: 1em;
    }

    /* Material Theme padding adjustment*/

    .k-material #example .k-item,
    .k-material #example .k-item.k-state-hover,
    .k-materialblack #example .k-item,
    .k-materialblack #examplel .k-item.k-state-hover {
        padding-left: 5px;
        border-left: 0;
    }

    .k-item > span {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: inline-block;
        vertical-align: top;
        margin: 20px 10px 10px 5px;
    }

    #example .k-item > span:first-child,
    .k-item.k-drag-clue > span:first-child {
        -moz-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
        -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
        box-shadow: inset 0 0 30px rgba(0,0,0,.3);
        margin: 10px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    #example h3,
    .k-item.k-drag-clue h3 {
        font-size: 1.2em;
        font-weight: normal;
        margin: 0 0 1px 0;
        padding: 0;
    }

    #example p {
        margin: 0;
        padding: 0;
        font-size: .8em;
    }
</style>



    
</body>
</html>