Help with a demo

[Charles]

JavaScript is not my strong suit.

I'm looking at the source for a virtualization demo to see how it works and gets the performance it does. (my grid is terrible).

 

Could someone offer some commentary to the script below to help me understand and maybe learn something?  Thanx!

 

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" },
                            }
                        }
                    }
                });

 

[Marin Bratanov]

Hi Charles,

Assuming that you are referring to the following demo (https://demos.telerik.com/kendo-ui/grid/virtualization-remote-data), here are some comments on its setup:

$(document).ready(function() {
    $("#grid").kendoGrid({//instantiates a Kendo Grid widget with the provider options object
        dataSource: { //the data source of the grid is a Kendo DataSource widget, instantiated with its own options object
            type: "odata",//the type of the data, in our demo it is OData

            //the server will do the paging and sorting, because the Kendo DataSource will send arguments to it
            serverPaging: true,
            serverSorting: true,

            //the records that will be returned with each request (page)
            pageSize: 100,

            //the URL that will be called to return records - service + its particular method
            transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
            }
        },

        //height of the grid
        height: 543,

        //enable the virtual scrolling feature of the grid so it ingegrates with the data source
        scrollable: {
            virtual: true
        },
        //allow sorting
        sortable: true,
        //define columns, they depend on the fields the service will return
        columns: [
            { field: "OrderID", title: "Order ID", width: 110 },
            { field: "CustomerID", title: "Customer ID", width: 130},
            { field: "ShipName", title: "Ship Name", width: 280 },
            { field: "ShipAddress", title: "Ship Address" },
            { field: "ShipCity", title: "Ship City", width: 160 },
            { field: "ShipCountry", title: "Ship Country", width: 160 }
        ]
    });
});

 

If you are referring to the local data virtualization demo (https://demos.telerik.com/kendo-ui/grid/virtualization-local-data) - things are more complex with it because we don't have the server to do the heavy lifting of preparing the data. Considering that you do not prefer JavaScript, it may be easier for you to create a service that will parse the data and return only what's needed like in the example above. This is also likely to let you improve performance because you won't have to load all the data at once. Nevertheless, here are comments on that code.

First and foremost, the demo relies on the  <script src="../content/shared/js/people.js"></script> script, which is where the actual data generation happens and where the generatePeople() function is declared. This script is included in the beginning of the demo. It has the following basic functionality:

function generatePeople(itemCount, callback) {
  var data = [];
  /* random data generation code that populates the data array */

  callback(data);
}

What this means is that the demo creation is the callback of the random data generation and receives the array of data as an argument

Here are some more comments on the code:

//this function is declared in the people.js file, the callback receives the generated array of data as an argument
generatePeople(count, function (data) {
    //variables for performance metrics
    var initStart;
    var renderStart;

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

    //used for the random data generation
    var nextId = data.length + 1;

    var dataSource = new kendo.data.DataSource({
        pageSize: 20,//controls how many rows will be rendered at once, their contents will be replaced with new data as the user scrolls
        transport: {
            create: function (e) {
                //CREATE operation, that is - item is inserted, read more at
                //basically, creates another item in the data source object for the item that was created throguh
                //the grid. In bath editing, the changes need to be reviews in a loop because there is likely to be more than one
                //https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.create
                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) {
                console.log(data.length);//you will see how all the data is loaded into the browser memory at this point
                //the READ operation, i.e., data is just requested, so we will only pass the data that
                //was generated by the people.js random generation function
                //https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.read
                e.success(data);
            },
            update: function (e) {
                //the UPDATE operatation, i.e., item is edited
                //minor changes to the data source are applied here, becaues the data is a local object
                //in a real case you'd probably want to send them to a service but this shows how you can access
                //the new data, and in this case - only overwrite the original object
                //https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.update
                if (e.data.models) {
                    //batch editing
                    e.success(e.data.models);
                } else {
                    e.success(e.data);
                }
            },
            destroy: function (e) {
                //the DESTROY operatation, i.e., item is deleted
                //minor changes to the data source are applied here, becaues the data is a local object
                //in a real case you'd probably want to send them to a service but this shows how you can access
                //the new data, and in this case - only overwrite the original object
                //https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.destroy
                if (e.data.models) {
                    //batch editing
                    e.success(e.data.models);
                } else {
                    e.success(e.data);
                }
            }
        },
        //the schema that describes the individual data item, must match what is created in the people.js file
        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() {//used to calculate performance
        initStart = new Date();

        $("#grid").kendoGrid({//instantiate the grid, the dataSource options were defined above
            dataSource: dataSource,
            height: 543,
            scrollable: {//enable the virtualization feature
                virtual: true
            },
            editable: {//allow editing - this is what allows the grid to call the CRUD operations implemented in the data source declaration
                mode: "inline",
                createAt: "top"
            },
            //other grid settings to allow row insertion, define pager settings, columns
            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: " ", width: "250px" }
            ]
        });


        //end of performance omonitoring
        initEnd = new Date();

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

 

Regards,
Marin Bratanov
Progress Telerik

[Charles]

Dude!  This is huge.  Thanks for taking the time to do a bit of much-needed hand-holding.

 

I appreciate it.

 

Thanx

[Marin Bratanov]

You're welcome, Charles. I hope I helped :)
--Marin