1
В одном из моих приложений видели, как браузер висит и падает из-за привязки 500 000 записей в сетке Kendo Ui. В сетке содержится всего 20 столбцов, и все данные возвращаются из webapi через угловую сетку кендо.сетка кендо, показывающая [объект Объект] в столбцах без разбивки на страницы для виртуализации
он отлично работает для 3-х столбцов, при изменении на 15 столбцов возникает проблема для записей свыше 100 тыс. Записей.
Поэтому мне нужно проверить, сколько столбцов и записей можно удерживать на сетке кендо. Я обнаружил, что есть некоторые опции, доступные в кендо, называемые виртуализацией для загрузки объемных записей.
Демо Сайт: http://dojo.telerik.com/@sahir/OSeRo
Так в народе JS есть данные, я пытался добавить еще два столбца в этом файле я получаю объект объекта в столбце.
Проблема возникает при записи более 100 000 записей без разбивки на страницы в сетке кендо. Я приложил скриншот демонстрационного проекта ниже для тестирования сетки.
Код ниже:
<!DOCTYPE html>
<html>
<head>
<base href="">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
<script src="people.js" ></script>
</head>
<body>
<!--<script src="../content/shared/js/people.js"></script>-->
<div id="example">
<div id="message" class="box wide"></div>
<div id="grid"></div>
<script>
$(function() {
var count = 500000;
if (kendo.support.browser.msie) {
if (kendo.support.browser.version < 10) {
count = 100000;
} else {
count = 200000;
}
}
$("#message").text(kendo.format("Generating {0} items", count));
generatePeople(count, function(data) {
var initStart;
var renderStart;
$("#message").text("");
setTimeout(function() {
initStart = new Date();
$("#grid").kendoGrid({
dataSource: {
data: data,
pageSize: 20
},
height: 543,
scrollable: {
virtual: true
},
pageable: {
numeric: false,
previousNext: false,
messages: {
display: "Showing {2} data items"
}
},
columns: [
{ field: "Id", title: "ID", width: "110px" },
{ field: "FirstName", title: "First Name", width: "130px" },
{ field: "LastName", title: "Last Name", width: "130px" },
{ field: "City", title: "City", width: "130px" },
{ field: "CashId", title: "Cash ID", width: "130px" },
{ field: "Title" },
{ field: "productName"},
]
});
initEnd = new Date();
$("#message").text(kendo.format("Kendo UI Grid bound to {0} items in {1} milliseconds", count, initEnd - initStart));
});
});
});
</script>
</div>
</body>
</html>
пользовательские 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);
}
благодарит за работу –