Complex Editable Grid

Q&A
1

Hello,

I would like to create a rather complex editable grid. I am working on an expense from where a user can submit bi-weekly expenses. Each row has the following columns

  1. id, a running number, which should increase or decrease as I add or remove a row. This column is read-only.
  2. expense type, this is a dropdown box, where I can select from a list of predefined expense types.
  3. receipt drop down, where I can indicate whether I have a the original receipt.
  4. the amount claimed, which cannot be higher than the receipt total. This is a required field.
  5. the receipt total. This is a required field.
  6. the claimable VAT which is calculated based on the receipt total, the expense type and whether the original receipt exists. This column is read-only.

Fields that are currency fields should show the USD sign followed by the amount: e.g. $ 1,000.00.

For each column I would like to provide help text which should show when I click in the field.
The user should be able to save the expenses until he wants to submit the expenses. Only one active open expense sheet should be allowed per user.

I have created an editable grid to capture the expenses and know how to store the information in a database but how would I create the above functionality like drop downs, currency format, read-only field, calculated field, etc.

Thanks

2

Hi there,

JavaScript attached to the table would be one way. You would put the JavaScript in an HTML widget at the bottom of the page.

This is the hard way though.

It would be easier to look at one of the JavaScript Grid “add-ons” and replace all your hard work :cry: in getting the grid to work with one of these, in no order and without endorsement:

from stackoverflow

http://datatables.net/
Flexigrid
jQuery Grid
jqGridView
Ingrid
SlickGrid
Webix

Grid

also see here:

[somones elses Blog on Best javascript grids] (NOT mine!!)

Hope this helps,
regards
Seán

3

Thank you. I suspected that this requires development. This is very helpful. Is there an example on how to retrieve the json data to display in the table and how to send it back to so that it is stored?

4

:slight_smile: there will be somewhere but it’s not my field of expertise.

You could run an SQL connector at the start of the Step and retrieve the data in JSON format, many databases allow this nowadays and use this variable as the data, and on exit (submit action) you could run another SQL to dump the data back.

I don’t have an example though sorry.

regards