jube-fork/Jube.App/wwwroot/kendo/examples/grid/toolbar-template.html

<!DOCTYPE html>
<html>
<head>
    <title>Toolbar template</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 id="grid"></div>

    <script type="text/x-kendo-template" id="template">
        <div class="refreshBtnContainer">
            <a href="\\#" class="k-pager-refresh k-link k-button k-button-icon" title="Refresh"><span class="k-icon k-i-reload"></span></a>
        </div>
        <div class="toolbar">
            <label class="category-label" for="category">Show products by category:</label>
            <input type="search" id="category" style="width: 150px"/>
        </div>
    </script>
    <script>
        $(document).ready(function() {
            var grid = $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                    }
                },
                toolbar: kendo.template($("#template").html()),
                height: 550,
                sortable: true,
                        
                columns: [
                    { field: "ProductID", title: "Product ID", width: 100 },
                    { field: "ProductName", title: "Product Name" },
                    { field: "UnitPrice", title: "Unit Price", width: 150 },
                    { field: "QuantityPerUnit", title: "Quantity Per Unit" }
                ]
            });
            var dropDown = grid.find("#category").kendoDropDownList({
                dataTextField: "CategoryName",
                dataValueField: "CategoryID",
                autoBind: false,
                optionLabel: "All",
                dataSource: {
                    type: "odata",
                    severFiltering: true,
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
                    }
                },
                change: function() {
                    var value = this.value();
                    if (value) {
                        grid.data("kendoGrid").dataSource.filter({ field: "CategoryID", operator: "eq", value: parseInt(value) });
                    } else {
                        grid.data("kendoGrid").dataSource.filter({});
                    }
                }
            });

            grid.find(".k-grid-toolbar").on("click", ".k-pager-refresh", function (e) {
                e.preventDefault();
                grid.data("kendoGrid").dataSource.read();
            });
        });

    </script>
    <style>
        #grid .k-grid-toolbar
        {
            padding: .6em 1.3em .6em .4em;
        }
        .category-label
        {
            vertical-align: middle;
            padding-right: .5em;
        }
        #category
        {
            vertical-align: middle;
        }
        .refreshBtnContainer {
            display: inline-block;
        }
        .toolbar {
            margin-left: auto;
            margin-right: 0;
        }
    </style>
</div>


    
</body>
</html>