Auto-generated column needs to refresh over and over

[Jesse]

Using Kendo UI with Angular:

I have an Auto-generated column/grid and need to refresh all the data on an ongoing basis. (Every 10 seconds). To check for any changes to the data.

My data is local at the moment and called sampleCustomers (See below)

I`m relatively new to Kendo and Angular so as descriptive as you can be would be really appreciated. (Add this to app.component.ts, add this to app.component.html, etc.)

Sample of my data below:

export const sampleCustomers = [{
'Id': 'ALFKI',
'CompanyName': 'Alfreds Futterkiste',
'ContactName': 'Maria Anders',
'ContactTitle': 'Sales Representative',
'Address': 'Obere Str. 57',
'City': 'Berlin',
'PostalCode': '12209',
'Country': 'Germany',
'Phone': '030-0074321',
'Fax': '030-0076545',
'LikeDogs': "Yes",
"FirstOrderedOn": new Date(1996, 8, 20),
"Discontinued": false,
}, {
'Id': 'ANATR',
'CompanyName': 'Ana Trujillo Emparedados y helados',
'ContactName': 'Ana Trujillo',
'ContactTitle': 'Owner',
'Address': 'Avda. de la Constitución 2222',
'City': 'México D.F.',
'PostalCode': '05021',
'Country': 'Mexico',
'Phone': '(5) 555-4729',
'Fax': '(5) 555-3745'
},

I`m looking forward to an answer regarding this as I have dug deep throughout the internet and have come up empty.

 

[Dimiter Topalov]

Hello Jesse,

The Grid can be bound to any of the following data structures:

- a regular array

- an object of type GridDataResult (when paging is involved - this object must have a "data" property that holds all data, and a "total" one representing the total number of data items)

- an Observable of either of the types, outlined above that can be consumed via the "async" pipe

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

Regardless of which approach is chosen, the Grid will automatically rerender with the latest data when the object it is bound to is mutated (or the Observable emits new data).

Assuming the simplest scenario - the Grid is bound to a regular array, the Grid will rerender each time this array is mutated (by for example pushing new objects):

https://stackblitz.com/edit/angular-b1c6gf?file=app/app.component.ts

In the example above, the Grid is data-bound to the gridData array. We push a new item to it (the actual mechanism for querying and retrieving new data will vary based on the specific scenario) every 5 seconds and the Grid is automatically rerendered each time the "gridData" array is mutated.

If the Grid was bound to a GridDataResult Object instead, both its data and total properies should be manipulated accordingly when new data arrives:

https://stackblitz.com/edit/angular-b1c6gf-bfh2sq?file=app/app.component.ts

I hope this helps, but if I am missing something, please describe the scenario and the desired functionality in further details, ideally sending us a similar isolated runnable project that better better illustrates the discussed use case, to help us get a better understanding and try to provide a suggestion that would be most suitable to the specific scenario. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik