jube-fork/Jube.App/wwwroot/kendo/examples/grid/server-grouppaging-virtualization.html

<!DOCTYPE html>
<html>
<head>
    <title>Server grouping with virtualization</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="https://kendo.cdn.telerik.com/2021.1.224/js/kendo.aspnetmvc.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>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                sortable: true,
                columns: [{
                    title: "Customer ID",
                    width: "100px",
                    field: "customerID"
                }, {
                    title: "Country",
                    width: "100px",
                    field: "country"
                }, {
                    title: "Company Name",
                    width: "100px",
                    field: "companyName"
                }, {
                    title: "City",
                    width: "100px",
                    field: "city"
                }, {
                    title: "Postal Code",
                    width: "100px",
                    field: "postalCode"
                }],
                filterable: true,
                scrollable: {
                    virtual: true,
                    height: "400px"
                },
                dataSource: {
                    type: 'aspnetmvc-ajax',
                    transport: {
                        read: {
                            url: "https://demos.telerik.com/aspnet-core/service/api/customers"
                        }
                    },
                    pageSize: 50,
                    page: 1,
                    groupPaging: true,
                    total: 0,
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    serverGrouping: true,
                    serverAggregates: true,
                    group: [{
                        field: "city",
                        dir: "asc"
                    }, {
                        field: "companyName",
                        dir: "asc"
                    }],
                    schema: {
                        data: "data",
                        total: "total",
                        errors: "errors"
                    }
                }
            });
        });
    </script>
</div>

    
</body>
</html>