kendo grid showing [object Object] in Columns without pagination for virtualization

Question

In one of my application, have seen browser gets hanging and crashing because of binding 500 000 records in the Kendo Ui-grid. The grid contains total 20 columns and all the data return from webapi via angular in kendo grid.

it's working fine for 3 columns, when changed to 15 columns it gets a problem for above 100k records.

So I need to test how much columns and records can be hold on kendo grid. I have found there is some options available in kendo called as virtualisation to load the bulk records.

Demo Site is: http://dojo.telerik.com/@sahir/OSeRo

So in the people js have the data, I have tried to add two more columns inside that file I am getting object object in the column.

The problem occurs above 100k record binding without pagination in kendo grid. I have attached a demo project screenshot below for testing the grid.

The code is below:

custom people.js

var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
    lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
    cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"],
    titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
    "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"],

 productNames =["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"]
    birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")],
    cashId= ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
    "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"];
function createRandomData(count) {
    var data = [],
        now = new Date();
    for (var i = 0; i < count; i++) {
        var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
            lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
            city = cities[Math.floor(Math.random() * cities.length)],
            title = titles[Math.floor(Math.random() * titles.length)],
            birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
            CashId  = cashId[Math.floor(Math.random() * cashId.length)],
            age = now.getFullYear() - birthDate.getFullYear(),
            productName  = productNames[Math.floor(Math.random() * productNames.length)];

        data.push({
            Id: i + 1,
            FirstName: firstName,
            LastName: lastName,
            City: city,
            Title: title,
            BirthDate: birthDate,
            CashId:cashId,
            Age: age,
            productName:productNames

        });
    }
    console.log(data);
    return data;
}

function generatePeople(itemCount, callback) {
    var data = [],
        delay = 25,
        interval = 500,
        starttime;

    var now = new Date();
    setTimeout(function() {
        starttime = +new Date();
        do {
            var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
                lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
                city = cities[Math.floor(Math.random() * cities.length)],
                title = titles[Math.floor(Math.random() * titles.length)],

                birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
                CashId=  cashId[Math.floor(Math.random() * cashId.length)],
                age = now.getFullYear() - birthDate.getFullYear(),            
                productName  = productNames[Math.floor(Math.random() * productNames.length)];
            data.push({
                Id: data.length + 1,
                FirstName: firstName,
                LastName: lastName,
                City: city,
                Title: title,
                BirthDate: birthDate,
                CashId:cashId,
                Age: age,
                productName:productNames

            });
        } while(data.length < itemCount && +new Date() - starttime < interval);

        if (data.length < itemCount) {
            setTimeout(arguments.callee, delay);
        } else {
            callback(data);
        }
    }, delay);
}

kendo grid showing [object Object] in Columns without pagination for virtualization

Answers (1)

Related Questions