Tool to enter project hours - use case

Tags: #<Tag:0x00007f8b2b1a9ba0>
#1

We are working on a resource forecasting tool, the use case is provided below (you may find the sample excel attached)

  1. A Project Manager can add a project to the spreadsheet by clicking on a button in the HTML page.
  2. When a project is inserted, the first column should have a button ‘Add Resource’
  3. The PM can now add resources under the project by clicking on the ‘Add Resource’ button. A new row is created each time the button is clicked.
  4. The project hours forecasted for each resource will be entered in the spreadsheet (column E-H, J-M)
  5. The spreadsheet will have a summary row/column to list the Project total Hours (row 5 and 9) as well as the Resource total (column I and N in the attachment)
  6. The subtotal row/column should be updated whenever the PM add time or delete time (or resource) from the sheet
  7. PM can add multiple projects and repeat the steps 1-6

Could you please advise on the possible implementation options with Handsontable (we are looking at Pro version)

Scenario-excel.png1283×453 34 KB

#2

Hey @prasanth.sivakumar

if you do not need any other features like row/column hiding or filtering you do not need to purchase Handsontable PRO, all of the options are available in the CE version.
Here is a demo that you can use http://jsfiddle.net/j5y60xwn/ it provides a button inside a cell. To set up summaries you can also use the setDataAtCell/getDataAtCell methods. If you need further guidance to create a working project please contact me at support@handsontable.com

#3

Thank you Aleksandra. We in fact have two type pf rows, one is for project and the other for resource. The button should be inserted only for Project rows, not for the resource row. When the user click on the “Add Resource” button, it should insert the Resource row below that project. The resource rows (rows 3,4, 8,9) in the excel do not have the button. So the button should be inserted on each row based on the type of the row. Can i set the type as metadata of a cell (or row) and insert based on that?

#4

If you do not need the button inside each cell you can add another condition to the line no 15. Here is an example http://jsfiddle.net/2bx0zyg4/ the row should be an index of the rows (starting from 0)

#5

Aleksandra, the scenario is slightly different.

  1. A user will first insert a project (by clicking on a button in the html page, outside the spreadsheet), we need a button in that row. (Button named ‘Add Resource’)
  2. When they click on the ‘Add Resource’ button in the project row inserted in step 1, a new row is added under the project for a resource. This row should not have the button.
  3. This process will be repeated. A user can add any number of resources under a project. In other words, we cannot depend on the hardcoded row and column number as given in your example.

Whether a row need a button or not can be decided dynamically based on the type or the row inserted.

Hope you understand the problem ,please advise. You may please refer to the screenshot in my initial post.

#6

Just to add, the user can add any number of projects as well to the spreadsheet.

#7

You should be able to develop all needed snippets from my code. If you’d have any problems with the code please share a demo with your recent progress.

#8

https://jsfiddle.net/gx5feuh1/46/

I could show the button based on the metadata in the cell. However, onclick is not getting triggered.

Also, is it possible to change the background color of a cell only when the user edits it. If the data is inserted using setCellData, we should not set any background color

#9

Try to attach the method to the myBt instead of using the onclick atrribute.

#10

Tried attaching to the listener, still no luck…

#11

Got it working, thanks…

https://jsfiddle.net/Lk8sxrq2/12/

tried with document.addEventListener

The button in the first column is rendered differently based on the metadata of the cell ad shown below. Please advise if this is the right approach.

function inlineBtn(instance, td, row, col, prop, value, cellProperties) {
var cellmeta = instance.getCellMeta(row,col);

if (cellmeta.rowtype === ‘project’){
td.innerHTML = ‘’ + value + ‘’
}
else if (cellmeta.rowtype === ‘resource’){
td.innerHTML = ‘’ + value + ‘’
}

}

#12

Oh, I see.
I am glad that it works now.

Thank you for an update. I guess that we can close the topic.

#13