Custom TreeGrid Rows

[bhannonParticipant]

Using some JQuery, I am able to add new rows (not hierarchical) to the TreeGrid DOM or even custom attributes to a row or rows on the TreeGrid DOM. However when expanding/collapsing a row to display the hierarchy, the widget rebuilds the whole TreeGrid DOM throwing out my changes to the DOM. Is there any way to keep these changes when expanding/collapsing rows in the API or do I need look at a different workaround to keep this data?

Basically I have a use case where I need a parent to contain two unrelated children (grid lines and hierarchy). The grid lines would be in a separate table in a row of the TreeGrid displayed using the DataGrid widget. Grid lines could also be on the children as well. I read a post from 2014 where it was said it was unknown how to handle this, since it’s been 2 yrs I figured I would ask again.

Also, is there a way to have the hierarchy in a different column other than the first? I didn’t notice anything when looking for this looking at the API.

[adminKeymaster]

Hi bhannon,

There is API for adding rows. For using the widget you should use only its API.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[bhannonParticipant]

This will not work as the addRow method adds a new hierarchy row… I need a row or rows that is/are NOT hierarchical.

[Peter StoevKeymaster]

Hi bhannon,

Well, it will work because addRow adds a row to the ROOT or as a Child of Another row.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[bhannonParticipant]

how does it add a child of another row? All I am seeing is it adding a row to the root according to the API (‘first’, ‘last’)…

[bhannonParticipant]

A little better explanation would be I need each hierarchy level to also have a related table of other data. Visually it would look similar to below:

Item 1
|
|---- Item 1 Tabular Data (Not hierarchical, sub table of level, Expands separately from hierarchy)
|
| ---- Item 1 Sub 1
|
|---- Item 1 Sub 2
|     |
|      ---- Item 1 Sub 2 Tabular Data (Not hierarchical, sub table of level, Expands separately from hierarchy)
|
 ---- Item 1 Sub 3
Item 2
|
| ---- Item 2 Sub 1
Item 3

[Peter StoevKeymaster]

You can pass the rowKey too as shown in the demos: $(“#treeGrid”).jqxTreeGrid(‘addRow’, null, {}, ‘first’, rowKey);

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[bhannonParticipant]

That won’t either. That adds the new row to the hierarchy and is show when expanding the child leafs. This new row needs to only be a container for non-hierarchical data. Like I stated before, I do have this working partially manually modifying the DOM using jQuery. The main issue is the widget redrawing the whole table and wiping out my changes to the DOM including custom element attributes. Maybe a better depiction is as follows:

Item 1
|     |
|     |---- Item 1 Tabular Data (Not hierarchical, sub table of level, Expands separately from hierarchy)
|
|---- Item 1 Sub 1
|
|---- Item 1 Sub 2
|     |          |
|     |          |---- Item 1 Sub 2 Tabular Data (Not hierarchical, sub table of level, Expands separately from hierarchy)
|     |
|     |----Item 1 Sub 2 Leaf 1

|
| ---- Item 1 Sub 3
Item 2
|
| ---- Item 2 Sub 1
Item 3

[bhannonParticipant]

I just wanted to give an update to this issue. I was able to work around the above issue. The solution
was basically creating an object on the window to store the required data(reference). This object is keyed by the data-key of the current row. The only data on this object is for the secondary dataGrids that are shown. This object is created in the secondary expand/collapse click event of the tree grid row (TreeGrid column, ui-icon-plus/ui-icon-minus). Using the rowExpand/rowCollapse events of the TreeGrid API, I was then able to use the above object to reapply the expand/collapse status of the secondary DataTable to all displayed DataTables.

Events Used:

rowClick – Limited to column and left mouse button, Creates custom row if needed, builds DataTable, show/hide row, Create window object

rowExpand – loops through all elements on the custom window object and rebuilds custom row and DataTable if needed

rowCollapse – loops through all elements on the custom window object and rebuilds custom row and DataTable if needed

This is just a start so I am sure there are other places that this will be needed as well when the TreeGrid rebuilds the DOM. I can give more detail/code examples on this if needed.

[Author]

Posts