jube-fork/Jube.App/wwwroot/kendo/examples/dropdownlist/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Overview</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">
    <div class="demo-section k-content">
        <h4>Categories:</h4>
        <input id="categories" style="width: 100%;" />

        <h4 style="margin-top: 2em;">Products:</h4>
        <input id="products" disabled="disabled" style="width: 100%;" />

        <h4 style="margin-top: 2em;">Products:</h4>
        <input id="shipTo" disabled="disabled" style="width: 100%;" />

        <script>
            $(document).ready(function () {
                var categories = $("#categories").kendoDropDownList({
                    optionLabel: "Select category...",
                    dataTextField: "CategoryName",
                    dataValueField: "CategoryID",
                    height: 310,
                    template: '<span class="k-state-default" style="background-image: url(\'../content/web/dropdownlist/#:data.CategoryID#.jpg\')" ></span><span class=\"k-state-default\" style=\"padding-left: 15px;\"><h3>#: data.CategoryName #</h3></span>',
                    valueTemplate: '<span class="selected-value" style="background-image: url(\'../content/web/dropdownlist/#:data.CategoryID#.jpg\')"></span><span>#:data.CategoryName#</span>',
                    footerTemplate: 'Total number of <strong>#: instance.dataSource.total() #</strong> categories found',
                    dataSource: {
                        type: "odata",
                        serverFiltering: true,
                        transport: {
                            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
                        }
                    }
                }).data("kendoDropDownList");

                var products = $("#products").kendoDropDownList({
                    autoBind: false,
                    cascadeFrom: "categories",
                    optionLabel: "Select product...",
                    dataTextField: "ProductName",
                    dataValueField: "ProductID",
                    change: onChange,
                    dataSource: {
                        type: "odata",
                        serverFiltering: true,
                        transport: {
                            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
                        }
                    }
                }).data("kendoDropDownList");

                $("#shipTo").kendoDropDownList({
                            dataTextField: "ShipAddress",
                            dataValueField: "OrderID",
                            optionLabel: "Select address...",
                            autoBind: false,
                            virtual: {
                                itemHeight: 26,
                                valueMapper: function(options) {
                                    $.ajax({
                                        url: "https://demos.telerik.com/kendo-ui/service/Orders/ValueMapper",
                                        type: "GET",
                                        dataType: "jsonp",
                                        data: convertValues(options.value),
                                        success: function (data) {
                                            options.success(data);
                                        }
                                    })
                                }
                            },
                            height: 290,
                            dataSource: {
                                type: "odata",
                                transport: {
                                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                                },
                                schema: {
                                    model: {
                                        fields: {
                                            OrderID: { type: "number" },
                                            Freight: { type: "number" },
                                            ShipName: { type: "string" },
                                            OrderDate: { type: "date" },
                                            ShipCity: { type: "string" }
                                        }
                                    }
                                },
                                pageSize: 80,
                                serverPaging: true,
                                serverFiltering: true
                            }
                        });
            });

            function onChange(e) {
                var orders = $("#shipTo").data("kendoDropDownList");
                orders.value("");

                if (e.sender.value() == "") {
                    orders.enable(false);
                }
                else {
                    orders.enable(true);
                }
            }
        </script>
    </div>
</div>

<script>
    function convertValues(value) {
        var data = {};
        value = $.isArray(value) ? value : [value];

        for (var idx = 0; idx < value.length; idx++) {
            data["values[" + idx + "]"] = value[idx];
        }

        return data;
    }
</script>

<style>
    .k-readonly {
        color: gray;
    }

    .selected-value {
        display: inline-block;
        vertical-align: middle;
        width: 24px;
        height: 24px;
        background-size: 100%;
        margin-right: 5px;
        border-radius: 50%;
    }

    #categories-list .k-item {
        line-height: 1em;
        min-width: 300px;
    }

    /* Material Theme padding adjustment*/
    .k-material #categories-list .k-item,
    .k-material #categories-list .k-item.k-state-hover,
    .k-materialblack #categories-list .k-item,
    .k-materialblack #categories-list .k-item.k-state-hover {
        padding-left: 5px;
        border-left: 0;
    }

    #categories-list .k-item > span {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        vertical-align: middle;
        display: table-cell;
        vertical-align: central;
        margin: 10px 10px 10px 5px;
    }

    #categories-list .k-item > 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;
    }

    #categories-list h3 {
        font-size: 1.2em;
        font-weight: normal;
        margin: 0 0 1px 0;
        padding: 0;
    }

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


    
</body>
</html>