How To: Editable Grid for WaveMaker 6.4

ckeene's picture

This example shows how to use editable grids in WaveMaker 6.4.

The full project is posted here:
http://dev.wavemaker.com/wiki/bin/Dev/EditableGrid

Important properties

  • singleClickEdit: check this property to allow user to start editing a grid cell with a single click
  • Column Properties Edit Field Type: for each grid column that user can edit, set the Edit Field Type property (text, number, checkbox, combobox). This example shows having an editable column using a number (to set quantity) and another using a combo box (to set related item)

Important Javascript functions

  • Initialize item combobox: on startup, initialize the combobox editor with a list of all items (this will be automated in 6.5)
  • Delete line: click a button to delete selected row
  • Add row: click a button to add a new row and initialize values. This also can initialize a related row, in this case, adding a new lineitem automatically sets the purchase relationship to currently selected purchase
  • Update line: click a cell to start editing

This is great

Thank you for the tutorial Chris.

Chris, I like the way the

Chris, I like the way the silk icons look in the radio buttons, will have to check it out

Link to Editable Grid Export seems to be broken.

Chris,

I like the look of your project.

I am able to look at your app on the Cloud and I was able to download the sql file, but I have been unable to download the export of the project.

Could you please check the link?

Thanks.

Tim Hite

ckeene's picture

New version of Editable Grid Reference App

I have posted a new version of the editable grid and added a good deal of new functionality including:

This shows how to use editable grids in WaveMaker 6.4. Important features include:

  • singleClickEdit: check this property to allow user to start editing a grid cell with a single click
  • Column Properties Edit Field Type: for each grid column that user can edit, set the Edit Field Type property
    (text, number, checkbox, combobox). This example shows having an editable column using a number (to set quantity)
    and another using a combo box (to set related item)
  • Editable grid for line items: add rows, delete rows, update rows
  • Editable grid with combo-box/select editor:
  • Editable grid with calculated columns:
  • Editable grid with auto-save (single click to edit, row automatically saves when cell is changed)
  • Toast messages: 1 second toast messages display to indicate when grid is saving
  • Maximum payment amount: payment amount is limited to amount due on invoice (total lineitem amounts minus total payments)
  • Purchase due date can be custom date or determined by payment terms (e.g., net 15 days, 30 days)
  • Paying off purchase balance causes purchase status to be set to 'closed'

I have also checked the project export file link so it should be working now.

Edited by Michael because an unclosed bold tag was making the entire thread bold!

How are you resetting the database when the app opens?

Chris,

Thank you for posting the Editable Grid Reference App. It has given me insight as to how to add some of these features to my apps.

I noticed that the database gets reset to the initial values every time I run the app. I don't see anything in the project's code that would cause this to happen. I looked at the tables through MySQL Workbench and it appears that the data doesn't get reset until the app is run. I would like to do the same with some of my test data.

How are you resetting the data?

Thanks.

Tim Hite

ckeene's picture

Automatically populate Cloud Foundry Database

The description of how to do this is here:

http://dev.wavemaker.com/wiki/bin/wmdoc_6.4/CloudTutorial#HAutomaticallyInitiali...

Database will be reset every time the application is reloaded. Steps are:
1. Copy SQL ddl file to project /src directory
2. Add DBInitializer bean to the project-spring.xml file in project /WEB-INF directory

Kind of black magic but very cool once you get it working!

Video walkthrough for this Grid example?

Hi Chris

Thank you very much for providing this example

I have learned a lot from it but...

Whats the possibility of you doing a detailed video walking through each step and setting

I am trying to do something similar but still cant quite get how it all works

Currently I am half way through working on a 12 month project, developing a large system in WM. So far so good, but now I need the kind of functionality thats demonstrated in this example

Heres Hoping

.
__________________________________________________________________
6.7.0 Release
Development: Ubuntu Linux 14.04
Deployment: Ubuntu Linux Server 14.04, MySql, Tomcat
Browser: Firefox, Chromium & Midori
Client Access: Linux, Android, MAC, Windows

mkantor's picture

I think Chris has less time

I think Chris has less time for this than he used to. I hope to work on a few screencasts for whats new in 6.5. Assuming that happens, an introduction to editable grid which starts to really shine in 6.5 is certainly a candidate for that. Might take a month or two though.

Michael Kantor
SMTS; WaveMaker/SpringSource/VMware

Michael Kantor
WaveMaker Expert; Managed the client-side frameworks and Studio UI from WaveMaker 5.2 - WaveMaker 6.6 M2

Editable Grid

Thanks for your response Michael

Do you think its viable for me to start using 6.5 now?

.
__________________________________________________________________
6.7.0 Release
Development: Ubuntu Linux 14.04
Deployment: Ubuntu Linux Server 14.04, MySql, Tomcat
Browser: Firefox, Chromium & Midori
Client Access: Linux, Android, MAC, Windows

mkantor's picture

You can view the screencast

You can view the screencast at http://dev.wavemaker.com/blog/2012/04/20/screen-casts-for-wavemaker-6-5-m1/

The fact that we have a Milestone release means that we have something that people can start experimenting with, considering how this should influence their future work, and considering how they think this should influence OUR future work as well. It most definitely does not mean that we have production ready code. Here is what might go wrong if you use 6.5:

* Something may be broken that was working in 6.4, but you've gone too far down the path of using tools only available in 6.5 to go back to 6.4, and your stuck waiting for us to ship the next version of 6.5.
* You need to ship something before we have a production ready version of 6.5, in which case your shipping to your users a version of the framework that contains potentially unacceptable bugs

Michael Kantor
SMTS; WaveMaker/SpringSource/VMware

Michael Kantor
WaveMaker Expert; Managed the client-side frameworks and Studio UI from WaveMaker 5.2 - WaveMaker 6.6 M2

Editable Grid

Thanks for the screen casts. The new stuff looks incredible and the potential awe inspiring

I take your comments on the implications on-board

Thank you for your help

.
__________________________________________________________________
6.7.0 Release
Development: Ubuntu Linux 14.04
Deployment: Ubuntu Linux Server 14.04, MySql, Tomcat
Browser: Firefox, Chromium & Midori
Client Access: Linux, Android, MAC, Windows