Grid Performance issues with 4000~ rows and 26 Collumns

[John]

I understand that that is a lot of data to present at once. I tried paging and virtual scrolling and the performance is still very slow. I have the data inside a kendo datasource, that portion performs like a charm. The performance decreases drastically when I assign that dataSource to my grid. The lines are formatted via kendo row templates. Even after I load the grid initially and I move elsewhere and come back; the grid takes forever to show up even thought data is not being populated and "show" is just occurring. I am afraid I am going to have to use slickGrid...was really wanting to be able to use the Kendo functionality throughout. Any ideas? Sorry this is not a specific question, but a general guidelines request.

[David]

Just had to tackle this myself. I had a solution that ended the client needed a Financial Forecasting Grid. Of course they needed double header grouped rows, batch editing, and they needed a changed amount in one area to affect the amounts in a lot of other areas. I've been using Kendo for a few years now and the things Ive done... LOL. In this case, after the grid was done, the raw number of rows/cells were working against me. Performance was quite bad. I decided to take to the internet to find an optimized scroller that would speed things up and work with Kendo. This works... it takes over the scrolling area of the Kendo Grid elegantly and the grid is fast as lightning. It could easily handle a ton more rows. I dont think SlikGrid has anything on Kendo now:

 

The solution: (iScroller):  http://iscrolljs.com/

Very simply set your grid up as normal, scrolling enabled. Allow Kendo to do all work of laying out and calc'ing the grid... even the scrollbars.

 

Your angular directive (omitting the NPM/Bower Install - you'll have to know how to do that yourself) 

angular.module('ng-scroller', []).directive('ngScroll', function() {
    return {
        replace: false,
        restrict: 'A',
        link: function(scope, element, attr){
            scope.$watch(attr.ngScroll, function(value){
                /* get scrolling area of grid */
               var nScroll = new IScroll(document.querySelector('.k-grid-content'), {
                    snap: false,
                    scrollbars: true,
                });
                console.log('found scrolling area of grid.');
                var conso = console.log('ISCROLLER INITIALIZED');
                    /* onEnd event lets us know initial scroll is set */
                    nScroll.on('scrollEnd', conso);

            });
        }
    };
});

Notice in the snippet that we name the ".k-grid-content" section of the grid. This is the section that applies scrolling when the grid is created. It is marked with that className plus another : ".k-auto-scrollable". However, we only need the first one so just ignore this next selector.

Now in order to apply the iScroller (MIT license, btw) to the grid we need to first listen for when the grid is loaded. I use this handy dandy Kendo Widget listener for that:  

$scope.$on("kendoWidgetCreated", function (e) {});

This lets me know the grid is loaded. Now I need to find the scrolling containers in the grid and mark them with the prerequisite attributes that the iScroller is looking for in the iScroller directive. For that we add this (somewhere in your controller, not in the grid):

$scope.noScroller = false;
        /* event listener for kendoWidgetCreation. when grid is done loading apply function */
        $scope.$on("kendoWidgetCreated", function (e) {
            /* target your grid */
            if ($scope.yourGrid) {
                console.log('iScroller target grid is loaded.');
                if($scope.noScroller==false){
                        var targetScroll = $(".k-grid-content");
                        var scrollTable = targetScroll.find("table");
                        /* find scrolltable and its first sybling and add required  attributes */
                        if (!scrollTable.attr("id")) {
                            scrollTable.attr('id', 'scroller');
                            scrollTable.parent().attr('ng-scroll', '');
                            console.log('scroll containers marked.');
                            $scope.noScroller = true;
                        }
                }
            }
        });

So... here I am going through the grid, finding the scroll container, then its next sybling (which in this case is a table), and Im setting an empty attribute "ng-scroll" on the container : ".k-grid-content" and I am adding an attribute : ("id", "scroller") to the sybling <Table> element. I set a $scope.flag : "noScroller" so that I dont double mark the containers, or cause the scroller to initlialize more than once. Of course, this is rudimentary and Im sure you can customize this part for a more stable fit in your architecture. 

 

After weve marked the containers with the prerequisite attributes then the directive catches the new scroll target and the scroller is active. One more thing... on the table you gave an ID called "scoller", you wil need to add a CSS class to your style sheets to correspond. It will look like this:

#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}

 

This solution works very well and takes over the grids scrolling after the grid has performed all caculations. Check out the iScroller API to take control of a slew of other features for the grid. I would say this allows a Kendo grid to handle the same number of rows as slickgrid for sure.    When I say this thing speeds up scrolling... I mean it really speeds up scrolling. 

 

I hope this helps not only YOU, you beautiful developer you, but also Kendo. This makes Kendo extremely fast with large data sets and the scroller is less than 50k. Scrolling is optimized for performance based on device and handles full range of touch, zoom, pan, intiertial, etc...   I have no stock or investment in this scroller and I did not participate or know about its development. I am, however, a faithful Kendo user. 

 

Happy to give back!

 

-Treads

 

 

 

 

[John]

I had honestly given up on this and took to paging so long ago :( . I like what I am seeing David! Thanks for all your help. 

[Dimo]

Hello John,

If the performance is very bad even when using paging or virtual scrolling, I suspect that you have not enabled server-side data operations, and all the data is downloaded to the client in bulk, which generates a slow Ajax request.

http://docs.telerik.com/KENDO-UI/api/javascript/data/datasource#configuration-serverPaging

Is the data used by some other widget except the Grid? If not, then the performance is better when the dataSource is not assined to the Grid probably because no data is loaded from the remote service (the Kendo UI DataSource does not request data automatically after it is initialized).

Also, if you are using templates, it makes a difference what these templates contain.

I am not able to provide more specific information at this point, as I don't have enough information.

Generally, the greater the number of columns, the smaller the page size should be, if you want acceptable performance, including rebinding speed. Of course, it also depends what is the exact scenario and how is the Grid configured.

Regards,
Dimo
Telerik

[John]

I am currently placing all work on the client side. In order to integrate with the already "Created" project; I decided to just send JSON string back to the client and modify details from there. I have been searching consistently for the last 2 weeks to find a way to connect the grid to the data on the back side, but it is not a "database" or "xml" file. I am sending a private class stringified with data back to the browser. I have tried the idea of integrating small parts of Telerik asp.net AJAX into my web page, but to no success. I honestly don't understand the RAD controls because I have been using Kendo UI which seems to be a lot simpler. (I haven't ventured into the other tool sets) I have tried virtual scrolling down to 25 only at a time and the issue isn't the scrolling part. The problem aligns with the show of the grid where it can take 30 seconds-2 minutes for it to finally show on screen. Sorting/scrolling/etc all works well except the "showing" of the grid when going to the page.

[Dimo]

Hello John,

The provided information so far is a little confusing and I am not sure whether the problem is in the loading of the data, the databinding, or the rendering. If you provide a runnable example, I will take a look and advise further.

With regard to the databinding part of the process, we implemented some optimizations in Q3 2014, so make sure you are using this version or a newer one.

http://docs.telerik.com/kendo-ui/install/changes-and-backward-compatibility#kendo-ui-2014-q3

Finally, take a look at the following demo, which works with 500,000 data items and the Grid databinds quite fast:

http://demos.telerik.com/kendo-ui/grid/virtualization-local-data

Regards,
Dimo
Telerik