jube-fork/Jube.App/wwwroot/kendo/examples/datasource/remote-operations.html

<!DOCTYPE html>
<html>
<head>
    <title>Remote data operations</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="box wide">
                <h4>Configure</h4>
                <ul class="options">
                    <li>
                        <label for="page">Page:</label>
                        <input type="text" value="1" id="page" class="k-textbox" />
                    </li>
                    <li>
                        <label for="order">Order by:</label>
                        <select id="order">
                            <option value="ProductID">ID</option>
                            <option value="ProductName">Name</option>
                            <option value="UnitPrice">Price</option>
                        </select>
                    </li>
                    <li>
                        <label for="dir">Direction:</label>
                        <select id="dir">
                            <option value="asc">Ascending</option>
                            <option value="desc">Descending</option>
                        </select>
                    </li>
                    <li>
                        <button class="k-button" id="apply" style="margin-left: 74px;">Apply</button>
                    </li>
                </ul>
            </div>

            <div class="demo-section k-content wide">
                <ul id="products"></ul>
            </div>

            <script id="template" type="text/x-kendo-template">
                <li class="product">
                    <img src="../content/web/foods/${ProductID}.jpg" alt="${ProductName} image" />
                    <h3>#:ProductName#</h3>
                    <p>#:kendo.toString(UnitPrice, "c")#</p>
                </li>
            </script>

            <script>
                $(document).ready(function() {
                    // create a template using the above definition
                    var template = kendo.template($("#template").html());

                    var dataSource = new kendo.data.DataSource({
                        type: "odata",
                        serverPaging: true,
                        serverSorting: true,
                        pageSize: 12,
                        transport: {
                            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                        },
                        change: function() { // subscribe to the CHANGE event of the data source
                            // update the max attribute of the "page" input
                            $("#page").attr("max", this.totalPages());

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

                    // read data from the remote service
                    dataSource.read();

                    $("#apply").on("click", function() {
                        var page = parseInt($("#page").val(), 10);

                        // validate the page - it must be a number within the allowed range
                        if (isNaN(page) || page < 1 || page > dataSource.totalPages()) {
                            alert(kendo.format("Page must be a number between 1 and {0}", dataSource.totalPages()));
                            return;
                        }

                        // query the remote service
                        dataSource.query({
                            page: page,
                            pageSize: 10,
                            sort: {
                                field: $("#order").val(),
                                dir:$("#dir").val()
                            }
                        });
                    });

                    //initialize dropdownlist components
                    $("#order").kendoDropDownList();
                    $("#dir").kendoDropDownList();
                });
            </script>

            <style>
                .options label {
                    display: inline-block;
                    width: 70px;
                }
                .product {
                    float: left;
                    position: relative;
                    width: 111px;
                    height: 170px;
                    margin: 0;
                    padding: 0;
                    list-style:none;
                }
                .product img {
                    width: 110px;
                    height: 110px;
                }
                .product h3 {
                    margin: 0;
                    padding: 3px 5px 0 0;
                    max-width: 96px;
                    overflow: hidden;
                    line-height: 1.1em;
                    font-size: .9em;
                    font-weight: normal;
                    text-transform: uppercase;
                    color: #999;
                }
                .product p {
                    visibility: hidden;
                }
                .product:hover p {
                    visibility: visible;
                    position: absolute;
                    width: 110px;
                    height: 110px;
                    top: 0;
                    margin: 0;
                    padding: 0;
                    line-height: 110px;
                    vertical-align: middle;
                    text-align: center;
                    color: #fff;
                    background-color: rgba(0,0,0,0.75);
                    transition: background .2s linear, color .2s linear;
                    -moz-transition: background .2s linear, color .2s linear;
                    -webkit-transition: background .2s linear, color .2s linear;
                    -o-transition: background .2s linear, color .2s linear;
                }
                #products:after {
                    content: ".";
                    display: block;
                    height: 0;
                    clear: both;
                    visibility: hidden;
                }
            </style>
        </div>


    
</body>
</html>