One Grid component slows down Angular component

[Deepak]

Hi team,

I am using Kendo Grid to display data using 6 columns. When the row count exceeds 100, the whole Angular component completely slows down, sometimes not even works. I found that this particular component slows down things because when i removed this grid column, everything works as expected. Why's that and how can i overcome this?

 

<kendo-grid-column width="75">
        <ng-template kendoGridCellTemplate let-dataItem>
              <ng-template #popContent>
                  <div class="context-dropdown-menu">
                     <ul>
                       <li (click)="settings(dataItem, 'settings')" >
                                <i class="fa fa-envelope" title="Settings"></i> Settings
                       </li>
                       <li (click)="open(dataItem, 'open')" >
                                <i class="fa fa-share-square" title="Open"></i> Open
                       </li>
                     </ul>
                  </div>
               </ng-template>
               <button type="button" class="btn btn-outline-primary btn-rounded" [ngbPopover]="popContent" #p="ngbPopover" (document:click)="p.close()"
                                (click)="$event.stopPropagation();onClick()" placement="left" container="body">
                          <i class="fa fa-ellipsis-h"></i>
                        </button>
           </ng-template>
</kendo-grid-column>

 

Thanks,

Deepak

[Deepak]

Hi team,

Could you help on this?

[Svet]

Hi Deepak,

I will provide some general information on this case. Basically, the more HTML elements that have to be rendered by the Angular framework, the worse the performance will be. This is valid for all browsers especially IE. It is well known for having issues rendering Angular applications. When a Kendo UI for Angular Grid is used in the template of an Angular component <kendo-grid></kendo-grid>, then the actually generated DOM will be much larger as the Grid uses HTML elements like table, tr, td, div, etc in order to be rendered in the DOM. The same applies whenever a column or a row has to be added to the Grid. Thus the more rows and/or columns the Grid has to load at once, the larger DOM the browser has to create, which leads to performance issues. Thus, limiting the number of rendered rows at once via paging or virtual scrolling is the most effective optimization.

Also only when running the application in prod mode then it can benefit from all built-in Angular production optimizations:

https://angular.io/guide/deployment#production-optimizations

We have outlined the most common performance optimization techniques in the following section of our documentation:

https://www.telerik.com/kendo-angular-ui/components/grid/browser-performance/

I hope this helps.

Regards,
Svetlin
Progress Telerik