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

<!DOCTYPE html>
<html>
<head>
    <title>Column 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="../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>
        $(function() {
            var columns = [];
            var data = [];
            var numberOfColumns = 500;
            var numberOfRows = 100;
            var field;
            var row;
            var i;
            var j;
               
            for (i = 1; i <= numberOfColumns; i++) {
                field = ("Field" + i);
                columns.push({ field: field, title: field, width: 200 });
            }
            for (i = 1; i <= numberOfRows; i++) {
                row = {};
                for (j = 1; j <= numberOfColumns; j++) {
                    field = ("Field" + j);
                    row[field] = "R" + i + ":C" + j;
                }
                data.push(row);
            }

           var dataSource = new kendo.data.DataSource({
               pageSize: 10,
               transport: {
                   read: function(e) {
                       e.success(data);
                   }
               }
           });
           
           $("#grid").kendoGrid({
               dataSource: dataSource,
               sortable: true,
               scrollable: {
                   virtual: "columns"
               },
               width: 1000,
               navigatable: true,
               filterable: true,
               columnMenu: true,
               pageable: {
                   refresh: true,
                   pageSize: 10,
                   pageSizes: true,
                   buttonCount: 5
               },
               columns: columns
           });
        });
    </script>
</div>


    
</body>
</html>