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

<!DOCTYPE html>
<html>
<head>
    <title>Virtualization of local data</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/people.js"></script>

<div id="example">
    <div id="message" class="box"></div>

    <div id="grid"></div>

    <div class="box wide">
        <div class="box-col">
            <h4>Edit mode:</h4>
            <input id="editMode" />
        </div>
        <div class="box-col">
            <h4>Create at:</h4>
            <input id="createAt" />
        </div>
    </div>

    <script>
        $(function() {
            var count = 100000;

            $("#message").text(kendo.format("Generating {0} items", count));

            generatePeople(count, function(data) {
                var initStart;
                var renderStart;

                $("#message").text("");

                var nextId = data.length + 1;

                var dataSource = new kendo.data.DataSource({
                    pageSize: 20,
                    transport: {
                        create: function(e) {
                            if (e.data.models) {
                                //batch editing
                                for (var i = 0; i < e.data.models.length; i++) {
                                    e.data.models[i].Id = nextId++;
                                }
                                e.success(e.data.models);
                            } else {
                                e.data.Id = nextId++;
                                e.success(e.data);
                            }
                        },
                        read: function(e) {
                            e.success(data);
                        },
                        update: function(e) {
                            if (e.data.models) {
                                //batch editing
                                e.success(e.data.models);
                            } else {
                                e.success(e.data);
                            }
                        },
                        destroy: function(e) {
                            if (e.data.models) {
                                //batch editing
                                e.success(e.data.models);
                            } else {
                                e.success(e.data);
                            }
                        }
                    },
                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                Id: { type: "number", editable: false, nullable: true },
                                FirstName: { type: "string", validation: { required: true } },
                                LastName: { type: "string" },
                                City: { type: "string" },
                                Title: { type: "string" },
                            }
                        }
                    }
                });

                setTimeout(function() {
                    initStart = new Date();

                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        height: 543,
                        scrollable: {
                            virtual: true
                        },
                        editable: {
                            mode: "inline",
                            createAt: "top"
                        },
                        toolbar: ["create"],
                        pageable: {
                            numeric: false,
                            previousNext: false,
                            messages: {
                                display: "Showing {2} data items"
                            }
                        },
                        columns: [
                            { field: "Id", title: "ID", width: "110px" },
                            { field: "FirstName", title: "First Name" },
                            { field: "LastName", title: "Last Name" },
                            { field: "City", title: "City" },
                            { field: "Title" },
                            { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }
                        ]
                    });

                    initEnd = new Date();

                    $("#message").text(kendo.format("Kendo UI Grid bound to {0} items in {1} milliseconds", count, initEnd - initStart));
                });
            });

            $("#editMode").kendoDropDownList({
                dataSource: {
                    data: [
                        { text: "Inline", value: "inline" },
                        { text: "Incell", value: "incell" },
                        { text: "Popup", value: "popup" }
                    ]
                },
                dataTextField: "text",
                dataValueField: "value",
                change: function() {
                    applyOptions();
                }
            });

            $("#createAt").kendoDropDownList({
                dataSource: {
                    data: [
                        { text: "Top", value: "top" },
                        { text: "Bottom", value: "bottom" }
                    ]
                },
                dataTextField: "text",
                dataValueField: "value",
                change: function() {
                    applyOptions();
                }
            });
        });

        function applyOptions() {
            var columns = [
                { field: "Id", title: "ID", width: "110px" },
                { field: "FirstName", title: "First Name" },
                { field: "LastName", title: "Last Name" },
                { field: "City", title: "City" },
                { field: "Title" }
            ];

            var createAt = $("#createAt").data("kendoDropDownList").value();
            var editMode = $("#editMode").data("kendoDropDownList").value();

            var inlineOptions = {
                dataSource: { batch: false },
                editable: { mode: "inline", createAt: createAt },
                columns: columns.concat([{ command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }]),
                toolbar: ["create"]
            };

            var incellOptions = {
                dataSource: { batch: true },
                editable: { mode: "incell", createAt: createAt },
                columns: columns.concat([{ command: "destroy", title: "&nbsp;", width: 150 }]),
                toolbar: ["create", "save", "cancel"]
            };

            var popupOptions = {
                dataSource: { batch: false },
                editable: { mode: "popup", createAt: createAt },
                columns: columns.concat([{ command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }]),
                toolbar: ["create"]
            };

            var editOptions = {
                incell: incellOptions,
                inline: inlineOptions,
                popup: popupOptions
            };

            var grid = $("#grid").data("kendoGrid");
            grid.dataSource.page(1);
            grid.setOptions($.extend({}, grid.getOptions(), editOptions[editMode]));
        }
    </script>
</div>


    
</body>
</html>