This is a migrated thread and some comments may be shown as answers.

Angular 2 grid

6 Answers 156 Views
Grid
This is a migrated thread and some comments may be shown as answers.
mark
Top achievements
Rank 1
mark asked on 15 Feb 2017, 02:00 PM

Hello all

Our grid should be updated every one second with several (10-15) new rows.

To implement it, we recreate data (gridView) every second as follows:

this.gridView = {
      data: this.petService.pets.slice(this.skip, this.skip + this.pageSize),
      total: this.petService.pets.length
    };

 

but this takes about 7% CPU.

Is there a better way to update the grid (for example - add a new rows only instead of data recreation) ?

Thanks

 

Best Regards

Mark Nebrat

};

6 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 17 Feb 2017, 12:42 PM
Hello Mark,

In general, the Grid can be bound to an array or GridDataResult object, and all manipulations on the data are left in the hands of the developer to ensure maximum flexibility:

http://www.telerik.com/kendo-angular-ui/components/grid/data-binding/data-binding/

The slice Array method creates a new array of items each time it is called, which can be resource consuming. You can try using methods that alter the original array (e.g. push and splice), but this could have other side effects, depending on the scenario.

On a side note, the Grid virtual scrolling functionality seems a suitable option for such scenarios, e.g.:

http://plnkr.co/edit/BATBS4oQCbJP2odDgMn3?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
mark
Top achievements
Rank 1
answered on 20 Feb 2017, 09:47 AM
Tישמלד
0
mark
Top achievements
Rank 1
answered on 20 Feb 2017, 09:48 AM
Thanks
0
mark
Top achievements
Rank 1
answered on 20 Feb 2017, 09:48 AM
Thanks
0
mark
Top achievements
Rank 1
answered on 21 Feb 2017, 04:14 PM

Hello Dimiter 

Update of Angular 2 grid takes 7% CPU (see my first post).

Update of Jquery grid takes with same data takes 1% CPU.

Can you please explain what the reason of such difference?

Thanks

0
Dimiter Topalov
Telerik team
answered on 23 Feb 2017, 08:32 AM
Hi Mark,

There is a certain overhead, imposed by the Angular framework. You can try running the tests in production mode (enable production mode):

import {enableProdMode} from '@angular/core';
 
enableProdMode();
bootstrap(....);

... and check whether there will be an improvement in the performance. You can also compare the performance when no Kendo UI for Angular components are used for similar data and rendering operations (e.g. by using a regular table instead of the Grid).

Let us know if you have isolated a performance issue, caused by one of our components, and please send us a sample runnable project, where it can be observed, so we can inspect it further, and determine what might be causing it. Thank you in advance.

Regards,
Dimiter Topalov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
mark
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
mark
Top achievements
Rank 1
Share this question
or