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

<!DOCTYPE html>
<html>
<head>
    <title>Bind Custom Attributes</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 wide">
        <div id="products-wrapper">
            <ul id="menu"></ul>
            <div id="products"></div>
        </div>
        <div id="product-wrapper">
            <h3 class="bottom-border">Product Details:</h3>
            <div id="product"></div>
        </div>
    </div>

    <script type="text/x-kendo-tmpl" id="template">
        <div class="product">
            <img src="https://demos.telerik.com/kendo-ui/content/web/foods/#:ProductID#.jpg" alt="#:ProductName# image" />
            <div class="product-description">
                <h3>#:ProductName#</h3>
            </div>
        </div>
    </script>

    <script type="text/x-kendo-tmpl" id="productCard">
        <div class="productCard">
            <h3>#:ProductName#</h3>
            <p><img src="https://demos.telerik.com/kendo-ui/content/web/foods/#:ProductID#.jpg" alt="#:ProductName# image" /></p>
            <div class="product-description">
                <table>
                    <tr>
                        <th>Price</th>
                        <td>#: kendo.toString(parseFloat(UnitPrice), "c") #</td>
                    </tr>
                    <tr>
                        <th>Units</th>
                        <td>#: UnitsInStock #</td>
                    </tr>
                    <tr>
                        <th>Discontinued</th>
                        <td>#: Discontinued ? 'Yes' : 'No' #</td>
                    </tr>
                </table>
            </div>
        </div>
    </script>

    <script>
        $(document).ready(function () {
            dsCategories = null;
            dsProducts = null;
            var template = kendo.template($("#template").html());
            var productCard = kendo.template($("#productCard").html())
            var promises = [];

            dsCategories = new kendo.data.DataSource({
                type: "odata",
                transport: {
                    read: {
                        url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories",
                        dataType: "jsonp"
                    }
                }
            });


            dsProducts = new kendo.data.DataSource({
                type: "odata",
                transport: {
                    read: {
                        url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
                        dataType: "jsonp"
                    }
                },
                requestStart: function () {
                    kendo.ui.progress($("#products"), true);
                },
                requestEnd: function () {
                    kendo.ui.progress($("#products"), false);
                }
            });

            $.when(dsProducts.fetch(), dsCategories.fetch())
                .then(prepareMenuDataSource);

            function prepareMenuDataSource() {
                var menuDataSource = [];

                for (var i = 0; i < dsCategories.view().length ; i++) {
                    var item = dsCategories.view()[i];
                    menuDataSource.push({
                        text: item.CategoryName,
                        attr: {
                            categoryid: item.CategoryID,
                            title: item.Description
                        },
                        items: getProducts(item.CategoryID)
                    });

                }

                renderProduct();
                renderMenu(menuDataSource);
            }

            function getProducts(id) {

                dsProducts.filter({ field: "CategoryID", operator: "eq", value: id });

                var result = [];

                for (var i = 0; i < dsProducts.view().length ; i++) {
                    var item = dsProducts.view()[i];
                    result.push({
                        text: item.ProductName,
                        attr: {
                            categoryid: item.CategoryID,
                            productid: item.ProductID,
                            datasourceuid: item.uid,
                            unitprice: item.UnitPrice,
                            unitsinstock: item.UnitsInStock
                        }
                    })

                }
                return result;
            }

            function renderProduct() {
                $("#product").html(productCard(dsProducts.at(0)));
            }

            function renderMenu(dataSource) {
                var menuWidget = $("#menu").data("kendoMenu");

                if (!menuWidget) {
                    $("#menu").kendoMenu({
                        dataSource: dataSource,
                        select: onMenuSelect
                    });
                } else {
                    menuWidget.setOptions({ dataSource: dataSource });
                }

                dsProducts.bind("change", renderCategory);
                dsProducts.filter({ field: "CategoryID", operator: "eq", value: 1 });
            }

            function onMenuSelect(ev) {
                showCategory($(ev.item).attr("categoryid"));

                var datasourceuid = $(ev.item).attr("datasourceuid");
                if (datasourceuid) {
                    $("#product").html(productCard(dsProducts.getByUid(datasourceuid)));
                }
            }

            function showCategory(id) {
                dsProducts.filter({ field: "CategoryID", operator: "eq", value: id });
            }

            function renderCategory(ev) {
                $("#products").html(kendo.render(template, this.view()));
            }
        });


    </script>


    <style>
        #products-wrapper {
            width: 80%;
            display: inline-block;
            vertical-align: top;
            border-right: 1px solid rgba(20, 53, 80, 0.137255);
            padding-right: 40px;
        }

        #product-wrapper {
            height: 100%;
            margin: 15px 0 0 50px;
            display: inline-block;
        }

        #products {
            margin-top: 10px;
        }

        .product {
            margin: 20px 5px 0 0;
            display: inline-block;
            vertical-align: top;
        }

            .product img, .productCard img {
                width: 110px;
                height: 110px;
            }

            .product h3 {
                max-width:110px;
            }

            .product h3, #product-wrapper h3 {
                display: inline-block;
                margin: 0;
                padding: 3px 5px 0 0;
                overflow: hidden;
                line-height: 1.1em;
                font-size: .9em;
                font-weight: normal;
                text-transform: uppercase;
                color: #999;
            }

        #product-wrapper h3 {
            color: #999;
            max-width: 110px;
        }

        .productCard {
            margin-top:30px;
        }

            .productCard table {
                margin-top:20px;
                text-align: left;
                font-size: .9em;
                color: #999;
            }
    </style>
</div>


    
</body>
</html>