jube-fork/Jube.App/wwwroot/kendo/examples/appbar/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>
    
    <script src="../content/shared/js/products.js"></script>
<div id="example" class="k-content">
    <div id="appbar"></div>
    <div class="controls-container">
        <div id="chart"></div>
        <div id="grid"></div>
    </div>
</div>

<script id="search-template" type="text/x-kendo-tmpl">
    <span class="k-textbox k-display-flex">
        <input autocomplete="off" placeholder="Search products" title="Search products" class="k-input">
        <span class="k-input-icon">
            <span class="k-icon k-i-search"></span>
        </span>
    </span>
</script>

<script>
    $("#appbar").kendoAppBar({
        themeColor: "inherit",
        items: [
            { template: '<a class="k-button" href="\\#"><span class="k-icon k-i-menu"></span></a>', type: "contentItem" },
            { width: 16, type: "spacer" },
            { template: '<h3 class="title">All Products</h3>', type: "contentItem" },
            { width: 16, type: "spacer" },
            { template: '<a class="k-button k-clear-search" href="\\#">Clear search</a>', type: "contentItem" },
            { type: "spacer" },
            { template: kendo.template($("#search-template").html()), type: "contentItem" },
            { width: 8, type: "spacer" },
            { template: '<a class="k-button k-toggle-button" href="\\#"><span class="k-icon k-i-saturation"></span></a>', type: "contentItem" }
        ]
    }).on("input", "input.k-input", function (e) {
        var input = e.currentTarget;
        var grid = $("#grid").getKendoGrid();
        clearTimeout(grid.searchTimeOut);
        grid.searchTimeOut = setTimeout(function () {
            grid.searchTimeOut = null;
            var expression = { filters: [], logic: "or" };
            var value = input.value;

            if (value) {
                expression.filters.push({ field: "ProductName", operator: "contains", value: value });
            } else {
                expression = {};
            }

            grid.dataSource.filter(expression);

        }, 300);
    }).on("click", ".k-button", function (e) {
        e.preventDefault();
    }).on("click", ".k-clear-search", function (e) {
        $("#appbar input.k-input").val("").trigger("input");
    }).on("click", ".k-toggle-button", function (e) {
        var chartElement = $("#chart");
        var gridElement = $("#grid");

        if (chartElement.is(":visible")) {
            chartElement.hide();
            gridElement.css("width", "100%");
        } else {
            chartElement.show();
            gridElement.css("width", "");
        }
    });

    $('#badge-overlay').kendoBadge({
        color: 'primary',
        shape: 'circle',
        position: 'top end',
        placement: 'inside'
    });

    $("#chart").kendoChart({
        title: {
            position: "bottom",
            text: "Average unit price by product`s category"
        },
        legend: {
            visible: false
        },
        chartArea: {
            background: ""
        },
        seriesDefaults: {
            labels: {
                visible: true,
                background: "transparent",
                template: "#= category #: \n $#= value#"
            }
        },
        series: [{
            type: "pie",
            autoFit: true,
            startAngle: 150
        }],
        tooltip: {
            visible: true,
            format: "${0}"
        }
    });

    function updateChart(dataSource) {
        var dataItems = dataSource.view();
        var data = [];
        dataItems.forEach(function (group) {
            var aggregateValue = group.aggregates["UnitPrice"].average.toFixed(2);
            data.push({ category: group.value, value: aggregateValue });
        })

        var chart = $("#chart").data("kendoChart");
        var options = chart.options;
        options.series[0].data = data;
        chart.setOptions(options); 
    }

    var dataSource = new kendo.data.DataSource({
        change: function (e) {
            updateChart(e.sender);
        },
        data: products,
        autoSync: true,
        group: [
            {
                field: "Category.CategoryName", aggregates: [
                    { field: "UnitPrice", aggregate: "average" }
                ]
            }
        ],
        aggregates: [
            { field: "UnitPrice", aggregate: "average" }
        ],
        schema: {
            model: {
                id: "ProductID",
                fields: {
                    ProductID: { editable: false, nullable: true },
                    ProductName: { validation: { required: true } },
                    Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages" } },
                    UnitPrice: { type: "number", validation: { required: true, min: 1 } }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        columns: [
            { field: "ProductName", title: "Product Name", width: "200px" },
            { field: "Category", title: "Category", width: "180px", template: "#=Category.CategoryName#" },
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px", groupFooterTemplate: "Average #=kendo.toString(average, 'n2')#", aggregates: ["average"] }]
    });
</script>

<style>
    #grid, #chart {
        width: 50%;
        height: 650px;
    }

    .controls-container {
        display: flex;
    }

    .k-display-flex {
        display: flex;
        width: 250px;
    }

    #demo-runner {
        padding:0px;
    }

    .title {
        font-size: 18px;
        margin: 0;
    }

    .k-appbar .k-button {
        border-style: none;
        background-color: inherit;
    }
</style>


    
</body>
</html>