Remember the old Reese’s Peanut Butter Cup commercial from the 1980’s? (http://www.youtube.com/watch?v=U5_gTdqeUOI
) Well this is kind of like that. Instead of mixing peanut butter and chocolate, we are mixing Grid and Tree widget functionality to create a bill of materials (BOM) view.
Recently a customer asked for this type of functionality for a BOM business application. They had built a prototype in Java/JSF and wanted to see what could be done in EGL. Using an example BOM for a lamp assembly, we created an EGL RichUI handler with the expand/collapse functionality within a Grid. Following is the data we used:
We played with using a Dojo tree widget first but quickly realized it didn’t give us the same functionality as the EGL Grid with respect to behaviors. When we switched to the EGL Grid we quickly realized that we could create tree widget behavior within a grid widget.
Following are a couple of screenshots of the solution. The BOM Example is hosted on the ClearBlade website at:http://www.clearblade.com/BOMExample/BOMExample.html
Through use of the following behaviors in the Grid widget, we were able to accomplish our desired end result:
The first order of business was to create the indentation of child rows. This was easily accomplished by creating the cellIndent
function (we also removed the grid borders):
Next we aligned the numeric columns on the right with the cellAlign
Then we needed to add the tree expand/collapse controls with the treeButtons
function. By adding an Image widget to all rows with children and interrogating their state (collapse = true/false), we create controls to expand and collapse the rows.
Finally, the filterGrid
function hides or shows the rows based on state. This was a bit tricky since we wanted to maintain the expand/collapse state of each row. To solve this, each row has a counter, showRow
, that tracks the depth of the collapse tree. Once the counter is at 0 the row should be displayed.
To implement the expand/collapse logic, we needed check the level of each row and recursively expand/collapse the rows.
This was done with the treeControl
EGL Grids are amazing. I was very impressed as how a relative RichUI novice like myself was able to implement fairly complex behavior. Download the code here to review and reuse:http://www.clearblade.com/BOMExample/BOMExample.zip
Please feel free to contact me with any questions or improvements.
Eric Simone – CEO ClearBladeesimone@clearblade.com