Angular complex directive in Kendo grid column

[Nadav]

Hello,

I'm evaluating kendo grid before purchasing. I'm trying to replace the open source ui-grid in my app to Kendo Grid.

I'm facing a performance problem when trying to replace the row template of the grid to create a "card-view" to the table.

The row template's structure is like this:

<tr data-uid="#= uid #">
   <td colspan="100" style="padding: 0px">
      <directive item="dataItem"></directive>
   </td>
</tr>

"directive" is a complex directive who has inner directives with user interaction, logic, etc.
the rendering performance of 200 items is unacceptable.
trying to use virtual scrolling and render only 15 items at a time, causes unsmoothness in scrolling, as the next page is rendering.
I tried it with kendo ListView as well, but no virtualization there, only paging, and I don't want separate pages.

The open source ui-grid I want to get away from, renders the same template/data settings seamlessly + no delay in scrolling.

What's the best approach to solve this, if any? sadly for me it is a deal-breaker.

[Alex Hajigeorgieva]

Hello Nadav,

Thank you for taking the time to compare the Kendo UI virtually Scrollable Grid. You will be pleased to hear that we have been working on some improvements and new features within the grid which will be available in the next release coming really soon.

I tried to reproduce the described performance issue to no avail:

Full screen: http://runner.telerik.io/fullscreen/ahuMe
Dojo: http://dojo.telerik.com/ahuMe

The Kendo UI Grid in my example does not have a complex directive but it does have 100 columns and 200-page size. I would suggest reading through the overview article on virtual scrolling to check if all the requirements have been met:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#virtual-scrolling

It would be very helpful if you are able to send me a reproduction of the poor performance of the Kendo UI Grid so I can identify the cause as promptly as possible. You may modify the supplied Dojo or send a stripped version of the application you are working on.

Regards,
Alex Hajigeorgieva
Progress Telerik

[Nadav]

Well, I started creating a dojo for it but it's just too complicated. Basically the row template's main directive consists of 9 other internal directives (same directive X 9 times). I added a log message in the main directive and in the internal directive, and set page size to 15, using local virtual scroll only (all 200 records are in the dataSource already, not using transport, I deal with evertyhing external to the grid).

I created 2 videos so you can see the difference:

good scroll (ui-grid): https://www.youtube.com/watch?v=GhczQhGC--s
bad scroll (kendo): https://www.youtube.com/watch?v=8rCuW1XkSLY

(sorry for the quality).

you can see that in kendo grid, every time I go in a "page" transition, 15 method calls for each main directive are made, plus 135 calls (9 directives * 15 rows).

And in ui-grid the calls are irregular, and it looks a lot better and smoother. I'm guessing they're using some sort of smart cache for rendering or something like that.

my grid html is:

<div kendo-grid="kGrid"
       k-options="kGridOptions"
       k-data-source="gridData"
       k-columns="kColumns"
       k-ng-delay="kColumns"
       k-rebind="kColumns"></div>

 

my grid options are:

    $scope.kGridOptions = {
       
        sortable: {
          mode: "single",
          allowUnsort: false
        },

        scrollable: {
          virtual: true
        },

        resizable: true,
        selectable: 'row',
        columnMenu: true,
    };
    
    $scope.gridData = new kendo.data.DataSource({
        serverSorting: true,
        pageSize: 15
      });

I have some event bindings (sort, dataBinding, dataBound, nothing too special).

I $watch for ngModel and then I do

$scope.gridData.data(ngModel);
$scope.kColumns = createColumns(ngModel);

 

and then the grid is created.

I hope this helps to understand if it's a problem or expected behavior by kendo-grid.

Thanks

Nadav

 

[Vasil]

Hi Nadav,

Is the problem happens only when there is sorting applied? We have already fixed this and will be shipped in our next release.

Apart from that, it is expected the rendering to be a bit slower, because one of the grid is native AngularJs implementation, and the other one jQuery with AngularJs support and a lot more other functionalities, thus making it heavier with different order of internal rendering and dependencies. 

We do not provide native AngularJS controls, but if you plan to migrate to Angular 2, I would suggest you to check our new Angular suite http://www.telerik.com/kendo-angular-ui/  It is written and optimized especially for the framework.

Regards,
Vasil
Progress Telerik