Loading data from multiple services, please advise

Tags: #<Tag:0x00007f8b2865efe0>
#1

Hi,

I’m new to Handsontable, could you please advise on the below use case with possible implementation details.

We are creating a resource time tracking view, the time a resource spent on each project is available at the server. A web service will fetch this data into the UI. Another web service will fetch the capacity (in hours) of each resource. The data need to be presented as shown in the attached screenshot.

The rows ‘Total’, Availability and Capacity after each resource (rows 4,5,6, 10,11,12) is read-only.

Sequence of steps

  1. Fetch the project hours of a resource from web service
  2. For each project,
    a. Display the project hours in a new row
  3. Create a ‘Total’ row that will show the sum of hours for each project
  4. Fetch the Capacity and Availability data from another web service.
  5. Add a row for capacity and availability
  6. repeat the above steps for each resource

The user can edit the hours from the spreadsheet. The edited cells need to be highlighted.

I tried by looping through the web service data and inserting rows one by one, and then set the value of each cell by setDataAtCell. And inserting the Total, Availability and Capacity rows after iterating all projects of the resource. Is there any better way of binding the data directly to the spreadsheet.

In order to detect the edits, i hooked the afterchange() event, but it is triggered even when i insert the data initially from the server with setDataAtCell(). How can i detect the edits to the data in the sheet (only what the user edits in the UI.

#2

Scenario-2-excel.png1102×428 19.9 KB

Sorry, missed the attachment in my last post…

#3

Hey.

the setDataAtCell has one optional parameter that you can use. It determines the source of change. You can set a string that represents your change within the following method and stop the loop by adding a condition.
src: https://handsontable.com/docs/6.2.2/Core.html#setDataAtCell

#4

Thanks Aleksandra, so looping through each resource in the web service response and inserting rows one by one is an acceptable implementation option, right?

is there any other option with binding, without looping through each resource?

#5

Aleksandra, can we use Nested Rows to implement this? Is this feature stable enough for production use? We are developing the application in Angular 4/6…

Thank you…

#6

is there any other option with binding, without looping through each resource?

currently it is an only approach

Is this feature stable enough for production use?

I highly encourage to try it out. Itself it is stable, but some options/settings might break it. Here is an Angular 6 demo with nestedRows https://stackblitz.com/edit/angular-zzpdvu?file=src/app/hello.component.ts

Data binding to Angular grid
#7