Connect c8y-data-grid with service to fetch device data

Good Morning,

we want to build our own device list (to support bulk actions and format column content with pipes). For that I would like to use the c8y-data-grid component. I have checked out the c8y-tutorial-app and the c8y-data-grid component seems to fit our requirements. In the c8y-tutorial-app the rows are set to a fakeData array using the rows input:

<c8y-data-grid [rows]="fakeData"></c8y-data-grid>

Of course I can’t load all the devices and set the device list as input using the rows input! There will be thousands of devices in the DB. The DataGrid interface provides a serverSideDataCallback and I think using this it should be connected to a service. I haven’t found any examples or documentation how to use a service instead of a array as data source. Can someone provide an example?

Hi Florian,

I know I am very late, so I guess you already found a solution yourself.
Nevertheless, I would like to share some knowledge with you and everyone having the same question.

We created a repository with a datasource example here. There you can find multiple examples of how the c8y-datagrid can be impemented.

So basically all you need to in order to do is create a service and bind the serverSideDataCallback of the grid to a method of the service (see serverSideDataCallback binding). This method gets an attribute of type DataSourceModifier from the grid and needs to return a Promise of type ServerSideDataResult (see onDataSourceModifier method).

What you then implement inside of that method is up to you - e.g. custom query filters etc.

1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.