Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Kendo Ui grid insert method is slow if data is more than 1000 records.

1 Answer 286 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Raj Yennam
Top achievements
Rank 1
Raj Yennam asked on 26 Dec 2013, 11:21 AM
kendoinsert.zip
Hi,

I have a requirement where i need to display notifications in the kendo ui grid as first row. I have a duplex service which will return a single or multiple records at a time, these should be displayed in the grid with the existing data. I'm using  below line of code to insert a single record in the grid.
 $("#employeesGrid").data("kendoGrid").dataSource.insert(record);

when the grid has no records, the records are inserted fastly. When the grid contains 50 or above records, the record insertion is very slow, and application is going to non-responding state if we are moving the scroll bar.

I have attached the sample to reproduce this issue. I have used a timer to insert a record in the grid for every 1sec.
In our real time application, we have a scenario where the duplex service will return bulk of records(say 1000 at a time) and we need to bind these newly added records with the existing records in the grid.

Please provide a solution for this.

Thanks,
Raj Yennam


1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 26 Dec 2013, 12:21 PM
Hi Raj,

Updating a table with so many columns and rows is a very resource-intensive operation. I created a simple test page, which performs the same task, but it only uses generic HTML content and jQuery. In my opinion, the performance is bad as well, and the browser becomes unstable.

Given that the performance of a plain HTML table will be always a lot better, compared to using a Grid widget (which uses HTML markup and its data is also stored and manipulated in Javascript objects), it is easy to conclude that you will have to think of some other algorithm and interface, which is less stressful for the browser. In case you find the plain table performance acceptable (I would be surprised if you do), you can consider using that instead.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Large Table Experiments</title>
 
<style>
 
html
{
    font:12px sans-serif;
}
 
#grid td
{
    white-space: nowrap;
}
 
</style>
 
</head>
<body>
 
<button id="button">STOP</button>
 
<div id="grid" class="k-widget k-grid" style="display:inline-block;"></div>
 
<script type="text/javascript">
 
$(function(){
 
    var columnCount = 51;
    var rowCount = 1000;
    var button = $("#button").hide();
 
    function createRow(r) {
        var rowHTML = "<tr>";
         
        for (var c = 1; c <= columnCount; c++) {
            rowHTML += "<td>cell content " + r + " " + c + "</td>";
        }
        rowHTML += "</tr>";
         
        return rowHTML;
    }
     
    function createTable() {
        var tableHTML = "<table><thead class='k-grid-header'><tr>";
         
        for (var h = 1; h <= columnCount; h++) {
            tableHTML += "<th class='k-header'>header cell " + h + "</th>";
        }
         
        tableHTML += "</tr><thead><tbody>";
         
        for (var r = 1; r <= rowCount; r++) {
            tableHTML += createRow(r);
        }
         
        tableHTML += "</tbody></table>"
         
        return $("#grid").append(tableHTML).children("table");
    }
 
    var table = createTable();
     
    var interval = setInterval(function(){
        table.children("tbody").prepend(createRow(table.find("tr").length));
    }, 1000);
     
    button.show().click(function(){
        clearInterval(interval);
    });
     
});
 
</script>
 
</body>
</html>


Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Raj Yennam
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or